Front-end separation is now the dominant architectural design pattern, which is intended to improve code quality with the principle of “single responsibility” to achieve the purpose of saving manpower and reducing the loss of information during communication.

This article recommends nine open source projects that use the most popular technology stacks. The open source projects recommended for this article have been included in the Awesome GitHub Repo.

Awesome GitHub Repo is a collection of high quality, interesting open source projects on GitHub and organizes them into categories.

The open source set of projects is not simply categorized by programming language, but by more interesting categories such as: fun projects, sand sculpture projects, field projects, learning projects, utility tools, etc.

The open source projects recommended for this issue are:

1. Separate the blog system from the front and back ends

2. Separate the front and back end examination system

3. Typescript-based chat room projects

4. Human resource management open source project

5. A front and back end separation project for practice

6. Xuezisi open source examination system

  1. A back-end management system that separates the front and back ends

  2. Front and back end management platform one-stop scaffolding

  3. One series project: NiceFish

01

The front and back end separate blogging system

Spring Boot = Vue – Spring Boot = Vue – Spring Boot = Vue Spring Boot, Spring Security, JJWT, MyBatis, PageHelper, Redis, CommonMark-Java, IP2Region, Quartz, YAUaa.

Front-end core framework: Vue2. X, Vue Router, Vuex; The Vue project is built on @vue/cli4.x. JS dependencies and reference CSS: Axios, moment, nProgress, V-Viewer, PrismJS, APlayer, MetingJS, Lodash, mavonEditor, echarts, Tocbot, iCSS

02

Front and back end separate examination system

The project is an online examination system with a front – end separation. Spring Boot is used in the back end, VUE and Element-UI component library are used in the front end to complete the development.

03

Typescript-based chat room project

The project is a chat room, using full TypeScript development, chat room has a complete chat function, interested friends can fork to develop.

Technical selection: Typescript, vue2.6. x, Socket/ IO, Vuex, Nestjs, Typeorm, ES6+, SASS(SCSS).

04

Human resource management system

Micro hr is a human resource management system with the separation of front and back ends. The project adopts Spring Boot + Vue development. First of all, different users will see different system menus according to their roles after successful login. The complete menu is as follows:

The role of each user is assigned by the system administrator. The system administrator assigns roles to users as follows:

The system administrator can also manage the resources that different roles can operate. The following page is displayed:

Back-end stack: Spring Boot, Spring Security, MyBatis, MySQL, Redis, RabbitMQ, Spring Cache, WebSocket

Front-end technology stack: Vue, ElementUI, AXIos, VUE-Router, Vuex, WebSocket, VUE-CLI4

05

Front and rear end separation practice project

A pre – and post-detached blog project based on Spring Boot + Vue development, with super detailed development documentation and explanation videos. For those of you who have not been exposed to Vue development or the separation of the front and back ends, learn.

06

Open source examination system

Xuezisi open source examination system is a Java + Vue front and back end separate examination system. The main advantages are simple and quick development and deployment, friendly interface design and clear code structure.

Support Web side and wechat small program, can cover PC and mobile phones and other devices. Multiple deployment modes are supported: integrated deployment, front-end and back-end separated deployment, and Docker deployment.

07

Background management system

A back-end management system based on Spring Boot 2.1.0, Spring Boot Jpa, JWT, Spring Security, Redis, Vue.

The project adopts module development mode, RBAC is used for permission control, data dictionary and data permission management, one-click generation of front-end and back-end codes, and dynamic routing are supported.

Experience address: el-admin.xin

Account password: admin / 123456

08

Front and back end management platform one-stop scaffolding

Based on Spring Cloud and Ant Design Pro, this project realizes one-stop scaffolding of front and back end management platform, which is convenient for rapid development of enterprise-level applications. Our vision is based on Copy&Paste technology, to achieve programming for Google and Baidu, so that code farmers are not tired to move bricks, do a better citizen.

Preview address: admin.awesome-coder.com; User name and password: admin

If you enter localhost:8000, the login page is automatically displayed

Enter the user name and password admin/admin to go to the home page

Cookie中JWT Token

Monitor service localhost:8001 effect (if monitor service is enabled, user name and password are admin/admin)

Mobile effect

09

The little mermaid

NiceFish is a series of projects that aim to demonstrate the development patterns of front and back end separation: front-end browser, mobile, Electron; There are two versions of the backend: the SpringBoot version and the SpringCloud version.

GitHub project:

Source address: https://github.com/Wechat-ggGitHub/Awesome-GitHub-RepoCopy the code

Recommended reading

1. What are the fun projects on GitHub?