注册页布局
- 将登录的代码复制到注册页面
- 添加验证密码框
<Form.Item name="confirm" dependencies={['password']} hasFeedback rules={[ { required: true, message: 'Please confirm your password!', }, ({ getFieldValue }) => ({ validator(_, value) { if (!value || getFieldValue('password') === value) { return Promise.resolve(); } return Promise.reject(new Error('The two passwords that you entered do not match!')); }, }), ]} > <Input.Password size="large" prefix={<LockOutlined className="site-form-item-icon" />} placeholder='请再次输入密码'/> </Form.Item> 复制代码
将路由跳转修改
<Form.Item> <Link to="/login">已有账号？前往登录</Link> </Form.Item> 复制代码
将按钮修改为“立即注册”
<Form.Item> <Button type="primary" htmlType="submit" block size='large'> 立即注册 </Button> </Form.Item> 复制代码
- 实现效果
Request封装
1、接口文档
本项目的接口文档：xiaoyaoji.cn/project/1kS…， 密码：zhaowenxian
在src下创建request目录，并在其中创建request.js及api.js。
2、封装axios请求
request.js：
import axios from 'axios' // 配置项 const axiosOption = { baseURL: 'http://47.93.114.103:6688/manage', timeout: 5000 } // 创建一个单例 const instance = axios.create(axiosOption); // 添加请求拦截器 instance.interceptors.request.use(function (config) { return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); // 添加响应拦截器 instance.interceptors.response.use(function (response) { // 对响应数据做点什么 return response.data; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); }); export default instance; 复制代码
注意：这里并没有考虑token，后面会添加。
- 测试baseUrl
http://47.93.114.103:6688/manage
3、api.js
api.js暂时可定以下格式，后续项目中再修改：
import request from './request' export const xxApi = () => request.get('/xx') 复制代码
- 书写注册接口
// 引入request import request from './request' // 注册 export const RegisterApi = (params) => request.post('/register', params) 复制代码
- 在Register.jsx中引入RegisterApi
import {RegisterApi} from '../request/api' 复制代码
- 在 onFinish函数中使用RegisterApi，但是需要先解决跨域问题
1、解决跨域
如果你已经进行了 npm run eject ，建议你直接修改 config>webpackDevServer.config.js ：
proxy: { '/api': { target: 'http://47.93.114.103:6688/manage', // 后台服务地址以及端口号 changeOrigin: true, //是否跨域 pathRewrite: { '^/api': '/' } } } 复制代码
将 http://47.93.114.103:6688/manage 替换成为api。
将 request.js： 的baseUrl进行修改
// 配置项 const axiosOption = { baseURL: '/api', timeout: 5000 } 复制代码
- 在Request.js文件的onFinish函数书写请求。
const onFinish = (values) => { RegisterApi({ username: values.username, password: values.password }).then(res=>{ if(res.errCode===0){ message.success(res.message); // 跳到登录页 setTimeout(()=>navigate('/login'), 1500) }else{ message.error(res.message); } }) }; 复制代码
- 跳转路由是使用的hook。
import {Link, useNavigate} from 'react-router-dom' if(res.errCode===0){ message.success(res.message); // 跳到登录页 setTimeout(()=>navigate('/login'), 1500) } 复制代码
- 未注册
- 已注册
