前后端分离架构概述

万次阅读 多人点赞 2018-08-12 14:16:51

前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种...

1、背景

前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。

核心思想是前端HTML页面通过AJAX调用后端的RESTFUL API接口并使用JSON数据进行交互。

Web服务器：一般指像Nginx，Apache这类的服务器，他们一般只能解析静态资源；

应用服务器：一般指像Tomcat，Jetty，Resin这类的服务器可以解析动态资源也可以解析静态资源，但解析静态资源的能力没有web服务器好；

一般都是只有web服务器才能被外网访问，应用服务器只能内网访问。

以前的Java Web项目大多数都是Java程序员又当爹又当妈，又搞前端，又搞后端。随着时代的发展，渐渐的许多大中小公司开始把前后端的界限分的越来越明确，前端工程师只管前端的事情，后端工程师只管后端的事情。正所谓术业有专攻，一个人如果什么都会，那么他毕竟什么都不精。大中型公司需要专业人才，小公司需要全才，但是对于个人职业发展来说，前后端需要分离。

2、未分离时代（各种耦合）

早期主要使用MVC框架，Jsp+Servlet的结构图如下：

大致就是所有的请求都被发送给作为控制器的Servlet，它接受请求，并根据请求信息将它们分发给适当的JSP来响应。同时，Servlet还根据JSP的需求生成JavaBeans的实例并输出给JSP环境。JSP可以通过直接调用方法或使用UseBean的自定义标签得到JavaBeans中的数据。需要说明的是，这个View还可以采用 Velocity、Freemaker 等模板引擎。使用了这些模板引擎，可以使得开发过程中的人员分工更加明确，还能提高开发效率。

那么，在这个时期，开发方式有如下两种：

方式一

方式二

      方式二已经逐渐淘汰。主要原因有两点：
      1）前端在开发过程中严重依赖后端，在后端没有完成的情况下，前端根本无法干活；
      2）由于趋势问题，会JSP，懂velocity，freemarker等模板引擎的前端越来越少；

因此，方式二逐渐不被采用。然而，不得不说一点，方式一，其实很多小型传统软件公司至今还在使用。那么，方式一和方式二具有哪些共同的缺点呢?

1、前端无法单独调试，开发效率低；

2、前端不可避免会遇到后台代码，例如：

<body>
   <%
       request.setCharacterEncoding("utf-8")
       String name=request.getParameter("username");
       out.print(name);
   %>
</body>

这种方式耦合性太强。那么，就算你用了freemarker等模板引擎，不能写Java代码。那前端也不可避免的要去重新学习该模板引擎的模板语法，无谓增加了前端的学习成本。正如我们后端开发不想写前端一样，你想想如果你的后台代码里嵌入前端代码，你是什么感受？因此，这种方式十分不妥。

3、JSP本身所导致的一些其他问题比如，JSP第一次运行的时候比较缓慢，因为里头包含一个将JSP翻译为Servlet的步骤。再比如因为同步加载的原因，在JSP中有很多内容的情况下，页面响应会很慢。

3、半分离时代

前后端半分离，前端负责开发页面，通过接口（Ajax）获取数据，采用Dom操作对页面进行数据绑定，最终是由前端把页面渲染出来。这也就是Ajax与SPA应用（单页应用）结合的方式，其结构图如下：

步骤如下：
（1）浏览器请求，CDN返回HTML页面；
（2）HTML中的JS代码以Ajax方式请求后台的Restful接口；
（3）接口返回Json数据，页面解析Json数据，通过Dom操作渲染页面；

后端提供的都是以JSON为数据格式的API接口供Native端使用，同样提供给WEB的也是JSON格式的API接口。

      那么意味着WEB工作流程是：
      1、打开web，加载基本资源，如CSS，JS等；
      2、发起一个Ajax请求再到服务端请求数据，同时展示loading；
      3、得到json格式的数据后再根据逻辑选择模板渲染出DOM字符串；
      4、将DOM字符串插入页面中web view渲染出DOM结构；

这些步骤都由用户所使用的设备中逐步执行，也就是说用户的设备性能与APP的运行速度联系的更紧换句话说就是如果用户的设备很低端，那么APP打开页面的速度会越慢。

为什么说是半分离的？因为不是所有页面都是单页面应用，在多页面应用的情况下，前端因为没有掌握controller层，前端需要跟后端讨论，我们这个页面是要同步输出呢，还是异步Json渲染呢？而且，即使在这一时期，通常也是一个工程师搞定前后端所有工作。因此，在这一阶段，只能算半分离。

首先，这种方式的优点是很明显的。前端不会嵌入任何后台代码，前端专注于HTML、CSS、JS的开发，不依赖于后端。自己还能够模拟Json数据来渲染页面。发现Bug，也能迅速定位出是谁的问题。

      然而，在这种架构下，还是存在明显的弊端的。最明显的有如下几点：
      1）JS存在大量冗余，在业务复杂的情况下，页面的渲染部分的代码，非常复杂；
      2）在Json返回的数据量比较大的情况下，渲染的十分缓慢，会出现页面卡顿的情况；
      3）SEO（ Search Engine Optimization，即搜索引擎优化）非常不方便，由于搜索引擎的爬虫无法爬下JS异步渲染的数据，导致这样的页面，SEO会存在一定的问题；
      4）资源消耗严重，在业务复杂的情况下，一个页面可能要发起多次HTTP请求才能将页面渲染完毕。可能有人不服，觉得PC端建立多次HTTP请求也没啥。那你考虑过移动端么，知道移动端建立一次HTTP请求需要消耗多少资源么？

正是因为如上缺点，我们才亟需真正的前后端分离架构。

4、分离时代

大家一致认同的前后端分离的例子就是SPA(Single-page application)，所有用到的展现数据都是后端通过异步接口(AJAX/JSONP)的方式提供的，前端只管展现。从某种意义上来说，SPA确实做到了前后端分离，但这种方式存在两个问题：

WEB服务中，SPA类占的比例很少。很多场景下还有同步/同步+异步混合的模式，SPA不能作为一种通用的解决方案；
现阶段的SPA开发模式，接口通常是按照展现逻辑来提供的，而且为了提高效率我们也需要后端帮我们处理一些展现逻辑，这就意味着后端还是涉足了view层的工作，不是真正的前后端分离。

SPA式的前后端分离，从物理层做区分（认为只要是客户端的就是前端，服务器端就是后端）这种分法已经无法满足前后端分离的需求，我们认为从职责上划分才能满足目前的使用场景：

前端负责view和controller层
后端只负责model层，业务处理与数据持久化等

controller层与view层对于目前的后端开发来说，只是很边缘的一层，目前的java更适合做持久层、model层的业务。

      在前后端彻底分离这一时期，前端的范围被扩展，controller层也被认为属于前端的一部分。在这一时期：
      前端：负责View和Controller层。
      后端：只负责Model层，业务/数据处理等。

可是服务端人员对前端HTML结构不熟悉，前端也不懂后台代码呀，controller层如何实现呢？这就是node.js的妙用了，node.js适合运用在高并发、I/O密集、少量业务逻辑的场景。最重要的一点是，前端不用再学一门其他的语言了，对前端来说，上手度大大提高。

