总结后台开发经验

4 年前(已编辑)
学习
870
这篇文章上次修改于 3 年前，可能部分内容已经不适用，如有疑问可询问作者。

前些天在边学习边试着写一个后台管理系统，后台的前端是用 Vue + ElementUI 写的，只是一个大体的框架，后端是由 Express 驱动的，数据库是 Mongodb。

后台目前实现了文章、分类的管理以及用户登陆，后端提供了相应的接口。

后端方面

开始写后台之前首先是把前端的大体的界面呈现出来，这里简单的把 Element 官方提供的容器布局拿过来用，并没有太花时间在前端上。然后是后端方面，写路由和数据库操作就不多说了。重要的是路由方面的可复用性。一个接口写一次还好，但是后期可能会用到多次，只是每次的 URI 不同，所以写一套通用接口就必不可少了。可能在刚开始学习的小伙伴并不会注意到这点，导致最后代码越来越冗余，每次改一个地方需要修改多次。

通用接口

以我的后端路由为例，我的后端接口地址挂载在跟地址下的/admin/api下，为了保证以后能用同一个跟地址，所以可以定义一个路由，映射到/admin/api。

const app = require('express')()
app.use('/admin/api', router)

其次是写一个通用接口，比如查询文章和查询分类接口，其实只是查询的数据库模型不同而已。再比如删除等等。

为了避免通用接口和以后写的其他接口冲突，可以给通用接口加一个前缀，一般为/rest/。那么我们写的全部挂载到 router 上。

app.use('/admin/api/rest/:res', router)

那么在写接口时如查询接口为GET / ，可以这么去写。

router.get('/', async (req, res) => {
    if (req.Model.modelName === 'Category') {
      const isEdit = req.query.edit === 'false' ? false : req.query.edit
      const cateList = await req.Model.find().populate('parents')
      if (isEdit) {
        const index = cateList.findIndex(el => el._id == isEdit)
        cateList.splice(index, 1)
      }
      res.send(cateList)
      return
    }
    const model = await req.Model.find()
    res.send(model)
  })

通用接口是写了，那么还要去获取参数，根据参数去加载相应的模型，这个时候命名规范和文件树结构规范就很重要了。

一般的，后端使用这样的文件树结构。

├──admin                 //路由相关 外层可以由 router 文件夹包含
    └── index.js  // 路由入口
├── middlewares // 中间件存放路径
    ├── auth.js
    └── resource.js
├── models // 模型
    ├── AdminUser.js
    ├── Category.js
    └── Post.js
├── node_modules 
    ...
├── plugins // 插件相关
    └── db.js
└── uploads // 上传,静态文件存放

模型以帕斯卡（pascal）命名法来命名，单数，接口地址以下划线命名法，复数。

比如/posts为接口地址，对应模型为Post.在加载指定模型时使用中间件(inflection 库)来转换单词大小写。

const resource = async (req, res, next) => {
  const ModelName = require('inflection').classify(req.params.res)
  req.Model = require(`../models/${ModelName}`) // 处理后挂载到请求体上
  next()
}

module.exports = options => {
  return resource
}

使用函数方式导出变量，方便日后重构和扩展功能。

前端方面

前端主要是和后端接口紧密相连。前端一般使用 axios 获取后端接口进行交互。首先引入 axios 模块，挂载到 Vue 原型中，方便日后调用，由于是前端模块化，所以这里也可以做成一个模块，方便日后修改。

我的前端文件树是这样的。

../admin/src
├── App.vue  // 主模板
├── components // 组件
├── main.js // 主入口
├── plugins // 插件
│   ├── axios.js
│   └── element.js
├── router.js // 路由入口
└── views // 视图
    ├── CreateArticle.vue
    ├── EditAdminUser.vue
    ├── EditArticle.vue
    ├── EditCategory.vue
    ├── ListAdminUser.vue
    ├── ListArticle.vue
    ├── ListCategory.vue
    ├── Login.vue
    └── Main.vue

模块封装

在 plugins 中自定义 axios 模块。

import axios from 'axios'
const http = axios.create({
  baseURL: 'http://localhost:3000/admin/api'
})
// ...
export default http

把 axios 重新进行一次封装，可以日后方便的引入 axios 的拦截器，等等。在入口文件中，对 axios 和 Vue 进行绑定。

import http from '../plugins/axios'
Vue.prototype.$http = http

视图可复用性

比如编辑和新建，视图应该是差不多的，只是获取数据和提交的接口不同，一样的布局不需要写 2 次相同的代码，修改起来也不太好操作。可以使用通过路由在判断，是修改还是新建视图。

以我的路由接口为例，新建为 posts/create，编辑为 posts/edit/5d354bc760840663bd4cf933，很明显编辑中有_id的参数，那么可以通过路由中有没有_id参数判断就行了。在路由中加入 props： true 获取当前的参数。

 children: [
        // 使用子路由, 父路由中的组件必须要存在 router-view 标签才能显示
        {
          path: '/posts/create',
          component: EditArticle
        },
        {
          path: '/posts/edit/:id',
          component: EditArticle,
          props: true
        },
        // ....

由于编辑文章需要提前向后端获取数据，所以可以这么写。

 props: {
    id: {}
  },
 methods: {
    fetch() {
      this.$http.get("rest/posts/" + this.$route.params.id).then(res => {
        this.article = res.data;
      });
    },
    fetchCategory() {
      this.$http.get("rest/categories").then(res => {
        this.categories = res.data;
      });
    },
},
 created() {
    if (this.id) {
      this.fetch();
    }
    this.fetchCategory();
  },
  //...
评论区加载中...