v2-7010664e8dcc8574d7a9c900d0c632a3_b.gif
后台管理系统的登录与注册
一、登录页的模板样式搭建
1、使用 antd 模板，找到栅格系统，按照文档对你的登录页面做出你喜欢的修改，这里需要注意的是，在做提交按钮时，记得要阻止浏览器的默认事件，不然他会刷新浏览器，还有就是函数组件中没有 this 所以如果你需要做事件绑定的话，最好采用类组件
2. 接下来，进行登录校验，没什么好说的了，就是看文档，由于我用的是 antd 封装好的表单，下面我说几个值得注意一下的东西
Form.create()(Login) //用来创建一个实例对象，不创建里面的组件没办法传props，他里面有一个 this.props.form ，这个东西里面有很多 antd 已经封装好的方法
2. 创建了实例对象后，我们可以在监听表单提交的事件函数里使用它自带的 validateFields 方法，可以打印出我们输入在输入框的内容，当然，默认输出的是一个空对象，要想得到我们在表单输入的内容，还得要进行双向数据绑定
3. getFieldDecorator( id, options ) ，用于实现数据的双向绑定！！！也是 this.props.form 里面自带的函数，第一个参数必填输入控件唯一标志。支持嵌套式的写法，一般写个名字就好，后面的是各种方法、规则，自己看文档了解即可，做完这个，我们就可以算是基本实现了表单的校验了
二、 后端接口的制作
1. 之前我们创建了两个仓库，一个是前端的，一个是后端接口的，那么我们现在来做一下后端接口。首先，在本地创建一个 student-api 的文件夹，在里面进行npm 与 git 的初始化
1. npm init -y
2. git init
2. 安装所需要用到的插件
npm install --save json-server
npm install --save express
npm install --save axios
npm install --save bcryptjs //密码加密
3. 在文件根目录下创建一个 .gitignore，在里面写上需要忽略的文件，例：
image.png
4. 在文件根目录下创建一个 server.js 和 db.json 文件, 在这个 db.json 文件下先创建一个 users 数组
image.png
5. 在 server.js 文件下写下如下代码
image.png
6. 做完以上步骤后记得在 package.json 文件下修改如下代码，做完，就可以 npm run dev 启动数据了，也可以 localhost://9090/users 访问我们的假数据（IP地址访问也可以）
image.png
7. 以上，做一个简单的胆码提交，与前端页面一致，要在 develop 分支进行操作
1. git add .
2. git commit -m 'init'
3. git remote add origin 你的仓库地址
4. git push -u origin master
5. git checkout -b develop
6. git push -u origin develop
7. 在远程仓库里修改 develop 为默认分支，合并时在改回来
三、注册接口的实现
1. 首先引入 axios，要用 axios 先引入，然后要记得配置 axios 的默认路由，不然它找不到假数据的路由
const Axios = require ( 'axios' )
Axios.defaults.baseURL = 'http://localhost:9090'
2. 自己实现一个注册的接口，获取前端输入框传过来的数据，并将它传入假数据中的 users 中，代码示例如下
server.post('/login-up', async ( req, res ) => {
// 1、获取前端传过来的数据
// 2、直接使用 Axios 来调用 json-server 的 users 这个接口来存进去
// 3、存进去之前要先查询假数据中是否有该用户名，有的话就不给注册，没有的话则注册成功
const response = await Axios.get( '/users', { params: { username: req.body.username } } )
if ( response.data.length > 0 ) {
res.send ( {
code: -1,
msg: '用户名已被注册过了'
} )
return
}
const { data } = await Axios.post( '/users', req.body )
res.send( {
code: 0,
msg: '注册成功',
data
} )
} )
3. 密码加密，下载 bcryptjs 用时记得引入
const bcryptjs = require ( 'bryptjs' )
将这里的 req.body
image.png
改成如下对象即可！！！！
{
...req.body,
password: await bcryptjs.hash ( req.body.password, 10 )
}
四、登录接口的实现（后端接口已做完）
image.png
写完后，出现下面这个页面就是验证通过了，即可进行一次远程提交
image.png
五、 回到前端页面，实现前后端交互
1. 在 src 文件夹下面创建一个 api 文件，里面创建一个 UserApi.js 文件，代表用户相关的 API
2. 既有接口，肯定就有 ajax 请求，这里我选用 axios 请求数据，所以要在项目里安装 axios ，然后再 UserApi.js 里面引用 axios，这里有一个和后端接口一样的问题，就是要配置 axios 的默认路由，不然容易出问题，这里的 axios 配置，要配置在最外层，也就是 src 下的 index.js 里面
image.png
注意！！！这里有个小补充，如果你想像 vue 一样给 src 配置一个别名的话，在 config-overrides.js 文件下加入我画红线的内容即可，配不配置看个人选择
image.png
3. UserApi.js 文件里面的内容是这样的，然后我们将 UserApi 引进注册页面，写下如下代码
image.png
image.png
此时，浏览器会报错，报的是跨域的错，这时我们应该在后端的 server.js 文件中配置如下代码，代码里面的请求头浏览器有给出，这时只需复制粘贴即可
image.png
image.png
注意！！！ 虽然上面存在跨域的问题，但是我们的数据已经存进了我们的假数据里面了，做完上面这样我们已经初步完成了前后端的注册校验了，接下来只需要在优化一下全局弹框即可，因为用 alert 的弹框有点不高大上、、、这个自己看 antd 的文档即可
4. 引入弹框时，它可以接收3个参数，一个是 msg， 消失的时间， 消失后做的一个回调函数，代码如下，自己看文档理解
image.png
5. 完善注册页面，引入 button 按钮的 loading 特效，代码如下
image.png
image.png
image.png
6. 在 server.js 文件下加一个延时的功能，当然这样做只是为了方便自己看，项目上线时还是要把这个延时函数删除的
image.png