可以就把Nodejs当成跟前端交互的api。总得来说，NodeJs的作用在MVC中相当于C（控制器）。Nodejs路由的实现逻辑是把前端静态页面代码当成字符串发送到客户端（例如浏览器），简单理解可以理解为路由是提供给客户端的一组api接口，只不过返回的数据是页面代码的字符串而已。

用NodeJs来作为桥梁架接服务器端API输出的JSON。后端出于性能和别的原因，提供的接口所返回的数据格式也许不太适合前端直接使用，前端所需的排序功能、筛选功能，以及到了视图层的页面展现，也许都需要对接口所提供的数据进行二次处理。这些处理虽可以放在前端来进行，但也许数据量一大便会浪费浏览器性能。因而现今，增加Node中间层便是一种良好的解决方案。

      浏览器(webview)不再直接请求JSP的API，而是：
      1）浏览器请求服务器端的NodeJS；
      2）NodeJS再发起HTTP去请求JSP；
      3）JSP依然原样API输出JSON给NodeJS；
      4）NodeJS收到JSON后再渲染出HTML页面；
      5）NodeJS直接将HTML页面flush到浏览器；

这样，浏览器得到的就是普通的HTML页面，而不用再发Ajax去请求服务器了。

淘宝的前端团队提出的中途岛(Midway Framework)的架构如下图所示：

增加node.js作为中间层，具体有哪些好处呢？

(1)适配性提升；我们其实在开发过程中，经常会给PC端、mobile、app端各自研发一套前端。其实对于这三端来说，大部分端业务逻辑是一样的。唯一区别就是交互展现逻辑不同。如果controller层在后端手里，后端为了这些不同端页面展示逻辑，自己维护这些controller，模版无法重用，徒增和前端沟通端成本。如果增加了node.js层，此时架构图如下：

在该结构下，每种前端的界面展示逻辑由node层自己维护。如果产品经理中途想要改动界面什么的，可以由前端自己专职维护，后端无需操心。前后端各司其职，后端专注自己的业务逻辑开发，前端专注产品效果开发。

(2)响应速度提升；我们有时候，会遇到后端返回给前端的数据太简单了，前端需要对这些数据进行逻辑运算。那么在数据量比较小的时候，对其做运算分组等操作，并无影响。但是当数据量大的时候，会有明显的卡顿效果。这时候，node中间层其实可以将很多这样的代码放入node层处理、也可以替后端分担一些简单的逻辑、又可以用模板引擎自己掌握前台的输出。这样做灵活度、响应度都大大提升。

举个例子，即使做了页面静态化之后，前端依然还是有不少需要实时从后端获取的信息，这些信息都在不同的业务系统中，所以需要前端发送5、6个异步请求来。有了NodeJs之后，前端可以在NodeJs中去代理这5个异步请求。还能很容易的做bigpipe，这块的优化能让整个渲染效率提升很多。在PC上你觉得发5、6个异步请求也没什么，但是在无线端，在客户手机上建立一个http请求开销很大。有了这个优化，性能一下提升好几倍。

(3)性能得到提升；大家应该都知道单一职责原则。从该角度来看，我们，请求一个页面，可能要响应很多个后端接口，请求变多了，自然速度就变慢了，这种现象在mobile端更加严重。采用node作为中间层，将页面所需要的多个后端数据，直接在内网阶段就拼装好，再统一返回给前端，会得到更好的性能。

(4)异步与模板统一；淘宝首页就是被几十个HTML片段（每个片段一个文件）拼装成，之前PHP同步include这几十个片段，一定是串行的，Node可以异步，读文件可以并行，一旦这些片段中也包含业务逻辑，异步的优势就很明显了，真正做到哪个文件先渲染完就先输出显示。前端机的文件系统越复杂，页面的组成片段越多，这种异步的提速效果就越明显。前后端模板统一在无线领域很有用，PC页面和WIFI场景下的页面适合前端渲染（后端数据Ajax到前端），2G、3G弱网络环境适合后端渲染（数据随页面吐给前端），所以同样的模板，在不同的条件下走不同的渲染渠道，模板只需一次开发。

增加NodeJS中间层后的前后端职责划分：

5、总结

从经典的JSP+Servlet+JavaBean的MVC时代，到SSM（Spring + SpringMVC + Mybatis）和SSH（Spring + Struts + Hibernate）的Java 框架时代，再到前端框架（KnockoutJS、AngularJS、vueJS、ReactJS）为主的MV*时代，然后是Nodejs引领的全栈时代，技术和架构一直都在进步。虽然“基于NodeJS的全栈式开发”模式很让人兴奋，但是把基于Node的全栈开发变成一个稳定，让大家都能接受的东西还有很多路要走。创新之路不会止步，无论是前后端分离模式还是其他模式，都是为了更方便得解决需求，但它们都只是一个“中转站”。前端项目与后端项目是两个项目，放在两个不同的服务器，需要独立部署，两个不同的工程，两个不同的代码库，不同的开发人员。前端只需要关注页面的样式与动态数据的解析及渲染，而后端专注于具体业务逻辑。

参考：淘宝前后端分离解决方案

参考：从分布式之的角度告诉你前后端分离架构的必要性！

参考：浅谈前后端分离技术

收起

展开全文

七个开源的 Spring Boot 前后端分离项目，一定要收藏！

万次阅读 多人点赞 2019-09-18 10:05:53

前后端分离已经在慢慢走进各公司的技术栈，根据松哥了解到的消息，不少公司都已经切换到这个技术栈上面了。即使贵司目前没有切换到这个技术栈上面，松哥也非常建议大家学习一下前后端分离开发，以免在公司干了两三年...

前后端分离已经在慢慢走进各公司的技术栈，根据松哥了解到的消息，不少公司都已经切换到这个技术栈上面了。即使贵司目前没有切换到这个技术栈上面，松哥也非常建议大家学习一下前后端分离开发，以免在公司干了两三年，SSH 框架用的滚瓜烂熟，出来却发现自己依然没有任何优势！

其实前后端分离本身并不难，后段提供接口，前端做数据展示，关键是这种思想。很多人做惯了前后端不分的开发，在做前后端分离的时候，很容易带进来一些前后端不分时候的开发思路，结果做出来的产品不伦不类，因此松哥这里给大家整理了几个开源的前后端分离项目，帮助大家快速掌握前后端分离开发技术栈。

美人鱼

star 数 3499
项目地址： https://gitee.com/mumu-osc/NiceFish

听名字就知道这是个不错的项目，事实上确实不赖。NiceFish（美人鱼）是一个系列项目，目标是示范前后端分离的开发模式:前端浏览器、移动端、Electron 环境中的各种开发模式；后端有两个版本：SpringBoot 版本和 SpringCloud 版本，前端有 Angular 、React 以及 Electron 等版本。

项目效果图：

微人事

star 数 9313
项目地址：https://github.com/lenve/vhr

