一、安装
在安装antd之前，请确保已安装node，git，yarn以及开发工具vscode。
下载：git clone --depth=1 https://github.com/sendya/ant-design-pro-vue.git my-project
安装：yarn install
运行：yarn run serve
二、vscode设置
安装中文简体插件和eslint插件，eslint用于规范代码格式。
在vscode中选择文件-》首选项-》设置，搜索eslint，建议添加如下配置到setting.json中，添加之后可以自动格式化代码和进行错误提示。
{
"vetur.format.defaultFormatter.js": "prettier-eslint",
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"wrap_attributes": "force-aligned"
},
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
// "editor.formatOnSave": true, // 保存时自动格式化 --vscode编辑器自带自动格式化会与设置的eslint规范有所冲突导致eslint报错
"prettier.eslintIntegration": true, // 让prettier使用eslint的代码格式进行校验 （如果未安装prettier或者不需要prettier格式化可以不用设置prettier这些属性）
"prettier.semi": false, // 去掉代码结尾的分号
"prettier.singleQuote": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
} // 使用带引号替代双引号
}
三、基础搭建
1.登录接口
由于采用前后端分离模式，后端使用php，存在跨域问题，所以要在根目录vue.config.js中设置devServer如下：
devServer: {
// development server port 8000
port: 8001,
// If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
proxy: {
'/api': {
target: 'http://localhost/01.doscss/',
ws: false,
changeOrigin: true
}
}
}
将.env，.env.development，.env.preview文件的VUE_APP_API_BASE_URL设置为空，即去掉之前的/api。
因为由后端提供接口，所以需要去掉模拟数据mock，注释掉src/main.js下的行import './mock'。
antd在处理登录是，密码是在前端用md5加密的，现在放在后端加密。所以去掉之前的md5加密，直接传递密码到后端。
在src/api/login.js下维护了很多接口，之前的接口地址都是调用mock里面的接口，所以需要修改为后端实际的接口地址为/api/site/login/。后端php要返回状态码，否则会被作为正常请求而提示登录成功。对于用户名或者密码错误的情况，后端要返回401。
要注意后端接口的返回格式要与前端一致，格式如下：
[
'code' => 200,
'message' => '',
'result' => [
'avatar' => "https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png",
'createTime' => 1497160610259,
'creatorId' => "admin",
'deleted' => 0,
'id' => "F6e1005C-f7BB-CE7B-1fD5-3bc7F6bc1bc8",
'lang' => "zh-CN",
'lastLoginIp' => "27.154.74.117",
'lastLoginTime' => 1534837621348,
'name' => "Edward Martin",
'password' => "",
'roleId' => "admin",
'status' => 1,
'telephone' => "",
'token' => "4291d7da9005377ec9aec4a71ea837f",
'username' => "admin",
],
'timestamp' => time()
]
2.获取用户信息接口
登陆成功后，前端会请求用户个人信息接口，位置在src/api/login.js里面的getInfo方法。注意修改接口地址url为后端对应地址，json格式如下：
'{"message":"","timestamp":1576201776933,"result":{"id":"4291d7da9005377ec9aec4a71ea837f","name":"天野远子","username":"admin","password":"","avatar":"/avatar2.jpg","status":1,"telephone":"","lastLoginIp":"27.154.74.117","lastLoginTime":1534837621348,"creatorId":"admin","createTime":1497160610259,"merchantCode":"TLif2btpzg079h15bk","deleted":0,"roleId":"admin","role":{"id":"admin","name":"管理员","describe":"拥有所有权限","status":1,"creatorId":"system","createTime":1497160610259,"deleted":0,"permissions":[{"roleId":"admin","permissionId":"dashboard","permissionName":"仪表盘","actions":"[{\"action\":\"add\",\"defaultCheck\":false,\"describe\":\"新增\"},{\"action\":\"query\",\"defaultCheck\":false,\"describe\":\"查询\"},{\"action\":\"get\",\"defaultCheck\":false,\"describe\":\"详情\"},{\"action\":\"update\",\"defaultCheck\":false,\"describe\":\"修改\"},{\"action\":\"delete\",\"defaultCheck\":false,\"describe\":\"删除\"}]","actionEntitySet":[{"action":"add","describe":"新增","defaultCheck":false},{"action":"query","describe":"查询","defaultCheck":false},{"action":"get","describe":"详情","defaultCheck":false},{"action":"update","describe":"修改","defaultCheck":false},{"action":"delete","describe":"删除","defaultCheck":false}],"actionList":null,"dataAccess":null},{"roleId":"admin","permissionId":"exception","permissionName":"异常页面权限","actions":"[{\"action\":\"add\",\"defaultCheck\":false,\"describe\":\"新增\"},{\"action\":\"query\",\"defaultCheck\":false,\"describe\":\"查询\"},{\"action\":\"get\",\"defaultCheck\":false,\"describe\":\"详情\"},{\"action\":\"update\",\"defaultCheck\":false,\"describe\":\"修改\"},{\"action\":\"delete\",\"defaultCheck\":false,\"describe\":\"删除\"}]","actionEntitySet":[{"action":"add","describe":"新增","defaultCheck":false},{"action":"query","describe":"查询","defaultCheck":false},{"action":"get","describe":"详情","defaultCheck":false},{"action":"update","describe":"修改","defaultCheck":false},{"action":"delete","describe":"删除","defaultCheck":false}],"actionList":null,"dataAccess":null},{"roleId":"admin","permissionId":"result","permissionName":"结果权限","actions":"[{\"action\":\"add\",\"defaultCheck\":false,\"describe\":\"新增\"},{\"action\":\"query\",\"defaultCheck\":false,\"describe\":\"查询\"},{\"action\":\"get\",\"defaultCheck\":false,\"describe\":\"详情\"},{\"action\":\"update\",\"defaultCheck\":false,\"describe\":\"修改\"},{\"action\":\"delete\",\"defaultCheck\":false,\"describe\":\"删除\"}]","actionEntitySet":[{"action":"add","describe":"新增","defaultCheck":false},{"action":"query","describe":"查询","defaultCheck":false},{"action":"get","describe":"详情","defaultCheck":false},{"action":"update","describe":"修改","defaultCheck":false},{"action":"delete","describe":"删除","defaultCheck":false}],"actionList":null,"dataAccess":null},{"roleId":"admin","permissionId":"profile","permissionName":"详细页权限","actions":"[{\"action\":\"add\",\"defaultCheck\":false,\"describe\":\"新增\"},{\"action\":\"query\",\"defaultCheck\":false,\"describe\":\"查询\"},{\"action\":\"get\",\"defaultCheck\":false,\"describe\":\"详情\"},{\"action\":\"update\",\"defaultCheck\":false,\"describe\":\"修改\"},{\"action\":\"delete\",\"defaultCheck\":false,\"describe\":\"删除\"}]","actionEntitySet":[{"action":"add","describe":"新增","defaultCheck":false},{"action":"query","describe":"查询","defaultCheck":false},{"action":"get","describe":"详情","defaultCheck":false},{"action":"update","describe":"修改","defaultCheck":false},{"action":"delete","describe":"删除","defaultCheck":false}],"actionList":null,"dataAccess":null},{"roleId":"admin","permissionId":"table","permissionName":"表格权限","actions":"[{\"action\":\"add\",\"defaultCheck\":false,\"describe\":\"新增\"},{\"action\":\"import\",\"defaultCheck\":false,\"describe\":\"导入\"},{\"action\":\"get\",\"defaultCheck\":false,\"describe\":\"详情\"},{\"action\":\"update\",\"defaultCheck\":false,\"describe\":\"修改\"}]","actionEntitySet":[{"action":"add","describe":"新增","defaultCheck":false},{"action":"import","describe":"导入","defaultCheck":false},{"action":"get","describe":"详情","defaultCheck":false},{"action":"update","describe":"修改","defaultCheck":false}],"actionList":null,"dataAccess":null},{"roleId":"admin","permissionId":"form","permissionName":"表单权限","actions":"[{\"action\":\"add\",\"defaultCheck\":false,\"describe\":\"新增\"},{\"action\":\"get\",\"defaultCheck\":false,\"describe\":\"详情\"},{\"action\":\"query\",\"defaultCheck\":false,\"describe\":\"查询\"},{\"action\":\"update\",\"defaultCheck\":false,\"describe\":\"修改\"},{\"action\":\"delete\",\"defaultCheck\":false,\"describe\":\"删除\"}]","actionEntitySet":[{"action":"add","describe":"新增","defaultCheck":false},{"action":"get","describe":"详情","defaultCheck":false},{"action":"query","describe":"查询","defaultCheck":false},{"action":"update","describe":"修改","defaultCheck":false},{"action":"delete","describe":"删除","defaultCheck":false}],"actionList":null,"dataAccess":null},{"roleId":"admin","permissionId":"order","permissionName":"订单管理","actions":"[{\"action\":\"add\",\"defaultCheck\":false,\"describe\":\"新增\"},{\"action\":\"query\",\"defaultCheck\":false,\"describe\":\"查询\"},{\"action\":\"get\",\"defaultCheck\":false,\"describe\":\"详情\"},{\"action\":\"update\",\"defaultCheck\":false,\"describe\":\"修改\"},{\"action\":\"delete\",\"defaultCheck\":false,\"describe\":\"删除\"}]","actionEntitySet":[{"action":"add","describe":"新增","defaultCheck":false},{"action":"query","describe":"查询","defaultCheck":false},{"action":"get","describe":"详情","defaultCheck":false},{"action":"update","describe":"修改","defaultCheck":false},{"action":"delete","describe":"删除","defaultCheck":false}],"actionList":null,"dataAccess":null},{"roleId":"admin","permissionId":"permission","permissionName":"权限管理","actions":"[{\"action\":\"add\",\"defaultCheck\":false,\"describe\":\"新增\"},{\"action\":\"get\",\"defaultCheck\":false,\"describe\":\"详情\"},{\"action\":\"update\",\"defaultCheck\":false,\"describe\":\"修改\"},{\"action\":\"delete\",\"defaultCheck\":false,\"describe\":\"删除\"}]","actionEntitySet":[{"action":"add","describe":"新增","defaultCheck":false},{"action":"get","describe":"详情","defaultCheck":false},{"action":"update","describe":"修改","defaultCheck":false},{"action":"delete","describe":"删除","defaultCheck":false}],"actionList":null,"dataAccess":null},{"roleId":"admin","permissionId":"role","permissionName":"角色管理","actions":"[{\"action\":\"add\",\"defaultCheck\":false,\"describe\":\"新增\"},{\"action\":\"get\",\"defaultCheck\":false,\"describe\":\"详情\"},{\"action\":\"update\",\"defaultCheck\":false,\"describe\":\"修改\"},{\"action\":\"delete\",\"defaultCheck\":false,\"describe\":\"删除\"}]","actionEntitySet":[{"action":"add","describe":"新增","defaultCheck":false},{"action":"get","describe":"详情","defaultCheck":false},{"action":"update","describe":"修改","defaultCheck":false},{"action":"delete","describe":"删除","defaultCheck":false}],"actionList":null,"dataAccess":null},{"roleId":"admin","permissionId":"table","permissionName":"桌子管理","actions":"[{\"action\":\"add\",\"defaultCheck\":false,\"describe\":\"新增\"},{\"action\":\"get\",\"defaultCheck\":false,\"describe\":\"详情\"},{\"action\":\"query\",\"defaultCheck\":false,\"describe\":\"查询\"},{\"action\":\"update\",\"defaultCheck\":false,\"describe\":\"修改\"},{\"action\":\"delete\",\"defaultCheck\":false,\"describe\":\"删除\"}]","actionEntitySet":[{"action":"add","describe":"新增","defaultCheck":false},{"action":"get","describe":"详情","defaultCheck":false},{"action":"query","describe":"查询","defaultCheck":false},{"action":"update","describe":"修改","defaultCheck":false},{"action":"delete","describe":"删除","defaultCheck":false}],"actionList":null,"dataAccess":null},{"roleId":"admin","permissionId":"user","permissionName":"用户管理","actions":"[{\"action\":\"add\",\"defaultCheck\":false,\"describe\":\"新增\"},{\"action\":\"import\",\"defaultCheck\":false,\"describe\":\"导入\"},{\"action\":\"get\",\"defaultCheck\":false,\"describe\":\"详情\"},{\"action\":\"update\",\"defaultCheck\":false,\"describe\":\"修改\"},{\"action\":\"delete\",\"defaultCheck\":false,\"describe\":\"删除\"},{\"action\":\"export\",\"defaultCheck\":false,\"describe\":\"导出\"}]","actionEntitySet":[{"action":"add","describe":"新增","defaultCheck":false},{"action":"import","describe":"导入","defaultCheck":false},{"action":"get","describe":"详情","defaultCheck":false},{"action":"update","describe":"修改","defaultCheck":false},{"action":"delete","describe":"删除","defaultCheck":false},{"action":"export","describe":"导出","defaultCheck":false}],"actionList":null,"dataAccess":null},{"roleId":"admin","permissionId":"support","permissionName":"超级模块","actions":"[{\"action\":\"add\",\"defaultCheck\":false,\"describe\":\"新增\"},{\"action\":\"import\",\"defaultCheck\":false,\"describe\":\"导入\"},{\"action\":\"get\",\"defaultCheck\":false,\"describe\":\"详情\"},{\"action\":\"update\",\"defaultCheck\":false,\"describe\":\"修改\"},{\"action\":\"delete\",\"defaultCheck\":false,\"describe\":\"删除\"},{\"action\":\"export\",\"defaultCheck\":false,\"describe\":\"导出\"}]","actionEntitySet":[{"action":"add","describe":"新增","defaultCheck":false},{"action":"import","describe":"导入","defaultCheck":false},{"action":"get","describe":"详情","defaultCheck":false},{"action":"update","describe":"修改","defaultCheck":false},{"action":"delete","describe":"删除","defaultCheck":false},{"action":"export","describe":"导出","defaultCheck":false}],"actionList":null,"dataAccess":null}]}},"code":200,"_headers":{"Custom-Header":"4ea1Bdb7-1EBC-3Ab2-dACd-d0F9db7Eb9D2"}}'
3.注销接口
前端调用接口位置在src/api/login.js里面的logout方法，接口返回格式如下：
['message' => '注销成功', 'result' => ['isLogin' => true], 'timestamp' => time()]
4.菜单栏接口
前端调用接口位置在src/api/login.js里面的getCurrentUserNav方法，前端默认是使用src/config/router.config.js里面的静态菜单，即import permission from './modules/permission' 。要通过后端接口获取菜单，则应使用src/store/index.js里面的import permission from './modules/async-router'，注释掉静态的import。接口格式如下：
['message' => '', 'result' => [
['name' => "dashboard",
'parentId' => 0,
'id' => 1,
'meta' => [
'icon' => "dashboard",
'title' => "仪表盘",
'show' => true
],
'component' => "RouteView",
"redirect" => "/dashboard/workplace"
],
['name' => "workplace",
'parentId' => 1,
'id' => 7,
'meta' => [
'title' => "工作台",
'show' => true
],
'component' => "Workplace",
],
[
'name' => 'form',
'parentId' => 0,
'id' => 10,
'meta' => [
'icon' => 'form',
'title' => '表单页'
],
'redirect' => '/form/base-form',
'component' => 'PageView'
],
[
'name' => 'basic-form',
'parentId' => 10,
'id' => 6,
'meta' => [
'title' => '基础表单'
],
'component' => 'BasicForm'
],
[
'name' => 'list',
'parentId' => 0,
'id' => 10010,
'meta' => [
'icon' => 'table',
'title' => '列表页',
'show' => true
],
'redirect' => '/list/table-list',
'component' => 'PageView'
],
[
'name' => 'table-list',
'parentId' => 10010,
'id' => 10011,
'path' => '/list/table-list/:pageNo([1-9]\d*)?',
'meta' => [
'title' => '查询表格',
'show' => true
],
'component' => 'TableList'
],
[
'name' => 'newRouter',
'parentId' => 0,
'id' => 11055,
'meta' => [
'icon' => 'table',
'title' => '用户管理',
'show' => true
],
'redirect' => '/new-router/ahaha',
'component' => 'PageView'
],
[
'name' => 'ahaha',
'parentId' => 11055,
'id' => 11060,
'path' => '/new-router/ahaha',
'meta' => [
'title' => '用户列表',
'show' => true
],
'component' => 'AhahaView'
],
], "code" => 200, "_headers" => ["Custom-Header" => "CAdbA605-b747-ffCF-79C2-62f15bdFA7E7"], 'timestamp' => time()]
四、增删改查
1.建立新菜单
比如要新增一个菜单用户管理，用户管理下面是用户列表，通过后端返回
[
'name' => 'newRouter',
'parentId' => 0,
'id' => 11055,
'meta' => [
'icon' => 'table',
'title' => '用户管理',
'show' => true
],
'redirect' => '/new-router/ahaha',
'component' => 'PageView'
],
[
'name' => 'ahaha',
'parentId' => 11055,
'id' => 11060,
'path' => '/new-router/ahaha',
'meta' => [
'title' => '用户列表',
'show' => true
],
'component' => 'AhahaView'
]
要在前端src/views下面新建目录new-router，再在其下面建立AhahaView.vue文件，父级目录用户管理的component为PageView，子菜单用户列表的component为AhahaView，在使用组件AhahaView前要在src/router/generator-routers.js下面声明如下才可使用：
'AhahaView': () => import(/* webpackChunkName: "TestWork" */ '@/views/new-router/AhahaView')
2.用户列表接口
在前端src/api/manage.js里面自定义了一个方法getUserList2，获取请求后端用户列表接口，代码如下：
export function getUserList2 (parameter) {
return axios({
url: api.userlist,
method: 'get',
params: parameter
})
}
后端返回接口格式如下：
[
'code' => 0,
'message' => '',
'result' => [
'data' => $data,
'pageNo' => $pageNo,
'pageSize' => 10,
'totalCount' => $count,
'totalPage' => 1
],
'timestamp' => time(),
]
前端通过如下代码加载数据：
loadData: parameter => {
console.log('loadData.parameter', parameter)
return getUserList2(Object.assign(parameter, this.queryParam))
.then(res => {
return res.result
})
}
3.新增以及修改用户接口
上图中CreateForm.vue为新增用户时的弹框，EditForm.vue为修改用户时的弹框，需要在src/api/manage.js里面新增两个方法如下：
export function addUser (parameter) {
return axios({
url: api.adduser,
method: 'post',
data: parameter
})
}
export function editUser (parameter) {
return axios({
url: api.edituser,
method: 'post',
data: parameter
})
}
来源：CSDN
作者：挺住我先走
链接：https://blog.csdn.net/xiaoxinshuaiga/article/details/103595423