以前主要做的是 Android 和 Java 的开发对前端知识了解 JQuery 以及基础的一些个知识,现在假如用 Java 来做后台,采用类似 themleaf 前端模板技术结合前端三大框架如何构建传统单体架构,开发流程是什么(首先用前端三大框架开发前端之后嵌入到后端的前端模板中吗),那如果是前后端分离同样用 Java 做为后台,又该如何与前端三大框架进行组合呢,最终部署又需要那些环境呢?
Java 与前端三大框架构建前后端分离正确的结合方式是什么?
-
Java
3187 引用 • 8213 回帖
Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。
-
前端
247 引用 • 1348 回帖
前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。
-
框架
47 引用 • 348 回帖 • 1 关注
-
Q&A
8128 引用 • 37049 回帖 • 160 关注
提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。
相关帖子
-
xiaopo •
你这个是属于依赖了后端模板的,不过依赖也好, thymeleaf 并不会侵入式的处理前端代码。这个过程中,实际上不需要你后端去处理过多的东西,因为前端框架的存在是因为降低后端处理模板渲染的压力,只需要给数据,前端去处理,一切就 OK 了,后端不要对 HTML 过多去进行渲染处理。
趋势
了解下现在的前端趋势.
-
组件。开发封装好,随时调用,并不是传统的 jQuery 组件,而是完全的组件,不提供具体逻辑上的功能,可以从页面精细到每个功能组件,通过各种自己指令到达各种模板的行为。
-
数据驱动。数据双向绑定驱动开发,降低渲染数据的压力。
-
(从这里开始是工程化的好处了,你也可以说是单页面应用)项目的工程化,同时页面只有一个入口,就是 index.html。通过工程规矩前端项目,从而诞生出以下的东西。
-
前端包管理。包开始被管理工具作为依赖导入打包,而不是传统的 jQuery 形式。
-
单页面组件。封装拆分组件,变得可以更加清晰的逻辑。
-
前端路由。前端完全掌握路由,同等于 Android 掌控 Activity 的跳转一样,此后后端不好参与路由相关的。
-
前端组件状态管理。如果我没有理解错误的话应该是同等于 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 }}
的数据了,那么你可以感受的到的是其中并没有后端模板插手的空间,可以插手,显得多余。这些步骤和传统的开发只是看起来方便了,实际上并没有跳出传统的开发模式。了解更多请看 官网。
分离
这个话题就有点的讲了,因为重要的内容就在这个地方。所以到了这个时候,各家框架开始了自己的各种道路,这个道路不谈,你的问题是开发和部署上。
-
开发中,不接触后端,前端单独就可以开始开发,有 API 的定义的情况下,那么我们前端可以自己模拟数据进行访问测试开发(这个称之为 mock)。
-
联调,开发的时候前端工程化框架有个好处是我们可以去进行随时更新,这个是因为现在的框架提供一个开发服务器去跑前端项目,检测到变化则直接更新。注意了,这个时候调用后端 API 会出现跨域问题,但是这个问题可以用 webpack 的 proxyTable 反向代理解决。
-
部署,部署有个问题存在,那么就是路由,在这个过程中看每个框架的处理模式了。具体的都可以查到。这个涉及每个框架路由的不同,Vue 和 Angular 都是在 nginx 上用
try_files $uri $uri/ /index.html;
处理的,这个问题建议多搜索,因为以及到了开发部署了大部分的问题都已经解决了。
至于 spring MVC 的话,我看过配置是通过优先级低的通配符方式去处理的,强行跳转 index.html.
@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:/"; } }
-
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于