微人事是一个前后端分离的人力资源管理系统，项目采用 SpringBoot + Vue 开发。项目打通了前后端，并且提供了非常详尽的文档，从 Spring Boot 接口设计到前端 Vue 的开发思路，作者全部都记录在项目的 wiki 中，是不可多得的 Java 全栈学习资料。

项目效果图:

项目部分文档截图：

bootshiro

star 数 1370
项目地址： https://gitee.com/tomsun28/bootshiro

bootshiro 是基于 Spring Boot + Shiro + JWT 的真正 RESTful URL 资源无状态认证权限管理系统的后端,前端 usthe 。区别于一般项目，该项目提供页面可配置式的、动态的 RESTful api 安全管理支持，并且实现数据传输动态秘钥加密，jwt 过期刷新，用户操作监控等，加固应用安全。

项目效果图：

open-capacity-platform

star 数 2643
项目地址：https://gitee.com/owenwangwen/open-capacity-platform

open-capacity-platform 微服务能力开放平台，简称 ocp ，是基于 layui + springcloud 的企业级微服务框架(用户权限管理，配置中心管理，应用管理，…)，其核心的设计目标是分离前后端，快速开发部署，学习简单，功能强大，提供快速接入核心接口能力，其目标是帮助企业搭建一套类似百度能力开放平台的框架。

项目效果图：

V 部落

star 数 2902
项目地址：https://github.com/lenve/VBlog

V部落是一个多用户博客管理平台，采用 Vue + SpringBoot + ElementUI 开发。这个项目最大的优势是简单，属于功能完整但是又非常简单的那种，非常非常适合初学者。

项目效果图：

悟空 CRM

star 数 650
项目地址：https://gitee.com/wukongcrm/72crm-java

悟空 CRM 是基于 jfinal + vue + ElementUI 的前后端分离 CRM 系统。

老实说，jfinal 了解下就行了，没必要认真研究，Vue + ElementUI 的组合可以认真学习下、前后端交互的方式可以认真学习下。

paascloud-master

star 数 5168
项目地址：https://github.com/paascloud/paascloud-master

paascloud-master 核心技术为 SpringCloud + Vue 两个全家桶实现，采取了取自开源用于开源的目标，所以能用开源绝不用收费框架，整体技术栈只有阿里云短信服务是收费的，都是目前 java 前瞻性的框架，可以为中小企业解决微服务架构难题，可以帮助企业快速建站。由于服务器成本较高，尽量降低开发成本的原则，本项目由 10 个后端项目和 3 个前端项目共同组成。真正实现了基于 RBAC、jwt 和 oauth2 的无状态统一权限认证的解决方案，实现了异常和日志的统一管理，实现了 MQ 落地保证 100% 到达的解决方案。

项目效果图：

总结

他山之石，可以攻玉。当我们学会了很多知识点之后，需要一个项目来将这些知识点融会贯通，这些开源项目就是很好的资料。现在前后端分离开发方式日渐火热，松哥也强烈建议大家有空学习下这种开发方式。虽然我们身为 Java 工程师，可是也不能固步自封，看看前端单页面应用怎么构建，看看前端工程化是怎么回事，这些都有助于我们开发出更加合理好用的后端接口。好了，七个开源项目，助力大家在全栈的路上更进一步！

关注公众号【江南一点雨】，专注于 Spring Boot+微服务以及前后端分离等全栈技术，定期视频教程分享，关注后回复 Java ，领取松哥为你精心准备的 Java 干货！

收起

展开全文

springboot

Vue + Spring Boot 项目实战（三）：前后端结合测试（登录页面开发）

万次阅读 多人点赞 2019-04-07 09:20:59

构建 Spring Boot 项目并通过登录 DEMO 打通前后端的联系，为下一步开发打下基础。

前面我们已经完成了前端项目 DEMO 的构建，这一篇文章主要目的如下：
一、打通前后端之间的联系，为接下来的开发打下基础

二、登录页面的开发（无数据库情况下）

本篇目录
前言：关于开发环境
一、后端项目创建
二、登录页面开发
1.关于前后端结合
2.前端页面开发
Login.vue
AppIndex.vue
3.前端相关配置
设置反向代理
配置页面路由
跨域支持
运行项目
4.后端开发
User 类
Result 类
LoginController
5.测试项目

前言：关于开发环境
每位 Coder 都有自己偏好的开发工具，从大的方面划分主要有文本编辑器流和 IDE 流两种，我有一段时间也喜欢用编辑器（Sublime Text、Vim），但对我来说开发效率确实不如使用 IDE 高，所以就放弃了。不过需要修改某一代码片段时，使用编辑器还是比较便捷的。
虽说大家可以按照自己的情况任意选择工具，但做教程只能顾及其中一种，所以不好意思了读者大人们。
我比较习惯用 IntelliJ IDEA，在 Java 后端方面地位没得说，然而我前端也是用它做的。。。说实话没感到有什么不妥当的地方，界面什么的都和 WebStorm 差不多，只要不是只用 Eclipse 的同学，应该不会觉得别扭。
（用 Eclipse 的同学，是时候尝试改变了 /手动狗头）
第一篇文章也放上了 GitHub 的地址，有些小伙伴可能没看到，这里再放一遍：
https://github.com/Antabot/White-Jotter
追到第三篇的同学都是动手能力比较强的了，今天我测试了一下，按照项目的 README 运行基本没有问题，有兴趣的小伙伴可以搞一下，如果发现新的问题请在评论区指出，感谢。
一、后端项目创建
这个就很简单了。在 IDEA 中新建项目，选择 Spring Initializr，点击 Next



输入项目元数据，Next



选择 Web -> Web，Next



最后是项目名称和项目地址，Finish 后等待项目自动初始化即可。



运行 Application.java



访问 http://localhost:8080，发现弹出了错误页面，OK，这就对了，因为我们啥页面都没做啊。


二、登录页面开发
1.关于前后端结合
注意我们的项目是前后端分离的，这里的结合意思不是就不分离了，是如何把这俩分离的项目串起来用。
前面提到过前后端分离的意思是前后端之间通过 RESTful API 传递 JSON 数据进行交流。不同于 JSP 之类，后端是不涉及页面本身的内容的。
在开发的时候，前端用前端的服务器（Nginx），后端用后端的服务器（Tomcat），当我开发前端内容的时候，可以把前端的请求通过前端服务器转发给后端（称为反向代理），这样就能实时观察结果，并且不需要知道后端怎么实现，而只需要知道接口提供的功能，两边的开发人员（两个我）就可以各司其职啦。
艾玛做一个完整的教程真不容易，遇到的每个知识点感觉都能讲一堆。上次的文章被一位老哥反问是不是太着急了，也不知道是什么意思，我自己反思可能是讲的不够细吧，这里我就再啰嗦一下讲两句 正向代理 和 反向代理。
正向代理就是，你要访问一个网站，比如“谷弟弟”，然后发现访问不到，于是你访问了一个能访问到“谷弟弟”的代理服务器，让它帮你拿到你想浏览的页面。
反向代理就是，你访问了一个网站，你以为它是“谷弟弟”，但其实它是“谷姐”，“谷姐”知道你其实是想找她弟，就取回“谷弟弟”的内容给你看。作为用户的你，是不知道有这个过程的，这么做是为了保护服务器，不暴露服务器的真实地址。
知乎上有张神图可以描述这两种过程


