推荐 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。

前端核心框架：Vue2x、Vue Router、Vuex；Vue 项目基于 @vue/cli4x 构建。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、Vue26x、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 210 、 Spring Boot Jpa、 JWT、Spring Security、Redis、Vue 的前后端分离的后台管理系统。

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

体验地址：>

像这样的问题，我已经回答了很多次，现在很多新手，特别是刚刚入行想学java的同学，不知道该从哪里入手，我是在成都课工场学java入的行，现在已变成老司机，我整理了一些java的知识点，一共分为六个阶段，273个技能点，第一阶段、第二阶段、第三阶段、第四阶段是必须要掌握的，很多机构忽悠人，就只学到第四阶段，第五阶段和第六阶段就是高薪、高职的保障，就说说想高薪必须得把后面两个阶段的给掌握了，老铁，觉得合适采纳下啊。

第一阶段：java基本功修炼

1 认识计算机硬件

2 计算机组成原理

3 计算机软件知识

4 计算机网络知识

5 常用网络应用 *** 作

6 认识计算机病毒

7 逻辑训练

8 初识Java

9 变量和数据类型

10 选择结构

11 循环结构for

12 循环结构do-while

13 循环结构while

14 多重循环及程序调试

15 循环进阶

16 一维数组及经典应用

17 二维数组

18 认识类与对象

19 方法及方法重载

20 封装与继承

21 方法重写与多态

22 项目实战-汽车租赁系统

23 抽象类和接口

24 异常

25 项目实战-QuickHit

26 Java 中的集合类型

27 List 集合

28 Set 集合

29 HashMap 集合

30 Iterator

31 Collections 算法类及常用方法

32 enum

33 包装类及装箱拆箱

34 String、StringBuffer 类常用方法 *** 作字符串

35 Date、Calendar

36 Math 类常用方法

37 IO/NIO

38 字节输入流(InputStream、FileInputStream、BufferedInputStream)

39 字节输出流(OutputStream、FileOutputStream、BufferedOutputStream)

40 字符输入流(Reader、InputStreamReader、FileReader BufferedReader)

41 字节输出流(Writer、OutputStreamWriter、FileWriter、BufferedWriter)

42 文件复制

43 Serialize、Deserialize

44 职场晋升力：四象限时间管理与精力管理

45 多线程(Thread、Runnable)

46 Thread LifeCycle

47 线程的调度

48 线程的同步和死锁

49 Thread Pool

50 职场晋升力：团队合作

51 Socket(TCP、UDP)

52 XML 概念、优势、规范

53 XML 中特殊字符的处理

54 使用DOM 读取、添加、删除、解析 XML 数据

第二阶段：javaweb开发

55 搭建和配置MySQL 数据库

56 数据库增、删、查、改语句

57 事务

58 视图

59 数据库备份与恢复

60 数据库用户管理

61 数据库设计

62 项目实战-银行ATM 存取款机系统

63 走进 HTML 和CSS

64 列表表格及表单美化

65 CSS 高级 *** 作

66 Bootstrap

67 CSS 组件

68 JavaScript 面向对象

69 JavaScript 判断、循环

70 JavaScript 闭包

71 JavaScript 语法

72 Bootstrap 综合案例

73 HTML5、CSS3

74 jQuery 基础

75 jQuery 基本 *** 作

76 jQuery 事件与特效

77 jQuery Ajax

78 jQuery 插件

79 搭建Web 环境初识JSP

80 JSP 九大内置对象

81 JSP 实现数据传递和保存

82 JDBC

83 单例模式、工厂模式

84 MVC、三层模式

85 Commons-fileupload、CKEditor

86 分页查询

87 EL 与 JSTL

88 Servlet 与Filter

89 Listener 与MVC

90 Ajax 与 jQuery

91 jQuery 的Ajax 交互扩展

92 项目实战—使用Ajax 技术改进新闻发布系统

93 反射

94 Linux 系统的安装

95 在Linux 中管理目录和文件

96 在Linux 中管理用户和权限

97 在Linux 服务器环境下安装软件和部署项目

98 职场晋升力：职场沟通

第三阶段： 企业级框架开发

99 MyBatis 环境搭建

100 SQL 映射文件

101 动态SQL

102 MyBatis 框架原理

103 Spring IOC

104 构造注入、依赖注入、注解

105 Spring 整合MyBatis(SqlSessionTemplate、MapperFactoryBean、事务

处理)

106 Spring 数据源(属性文件、JNDI)、Bean 作用域

