《CMS后台系统》项目实战详细分解（三）-阿里云开发者社区

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

2022-11-11 99

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

注册页布局

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

微信截图_20221111205852.png

<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>
复制代码

实现效果

微信截图_20221111205933.png

Request封装

1、接口文档

本项目的接口文档：xiaoyaoji.cn/project/1kS…，密码：zhaowenxian

在src下创建request目录，并在其中创建request.js及api.js。

微信截图_20221111205954.png

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

微信截图_20221111210017.png

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'
复制代码

微信截图_20221111210044.png

在 onFinish函数中使用RegisterApi，但是需要先解决跨域问题

1、解决跨域

如果你已经进行了 npm run eject ，建议你直接修改 config>webpackDevServer.config.js ：

proxy: {
  '/api': {
    target: 'http://47.93.114.103:6688/manage', // 后台服务地址以及端口号
    changeOrigin: true, //是否跨域
    pathRewrite: { '^/api': '/' }
  }
}
复制代码

微信截图_20221111210108.png

将 http://47.93.114.103:6688/manage 替换成为api。

将 request.js：的baseUrl进行修改

微信截图_20221111210127.png

// 配置项
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);
      }
    })
  };
复制代码

微信截图_20221111210154.png

跳转路由是使用的hook。

import {Link, useNavigate} from 'react-router-dom'
if(res.errCode===0){
        message.success(res.message);
        // 跳到登录页
        setTimeout(()=>navigate('/login'), 1500)
  }
复制代码