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

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

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

  • Java

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

    3169 引用 • 8207 回帖
  • 前端

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

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

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

    6604 引用 • 29630 回帖 • 249 关注

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    24 引用 • 373 回帖
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    60 引用 • 287 回帖
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 740 关注
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    18881 引用 • 70708 回帖 • 1 关注
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 60 回帖 • 460 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    311 引用 • 546 回帖 • 32 关注
  • 笔记

    好记性不如烂笔头。

    305 引用 • 780 回帖
  • IPFS

    IPFS(InterPlanetary File System,星际文件系统)是永久的、去中心化保存和共享文件的方法,这是一种内容可寻址、版本化、点对点超媒体的分布式协议。请浏览 IPFS 入门笔记了解更多细节。

    20 引用 • 245 回帖 • 235 关注
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。

    82 引用 • 122 回帖 • 621 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 319 关注
  • RESTful

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

    30 引用 • 114 回帖
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 383 回帖 • 2 关注
  • AngularJS

    AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 427 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 27 关注
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 691 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 236 关注
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖
  • 反馈

    Communication channel for makers and users.

    123 引用 • 906 回帖 • 194 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    45 引用 • 113 回帖 • 303 关注
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • WebComponents

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

    1 引用 • 24 关注
  • HHKB

    HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘(Capacitive Keyboard)。

    5 引用 • 74 回帖 • 410 关注
  • InfluxDB

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

    2 引用 • 53 关注
  • 智能合约

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

    1 引用 • 11 回帖 • 4 关注
  • Java

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

    3169 引用 • 8207 回帖
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    108 引用 • 54 回帖
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    57 引用 • 22 回帖 • 2 关注