2.前端页面开发
Login.vue
首先我们开发登录页面组件，右键 src\components 文件夹，New -> Vue Component，命名为 Login，如果没有 Vue Component 这个选项，可以选择新建一个 File，命名为 Login.vue 即可。代码如下：
<template>
  <div>
      用户名:<input type="text" v-model="loginForm.username" placeholder="请输入用户名"/>
      <br><br>
      密码： <input type="password" v-model="loginForm.password" placeholder="请输入密码"/>
      <br><br>
      <button v-on:click="login">登录</button>
  </div>
</template>

<script>

  export default {
    name: 'Login',
    data () {
      return {
        loginForm: {
          username: '',
          password: ''
        },
        responseResult: []
      }
    },
    methods: {
      login () {
        this.$axios
          .post('/login', {
            username: this.loginForm.username,
            password: this.loginForm.password
          })
          .then(successResponse => {
            if (successResponse.data.code === 200) {
              this.$router.replace({path: '/index'})
            }
          })
          .catch(failResponse => {
          })
      }
    }
  }
</script>


<template> 标签中随便写了一个登录的界面， methods 中定义了登录按钮的点击方法，即向后端 /login 接口发送数据，获得成功的响应后，页面跳转到 /index。因为之前我们设置了默认的 URL，所以请求实际上发到了 http://localhost:8443/api/login。
AppIndex.vue
右键 src\components 文件夹，新建一个 directory，命名为 home，再在 home 下新建一个 Appindex.vue ，即首页组件，这里暂时不做过多开发，先随便写个 Hello World。
<template>
    <div>
      Hello World!
    </div>
</template>

<script>
  export default {
    name: 'AppIndex'
  }
</script>

<style scoped>

</style>


3.前端相关配置
设置反向代理
修改 src\main.js 代码如下：
import Vue from 'vue'
import App from './App'
import router from './router'
// 设置反向代理，前端请求默认发送到 http://localhost:8443/api
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8443/api'
// 全局注册，之后可在其他组件中通过 this.$axios 发送数据
Vue.prototype.$axios = axios
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})


因为使用了新的模块 axios，所以需要进入到项目文件夹中，执行 npm install --save axios，以安装这个模块。
配置页面路由
修改 src\router\index.js 代码如下
import Vue from 'vue'
import Router from 'vue-router'
// 导入刚才编写的组件
import AppIndex from '@/components/home/AppIndex'
import Login from '@/components/Login'

Vue.use(Router)

export default new Router({
  routes: [
  // 下面都是固定的写法
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/index',
      name: 'AppIndex',
      component: AppIndex
    }
  ]
})


