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

前端分离是目前主流的架构设计模式。其初衷是以“单责”原则提高代码质量,以节省人力,减少交流过程中的信息丢失。

本文推荐9个前端分离的开源项目,都采用了最流行的技术栈。本文推荐的开源项目已经包含在Awesome GitHub Repo中。

Awesome GitHub Repo是通过访问GitHub创建的开源项目。它会收集整理GitHub中优质有趣的开源项目,并进行分类。

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

本期推荐的开源项目有:

1.前后端分离的博客系统

2.前后端分离考试系统

3.基于TypeScript的聊天室项目

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

5.可以用来练手的前端分离项目。

6.学习思维的开源考试系统

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

8.前端和后端管理平台的一站式搭建

9.一系列项目:尼斯费什(美人鱼)

01前端分离博客系统

这是一个基于Spring Boot = Vue的博客系统,后端采用技术栈:Spring Boot、Spring Security、jjwt、MyBatis、PageHelper、Redis、commonmark-java、ip2region、quartz、yauaa。

前端核心框架:Vue2.x、Vue路由器、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组件库完成开发。

基于TypeScript的聊天室项目

这个项目是一个聊天室,是用全打字稿开发的。目前聊天室有完整的聊天功能,有兴趣的朋友可以自行开发。

技术选择: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进行权限控制,支持数据字典和数据权限管理,支持一键生成前端和后端代码,支持动态路由。

体验地址:;用户名和密码:admin

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

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

Cookie中的Jwtoken

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

移动端效应

09美人鱼

NiceFish是一个系列项目,目标是展示前端分离的开发模式:前端浏览器、移动终端以及电子环境下的各种开发模式;后端有两个版本:SpringBoot版本和SpringCloud版本。

历史推荐的开源项目已被纳入GitHub项目。欢迎来到Star: