antd pro of vue学习使用

一、安装

 

在安装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\":\"修改\"},{\"act