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

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

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

  • Java

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

    3190 引用 • 8214 回帖
  • 前端

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

    247 引用 • 1348 回帖
  • 框架
    46 引用 • 346 回帖 • 1 关注
  • Q&A

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

    8486 引用 • 38649 回帖 • 154 关注

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 367 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖
  • Mobi.css

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

    1 引用 • 6 回帖 • 747 关注
  • Kubernetes

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

    110 引用 • 54 回帖 • 4 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    406 引用 • 3574 回帖 • 1 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖 • 1 关注
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖
  • 脑图

    脑图又叫思维导图,是表达发散性思维的有效图形思维工具 ,它简单却又很有效,是一种实用性的思维工具。

    30 引用 • 96 回帖 • 2 关注
  • flomo

    flomo 是新一代 「卡片笔记」 ,专注在碎片化时代,促进你的记录,帮你积累更多知识资产。

    5 引用 • 107 回帖 • 1 关注
  • 开源中国

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

    7 引用 • 86 回帖
  • DNSPod

    DNSPod 建立于 2006 年 3 月份,是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析,让电信用户访问电信的服务器,网通的用户访问网通的服务器,教育网的用户访问教育网的服务器,达到互联互通的效果。

    6 引用 • 26 回帖 • 519 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    209 引用 • 358 回帖
  • 工具

    子曰:“工欲善其事,必先利其器。”

    288 引用 • 734 回帖
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    88 引用 • 1235 回帖 • 408 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 3 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    196 引用 • 540 回帖
  • 分享

    有什么新发现就分享给大家吧!

    247 引用 • 1793 回帖 • 2 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1454 回帖
  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 60 关注
  • 互联网

    互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

    98 引用 • 344 回帖
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端,也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • Google

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

    49 引用 • 192 回帖
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    15 引用 • 7 回帖
  • HBase

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

    17 引用 • 6 回帖 • 75 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    132 引用 • 1114 回帖 • 125 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 254 关注