banner
cos

cos

愿热情永存,愿热爱不灭,愿生活无憾
github
tg_channel
bilibili

Campus SNS 校园社区后端接口开发(附前端地址)

使用 koa2 + Sequelize 搭建的校园社区后端,巧妇难为无米之炊!一个厉害的项目的后端!

前言及项目介绍#

这个项目是我刚学前端时参加的百度前端训练营进阶班的第一题,具备完善的校园社区功能及一个后台管理系统,于今年 3 月份开发,我负责的主要是后端的发帖管理、分区管理等地方的接口,在接口文档中就可以看到。当时团队里总共 6 人,3 人参与开发后端,2 人开发移动端前端,1 人开发 PC 端,并且由于还年轻,写了挺多文档记录。

个人感觉这个接口系统麻雀虽小五脏俱全(某后端爷评价),既有两个前端(PC 端的后台管理系统和手机端的校园社区),又有后端完善的接口,倒挺适合新人初学,也确实有过学弟学妹来问我我问题,故打算完善一下写篇博客总结一下。

后端项目一直运行在自己的云服务器上,可请求 http://cosine.ren:8000 尝试(轻点打,求求了,虽然有备份),哪天要是挂了我也不好说,建议大家本地运行前后端尝试~

个人认为优点

  • 文档很齐全(接口文档、开发文档、bug 记录...),这在以后的我看来也是很有用的事,实习之后就不怎么写文档了
  • 基本的增删改查加上统计都有涉及到,接口规范遵循 Restful (老实说,当时不知道 restful 的概念但是自然而然的就用到了)
  • 主要参数基本都有中间件进行校验,权限控制等,代码里的注释特别多
  • 错误码有专门的说明,接口函数都有注释(实习之后愈发觉得这真的是太棒了...)

缺点问题也很明显

  • 分支管理压根没有(当时还不熟悉,加上大家开发的都是不同功能,直接在 master 分支开发并解决冲突)
  • 很多功能实现简单,毕竟工期也就快一个月
  • 当时刚学,也没有用 prettier 这类代码格式化工具,也没上 ts,现在的新项目基本都会使用 ts

在线地址及项目演示#

上来先放源码地址,当时是在 gitee 进行开发,后来我将后端同步到了 github

如果觉得不错的话,就 star 一个吧~也欢迎提 issue 和 pr

后端接口#

image.png

image.png

image.png

image.png

前端(PC 端后台管理系统)#

image.png

image.png

image.png

image.png

image.png

image.png

image.png

前端(移动端)#

演示
image.pngimage.png
image.pngimage.png
image.pngimage.png

开发文档#

开发记录文档 记录了从 0 到 1 的搭建记录,非常详细的~

bug 回忆录 顾名思义,搭建过程中的问题记录

接口功能说明#

  • 功能实现
    • 数据统计
      • 获取社区十大热帖
      • 获取社区十大红人
      • 近 7 日文章增长量等统计
    • 用户管理 user
      • 上传头像
      • 修改用户信息
    • 文章管理 article
      • 添加文章
      • 删除 / 屏蔽文章
      • 获取文章总数
      • 恢复被删除 / 屏蔽文章
    • 评论管理 comment
      • 回复文章
      • 回复评论
    • 分区管理 partition
      • 添加分区
      • 删除分区
      • 自定义分区图标
    • 系统管理
      • 在线用户
      • 操作日志
    • 用户的注册及登录
      • 用户信息修改等
    • 普通用户功能
      • 发帖 (新发布帖子待管理员审核通过后方可发布)
      • 编辑
      • 删除自己的帖子
    • 管理员功能
      • 帖子修改、删除功能
      • 屏蔽、恢复功能
      • 帖子审核功能
    • 可选功能
      • 支持模糊搜索、搜索关键字联想
      • 支持点赞
      • 支持收藏
      • 支持发图片

目录结构#

基本上见名知义

  • 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 类型体操了。

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.