107 Spring 框架的运行原理

108 SpringMVC 体系概念

109 SpringMVC 之数据绑定、数据效验、

110 SpringMVC 之视图及视图解析

111 SpringMVC 之文件上传、本地化解析

112 SpringMVC 之静态资源处理、请求拦截器、异常处理

113 Oracle 数据库环境搭建、安装

114 Oracle 数据库 SQL、分页、备份、还原

115 Hibernate 概念、依赖

116 HQL 查询语言

117 Hibernate 中配置关联映射

118 HQL 连接查询与 Hibernate 注解

119 Struts 2 概念、依赖

120 Struts 2 配置

121 OGNL 表达式

122 Struts 2 拦截器

123 SSH 框架整合

124 使用Maven 构建项目

125 使用Struts 2 实现Ajax

126 Jsoup 网络爬虫

127 多线程网络爬虫

128 反爬及反反爬策略

129 通用爬虫设计

130 Echart 图表分析

131 IKAnalyzer 分词

132 企业框架项目实战-代理商管理系统

133 企业框架项目实战-SL 会员商城

134 企业框架项目实战-会员管理系统

135企业框架项目实战-互联网招聘信息采集分析平台

第四阶段： 前后端分离开发

136 GitHub

137 Git 基础(checkout、pull、commit、push、merge 等)

138 Git 进阶(多分支协作)

139 GitLab

140 IDEA 的使用

141 Maven 介绍(概念、仓库、构建、命令)

142 使用Maven 构建WEB 项目

143 使用Maven 构建多模块项目

144 使用Maven 搭建私服仓库

145 Scrum 框架介绍(三个角色、三个工件、四个会议)

146 Scrum Team 组建团队

147 产品需求和用户故事

148 每日立会

149 使用敏捷-Scrum 方式开发管理实战

150 前后端分离、分布式集群架构、垂直架构

151 SSM（SpringMVC+Spring+MyBatis）整合实战

152 Git、Maven 私服Nexus

153 第三方接入技术（微信、阿里）

154 MySQL 电商实战

155 Redis（缓存服务）

156 搜索引擎-Solr

157 集成API Doc 工具-Swagger

158 自动化处理：Tengine+LUA+GraphicsMagic

159 手机、邮箱注册

160 单点登录 Token

161 OAuth20 认证

162 Jsoup 网络爬虫(多线程爬虫/代理 IP 爬虫)

163 ExecutorService 线程池

164 IK 中文分词

165 Postman

166 ReactJS

167 webpack

168 职场晋升力：简历撰写

169 程序猿面试宝典之项目面试

170大型互联网旅游电商项目实战-爱旅行

第五阶段： 分布式微服架构开发

171 Spring Boot 环境搭建

172 Spring Boot 常用技能

173 Spring Boot 整合Redis

174 Spring Boot 整合Mybatis

175 微服务架构及架构设计

176 消息队列

ActiveMQ\RabbitMQ

177 分布式事务

178 分布式锁 Redis-setnx

179 Zookeeper 注册中心

180 基于 ActiveMQ 实现高并发

181 Docker 环境搭建

182 Docker 镜像加速

183 Docker 容器管理

184 Docker 镜像管理

185 Docker 容器文件备份

186 Dockerfile

187 Docker 私服仓库

188 真实互联网高并发电商项目实战-双十一抢购

189 可视化监控 Portainer

190 Docker Compose 容器编排

191 Docker Compose 扩容、缩容

192 Docker Swarm 集群编排

193 Jenkins 安装、插件配置

194 Jenkins 配置普通任务

195 Jenkins 配置管道任务

196 Jenkins 自动发布服务

197 Spring Cloud Eureka

198 Spring Cloud Feign

199 Spring Cloud Ribbon

200 Spring Cloud Zuul

201 Spring Cloud Config

202 Spring Cloud Hystrix

203 Spring Cloud Sleuth

204 Spring Boot Admin

205Eureka 注册原理探秘

206 Spring Cloud 大坑解读

207 Zipkin

208 Zipkin 整合RabbitMQ

209 Zipkin 整合MySQL

210 ELK 日志收集

211Kafka

212 Elasticsearch 映射管理

213 Elasticsearch 查询/复合查询

214 Elasticsearch 集群/集群规划

215 Elasticsearch 聚合

216 Elasticsearch 集群监控

217 Elasticsearch 插件

(Head/BigDesk)

218 Mycat 读写分离

219 Mycat 一主多从

220 Mycat 多主多从

