推荐 6 个前后端分离项目

╰+哭是因爲堅強的太久メ 2021-09-07 06:20 579阅读 0赞

前后端分离是现在主流的架构设计模式，它初衷是用「单一职责」原则把代码质量提上去从而达到节省人力和减少沟通时的信息损失的目的。本文推荐六个前后端分离的开源项目，都是采用最流行的技术栈。

01 微人事  Star：20.7k

开源地址：https://github.com/lenve/vhr

微人事是一个基于前后端分离架构的的人力资源管理系统，项目涉及的后端技术栈有：Spring Boot、Spring Security、MyBatis、MySQL、Redis、RabbitMQ、Spring Cache、WebSocket，前端技术栈有：Vue、ElementUI、axios、vue-router、Vuex、WebSocket、vue-cli4。

![773a3ebf587141ba1f36582201e05243.png][]

![0ed058f34d97aa1a990ec968d6314278.png][]

重要的是，该项目还提供了项目部署的视频教程和常遇见问题的解决方案。

![3c1981c3d957ac0cb12df3ca6d501967.png][]

02 个人博客   Star：1.2k

开源地址：https://github.com/MarkerHub/vueblog

这个前后端分离的博客项目项目适合没有 Vue 开发经验或者前后端分离开发的朋友，技术栈基于Spring Boot + Vue，带有超级详细开发文档和讲解视频。

![f1d77410e96288a053ce97691bec3006.png][]![2bd0d9a3066d432a1e6e586024f8f9d8.png][]

## 03 V部落   Star：5.9k ##

开源地址：https://github.com/lenve/VBlog

## 功能包括：登陆页面、文章列表、发表文章、用户管理、栏目管理、数据统计。技术栈采用：Spring Boot、SpringSecurity、MyBatis、MySQL、Vue、axios、ElementUI、vue-echarts。 ##

![8270e2f477218c8db6360530354d9c35.png][]

![8ea48749e6430c6f137da3f4bd2fe97f.png][]

![0fb19811f47497da53750f0238794384.png][]

![7e5a489c186d52b0ec9a4826c376c2ad.png][]

04 微信点餐系统 Star：1k

开源地址：https://github.com/sqmax/springboot-project

这是一个基于微信服务号平台的点餐系统的后代，前端使用 Vue.js 技术，后端使用 Spring Boot + JPA 构建的基于微信公众号的 WebApp，前后端完全分离，前后端之间通过RESTful风格的接口相连。

![7cf7d2c31cd1259f0da3c13312b42751.png][]

![460f74a9ca73a1568b17c5a770ed40e5.png][]

# 05 后台管理系统   Star：4.9k #

开源地址：https://gitee.com/mumu-osc/NiceFish

一个界面美观基于前后端分离的后台管理系统， 技术栈包括 Spring Boot 2.1.0 、 Spring Boot Jpa、 JWT、Spring Security、Redis、Vue 等。

开发文档：https://el-admin.vip

体验地址：https://el-admin.xin  账号密码：admin / 123456

功能强大，除了基础功能还包括：字典管理、系统日志、SQL监控、定时任务、代码生成、邮件工具、七牛云存储、支付宝支付、服务监控、运维管理。

![e8d0751fbcdf80a399acd34346264619.png][]

![dda7b9c0986c46fe23619cf4cd23ac37.png][]

![08d91381f1e6c5b99fe9007d5a4e718b.png][]

06 美人鱼   Star：4.8k

美人鱼采用前后端分离结构: 前端浏览器、移动端、Electron 环境中的各种开发模式；后端基于两个版本：Spring Boot 版本和 Spring Cloud 版本，前端有 Angular 、React 以及 Electron 等版本。

![aef5d46064dcc2112f8fee3766f956b0.png][]

![00c5de612dc825bde614e9e015bb9a15.png][]

![d11bf1c60cb6487c080b9082835a95dd.png][]

![f8e5b1cd5fdec6bae7399d4174d8ef4c.png][]

推荐阅读 
    1.  一份 Spring Boot 项目搭建模板
    2.  Spring Boot 实现应用监控和报警
    3.  Nginx 从入门到实战
    4.  一键式搭建分布式文件服务器
    5.  团队开发中 Git 最佳实践
    
    喜欢文章，点个在看

[773a3ebf587141ba1f36582201e05243.png]: /images/20210730/f1647892ec8b4021bbd45f078ca5c131.png
[0ed058f34d97aa1a990ec968d6314278.png]: /images/20210730/961f401cbbe542719a03283359c2f068.png
[3c1981c3d957ac0cb12df3ca6d501967.png]: /images/20210730/ca355fb500b44ac99f48ac89c3e904e5.png
[f1d77410e96288a053ce97691bec3006.png]: https://img-blog.csdnimg.cn/img_convert/f1d77410e96288a053ce97691bec3006.png
[2bd0d9a3066d432a1e6e586024f8f9d8.png]: /images/20210730/304b0473fe474c6da3ea600e646ca534.png
[8270e2f477218c8db6360530354d9c35.png]: /images/20210730/5a950964a42540c7a7dcbe67e010367c.png
[8ea48749e6430c6f137da3f4bd2fe97f.png]: /images/20210730/168e3f045b69467c8d6f0880dccebd53.png
[0fb19811f47497da53750f0238794384.png]: /images/20210730/0bed578fd0074aaba21d74dd42f7eb05.png
[7e5a489c186d52b0ec9a4826c376c2ad.png]: /images/20210730/2d4806544a30479f943482e7975852c8.png
[7cf7d2c31cd1259f0da3c13312b42751.png]: /images/20210730/697f43fcf13f4a83ba163e90f7a806c5.png
[460f74a9ca73a1568b17c5a770ed40e5.png]: /images/20210730/55428503cf364f57b66653870de1090f.png
[e8d0751fbcdf80a399acd34346264619.png]: /images/20210730/5439d047d2a9485cbea4312800002ff5.png
[dda7b9c0986c46fe23619cf4cd23ac37.png]: /images/20210730/b9d24deea21047df93a6b8396483a224.png
[08d91381f1e6c5b99fe9007d5a4e718b.png]: /images/20210730/15d99bf8a0bd4bb78ff5dd9d379e8667.png
[aef5d46064dcc2112f8fee3766f956b0.png]: /images/20210730/f66da7480c5d44939427449ccd79a34d.png
[00c5de612dc825bde614e9e015bb9a15.png]: /images/20210730/e3fc6b7b6ca9410a9104bbf83adb7133.png
[d11bf1c60cb6487c080b9082835a95dd.png]: /images/20210730/351dbc21862b4b37a626e03ef023eb07.png
[f8e5b1cd5fdec6bae7399d4174d8ef4c.png]: /images/20210730/1de43e7aa72c42579b3353e0a358b74a.png