跨域支持
为了让后端能够访问到前端的资源，需要配置跨域支持。
在 config\index.js 中，找到 proxyTable 位置，修改为以下内容
    proxyTable: {
      '/api': {
        target: 'http://localhost:8443',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }

注意如果不是在最后的位置，大括号外需要添加一个逗号。
运行项目
执行 npm run dev，或双击 dev（start 也一样）脚本，查看登录页面效果。
注意地址是 localhost:8080/#/login ，中间有这个 # 是因为 Vue 的路由使用了 Hash 模式，是单页面应用的经典用法，但连尤雨溪本人都觉得不太好看，所以可以在路由配置中选择使用 History 模式，但会引发一些问题，需要在后端作出处理，所以这里先不更改，之后我单独写一篇关于这个的文章。



教程的内容简化了一下，我做的是这个样子的。。。



呃，总之这个页面的功能都是一样的。
4.后端开发
User 类
在 Login.vue 中，前端发送数据的代码段为
.post('/login', {
            username: this.loginForm.username,
            password: this.loginForm.password
          })

后端如何接收这个 JS 对象呢？我们很自然地想到在需要创建一个形式上一致的 Java 类。
打开我们的后端项目 wj，首先在 src\main\java\com\evan\wj 文件夹（就是你自己的 web 项目的包）下，新建一个 pojo 包（package），然后新建 User类，代码如下
package com.evan.wj.pojo;

public class User {
    int id;
    String username;
    String password;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}


Result 类
Result 类是为了构造 response，主要是响应码。新建 result 包，创建 Result 类，代码如下
package com.evan.wj.result;

public class Result {
    //响应码
    private int code;

    public Result(int code) {
        this.code = code;
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

}


实际上由于响应码是固定的，code 属性应该是一个枚举值，这里作了一些简化。
LoginController
Controller 是对响应进行处理的部分。这里我们设定账号是 admin，密码是 123456，分别与接收到的 User 类的 username 和 password 进行比较，根据结果返回不同的 Result，即不同的响应码。前端如果接收到成功的响应码（200），则跳转到 /index 页面。
在 wj 下新建 controller 包，新建 LoginController 类，代码如下
package com.evan.wj.controller;

import com.evan.wj.result.Result;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.util.HtmlUtils;

import com.evan.wj.pojo.User;

import java.util.Objects;

@Controller
public class LoginController {

    @CrossOrigin
    @PostMapping(value = "api/login")
    @ResponseBody
    public Result login(@RequestBody User requestUser) {
    // 对 html 标签进行转义，防止 XSS 攻击
        String username = requestUser.getUsername();
        username = HtmlUtils.htmlEscape(username);

        if (!Objects.equals("admin", username) || !Objects.equals("123456", requestUser.getPassword())) {
            String message = "账号密码错误";
            System.out.println("test");
            return new Result(400);
        } else {
            return new Result(200);
        }
    }
}


这里只是为了演示前后端的交互过程，真正的登录验证要考虑更多因素，后面的文章会有详细介绍。另外教程初期对项目结构做了一些简化，实际上在 controller 里写这么多逻辑是不合理的，要尽量封装到 service 里面去。
最后，在 src\main\resources 文件夹下找到 application.properties 文件配置端口，即加上 server.port=8443（初始应该是空白的，后期还要配置数据库等）
5.测试项目
同时运行前端和后端项目，访问 localhost:8080/#/login，输入用户名 admin，密码 123456



点击确定，成功进入 localhost:8080/#/index



通过这篇文章，希望大家可以直观地感受到前后端分离项目中前后端的过程，之后的功能开发基本思路就是在后端开发 Controller，在前端开发不同的组件，这个顺序可以随意。实际的项目应该是前后端人员根据功能需求约定好接口，然后齐头并进，以提高开发效率。
接下来一段时间需要写的内容大概有以下这些：

数据库的引入
后端拦截器的配置
部署项目时会遇到的一些坑
使用 Element 辅助前端开发
公共组件的开发

顺序我再想一想，教程做的比较慢，大家可以在 GitHub 上看项目的进度。
查看系列文章目录：

https://learner.blog.csdn.net/article/details/88925013
上一篇：Vue + Spring Boot 项目实战（二）：搭建 Vue.js 项目
下一篇：Vue + Spring Boot 项目实战（四）：数据库的引入

收起

展开全文

Vue SpringBoot

JavaWeb项目为什么我们要放弃jsp？为什么要前后端解耦？为什么要前后端分离？2.0版，为分布式架构打基础。

万次阅读 多人点赞 2017-03-23 18:09:44

前言

 

前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，

并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。

这个步骤是系统架构从猿进化成人的必经之路。

 

核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。

 

（

名词解释：

在互联网架构中，

web服务器：一般指像nginx，apache这类的服务器，他们一般只能解析静态资源。

应用服务器：一般指像tomcat，jetty，resin这类的服务器可以解析动态资源也可以解析静态资源，但解析静态资源的能力没有web服务器好。

 

一般都是只有web服务器才能被外网访问，应用服务器只能内网访问。

）




术业有专攻（开发人员分离）

 

以前的JavaWeb项目大多数都是java程序员又当爹又当妈，又搞前端（ajax/jquery/js/html/css等等），又搞后端（java/mysql/oracle等等）。

 

随着时代的发展，渐渐的许多大中小公司开始把前后端的界限分的越来越明确，前端工程师只管前端的事情，后端工程师只管后端的事情。

正所谓术业有专攻，一个人如果什么都会，那么他毕竟什么都不精。

 

大中型公司需要专业人才，小公司需要全才，但是对于个人职业发展来说，我建议是分开。

 

对于后端java工程师：

把精力放在java基础，设计模式，jvm原理，spring+springmvc原理及源码，linux，mysql事务隔离与锁机制，mongodb，http/tcp，多线程，分布式架构（dubbo，dubbox，spring cloud），弹性计算架构，微服务架构（springboot+zookeeper+docker+jenkins），java性能优化，以及相关的项目管理等等。

后端追求的是：三高（高并发，高可用，高性能），安全，存储，业务等等。

 

对于前端工程师：

把精力放在html5，css3，jquery，angularjs，bootstrap，reactjs，vuejs，webpack，less/sass，gulp，nodejs，Google V8引擎，javascript多线程，模块化，面向切面编程，设计模式，浏览器兼容性，性能优化等等。

前端追求的是：页面表现，速度流畅，兼容性，用户体验等等。

 

偏头痛杨原创文章，禁止转载，版权必究。

 

术业有专攻，这样你的核心竞争力才会越来越高，正所谓你往生活中投入什么，生活就会反馈给你什么。

并且两端的发展都越来越高深，你想什么都会，那你毕竟什么都不精。

 

通过将team分成前后端team，让两边的工程师更加专注各自的领域，独立治理，然后构建出一个全栈式的精益求精的team。




原始人时代（各种耦合）

 

几曾何时，我们的JavaWeb项目都是使用了若干后台框架，springmvc/struts + spring + spring jdbc/hibernate/mybatis 等等。

 

大多数项目在java后端都是分了三层，控制层（controller/action），业务层（service/manage），持久层（dao）。

控制层负责接收参数，调用相关业务层，封装数据，以及路由&渲染到jsp页面。

然后jsp页面上使用各种标签（jstl/el/struts标签等）或者手写java表达式（<%=%>）将后台的数据展现出来，玩的是MVC那套思路。

 

我们先看这种情况：需求定完了，代码写完了，测试测完了，然后呢？要发布了吧？

你需要用maven或者eclipse等工具把你的代码打成一个war包，然后把这个war包发布到你的生产环境下的web容器（tomcat/jboss/weblogic/websphere/jetty/resin）里，对吧？

 

发布完了之后，你要启动你的web容器，开始提供服务，这时候你通过配置域名，dns等等相关，你的网站就可以访问了（假设你是个网站）。

那我们来看，你的前后端代码是不是全都在那个war包里？包括你的js，css，图片，各种第三方的库，对吧？

 

好，下面在浏览器中输入你的网站域名（www.xxx.com），之后发生了什么？（这个问题也是很多公司的面试题）

我捡干的说了啊，基础不好的童鞋请自己去搜。

 

浏览器在通过域名通过dns服务器找到你的服务器外网ip,将http请求发送到你的服务器，在tcp3次握手之后（http下面是tcp/ip），通过tcp协议开始传输数据，你的服务器得到请求后，开始提供服务，接收参数，之后返回你的应答给浏览器，浏览器再通过content-type来解析你返回的内容，呈现给用户。

 

那么我们来看，我们先假设你的首页中有100张图片，此时，用户的看似一次http请求，其实并不是一次，用户在第一次访问的时候，浏览器中不会有缓存，你的100张图片，浏览器要连着请求100次http请求（有人会跟我说http长连短连的问题，不在这里讨论），你的服务器接收这些请求，都需要耗费内存去创建socket来玩tcp传输（消耗你服务器上的计算资源）。

 

偏头痛杨原创文章，禁止转载，版权必究。

 

重点来了，这样的话，你的服务器的压力会非常大，因为页面中的所有请求都是只请求到你这台服务器上，如果1个人还好，如果10000个人并发访问呢（先不聊服务器集群，这里就说是单实例服务器），那你的服务器能扛住多少个tcp连接？你的带宽有多大？你的服务器的内存有多大？你的硬盘是高性能的吗？你能抗住多少IO？你给web服务器分的内存有多大？会不会宕机？

 

这就是为什么，越是大中型的web应用，他们越是要解耦。

理论上你可以把你的数据库+应用服务+消息队列+缓存+用户上传的文件+日志+等等都扔在一台服务器上，你也不用玩什么服务治理，也不用做什么性能监控，什么报警机制等等，就乱成一锅粥好了。

但是这样就好像是你把鸡蛋都放在一个篮子里，隐患非常大。如果因为一个子应用的内存不稳定导致整个服务器内存溢出而hung住，那你的整个网站就挂掉了。

 

如果出意外挂掉，而恰好这时你们的业务又处于井喷式发展高峰期，那么恭喜你，业务成功被技术卡住，很可能会流失大量用户，后果不堪设想。

注意：技术一定是要走在业务前面的，否则你将错过最佳的发展期哟，亲~

 

此外，你的应用全部都耦合在一起，相当于一个巨石，当服务端负载能力不足时，一般会使用负载均衡的方式，将服务器做成集群，这样其实你是在水平扩展一块块巨石，性能加速度会越来越低，

要知道，本身负载就低的功能or模块是没有必要水平扩展的，在本文中的例子就是你的性能瓶颈不在前端，那干嘛要水平扩展前端呢？？？

还有发版部署上线的时候，我明明只改了后端的代码，为什么要前端也跟着发布呢？？？

（引用：《架构探险-轻量级微服务架构》，黄勇）

 

正常的互联网架构，是都要拆开的，你的web服务器集群，你的应用服务器集群+文件服务器集群+数据库服务器集群+消息队列集群+缓存集群等等。




JSP的痛点

 

以前的javaWeb项目大多数使用jsp作为页面层展示数据给用户，因为流量不高，因此也没有那么苛刻的性能要求，但现在是大数据时代，对于互联网项目的性能要求是越来越高，

因此原始的前后端耦合在一起的架构模式已经逐渐不能满足我们，因此我们需要需找一种解耦的方式，来大幅度提升我们的负载能力。

 

1.动态资源和静态资源全部耦合在一起，服务器压力大，因为服务器会收到各种http请求，例如css的http请求，js的，图片的等等。

一旦服务器出现状况，前后台一起玩完，用户体验极差。

 

2.UI出好设计图后，前端工程师只负责将设计图切成html，需要由java工程师来将html套成jsp页面，出错率较高（因为页面中经常会出现大量的js代码），

修改问题时需要双方协同开发，效率低下。

 

3.jsp必须要在支持java的web服务器里运行（例如tomcat，jetty，resin等），无法使用nginx等（nginx据说单实例http并发高达5w，这个优势要用上），

性能提不上来。

 

4.第一次请求jsp，必须要在web服务器中编译成servlet，第一次运行会较慢。

 

5.每次请求jsp都是访问servlet再用输出流输出的html页面，效率没有直接使用html高（是每次哟，亲~）。

 

6.jsp内有较多标签和表达式，前端工程师在修改页面时会捉襟见肘，遇到很多痛点。

 

7.如果jsp中的内容很多，页面响应会很慢，因为是同步加载。

 

8.需要前端工程师使用java的ide（例如eclipse），以及需要配置各种后端的开发环境，你们有考虑过前端工程师的感受吗。

 

基于上述的一些痛点，我们应该把整个项目的开发权重往前移，实现前后端真正的解耦！

偏头痛杨原创文章，禁止转载，版权必究。




开发模式

 

以前老的方式是：

1.产品经历/领导/客户提出需求

2.UI做出设计图

3.前端工程师做html页面

4.后端工程师将html页面套成jsp页面（前后端强依赖，后端必须要等前端的html做好才能套jsp。如果html发生变更，就更痛了，开发效率低）

5.集成出现问题

6.前端返工

7.后端返工

8.二次集成

9.集成成功

10.交付

 

 

 

新的方式是：

1.产品经历/领导/客户提出需求

2.UI做出设计图

3.前后端约定接口&数据&参数

4.前后端并行开发（无强依赖，可前后端并行开发，如果需求变更，只要接口&参数不变，就不用两边都修改代码，开发效率高）

5.前后端集成

6.前端页面调整

7.集成成功

8.交付

 

 




请求方式

 

以前老的方式是：

1.客户端请求

2.服务端的servlet或controller接收请求（后端控制路由与渲染页面，整个项目开发的权重大部分在后端）

3.调用service,dao代码完成业务逻辑

4.返回jsp

5.jsp展现一些动态的代码

 

 

 

新的方式是：

1.浏览器发送请求

2.直接到达html页面（前端控制路由与渲染页面，整个项目开发的权重前移）

3.html页面负责调用服务端接口产生数据（通过ajax等等，后台返回json格式数据，json数据格式因为简洁高效而取代xml）

4.填充html，展现动态效果，在页面上进行解析并操作DOM。

（有兴趣的童鞋可以访问一下阿里巴巴等大型网站，然后按一下F12，监控一下你刷新一次页面，他的http是怎么玩的，大多数都是单独请求后台数据，

使用json传输数据，而不是一个大而全的http请求把整个页面包括动+静全部返回过来）

 

偏头痛杨原创文章，禁止转载，版权必究。

总结一下新的方式的请求步骤：

大量并发浏览器请求--->web服务器集群(nginx)--->应用服务器集群(tomcat)--->文件/数据库/缓存/消息队列服务器集群

同时又可以玩分模块，还可以按业务拆成一个个的小集群，为后面的架构升级做准备。

 




前后分离的优势

 

1.可以实现真正的前后端解耦，前端服务器使用nginx。

前端/WEB服务器放的是css，js，图片等等一系列静态资源（甚至你还可以css，js，图片等资源放到特定的文件服务器，例如阿里云的oss，并使用cdn加速），前端服务器负责控制页面引用&跳转&路由，前端页面异步调用后端的接口，后端/应用服务器使用tomcat（把tomcat想象成一个数据提供者），加快整体响应速度。

（这里需要使用一些前端工程化的框架比如nodejs，react，router，react，redux，webpack）

 

2.发现bug，可以快速定位是谁的问题，不会出现互相踢皮球的现象。

页面逻辑，跳转错误，浏览器兼容性问题，脚本错误，页面样式等问题，全部由前端工程师来负责。

接口数据出错，数据没有提交成功，应答超时等问题，全部由后端工程师来解决。

双方互不干扰，前端与后端是相亲相爱的一家人。

 

3.在大并发情况下，我可以同时水平扩展前后端服务器，比如淘宝的一个首页就需要2000+台前端服务器做集群来抗住日均多少亿+的日均pv。

（去参加阿里的技术峰会，听他们说他们的web容器都是自己写的，就算他单实例抗10万http并发，2000台是2亿http并发，并且他们还可以根据预知洪峰来无限拓展，很恐怖，就一个首页。。。）

 

4.减少后端服务器的并发/负载压力

除了接口以外的其他所有http请求全部转移到前端nginx上，接口的请求调用tomcat，参考nginx反向代理tomcat。

且除了第一次页面请求外，浏览器会大量调用本地缓存。

 

5.即使后端服务暂时超时或者宕机了，前端页面也会正常访问，只不过数据刷不出来而已。

 

6.也许你也需要有微信相关的轻应用，那样你的接口完全可以共用，如果也有app相关的服务，

那么只要通过一些代码重构，也可以大量复用接口，提升效率。（多端应用）

 

7.页面显示的东西再多也不怕，因为是异步加载。

 

8.nginx支持页面热部署，不用重启服务器，前端升级更无缝。

 

9.增加代码的维护性&易读性（前后端耦在一起的代码读起来相当费劲）。

 

10.提升开发效率，因为可以前后端并行开发，而不是像以前的强依赖。

 

11.在nginx中部署证书，外网使用https访问，并且只开放443和80端口，其他端口一律关闭（防止黑客端口扫描），

内网使用http，性能和安全都有保障。

 

12.前端大量的组件代码得以复用，组件化，提升开发效率，抽出来！




注意事项

 

1.在开需求会议的时候，前后端工程师必须全部参加，并且需要制定好接口文档，后端工程师要写好测试用例（2个维度），不要让前端工程师充当你的专职测试，

推荐使用chrome的插件postman或soapui或jmeter，service层的测试用例拿junit写。ps：前端也可以玩单元测试吗？

 

2.上述的接口并不是java里的interface，说白了调用接口就是调用你controler里的方法。

 

3.加重了前端团队的工作量，减轻了后端团队的工作量，提高了性能和可扩展性。

 

4.我们需要一些前端的框架来解决类似于页面嵌套，分页，页面跳转控制等功能。（上面提到的那些前端框架）。

 

5.如果你的项目很小，或者是一个单纯的内网项目，那你大可放心，不用任何架构而言，但是如果你的项目是外网项目，呵呵哒。

 

6.以前还有人在使用类似于velocity/freemarker等模板框架来生成静态页面，仁者见仁智者见智。

 

7.这篇文章主要的目的是说jsp在大型外网java web项目中被淘汰掉，可没说jsp可以完全不学，对于一些学生朋友来说，jsp/servlet等相关的java web基础还是要掌握牢的，不然你以为springmvc这种框架是基于什么来写的？

 

8.如果页面上有一些权限等等相关的校验，那么这些相关的数据也可以通过ajax从接口里拿。

 

9.对于既可以前端做也可以后端做的逻辑，我建议是放到前端，为什么？

因为你的逻辑需要计算资源进行计算，如果放到后端去run逻辑，则会消耗带宽&内存&cpu等等计算资源，你要记住一点就是

服务端的计算资源是有限的，而如果放到前端，使用的是客户端的计算资源，这样你的服务端负载就会下降（高并发场景）。

类似于数据校验这种，前后端都需要做！

 

10.前端需要有机制应对后端请求超时以及后端服务宕机的情况，友好的展示给用户。

 




扩展阅读

 

1.其实对于js，css，图片这类的静态资源可以考虑放到类似于阿里云的oss这类文件服务器上（如果是普通的服务器&操作系统，存储在到达pb级的文件后，或者单个文件夹内的文件数量达到3-5万，

io会有很严重的性能问题），

再在oss上配cdn（全国子节点加速），这样你页面打开的速度像飞一样， 无论你在全国的哪个地方，并且你的nginx的负载会进一步降低。

 

2.如果你要玩轻量级微服务架构，要使用nodejs做网关，用nodejs的好处还有利于seo优化，因为nginx只是向浏览器返回页面静态资源，而国内的搜索引擎爬虫只会抓取静态数据，不会解析页面中的js，

这使得应用得不到良好的搜索引擎支持。同时因为nginx不会进行页面的组装渲染，需要把静态页面返回到浏览器，然后完成渲染工作，这加重了浏览器的渲染负担。

浏览器发起的请求经过nginx进行分发，URL请求统一分发到nodejs，在nodejs中进行页面组装渲染；API请求则直接发送到后端服务器，完成响应。

 

3.如果遇到跨域问题，spring4的CORS可以完美解决，但一般使用nginx反向代理都不会有跨域问题，除非你把前端服务和后端服务分成两个域名。

JSONP的方式也被淘汰掉了。

 

4.如果想玩多端应用，注意要去掉tomcat原生的session机制，要使用token机制，使用缓存（因为是分布式系统），做单点，对于token机制的安全性问题，可以搜一下jwt。

 

5.前端项目中可以加入mock测试（构造虚拟测试对象来模拟后端，可以独立开发和测试），后端需要有详细的测试用例，保证服务的可用性与稳定性。




总结

 

前后端分离并非仅仅只是一种开发模式，而是一种架构模式（前后端分离架构）。

千万不要以为只有在撸代码的时候把前端和后端分开就是前后端分离了。需要区分前后端项目

前端项目与后端项目是两个项目，放在两个不同的服务器，需要独立部署，两个不同的工程，两个不同的代码库，不同的开发人员。

前后端工程师需要约定交互接口，实现并行开发，开发结束后需要进行独立部署，前端通过ajax来调用http请求调用后端的restful api。

前端只需要关注页面的样式与动态数据的解析&渲染，而后端专注于具体业务逻辑。

 

原创文章，禁止转载。

收起

展开全文

jsp nginx java web ajax

在前后端分离的SpringBoot项目中集成Shiro权限框架
万次阅读 多人点赞 2017-12-12 14:13:47
公司在几年前就采用了前后端分离的开发模式，前端所有请求都使用ajax。这样的项目结构在与CAS单点登录等权限管理框架集成时遇到了很多问题，使得权限部分的代码冗长丑陋，CAS的各种重定向也使得用户体验很差，在...
收起
shiro SpringBoot
前后端分离架构：Web实现前后端分离，前后端解耦
万次阅读 多人点赞 2018-04-16 13:55:40
一、前言 ”前后端分离“已经成为互联网项目开发的业界标杆，通过Tomcat+Ngnix(也可以中间有个Node.js)，有效地进行解耦。并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种...
收起
前后端分离：Web实现前后端分离，前后端解耦
千次阅读 2019-03-12 13:50:59
前后端分离架构：Web实现前后端分离，前后端解耦一、前言 ”前后端分离“已经成为互联网项目开发的业界标杆，通过Tomcat+Ngnix(也可以中间有个Node.js)，有效地进行解耦。并且前后端分离会为以后的大型分布式架构、...
收起
一看就懂！Springboot +Shiro +VUE 前后端分离式权限管理系统
万次阅读 多人点赞 2019-04-15 20:40:28
前段日子写过一篇关于SpringBoot+Shiro的简单整合的例子，那个例子并不适用于我们目前的前后端分离开发的趋势。我之前写过一个项目也是用到了Shiro的前后端分离，某度了许久也没找到解决方案，什么去掉shiroFilter....
收起
Java Shiro
前后端分离与前后端不分离
千次阅读 2019-11-23 10:12:08
前后端分离开发模式介绍 前后端不分离定义：以后端直接渲染模板完成响应为主的一种开发模式特点 http请求次数少只需要一个后台服务器 前后端开发耦合，责任不明确单纯开发网站，效率非常高响应的往往是html...
收起
前后端分离
2019-01-14 19:15:34
前后端分离。都说前后端分离，前后端分离有什么好处？为什么要前后端分离？ BibPipe，将按步就班改成了流水线。
收起
前后端解耦 前后端分离
千次阅读 2017-07-11 14:48:10
前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种...
收起
前后端分离之Vue（二）前后端结合
万次阅读 多人点赞 2018-03-13 20:10:13
前后端的结合前言：前后端分离趋势越来越明显，分离的好处在于前后端可独立进行开发进行，前端写前端的代码，后端写后端的代码，后端提供相应的数据接口提供给前端。本文采用的是Vue+springboot的结合，做了一个登陆...
收起
前后端分离Cookie sameSite坑跨域之坑
万次阅读 热门讨论 2019-01-22 15:18:09
在前后端分离解决跨域问题过程中，利用CORS解决跨域问题，前后端按照规范处理了，但不管怎样session都是不一致，所以前端无法登陆无法在本地测试。查了几天资料，中间反反复复，最后要放弃的时候无意中看到一个大神...
收起
前后端分离——前后端数据交互
万次阅读 2017-04-28 09:41:35
在此介绍几种常用的前后端数据交互方法，并给出使用建议。以提高前后端协同开发的效率。此文章适合前后端协同开发经验不足的新手阅读。 HTML赋值输出到 Element 的 value 或 data-name input type=...
收起
前后端交互详解(建议收藏)
万次阅读 多人点赞 2020-03-09 18:03:57
1.前后端认知相信很多人心里都有一个疑惑：我⼀个前端，为什么要学习后端？
收起
数据库 mysql 前端 php javascript
（自学/初学者普及）浅谈前后端与前后端分离（别再说你不懂什么是前后端分离）
千次阅读 2020-04-04 01:12:43
程序员都在说前后端分离，开发岗位也被很明确的分成了前后端工程师，很多大学的刚进入计算机专业的小伙伴和打算进入计算机行业的朋友，通常会有这些问题：究竟什么是前后端呢？ 前后端分离又是什么呢？为...
收起
javascript node.js java python ajax
前端通信, 前后端分离、 前后端不分离
千次阅读 2019-06-21 19:00:32
前端通信基于后端的通信（后端完成）（ pc端用） ...使用终端（ shell ）作为客户端思维流程 ...基于H5的webSocket来完成（应用于移动端）...前后端分离、 前后端不分离市场流行： 前后端分离 前后端分...
收起
Springboot + Spring Security 实现前后端分离登录认证及权限控制
万次阅读 多人点赞 2019-09-05 16:53:37
Springboot + Spring Security 实现前后端分离登录认证及权限控制前言本文主要的功能文章目录一、数据库表设计建表语句初始化表数据语句二、Spring Security核心配置：WebSecurityConfig三、用户登录认证逻辑：...
收起
SpringBoot 权限控制
前后端分离和前后端不分离的区别
千次阅读 2018-11-20 19:28:38
前后端不分离 前后端分离 1 前后端不分离在前后端不分离的应用模式中，前端页面看到的效果都是由后端控制，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的耦合度很高。这种应用模式比较...
收起
前后端分离-01：怎么实现前后端分离？
万次阅读 多人点赞 2019-03-18 09:32:54
第一步部分：后端（因为笔者是做后端的所以放在第一个），前后端的后端分两个部门。业务处理：里面包含model，算法，业务逻辑，网络通信，多线程，多进程。 web服务器：使用任何能返回json和二进制的数据类型的...
收起
什么是前后端分离与前后端不分离
2019-01-13 20:25:00
我起初认为前后端分离是，在软件开发过程中前后端分工就叫做前后端分离，其实是前端所有用到的数据都是后端通过异步接口的方式提供的，前端只管页面的展示及效果。　前端和后端不分离的时候，前端的页面也是由...
收起
前后端分离时代，Java 程序员的变与不变！
千次阅读 多人点赞 2019-07-01 10:30:38
前后端分离的时代，Java后台程序员的技术建议？松哥认真看了下这个问题，感觉对于初次接触前后端分离的小伙伴来说，可能都会存在这样的疑问，于是决定通过这篇文章和大家聊一聊这个话题。我这里还是尽量从一个 ...
收起
前后端分离项目，如何解决跨域问题
万次阅读 2021-01-20 13:42:36
前后端分离项目，如何解决跨域问题跨域资源共享（CORS）是前后端分离项目很常见的问题，本文主要介绍当SpringBoot应用整合SpringSecurity以后如何解决该问题。什么是跨域问题 CORS全称Cross-Origin Resource ...
收起
java
用nginx实现前后端分离的项目的前后端访问
千次阅读 2019-01-16 18:07:07
现在几乎都是前后端分析的项目，在开发和线上一般都会使用nginx做代理来实现跨域和负债均衡。nginx安装前面已经讲过，现在写写如何配置，前端技术为vue。 server { listen 80; server_name zq.shidebin.com; ...
收起
前后端分离开发的理解以及和前后端不分离的区别
千次阅读 2020-03-21 22:03:51
一、前后端分离的概念 前后端分离 前后端分离是一种架构模式，说通俗点就是后端项目里面看不到页面（JSP | HTML），后端给前端提供接口，前端调用后端提供的 REST 风格接口就行，前端专注写页面（html|jsp）和...
收起
都前后端分离了，咱就别做页面跳转了！统统 JSON 交互
万次阅读 多人点赞 2020-04-02 09:09:17
登录交互2.1 前后端分离的数据交互2.2 登录成功2.3 登录失败3. 未认证处理方案4. 注销登录这是本系列的第四篇，有小伙伴找不到之前文章，松哥给大家列一个索引出来：挖一个大坑，Spring Security 开搞！松哥...
收起
java spring
GitHub开源：一键生成前后端代码神器
千次阅读 多人点赞 2020-10-11 11:49:07
JeecgBoot 是一款基于代码生成器的低代码开发平台，零代码开发。采用前后端分离架构：SpringBoot2.x，Ant Design&Vue，Mybatis-plus，Shiro，JWT。强大的代码生成器让前后端代码一键生成，无需写任何代码。
收起
前后端协作--服务器渲染与前后端分离
2019-06-09 13:49:11
前后端合作分为两种方式：1.服务器渲染 2.前后端分离 1.服务器渲染（SSR）客户端请求，服务端的servlet或controller接收请求，后端控制路由与渲染页面，调用service，dao代码完成业务逻辑，返回jsp，jsp展现页面。 ...
收起
前端开发前端

前后端分离架构概述

1、背景

2、未分离时代（各种耦合）

3、半分离时代

4、分离时代

5、总结

七个开源的 Spring Boot 前后端分离项目，一定要收藏！

美人鱼

微人事

bootshiro

open-capacity-platform

V 部落

悟空 CRM

paascloud-master

总结

Vue + Spring Boot 项目实战（三）：前后端结合测试（登录页面开发）

本篇目录

前言：关于开发环境

一、后端项目创建

二、登录页面开发

1.关于前后端结合

2.前端页面开发

Login.vue

AppIndex.vue

3.前端相关配置

设置反向代理

配置页面路由

跨域支持

运行项目

4.后端开发

User 类

Result 类

LoginController

5.测试项目

JavaWeb项目为什么我们要放弃jsp？为什么要前后端解耦？为什么要前后端分离？2.0版，为分布式架构打基础。

前言

术业有专攻（开发人员分离）

原始人时代（各种耦合）

JSP的痛点

开发模式

请求方式

前后分离的优势

注意事项

扩展阅读

总结

在前后端分离的SpringBoot项目中集成Shiro权限框架

前后端分离架构：Web实现前后端分离，前后端解耦

前后端分离：Web实现前后端分离，前后端解耦

一看就懂！Springboot +Shiro +VUE 前后端分离式权限管理系统

前后端分离与前后端不分离

前后端分离

前后端解耦 前后端分离

前后端分离之Vue（二）前后端结合

前后端分离Cookie sameSite坑 跨域之坑

前后端分离——前后端数据交互

前后端交互详解(建议收藏)

（自学/初学者普及）浅谈前后端与前后端分离（别再说你不懂什么是前后端分离）

前端通信, 前后端分离 、 前后端不分离

Springboot + Spring Security 实现前后端分离登录认证及权限控制

前后端分离和前后端不分离的区别

前后端分离-01：怎么实现前后端分离？

什么是前后端分离与前后端不分离

前后端分离时代，Java 程序员的变与不变！

前后端分离项目，如何解决跨域问题

用nginx实现前后端分离的项目的前后端访问

前后端分离开发的理解以及和前后端不分离的区别

都前后端分离了，咱就别做页面跳转了！统统 JSON 交互

GitHub开源：一键生成前后端代码神器

前后端协作--服务器渲染与前后端分离

前后端

前后端解耦前后端分离

前后端分离Cookie sameSite坑跨域之坑

前端通信, 前后端分离、前后端不分离