推荐 9 个经典前后端分离项目

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

推荐 9 个经典前后端分离项目_第1张图片

推荐 9 个经典前后端分离项目_第2张图片

02

前后端分离考试系统

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

推荐 9 个经典前后端分离项目_第3张图片

推荐 9 个经典前后端分离项目_第4张图片

推荐 9 个经典前后端分离项目_第5张图片

推荐 9 个经典前后端分离项目_第6张图片

推荐 9 个经典前后端分离项目_第7张图片

推荐 9 个经典前后端分离项目_第8张图片

03

基于 TypeScript 的聊天室项目

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

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

推荐 9 个经典前后端分离项目_第9张图片

推荐 9 个经典前后端分离项目_第10张图片

04

人力资源管理系统

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

推荐 9 个经典前后端分离项目_第11张图片

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

推荐 9 个经典前后端分离项目_第12张图片

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

推荐 9 个经典前后端分离项目_第13张图片

后端技术栈: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 开发或者前后端分离的同学可以学起来。

推荐 9 个经典前后端分离项目_第14张图片

推荐 9 个经典前后端分离项目_第15张图片

06

开源考试系统

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

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

推荐 9 个经典前后端分离项目_第16张图片

推荐 9 个经典前后端分离项目_第17张图片

推荐 9 个经典前后端分离项目_第18张图片

推荐 9 个经典前后端分离项目_第19张图片

07

后台管理系统

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

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

推荐 9 个经典前后端分离项目_第20张图片

推荐 9 个经典前后端分离项目_第21张图片

推荐 9 个经典前后端分离项目_第22张图片

08

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

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

推荐 9 个经典前后端分离项目_第23张图片

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

推荐 9 个经典前后端分离项目_第24张图片

Cookie中JWT Token

推荐 9 个经典前后端分离项目_第25张图片

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

推荐 9 个经典前后端分离项目_第26张图片

推荐 9 个经典前后端分离项目_第27张图片

移动端效果

推荐 9 个经典前后端分离项目_第28张图片

推荐 9 个经典前后端分离项目_第29张图片

09

美人鱼

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

推荐 9 个经典前后端分离项目_第30张图片

你可能感兴趣的:(vue.js,前端,javascript)