百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

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

nanshan 2025-01-04 22:10 7 浏览 0 评论

前后端分离是现在主流的架构设计模式,它初衷是用「单一职责」原则把代码质量提上去从而达到节省人力和减少沟通时的信息损失的目的。

本文推荐九个前后端分离的开源项目,都是采用最流行的技术栈。本文推荐的开源项目已经收录到 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。

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

03

基于 TypeScript 的聊天室项目


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

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

体验地址:https://el-admin.xin

账号密码:admin / 123456

08

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


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

预览地址:https://admin.awesome-coder.com;用户名和密码:admin

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

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

Cookie中JWT Token

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

移动端效果

09

美人鱼

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

'https://github.com/Naccl/NBlog',
'https://github.com/YXJ2018/SpringBoot-Vue-OnlineExam',
'https://github.com/genaller/genal-chat',
'https://github.com/lenve/vhr',
'https://github.com/MarkerHub/vueblog',
'https://github.com/mindskip/xzs-mysql',
'https://github.com/elunez/eladmin',
'https://gitee.com/awesome-engineer/awesome-admin',
'https://gitee.com/mumu-osc/NiceFish'

历史推荐的开源项目已经收录到 GitHub 项目,欢迎 Star:

开源地址:https://github.com/Wechat-ggGitHub/Awesome-GitHub-Repo

相关推荐

Let’s Encrypt免费搭建HTTPS网站

HTTPS(全称:HyperTextTransferProtocoloverSecureSocketLayer),是以安全为目标的HTTP通道,简单讲是HTTP的安全版。即HTTP下加入...

使用Nginx配置TCP负载均衡(nginx tcp负载)

假设Kubernetes集群已经配置好,我们将基于CentOS为Nginx创建一个虚拟机。以下是实验种设置的详细信息:Nginx(CenOS8Minimal)-192.168.1.50Kube...

Nginx负载均衡及支持HTTPS与申请免费SSL证书

背景有两台minio文件服务器已做好集群配置,一台是192.168.56.41:9000;另一台是192.168.56.42:9000。应用程序通过Nginx负载均衡调用这两台minio服务,减轻单点...

HTTPS配置实战(https配置文件)

原因现在网站使用HTTPS是规范操作之一,前些日子买了腾讯云服务,同时申请了域名http://www.asap2me.top/,目前该域名只支持HTTP,想升级为HTTPS。关于HTTPS的链接过程大...

只有IP地址没有域名实现HTTPS访问方法

一般来说,要实现HTTPS,得有个注册好的域名才行。但有时候呢,咱只有服务器的IP地址,没注册域名,这种特殊情况下,也能照样实现HTTPS安全访问,按下面这些步骤来就行:第一步,先确认公网...

超详解:HTTPS及配置Django+HTTPS开发环境

众所周知HTTP协议是以TCP协议为基石诞生的一个用于传输Web内容的一个网络协议,在“网络分层模型”中属于“应用层协议”的一种。在这里我们并不研究该协议标准本身,而是从安全角度去探究使用该协议传输数...

Godaddy购买SSL之后Nginx配置流程以及各种错误的解决

完整流程:参考地址:https://sg.godaddy.com/zh/help/nginx-generate-csrs-certificate-signing-requests-3601生成NGI...

Nginx从安装到高可用,一篇搞定(nginx安装与配置详解)

一、Nginx安装1、去官网http://nginx.org/下载对应的nginx包,推荐使用稳定版本2、上传nginx到linux系统3、安装依赖环境(1)安装gcc环境yuminstallgc...

阿里云免费证书申请,配置安装,使用tomcat,支持http/https访问

参数说明商品类型默认已选择云盾证书服务(无需修改)。云盾证书服务类型SSL证书服务的类型。默认已选择云盾SSL证书(无需修改),表示付费版SSL证书。如果您需要免费领取或付费扩容DV单域名证书【免费试...

你试过两步实现Nginx的规范配置吗?极速生成Nginx配置小工具

NGINX是一款轻量级的Web服务器,最强大的功能之一是能够有效地提供HTML和媒体文件等静态内容。NGINX使用异步事件驱动模型,在负载下提供可预测的性能。是当下最受欢迎的高性能的Web...

从零开始搭建HTTPS服务(搭建https网站)

搭建HTTPS服务的最初目的是为了开发微信小程序,因为wx.request只允许发起HTTPS请求,并且还必须和指定的域名进行网络通信。要从零开始搭建一个HTTPS的服务需要下面4...

群晖NAS使用官网域名和自己的域名配置SSL实现HTTPS访问

安全第一步,群晖NAS使用官网域名和自己的域名配置SSL实现HTTPS访问【新手导向】NAS本质还是一个可以随时随地访问的个人数据存储中心,我们在外网访问的时候,特别是在公网IP下,其实会面临着很多安...

让网站快速升级HTTPS协议提高安全性

为什么用HTTPS网络安全越来越受到重视,很多互联网服务网站,都已经升级改造为https协议。https协议下数据包是ssl/tcl加密的,而http包是明文传输。如果请求一旦被拦截,数据就会泄露产生...

用Https方式访问Harbor-1.9版本(https访问流程)

我上周在头条号写过一篇原创文章《Docker-Harbor&Docker-kitematic史上最详细双系统配置手册》,这篇算是它的姊妹篇吧。这篇文章也将用到我在头条写的另一篇原创文章的...

如何启用 HTTPS 并配置免费的 SSL 证书

在Linux服务器上启用HTTPS并配置免费的SSL证书(以Let'sEncrypt为例)可以通过以下步骤完成:---###**一、准备工作**1.**确保域名已解析**...

取消回复欢迎 发表评论: