这篇文章上次修改于 4 个月前,可能其部分内容已经发生变化,如有疑问可询问作者。
前些天在边学习边试着写一个后台管理系统,后台的前端是用 Vue + ElementUI 写的,只是一个大体的框架,后端是由 Express 驱动的,数据库是 Mongodb。
后台目前实现了文章、分类的管理以及用户登陆,后端提供了相应的接口。

后端方面

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

通用接口

以我的后端路由为例,我的后端接口地址挂载在跟地址下的/admin/api下,为了保证以后能用同一个跟地址,所以可以定义一个路由,映射到/admin/api
其次是写一个通用接口,比如查询文章和查询分类接口,其实只是查询的数据库模型不同而已。再比如删除等等。
为了避免通用接口和以后写的其他接口冲突,可以给通用接口加一个前缀,一般为/rest/。那么我们写的全部挂载到 router 上。
那么在写接口时如查询接口为GET / ,可以这么去写。
通用接口是写了,那么还要去获取参数,根据参数去加载相应的模型,这个时候命名规范和文件树结构规范就很重要了。
一般的,后端使用这样的文件树结构。
模型以帕斯卡(pascal)命名法来命名,单数,接口地址以下划线命名法,复数。
比如/posts为接口地址,对应模型为Post.在加载指定模型时使用中间件(inflection 库)来转换单词大小写。
使用函数方式导出变量,方便日后重构和扩展功能。

前端方面

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

模块封装

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

视图可复用性

比如编辑和新建,视图应该是差不多的,只是获取数据和提交的接口不同,一样的布局不需要写 2 次相同的代码,修改起来也不太好操作。可以使用通过路由在判断,是修改还是新建视图。
以我的路由接口为例,新建为 posts/create,编辑为 posts/edit/5d354bc760840663bd4cf933,很明显编辑中有_id的参数,那么可以通过路由中有没有_id参数判断就行了。在路由中加入 props: true 获取当前的参数。
由于编辑文章需要提前向后端获取数据,所以可以这么写。

亲亲留个评论再走呗

正在加载评论区...