java前后端分离框架

① Sa-Token v1.20.0权限系统Springboot前后端分离使用

Sa-Token是一个轻量级java权限认证框架，主要解决：登录认证、权限认证、Session会话、单点登录、OAuth2.0 等一系列权限相关问题

框架针对踢人下线、自动续签、前后台分离、分布式会话……等常见业务进行N多适配，通过Sa-Token，你可以以一种极简的方式实现系统的权限认证部分。

以往大家会选择使用shiro或spring security都需要繁琐的配置定义拦截，前后端分离时还要搭配shiro，OAuth2.0 跨域等等问题。

sa-token在于方便、简单、拆箱即用，少量配置实现登录、权限拦截。

下面演示在springboot中使用sa-token：

1. 首先需要引入jar：maven项目在pom当中写入即可，此外关于权限系统都需要5张表：

 user表、role表、permission表 userRole表，rolePermission表(不在赘述)

2. 配置拦截器 （主要用于拦截未登录用户，排除login、index等接口）

3.对于前端的跨域解决，因为复杂post请求会有预请求，所以作如下配置:

5.众所周知，权限拦截是根据角色code或权限code进行拦截，sa-token将此接口暴漏，在此处存储List<String>,当拦截时可根据code是否拥有校验即可，所以此处查询code码存储到集合。

6.至此，权限配置基本完结，另外sa-token提供了两种方式拦截，一种是路由拦截，一种是接口注解拦截，

路由拦截:

此处方法可以写到拦截器配置 2 的SaServletFilter 里，例如：

注解拦截：

加在controller的接口注解上即可。

② 推荐 9 个 yyds 前后端分离项目

前后端分离是现在主流的架构设计模式，它初衷是用“单一职责”原则把代码质量提上去从而达到节省人力和减少沟通时的信息损失的目的。

本文推荐九个前后端分离的开源项目，都是采用最流行的技术栈。本文推荐的开源项目已经收录到 Awesome GitHub Repo。

Awesome GitHub Repo 是逛逛 GitHub 创建的开源项目，会收集整理 GitHub 上高质量、有趣的开源项目，并将他们进行归类。

该开源项目集不是简单的按照编程语言来分类，而是按照更有趣的分类方式，比如：有趣项目、沙雕项目、实战项目、学习项目、实用工具等等。

本期推荐的开源项目是：

1. 前后端分离博客系统

2. 前后端分离考试系统

3. 基于 TypeScript 的聊天室项目

4. 人力资源管理开源项目

5. 一个可以用来练手的前后端分离项目

6. 学之思开源考试系统

7. 前后端分离的后台管理系统

8. 前后端管理平台一站式脚手架

9. 一个系列项目：NiceFish（美人鱼）

01 前后端分离博客系统

这是一款基于 Spring Boot = Vue 的前后端分离的博客系统，后端采用技术栈：Spring Boot、Spring Security、jjwt、MyBatis、PageHelper、Redis、commonmark-java、ip2region、quartz、yauaa。

前端核心框架：Vue2.x、Vue Router、Vuex；Vue 项目基于 @vue/cli4.x 构建。JS 依赖及参考的 CSS：axios、moment、nprogress、v-viewer、prismjs、APlayer、MetingJS、lodash、mavonEditor、echarts、tocbot、iCSS

02 前后端分离考试系统

该项目是一个前后端分离的在线考试系统。后端使用 Spring Boot，前端使用 VUE 和 Element-UI 组件库配合完成开发。

03 基于扒弊 TypeScript 的聊天室项目

该项目是一个聊天室，采用全 TypeScript 开发，目前聊天室已经具备完整的聊天功能，有兴趣的朋友可以自行 fork 去开发。

技术选型：Typescript、Vue2.6.x、Socket/io、Vuex、Nestjs、Typeorm、ES6+、SASS(SCSS)。

04 人力资源管理系统

微人事是一个前后端分离的人力资源管理系统，散猜项目采用 Spring Boot + Vue 开发。首先，不同的用户在登录成功之后，根据不同的角色，会看到不同的系统菜单，完整菜单如下：

每个用户的角色是由系统管理员进行分配的，系统管理员给用户分配角色的页面如下：

系统管理员也可以管理不同角色可以操作的资源，页面如下：

后端技术栈：Spring Boot、Spring Security、MyBatis、Mysql、Redis、RabbitMQ、Spring Cache、WebSocket

