Campus SNS 校園社區後端接口開發（附前端地址）

使用 koa2 + Sequelize 搭建的校園社區後端，巧婦難為無米之炊！一個厲害的項目的後端！

前言及項目介紹#

這個項目是我剛學前端時參加的百度前端訓練營進階班的第一題，具備完善的校園社區功能及一個後台管理系統，于今年 3 月份開發，我負責的主要是後端的發帖管理、分區管理等地方的接口，在接口文檔中就可以看到。當時團隊裡總共 6 人，3 人參與開發後端，2 人開發移動端前端，1 人開發 PC 端，並且由於還年輕，寫了挺多文檔記錄。

個人感覺這個接口系統麻雀雖小五臟俱全（某後端爺評價），既有兩個前端（PC 端的後台管理系統和手機端的校園社區），又有後端完善的接口，倒挺適合新人初學，也確實有過學弟學妹來問我我問題，故打算完善一下寫篇博客總結一下。

後端項目一直運行在自己的雲伺服器上，可請求 http://cosine.ren:8000 嘗試（~~輕點打，求求了，雖然有備份~~），哪天要是掛了我也不好說，建議大家本地運行前後端嘗試～

個人認為優點是

文檔很齊全（接口文檔、開發文檔、bug 記錄...），這在以後的我看來也是很有用的事，實習之後就不怎麼寫文檔了
基本的增刪改查加上統計都有涉及到，接口規範遵循 Restful （老實說，當時不知道 restful 的概念但是自然而然的就用到了）
主要參數基本都有中間件進行校驗，權限控制等，代碼裡的註釋特別多
錯誤碼有專門的說明，接口函數都有註釋（實習之後愈發覺得這真的是太棒了...）

缺點問題也很明顯

分支管理壓根沒有（當時還不熟悉，加上大家開發的都是不同功能，直接在 master 分支開發並解決衝突）
很多功能實現簡單，畢竟工期也就快一個月
當時剛學，也沒有用 prettier 這類代碼格式化工具，也沒上 ts，現在的新項目基本會使用 ts

在線地址及項目演示#

上來先放源碼地址，當時是在 gitee 進行開發，後來我將後端同步到了 github

後端接口倉庫：campus-community-backend
前端（移動端）倉庫地址： campus-sns-campus-community（gitee）
前端（PC 端後台管理系統）倉庫地址：back-manage（gitee）
接口文檔地址：校園社區後端接口文檔

如果覺得不錯的話，就 star 一個吧～也歡迎提 issue 和 pr

後端接口#

接口文檔：https://www.apifox.cn/apidoc/shared-9459ed60-58b2-45b8-b5a8-89a63d77357f/api-11836993
倉庫鏈接： https://github.com/yusixian/campus-community-backend
主要技術棧： nodejs koa2 websocket sequelize
- 使用 PM2 將項目部署至雲伺服器，配置 Nginx 反向代理
- 使用 koa-cors 解決跨域問題，設置了錯誤日誌及日誌分割
- 利用 Sequelize ORM 進行數據庫的操作，使用 JWT 實現用戶身份驗證與信息加密，利用 WebSocket 實現在線用戶數監測
- 文章的軟刪除、恢復等

前端（PC 端後台管理系統）#

前端（PC 端後台管理系統）地址：https://gitee.com/honxinn/back-manage
基於 Vue3 + Vite 構建

前端（移動端）#

前端（移動端）倉庫地址：https://gitee.com/honxinn/campus-sns-campus-community
基於 Vue3 + Vite 構建

演示

開發文檔#

開發記錄文檔記錄了從 0 到 1 的搭建記錄，非常詳細的～

bug 回憶錄顧名思義，搭建過程中的問題記錄

接口功能說明#

目錄結構#

基本上見名知義

src
- app
  - errHandler.js錯誤統一處理函數
  - index.js進行 app 的實例化
- config
  - config.default.js 系統的默認配置文件，用 dotenv 讀取.env中的配置並暴露出來
- constant
  - err.type.js 錯誤類型的匯總 (常量)
- controller 所有的業務邏輯
  - article.controller.js 文章相關的業務邏輯
  - user.controller.js 所有用戶相關的業務邏輯
  - ……
- db
  - seq.js 連接數據庫的控制文件 (通過.env中默認配置連接本地數據庫)
- middleware 所有的中間件
  - article.middleware.js 文章相關的中間件
  - auth.middleware.js 解析 token 的中間件
  - user.middleware.js 用戶相關的中間件
  - ……
- model
  - article.model.js 文章信息的數據表文件
  - user.model.js 用戶信息的數據表文件
  - ……
- public 靜態資源的存儲
  - assets 存放圖片等資源文件
  - css 存放css文件
  - uploads 上傳的圖片存放地
- routers
  - article.route.js 文章相關的路由註冊
  - user.route.js 用戶相關的路由註冊
  - index.js 統一註冊路由
  - ……
- service
  - article.service.js 文章相關的數據庫操作
  - user.service.js 用戶相關的數據庫操作
  - ……
- views 存儲一些路由的模板
  - index.html 主路由的 html 模板
logs
- err.log 存放錯誤日誌
- out.log 存放輸出日誌
- seq.log 存放查詢日誌
main.js 導入封裝的 app 並在.env中指定的端口號進行監聽
.env 存儲配置信息
.gitignore git 提交默認忽略node_modules(下載的依賴文件)
package.json npm 的插件版本號等
一些文檔

運行方式（後端）#

# clone 項目
git clone https://github.com/yusixian/campus-community-backend.git
# cd到項目目錄
# 下載所需依賴
npm install

數據庫的相關配置#

1. 在本地打開數據庫 (一般都是默認打開的 mysql) 如果沒有打開使用 cmd 命令net start mysql
2. 登錄數據庫後建立一個數據庫，比如名字叫schoolcommunity，當然你也可以用navicat等來創建
3. 在本項目的 .env 文件中更新 mysql 的相關配置
4. 使用命令npm run createModel來創建所有的數據表

本地運行#

創建完數據庫後

npm install
npm run dev

開發心得#

作為一名前端人，這次後端接口的開發一是有了能獨立編寫自己的輕量接口的能力，二是也知道了跟後端溝通時應注意哪些細節問題，大家都不容易，三是寫接口文檔確實費時費力，有時候還會吃力不太好寫了忘記改，所以~~能夠擁有相當完善的接口文檔說明你的後端人特好~~。在今後開發的時候，最好也先按這種思路跟後端對齊一下，再進行開發，很多時候能節省不少功夫。

引用心圓佬引用阿里前端練習生計劃開營儀式中梓騫老師說的一段話來收個尾：

他們也許不懂交互設計 但是沒人比他們懂交互設計的實現以及每一個細節
他們也許不懂視覺設計 但是沒人比他們懂視覺設計如何變為現實
他們也許不懂數據庫 但是他們其實才是數據的第一消費者
他們也許不是產品經理 但是產品的體驗幾乎都是由他們來決定

~~好吧，我純粹就是喜歡這段話~~

我期望著盡可能做到多少都懂一些，努力做一個合格的前端人。

下次發文，應該就是開始做做 ts 類型體操了。