2.md

写一个mod模块玩玩

首先我们拿一个mod模块来写一下前端页面，定义一些写的规则和方法，方便以后复制粘贴.

tag: 0.3.1

后端

操作

运行前操作:

• 第一种方式: 执行下面的命令

python manage.py makemigrations account
python manage.py migrate
python manage.py create_super_user 123456

create_super_user：后面是密码，用户名是固定的admin

• 第二种方式: 导入data/sql/rurality.sql文件

直接导入sql文件，已经创建好了admin用户，密码为123456

运行服务:

python manage.py runserver 0.0.0.0:8000

前面第一章第十五节已经介绍过使用gunicorn来运行服务，但是我们在开发阶段，直接使用django自带的服务功能即可.
注意，这里使用的端口为8000，因为我在前端代码中已经写了请求后端地址为127.0.0.1:8000，因此两个端口要一致.

涉及文件

account/controllers/user.py
data/sql/rurality.sql

代码

主要是修改了当前用户信息接口，如果是admin用户，就写死了返回的内容.
现在我们只去完成mod模块的功能，因此就先mods设置到['mod'].
而permissions设置成['admin']，代表是超级管理员权限.
其它用户就正常搜索，返回对应mod和permission的标识符列表即可.

---

增加has_permission方法，用于统一判断用户是否拥有某一个权限.

前端

涉及文件

src/main.js
src/store/modules/permission.js
src/layout/components/Navbar.vue
src/api/system/mod/url.js
src/api/system/mod/index.js
src/views/system/mod/index.vue
src/views/system/mod/components/ObjDialog/index.vue
src/router/modules/system.js
src/router/index.js

概念

我这里把模块、角色、部门、用户、权限这些功能模块统一划入到系统设置中，一会在写路由时，会在顶层弄出来一个System.
其它模块在System模块下，成为子模块.

代码

src/main.js：去掉里面的英文设置，主要是为了在分页上显示的是中文.

---

src/store/modules/permission.js: 修正菜单生成方式，根据mods来生成.

---

src/layout/components/Navbar.vue：因为我这里用户不需要头像，所以在登录后，右上角直接显示用户名称.
并且去掉无用的下拉内容，只保留退出选项.

---

src/api/system/mod/url.js和src/api/system/mod/index.js:
这两个文件用来存储mod相关的url和接口调用方法.
主要是为了方便管理不同功能的不同url和接口，都写入独立的文件中.
其它模块的参照这个格式来写，直接复制粘贴，替换就很方便.

---

src/views/system/mod/index.vue、src/views/system/mod/components/ObjDialog/index.vue:
这是实现了一个典型的列表页及增删改一条记录的页面.
这里有一个原则就是在复制粘贴的时候，改动尽可能的少.

import {
  deleteModApi as deleteObjApi,
  getModListApi as getObjListApi
} from '@/api/system/mod'

导入接口时，都通过as重命名成Obj，下面所有都使用Obj的名称，这样复制粘贴后，只需要修改这里就够了.
而创建和编辑通过独立的文件ObjDialog来实现，这样复制后，名字都不用改.
在ObjDialog文件中，根据传入的status来决定是创建还是编辑，编辑时，需要调用一次获取信息的接口，保证数据是最新的.

---

src/router/modules/system.js、src/router/index.js:
创建system路由文件，并增加mod的路由，这里注意meta中需要增加sign，并且这个sign的值要与后端存储的值相同.
还有就是icon这里可以使用原本项目中实现的icon也可以配置成ele中的icon.
最后把新的路由配置到src/router/index.js中的asyncRoutes中.
我们这里要注意一点，在router中name这个值要和views中name一致，要不然在noCache: false时，不生效。

操作

以上完成后，就可以通过npm run dev来运行，进行验证了.
使用admin用户登录后，并没有系统设置这个菜单，只有模块管理.
这是因为设置了当子模块只有一个时，就不显示父级名称，直接显示子模块名称.

下面我们就可以通过页面来创建我们需要用到的模块了.

模块名称	唯一标识	排序值
用户管理	user	30
角色管理	role	25
部门管理	department	20
模块管理	mod	10

创建完这些模块后，就完成了.