前端技术栈：Vue、ElementUI、axios、vue-router、Vuex、WebSocket、vue-cli4

05 前后端分离练手项目

一个基于 Spring Boot + Vue 开发的前后端分离博客项目，带有超级详细开发文档和讲解视频。还未接触过 Vue 开发或者前后端分离的同学可以学起来。

06 开源考试系冲此型统

学之思开源考试系统是一款 Java + Vue 的前后端分离的考试系统。主要优点是开发、部署简单快捷、界面设计友好、代码结构清晰。

支持 Web 端和微信小程序，能覆盖到 PC 机和手机等设备。支持多种部署方式：集成部署、前后端分离部署、Docker 部署。

07 后台管理系统

一个基于 Spring Boot 2.1.0 、 Spring Boot Jpa、 JWT、Spring Security、Redis、Vue 的前后端分离的后台管理系统。

项目采用分模块开发方式， 权限控制采用 RBAC，支持数据字典与数据权限管理，支持一键生成前后端代码，支持动态路由。

体验地址：https://el-admin.xin

账号密码：admin / 123456

08 前后端管理平台一站式脚手架

本项目基于Spring Cloud 和Ant Design Pro实现前后端管理平台一站式脚手架，便于快速开发企业级应用。我们的愿景是 基于Copy&Paste技术，实现面向Google&Bai编程，让码农搬砖不累，做更好的良民。

预览地址：https://admin.awesome-coder.com；用户名和密码：admin

浏览器输入 localhost:8000 后会自动跳转到登录页

输入用户名和密码 admin/admin后,跳转到首页

Cookie中JWT Token

监控服务 localhost:8001效果(如果启动了monitor服务，用户名和密码为admin/admin)

移动端效果

09 美人鱼

NiceFish（美人鱼） 是一个系列项目，目标是示范前后端分离的开发模式：前端浏览器、移动端、Electron 环境中的各种开发模式；后端有两个版本：SpringBoot 版本和 SpringCloud 版本。

历史 推荐的开源项目已经收录到 GitHub 项目，欢迎 Star：

③ 如何在开发时部署和运行前后端分离的JavaWe

在开发中大型的JavaEE项目时，前后端分离的框架逐渐成为业界的主流，传统的单机部署前后端在同一个项目中的工程项目越来越少。这类JavaWeb项目的后端通常都采用微服务的架构，后端会被分解为诸多个小项目，然后使用bbo+zookeeper或者springCloud来构建微服务，前端则会是一个单独的项目，前台的请求通过微服务来调用。但是，不同与传统的web项目，这类前后端分离的项目如何在开发中部署和运行呢？

当前后端分离时，后端项目一定会被加载到tomcat的webapp目录下面，但是前端的资源院该如何被访问到呢？这里以tomcat这个中间件为例，探讨在开发这类项目的时候，如何让前后端分离的项目部署并且运行起来，即后端项目部署在tomcat之后如何在运行时访问静态资源（非上线部署）。

主要有两种方案：1.在本地通过Nginx来处理这些静态资源。2、将静态资源统一放入一个javaweb应用中，并将自动生成的war包随后端项目一期丢入tomcat。下面详细介绍

一、使用Nginx来访问静态资源。

在本地安装nginx并且修改nginx.conf，修改相关配置，将web访问的端口的资源进行更改，配置如下：

server { listen 80; server_name localhost; charset utf-8; #access_log logs/host.access.log main;
location / { proxy_pass http://tomcat_pool; proxy_redirect off;
proxy_set_header HOST $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
client_max_body_size 10m;
client_body_buffer_size 128k;
proxy_connect_timeout 90;
proxy_send_timeout 90;
proxy_read_timeout 90;
proxy_buffer_size 4k;
proxy_buffers 4 32k;
proxy_busy_buffers_size 64k;
proxy_temp_file_write_size 64k;
}
location ~ .*.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|woff|woff2|ttf|eot|map)$ {
root D:Workspacesesop-html; index index.html;
}

listen对象改为你本地的tomcat访问端口，最下面location中的root改为你前端项目中静态资源的位置，这样就可以实现只部署后端的项目就能访问前端的页面了。

二、将前端项目转换为动态的web项目，随后端项目一起丢入tomcat

这个方案省去了在本地安装和配置nginx，但是也只适用于开发阶段项目的部署运行和调试，真正在生产环境通常前后端项目会部署在不同的服务器。

