"以前主要做的是 Android 和 Java 的开发对前端知识了解 JQuery 以及基础的一些个知识,现在假如用 Java 来做后台,采用类似 themleaf 前端模板技术结合前端三大框架如何构建传统单体架构,开发流程是什么(首先用前端三大框架开发前端之后嵌入到后端的前端模板中吗),那如果是前后端分离同样用 Jav .."

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

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

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

  • Java

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

    2208 引用 • 7510 回帖 • 973 关注
  • 前端

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

    175 引用 • 1207 回帖
  • 框架
    27 引用 • 249 回帖
  • Q&A

    提问之前请先看一下这篇文章 《提问的智慧》精读注解版,好的问题比好的答案更有价值。

    1037 引用 • 6616 回帖 • 598 关注
1 回帖   
请输入回帖内容...
  • 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:/";
    
    }
    
    }