文章目录
1. 引言
前后端分离是现在主流的架构设计模式,它初衷是用「单一职责」原则把代码质量提上去从而达到节省人力和减少沟通时的信息损失的目的。
本文推荐九个前后端分离的开源项目,都是采用最流行的技术栈。
2. 微人事
github地址: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
微人事是一个前后端分离的人力资源管理系统,项目采用Spring Boot + Vue
开发。首先,不同的用户在登录成功之后,根据不同的角色,会看到不同的系统菜单,完整菜单如下:
每个用户的角色是由系统管理员进行分配的,系统管理员给用户分配角色的页面如下:
系统管理员也可以管理不同角色可以操作的资源,页面如下:
2. 前后端分离博客项目
github地址: https://github.com/MarkerHub/vueblog
一个基于Spring Boot + Vue
开发的前后端分离博客项目,带有超级详细开发文档和讲解视频。还未接触过Vue
开发或者前后端分离的同学可以学起来。
3. V部落博客管理平台
github地址:https://github.com/lenve/VBlog
前端技术栈:Vue、axios、ElementUI、vue-echarts、mavon-edito、vue-router
等。
后端技术栈:SpringBoot、SpringSecurity、MyBatis、部分接口遵循Restful风格、MySQL
等。
快速开始如下:
- 克隆本项目到本地
git@github.com:lenve/VBlog.git
-
找到
blogserver
项目中resources
目录下的vueblog.sql
文件,在MySQL
数据库中执行 -
根据自己本地情况修改数据库配置,数据库配置在
SpringBoot
项目的application.properties
中 -
在
IntelliJ IDEA
中运行blogserver
项目
至此,服务端就启动成功了,此时我们直接在地址栏输入http://localhost:8081/index.html
即可访问我们的项目。
如果要做二次开发,请继续看第五、六步。
- 进入到vueblog目录中,在命令行依次输入如下命令:
# 安装依赖
npm install
# 在 localhost:8080 启动项目
npm run dev
由于在vueblog
项目中已经配置了端口转发,将数据转发到SpringBoot
上,因此项目启动之后,在浏览器中输入http://localhost:8080
就可以访问我们的前端项目了,所有的请求通过端口转发将数据传到SpringBoot
中(注意此时不要关闭SpringBoot
项目)。
- 最后可以用
WebStorm
等工具打开vueblog
项目,继续开发,开发完成后,当项目要上线时,依然进入到vueblog
目录,然后执行如下命令:
npm run build
该命令执行成功之后,vueblog目录下生成一个dist文件夹,将该文件夹中的两个文件static
和index.html
拷贝到SpringBoot
项目中resources/static/
目录下,然后就可以像第4步
那样直接访问了。
步骤5中需要大家对NodeJS、NPM等有一定的使用经验,不熟悉的小伙伴可以先自行搜索学习下,推荐Vue官方教程。
本项目依赖如下:
-
vue-echarts
-
mavonEditor
4. 基于SpringBoot的微信点餐系统
github地址: https://github.com/sqmax/springboot-project
5. eladmin后台管理系统
-
github后端地址:https://github.com/elunez/eladmin
-
github前端地址:https://github.com/elunez/eladmin-web
一个基于Spring Boot 2.1.0 、 Spring Boot Jpa、 JWT、Spring Security、Redis、Vue
的前后端分离的后台管理系统。
体验地址: https://eladmin.vip/demo
账号密码: admin / 123456
6. NiceFish(美人鱼)
码云地址:https://gitee.com/mumu-osc/NiceFish
NiceFish
(美人鱼) 是一个系列项目,目标是示范前后端分离的开发模式:
-
前端浏览器、移动端、
Electron
环境中的各种开发模式。 -
后端有两个版本:
SpringBoot
版本和pringCloud
版本。
主要依赖:
-
Angular 13.3.6
-
PrimeNG 11.3.1
-
Bootstrap 3.3.7
-
Echarts 4.1.0
-
ngx-echarts 4.1.0
-
ckeditor5-angular 2.0.1
7. newbee-mall(新蜂商城)
gitHub地址:https://github.com/newbee-ltd/newbee-mall
码云地址:https://gitee.com/newbee-ltd/newbee-mall
newbee-mall
项目是一套电商系统,包括newbee-mall
商城系统及newbee-mall-admin
商城后台管理系统,基于Spring Boot 2.X
及相关技术栈开发。
前台商城系统包含首页门户、商品分类、新品上线、首页轮播、商品推荐、商品搜索、商品展示、购物车、订单结算、订单流程、个人订单管理、会员中心、帮助中心等模块。
后台管理系统包含数据面板、轮播图管理、商品管理、订单管理、会员管理、分类管理、设置等模块。
新蜂商城线上预览地址:http://mall.newbee.ltd,账号可自行注册。
8. 学之思开源考试系统
GitHub地址:https://github.com/mindskip/xzs
学之思开源考试系统是一款 Java + Vue
的前后端分离的考试系统。主要优点是1开发、部署简单快捷、界面设计友好、代码结构清晰。
支持Web
端和微信小程序,能覆盖到PC
机和手机等设备。
支持多种部署方式:集成部署、前后端分离部署、Docker 部署
。
9. Snowy(小诺)
spring-boot分离版本地址:https://gitee.com/xiaonuobase/snowy
spring-cloud分离版本地址:https://gitee.com/xiaonuobase/snowy-cloud
Snowy
是一款基于国产密码算法后台权限管理系统,其中采用了SM2、SM3、SM4
及签名验签,软件层面完全符合等保测评要求,让更多的人认识密码,使用密码。技术框架与密码结合,让前后分离“密”不可分。
结合SpringBoot+AntDesignVue
开发,注释丰富,代码简洁。适配国产数据库(金仓、达梦)、主流数据库Mysql、Oracle、Mssql、Postgresql
,小诺的产品一致追求简洁干净,一套代码搞定!同时支持国产中间件部署、麒麟操作系统、Windows
、Linux
部署使用。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/99146.html