• 如果是Intellij Idea,在导入前端项目之后，右键项目 add framework support --> web application，这时将会把前端项目转换为一个javaweb项目，然后将静态资源放在生成的web目录下即可。

• 如果是eclipse，可以新建一个javaweb项目然后将静态资源放入web或者webcontent目录下，或者直接先导入前端项目，然后通过 project facts 将项目转换为dynamic web项目并勾选 js等相关配置。

然后，运行项目时把后端的war包和前端的war包一同添加到 deployment中运行即可。

④ Web项目开发为何要走前后端分离模式

把前端与后端独立起来去开发，放在两个不同的服务器，需要独立部署，两个不同的工程，两个不同的代码库，不同的开发人员，前后端工程师需要约定交互接口，实现同步开发，开发结束后需要进行独立部署，前端通过接口来调用调用后端的API，前端只需要关注页面的样式与动态数据的解析和渲染，而后端专注于具体业务逻辑。具体好处有以下几点：

1.彻底解放前端

前端不再需要向后台提供模板或是后台在前端html中嵌入后台代

2.提高工作效率，分工更加明确

前后端分离的工作流程可以使前端只关注前端的事，后台只关心后台的活，两者开发可以同时进行，在后台还没有时间提供接口的时候，前端可以先将数据写死或者调用本地的json文件即可，页面的增加和路由的修改也不必再去麻烦后台，开发更加灵活。

3.局部性能提升

通过前端路由的配置，我们可以实现页面的按需加载，无需一开始加载首页便加载网站的所有的资源，服务器也不再需要解析前端页面，在页面交互及用户体验上有所提升。

4.降低维护成本

通过目前主流的前端MVC框架，我们可以非常快速的定位及发现问题的所在，客户端的问题不再需要后台人员参与及调试，代码重构及可维护性增强。

5.实现高内聚低耦合，减少后端（应用）服务器的并发/负载压力。

6.即使后端服务暂时超时或者宕机了，前端页面也会正常访问，但无法提供数据。

7.可以使后台能更好的追求高并发，高可用，高性能；使前端能更好的追求页面表现、速度流畅、兼容性、用户体验等。

我理解的前后端分离，前端是需要起服务器的，减少学习成本，可以用node，前端也要有域名的

如果是半分离， 那么前端提供js文件（css等）这个我也做过，前后端都用node就不说了，如果是两种语言，

如果一个工程文件下开发，webpack下直接打包进后台语言的静态目录下。

如果是两个工程，那么前端只提供生成的js（css）文件，git pull后台项目，扔进静态目录，这样又涉及到版本控制的问题，一般我会生成一个配置文件，直接读取的，内容是xxx.hash.js这种文件名，然后document.wirte动态写入js/css

前端起服务器就不需要动态引入了，直接html插件生成文件，更好的控制版本

半分离 还有一个问题，例如首页同构，如果更改xxx.blade.php文件，这就又动了php文件，甚至包括nginx反向代理啊，ssl这种缓存啊，都比较麻烦，你要是改了点啥，自己的ok了，后台的崩了，那就挺操蛋了，大公司有专门的运维还好，小公司真的是一团糟

后台我们采取全分离，nginx前端管理，至于升级nginx版本，http2，反向代理，https证书，都是前端自己弄，毕竟小公司，每个人水平都不一致，自己负责自己的比较好

但是这个跨域又要稍微处理一下，至今我这边后台还是*，我也没法说什么

阿里云这么便宜，如果把成本浪费在人力上，会变得很贵

一个人的精力有限，前后端分离有助于我们更专注我们所要注重的技术点，俗话说：“术业有专攻”。

比如我们后端，前后端分离有助于我们把注意力放在java基础，设计模式，jvm原理，spring+springmvc原理及源码，linux，mysql事务隔离与锁机制，mongodb，http/tcp，多线程，分布式架构（bbo，bbox，spring cloud），弹性计算架构，微服务架构（springboot+zookeeper+docker+jenkins），java性能优化，以及相关的项目管理等等。

而前端也可以集中精力在前端的展示上。

总的来说，前后端分离利大于弊。这也是越来越少用jsp的原因。

补充两点

1.每次请求的数据量变小，也意味着更少的响应时间。

2.也不是每个应用用前后端分离都是最合适的，要根据应用规模，工期综合判断。