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

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

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

  • Java

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

    3167 引用 • 8207 回帖
  • 前端

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

    247 引用 • 1347 回帖
  • 框架
    47 引用 • 346 回帖 • 1 关注
  • Q&A

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

    6515 引用 • 29295 回帖 • 247 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 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
我的世界,我的代码,我的逻辑。

推荐标签 标签

  • Google

    Google(Google Inc.,NASDAQ:GOOG)是一家美国上市公司(公有股份公司),于 1998 年 9 月 7 日以私有股份公司的形式创立,设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”,它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎,它提供了简单易用的免费服务。不作恶(Don't be evil)是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • Java

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

    3167 引用 • 8207 回帖
  • 钉钉

    钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。

    15 引用 • 67 回帖 • 370 关注
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 28 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 696 关注
  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1083 引用 • 3461 回帖 • 287 关注
  • 人工智能

    人工智能(Artificial Intelligence)是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    75 引用 • 145 回帖
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖 • 3 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    180 引用 • 400 回帖
  • 前端

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

    247 引用 • 1347 回帖
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    90 引用 • 383 回帖 • 1 关注
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 401 关注
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    17 引用 • 236 回帖 • 420 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 440 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    25 引用 • 191 回帖 • 19 关注
  • 小说

    小说是以刻画人物形象为中心,通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    28 引用 • 108 回帖 • 3 关注
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。

    22 引用 • 31 回帖 • 3 关注
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 19 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 492 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    122 引用 • 73 回帖
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 454 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    333 引用 • 323 回帖 • 70 关注
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖
  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 512 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 511 关注