总结后台开发经验

Innei

发布于 2021-12-28 11:46:50

7840

发布于 2021-12-28 11:46:50

文章被收录于专栏：静之森

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

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

后端方面

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

通用接口

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

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

COPY

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

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

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

COPY

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

1router.get('/', async (req, res) => {
2    if (req.Model.modelName === 'Category') {
3      const isEdit = req.query.edit === 'false' ? false : req.query.edit
4      const cateList = await req.Model.find().populate('parents')
5      if (isEdit) {
6        const index = cateList.findIndex(el => el._id == isEdit)
7        cateList.splice(index, 1)
8      }
9      res.send(cateList)
10      return
11    }
12    const model = await req.Model.find()
13    res.send(model)
14  })

COPY

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

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

1├──admin 				//路由相关 外层可以由 router 文件夹包含
2    └── index.js  // 路由入口
3├── middlewares // 中间件存放路径
4    ├── auth.js
5    └── resource.js
6├── models // 模型
7    ├── AdminUser.js
8    ├── Category.js
9    └── Post.js
10├── node_modules 
11    ...
12├── plugins // 插件相关
13    └── db.js
14└── uploads // 上传,静态文件存放

COPY

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

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

1const resource = async (req, res, next) => {
2  const ModelName = require('inflection').classify(req.params.res)
3  req.Model = require(`../models/${ModelName}`) // 处理后挂载到请求体上
4  next()
5}
6
7module.exports = options => {
8  return resource
9}

COPY

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

前端方面

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

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

1../admin/src
2├── App.vue  // 主模板
3├── components // 组件
4├── main.js // 主入口
5├── plugins // 插件
6│   ├── axios.js
7│   └── element.js
8├── router.js // 路由入口
9└── views // 视图
10    ├── CreateArticle.vue
11    ├── EditAdminUser.vue
12    ├── EditArticle.vue
13    ├── EditCategory.vue
14    ├── ListAdminUser.vue
15    ├── ListArticle.vue
16    ├── ListCategory.vue
17    ├── Login.vue
18    └── Main.vue

COPY

模块封装

在 plugins 中自定义 axios 模块。

1import axios from 'axios'
2const http = axios.create({
3  baseURL: 'http://localhost:3000/admin/api'
4})
5// ...
6export default http

COPY

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

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

COPY

视图可复用性

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

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

1 children: [
2        // 使用子路由, 父路由中的组件必须要存在 router-view 标签才能显示
3        {
4          path: '/posts/create',
5          component: EditArticle
6        },
7        {
8          path: '/posts/edit/:id',
9          component: EditArticle,
10          props: true
11        },
12		// ....

COPY

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

1 props: {
2    id: {}
3  },
4 methods: {
5    fetch() {
6      this.$http.get("rest/posts/" + this.$route.params.id).then(res => {
7        this.article = res.data;
8      });
9    },
10    fetchCategory() {
11      this.$http.get("rest/categories").then(res => {
12        this.categories = res.data;
13      });
14    },
15},
16 created() {
17    if (this.id) {
18      this.fetch();
19    }
20    this.fetchCategory();
21  },
22  //...

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019-07-26，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript