Java 与前端三大框架构建前后端分离正确的结合方式是什么?

本贴最后更新于 2175 天前,其中的信息可能已经水流花落

以前主要做的是 Android 和 Java 的开发对前端知识了解 JQuery 以及基础的一些个知识,现在假如用 Java 来做后台,采用类似 themleaf 前端模板技术结合前端三大框架如何构建传统单体架构,开发流程是什么(首先用前端三大框架开发前端之后嵌入到后端的前端模板中吗),那如果是前后端分离同样用 Java 做为后台,又该如何与前端三大框架进行组合呢,最终部署又需要那些环境呢?

  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3187 引用 • 8213 回帖
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1348 回帖
  • 框架
    47 引用 • 348 回帖 • 1 关注
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    8128 引用 • 37049 回帖 • 160 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • xiaopo

    你这个是属于依赖了后端模板的,不过依赖也好, thymeleaf 并不会侵入式的处理前端代码。这个过程中,实际上不需要你后端去处理过多的东西,因为前端框架的存在是因为降低后端处理模板渲染的压力,只需要给数据,前端去处理,一切就 OK 了,后端不要对 HTML 过多去进行渲染处理。

    趋势

    了解下现在的前端趋势.

    1. 组件。开发封装好,随时调用,并不是传统的 jQuery 组件,而是完全的组件,不提供具体逻辑上的功能,可以从页面精细到每个功能组件,通过各种自己指令到达各种模板的行为。

    2. 数据驱动。数据双向绑定驱动开发,降低渲染数据的压力。


    1. (从这里开始是工程化的好处了,你也可以说是单页面应用)项目的工程化,同时页面只有一个入口,就是 index.html。通过工程规矩前端项目,从而诞生出以下的东西。

    2. 前端包管理。包开始被管理工具作为依赖导入打包,而不是传统的 jQuery 形式。

    3. 单页面组件。封装拆分组件,变得可以更加清晰的逻辑。

    4. 前端路由。前端完全掌握路由,同等于 Android 掌控 Activity 的跳转一样,此后后端不好参与路由相关的。

    5. 前端组件状态管理。如果我没有理解错误的话应该是同等于 Android 的广播机制,通过数据改变去通知所有的组件改变数据,减少耦合的依赖。

    不分离

    以 Vue 为例,其实只需要了解开发流程就可以了。开发过程和普通的 HTML 没什么区别。

    过程

    在前端里面,也有个模板,用于处理我们自己的各种事件。以下就是一个组件的创建过程了。

    
    <script src="https://cdn.jsdelivr.net/npm/Vue"></script>
    
    <div id="app">
    
    {{ message }}
    
    </div>
    
    var app = new Vue({
    
    el: '#app',
    
    data: {
    
    message: 'Hello Vue!'
    
    }
    
    })
    
    

    以上的话只要修改 app.data.message 的数据就可以修改 {{ message }} 的数据了,那么你可以感受的到的是其中并没有后端模板插手的空间,可以插手,显得多余。这些步骤和传统的开发只是看起来方便了,实际上并没有跳出传统的开发模式。

    了解更多请看 官网

    分离

    这个话题就有点的讲了,因为重要的内容就在这个地方。所以到了这个时候,各家框架开始了自己的各种道路,这个道路不谈,你的问题是开发和部署上。

    1. 开发中,不接触后端,前端单独就可以开始开发,有 API 的定义的情况下,那么我们前端可以自己模拟数据进行访问测试开发(这个称之为 mock)。

    2. 联调,开发的时候前端工程化框架有个好处是我们可以去进行随时更新,这个是因为现在的框架提供一个开发服务器去跑前端项目,检测到变化则直接更新。注意了,这个时候调用后端 API 会出现跨域问题,但是这个问题可以用 webpack 的 proxyTable 反向代理解决。

    3. 部署,部署有个问题存在,那么就是路由,在这个过程中看每个框架的处理模式了。具体的都可以查到。这个涉及每个框架路由的不同,Vue 和 Angular 都是在 nginx 上用 try_files $uri $uri/ /index.html; 处理的,这个问题建议多搜索,因为以及到了开发部署了大部分的问题都已经解决了。

    至于 spring MVC 的话,我看过配置是通过优先级低的通配符方式去处理的,强行跳转 index.html.

    spring blog

    
      
    
    @SpringBootApplication
    
    @RestController
    
    class YourSpringBootApp {
    
      
    
    // Match everything without a suffix (so not a static resource)
    
    @RequestMapping(value = "/\*\*/{\[path:\[^\\\\.\]\*}")
    
    public String redirect() {
    
    // Forward to home page so that route is preserved.
    
    return "forward:/";
    
    }
    
    }
    
    
EvilCodes
我的世界,我的代码,我的逻辑。

推荐标签 标签

  • 智能合约

    智能合约(Smart contract)是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易,这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 5 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4601 回帖 • 699 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 73 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    166 引用 • 595 回帖 • 1 关注
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 94 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 536 关注
  • 微软

    微软是一家美国跨国科技公司,也是世界 PC 软件开发的先导,由比尔·盖茨与保罗·艾伦创办于 1975 年,公司总部设立在华盛顿州的雷德蒙德(Redmond,邻近西雅图)。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖 • 1 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 52 关注
  • OpenShift

    红帽提供的 PaaS 云,支持多种编程语言,为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 633 关注
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织,“用爱发电”象征开源与贡献精神,加入组织,代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入:用爱发电组织邀请帖
    用爱发电组织官网:https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力:

    • 遵守开源守则,体现开源&贡献精神:以分享为目的,拒绝非法牟利。
    • 自我保护:使用适当的 License 保护自己的原创作品。
    • 尊重他人:不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露;以礼相待,尊重所有对社区做出贡献的开发者;通过他人的分享习得知识,要留下足迹,表示感谢。
    • 热爱编程、热爱学习:加入组织,热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友,也同样欢迎默默成就的朋友。
    • 倾听:正确并恳切对待、处理问题与建议,及时修复开源项目的 Bug ,及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视:不诋毁、轻视、嘲讽其他开发者,主动提出建议、施以帮助,以和谐为本。只要他人肯努力,你也可能会被昔日小看的人所超越,所以请保持谦虚。
    • 乐观且活跃:你的努力决定了你的高度。不要放弃,多年后回头俯瞰,才会发现自己已经成就往日所仰望的水平。积极地将项目开源,帮助他人学习、改进,自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖
  • CentOS

    CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码,因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    238 引用 • 224 回帖 • 1 关注
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖 • 1 关注
  • 996
    13 引用 • 200 回帖 • 6 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 391 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    20 引用 • 23 回帖 • 723 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖 • 2 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3187 引用 • 8213 回帖
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 67 关注
  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 132 关注
  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 1 关注
  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1705 回帖
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    107 引用 • 295 回帖
  • Docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的操作系统上。容器完全使用沙箱机制,几乎没有性能开销,可以很容易地在机器和数据中心中运行。

    491 引用 • 917 回帖 • 2 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用

    1 引用 • 15 回帖 • 629 关注
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 73 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 334 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 659 关注