《CMS后台系统》项目实战详细分解（三）

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第12天，点击查看活动详情。

注册页布局

将登录的代码复制到注册页面
添加验证密码框

 <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)
  }

未注册

已注册

《CMS后台系统》项目实战 详细分解（三）