221 Mycat 数据分片

222 Redis

223 Redis-Redlock

224 Elasticsearch 环境搭建

225 Elasticsearch 客户端

226 Elasticsearch 索引管理

227 Elasticsearch 文档管理

228 Mycat 集群

229 Jmeter 并发测试

230 Jmeter 生成测试报告

231 微信登录

232 微信支付

233 支付宝支付

234 百度地图

235 Sonar 本地检测

236 Sonar +Jenkins 线上检测

237 CI/CD

238 Spring Boot 改造爱旅行项目实战

239 大型互联网票务类电商项目实战-大觅网

240 ES6 概念(les、const)

241 ES6 对象和数组

242 ES6 函数扩展

243 VUE 环境搭建

244 VUEJS 指令

245VUE 交互

246 VUE 实例生命周期

247 VUE 组件

248 VUE 项目环境配置及单文件组件

249VUE 路由

第六阶段：cc服务

250 Spring Cloud Gateway

251 Consul

252 Nacos

253 Eureka、Consu、lNacos、Zookeeper 对比分析

254 Prometheus + Grafana

255 ES 分布式存储原理

256 NoSQL 数据库解决方案(Redis、MongoDB)

257 OAuth20 认证( authorization code 模式)

258 OAuth20 认证( implicit 模式)

259 OAuth20 认证( resource owner password credentials 模式)

260 OAuth20 认证( client credentials 模式)

261 NAS/FastDFS 分布式文件存储

262 Python 基础

263 Python 爬虫

264 大数据及 Hadoop 概述

265 分布式文件系统 HDFS

266 分布式计算框架MapReduce

267 分布式列式数据库 HBase

268 Hadoop 综合应用

269 面试大局观

270 职业规划

271 项目面试

272 具体业务场景化解决方案

273 更多技术专题持续增加中

我估计能把你看晕，有不清楚的可以私信我

该项目主要是一个电商的后台管理系统，可实现管理用户账号，即登录、退出、用户管理、权限管理等，商品管理，即商品分类、分类参数、商品信息，订单信息等以及数据统计。
前端项目是基于Vue的SPA项目，前端技术栈采用Vue+VueRouter+Element-UI+Axios+Echarts，后端技术栈采用Nodejs+Express+Jwt(模拟session)+Mysql+Sequelize组成。由于此项目主要练习相关前端技术栈，故后端采用已有模板进行搭建。后端不做详细介绍。
前端：
A安装Vue脚手架
B通过脚手架创建项目
C配置路由
D配置Element-UI:在插件中安装，搜索vue-cli-plugin-element
E配置Axios：在依赖中安装,搜索axios(运行依赖)
F:初始化git远程仓库
G:将本地项目托管到GItHub或者码云中
后端项目的环境安装配置：
①安装 MySQL 数据库
②安装 Nodejs 环境
③配置项目相关信息
④启动项目
⑤使用 Postman 测试后台项目接口是否正常

        话说最近一直在攻在网上花二十块大洋买的vue音乐播放器项目，收获颇多！对vue项目整体的流程有了更进一步的了解，打算花点空余时间把这个项目再撸几遍，然后转入京东的项目实战中。。。

        实际工作中一直涉及的是数据可视化 *** 作（Echarts、Highcharts），即大量数据图表展示，却独独没有用到丁点儿的vue知识，感觉实在是让人憋得心慌，晚上没事干脆试验一把，如题：在Vue项目中实现数据可视化 *** 作

Echarts  步骤：

一、安装插件

        cnpm install echarts -D

注：echarts 也不能通过 Vueuse() 进行全局调用

所以，通常在需要使用图表的 vue文件中直接引入

import echarts from 'echarts'

也可以在mainjs中引入，然后修改原型链

Vueprototype$echarts = echarts

这样在全局中就可以直接使用了

let mychart = this$echartsinit(documentgetElementById('mychart'))

二、创建图表

        由于一般情况我们会在组件中使用，这里我也贴近实际开发，举的例子就是应用于组件中

数据导入

这样图表就可以在页面中展示出来了

问题：这里引入的 echarts 包含了所有图表，但有时候我们只需要一两个基本图表，这时候完整的 echarts 就显得累赘，所以：

二、按需引入

    // 引入基本模板letecharts = require('echarts/lib/echarts')

  // 引入饼图组件require('echarts/lib/chart/pie')

  // 引入提示框和图例组件require('echarts/lib/component/tooltip')

  require('echarts/lib/component/legend')

可以按需引入的模块列表见 >