Campus SNS Community Backend Interface Development (with Frontend Address)

A campus community backend built with koa2 + Sequelize, a powerful backend for an impressive project!

Introduction and Project Overview#

This project was the first task I participated in during the advanced class of the Baidu Frontend Training Camp when I just started learning frontend development. It features a complete campus community functionality and a backend management system, developed in March of this year. I was mainly responsible for the backend interfaces related to post management, partition management, etc., which can be seen in the API documentation. At that time, there were a total of 6 people in the team, with 3 involved in backend development, 2 developing the mobile frontend, and 1 developing the PC frontend. Since we were still young, I wrote quite a bit of documentation.

I personally feel that this interface system, though small, is comprehensive (as a certain backend developer commented). It has two frontends (the backend management system for PC and the mobile campus community), as well as a complete backend interface, making it quite suitable for beginners. Indeed, I have had junior students come to me with questions, so I plan to improve it and write a blog to summarize.

The backend project has been running on my own cloud server, and you can try accessing it at http://cosine.ren:8000 (~~please be gentle, I beg you, although there is a backup~~). If it goes down one day, I can't say for sure, so I recommend everyone to run the frontend and backend locally for testing~

I believe the advantages are:

Documentation is very complete (API documentation, development documentation, bug records...), which I find very useful for the future; I hardly write documentation after my internship.
Basic CRUD operations along with statistics are all covered, and the API specifications follow Restful (to be honest, I didn't know the concept of restful at the time, but I naturally used it).
Most parameters have middleware for validation, permission control, etc., and there are many comments in the code.
Error codes have dedicated explanations, and API functions are well-commented (after my internship, I increasingly feel this is really great...).

The disadvantages are also quite obvious:

Branch management was nonexistent (I wasn't familiar at the time, and since everyone was developing different features, we directly developed on the master branch and resolved conflicts).
Many features were simple to implement, as the development period was only about a month.
I had just started learning and didn't use formatting tools like prettier, nor did I use TypeScript; now, new projects basically use TypeScript.

Online Address and Project Demonstration#

First, here is the source code address. At that time, development was done on Gitee, and later I synced the backend to GitHub.

Backend API Repository: campus-community-backend
Frontend (Mobile) Repository Address: campus-sns-campus-community (Gitee)
Frontend (PC Backend Management System) Repository Address: back-manage (Gitee)
API Documentation Address: Campus Community Backend API Documentation

If you think it's good, please give it a star~ Issues and PRs are also welcome.

Backend API#

API Documentation: https://www.apifox.cn/apidoc/shared-9459ed60-58b2-45b8-b5a8-89a63d77357f/api-11836993
Repository Link: https://github.com/yusixian/campus-community-backend
Main Technology Stack: nodejs koa2 websocket sequelize
- Deployed the project to the cloud server using PM2, configured Nginx for reverse proxy.
- Used koa-cors to solve cross-origin issues, set up error logging and log splitting.
- Utilized Sequelize ORM for database operations, used JWT for user authentication and information encryption, and used WebSocket for monitoring online user counts.
- Implemented soft delete, recovery, etc., for articles.

Frontend (PC Backend Management System)#

Frontend (PC Backend Management System) Address: https://gitee.com/honxinn/back-manage
Built on Vue3 + Vite

Frontend (Mobile)#

Frontend (Mobile) Repository Address: https://gitee.com/honxinn/campus-sns-campus-community
Built on Vue3 + Vite

Demo

Development Documentation#

Development Record Document records the setup from 0 to 1, very detailed~

Bug Memoir records the issues encountered during the setup process.

API Functionality Description#

Directory Structure#

Basically self-explanatory

src
- app
  - errHandler.js Unified error handling function
  - index.js Instantiates the app
- config
  - config.default.js Default configuration file for the system, reads configurations from .env and exposes them
- constant
  - err.type.js Summary of error types (constants)
- controller All business logic
  - article.controller.js Business logic related to articles
  - user.controller.js All business logic related to users
  - ……
- db
  - seq.js Control file for connecting to the database (connects to the local database using default configurations in .env)
- middleware All middleware
  - article.middleware.js Middleware related to articles
  - auth.middleware.js Middleware for parsing tokens
  - user.middleware.js Middleware related to users
  - ……
- model
  - article.model.js Data table file for article information
  - user.model.js Data table file for user information
  - ……
- public Storage for static resources
  - assets Stores images and other resource files
  - css Stores css files
  - uploads Storage for uploaded images
- routers
  - article.route.js Route registration related to articles
  - user.route.js Route registration related to users
  - index.js Unified route registration
  - ……
- service
  - article.service.js Database operations related to articles
  - user.service.js Database operations related to users
  - ……
- views Stores some route templates
  - index.html HTML template for the main route
logs
- err.log Stores error logs
- out.log Stores output logs
- seq.log Stores query logs
main.js Imports the encapsulated app and listens on the port specified in .env
.env Stores configuration information
.gitignore Default git ignore for node_modules (downloaded dependency files)
package.json npm plugin version numbers, etc.
Some documentation

Running Method (Backend)#

# clone the project
git clone https://github.com/yusixian/campus-community-backend.git
# cd to the project directory
# download required dependencies
npm install

Database Configuration#

1. Open the database locally (usually the default MySQL is open). If not, use the cmd command net start mysql.
1. After logging into the database, create a database, for example, named schoolcommunity. Of course, you can also use tools like navicat to create it.
1. Update the MySQL configuration in the .env file of this project.
1. Use the command npm run createModel to create all the data tables.

Local Running#

After creating the database:

npm install
npm run dev

Development Insights#

As a frontend developer, this backend interface development has given me the ability to independently write my own lightweight interfaces and has also made me aware of the details to pay attention to when communicating with backend developers. Everyone has their challenges. Additionally, writing API documentation is indeed time-consuming and labor-intensive; sometimes it can be hard to write and I forget to make changes, so ~~having a well-documented API indicates that your backend developer is really good~~. In future development, it’s best to align with the backend first according to this approach before proceeding, as it can save a lot of effort.

To conclude, I would like to quote a segment from a speech by Teacher Ziqian during the opening ceremony of the Alibaba Frontend Intern Program:

They may not understand interaction design, but no one understands the implementation of interaction design and every detail better than they do.
They may not understand visual design, but no one understands how visual design becomes reality better than they do.
They may not understand databases, but they are actually the primary consumers of data.
They may not be product managers, but the experience of the product is almost entirely determined by them.

~~Well, I just really like this quote~~

I hope to understand as much as possible and strive to be a qualified frontend developer.

In the next article, I will probably start doing some TypeScript type gymnastics.