一步步搭建react后台系统4

一步一步构件react后台系统4 之注册页面

添加注册页面

1. 添加页面

• views/register/index
  这里依然采用ant里面的Form注册组件
  其他新增的或修改的会打上标记， 没打标记的， 都是ant的form注册组件

import React from 'react'   // +
import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, AutoComplete } from 'antd';
import { validatorPhone } from '@/utils/index'  // +
import './index.css'  // +
const FormItem = Form.Item;
const Option = Select.Option;
const AutoCompleteOption = AutoComplete.Option;

class RegistrationForm extends React.Component {
    state = {
        confirmDirty: false,
        autoCompleteResult: []
    };

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }
        });
    }

    handleConfirmBlur = (e) => {
        const value = e.target.value;
        this.setState({ confirmDirty: this.state.confirmDirty || !!value });
    }

    compareToFirstPassword = (rule, value, callback) => {
        const form = this.props.form;
        if (value && value !== form.getFieldValue('password')) {
            callback('Two passwords that you enter is inconsistent!');
        } else {
            callback();
        }
    }

    validateToNextPassword = (rule, value, callback) => {
        const form = this.props.form;
        if (value && this.state.confirmDirty) {
            form.validateFields(['confirm'], { force: true });
        }
        callback();
    }

    handleWebsiteChange = (value) => {
        let autoCompleteResult;
        if (!value) {
            autoCompleteResult = [];
        } else {
            autoCompleteResult = ['.com', '.org', '.net'].map(domain => `${value}${domain}`);
        }
        this.setState({ autoCompleteResult });
    }
    // 获取验证码， 传递给父组件
    getCaptcha = (e) => {  // +
        var num = Math.floor(Math.random()*10000)
        this.props.handleCaptcha(num)
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const { autoCompleteResult } = this.state;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 8 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 16,
                    offset: 8,
                },
            },
        };
        const prefixSelector = getFieldDecorator('prefix', {
            initialValue: '86',
        })(
            
                +86
                +87
            
        );

        const websiteOptions = autoCompleteResult.map(website => (
            {website}
        ));
        // +- 里面的组件都修改了。
        return (
            

                

                

                    
                        {getFieldDecorator('username', {
                            rules: [{
                                message: '请输入用户名称',
                            }, {
                                required: true, message: '用户名称必填',
                            }],
                        })(
                            
                        )}
                    
                    
                        {getFieldDecorator('password', {
                            rules: [{
                                required: true, message: '请输入用户密码!',
                            }, {
                                validator: this.validateToNextPassword,
                            }],
                        })(
                            
                        )}
                    
                    
                        {getFieldDecorator('confirm', {
                            rules: [{
                                required: true, message: '请验证密码',
                            }, {
                                validator: this.compareToFirstPassword,
                            }],
                        })(
                            
                        )}
                    
                    
                        {getFieldDecorator('phone', {
                            rules: [{ required: true, message: '请输入正确的手机号码' },
                                {validator: validatorPhone.bind(this)()} //  + 添加了验证手机正则
                            ],
                        })(
                            
                        )}
                    
                    
                        
                            
                                {getFieldDecorator('captcha', {
                                    rules: [{ required: true, message: '请输入正确的验证码' }],
                                })(
                                      // +  只读
                                )}
                            
                            
                                获取验证码   // +- 添加验证码事件
                            
                        
                    
                     电子邮箱
                        )}
                    >
                        {getFieldDecorator('email', {
                            rules: [{ required: false, message: '请输入电子邮箱', whitespace: true }],
                        })(
                            
                        )}
                    
                    
                        注册
                    
                
                
            
        );
    }
}

// 当input发生改变时， 调用父传递过来的事件。
const onFieldsChange = (props, changeFields) => {
    props.onChange(changeFields)
}
// 接受到值， 并注入Form组件内
const mapPropsToFields = props => {
    let captcha = props.captcha
    captcha && captcha.value && captcha.errors && delete captcha.errors  // 当存在值的时候， 删除errors
    return {
        username: Form.createFormField({
            ...props.username,
        }),
        password: Form.createFormField({
            ...props.password
        }),
        confirm: Form.createFormField({
            ...props.confirm
        }),
        phone: Form.createFormField({
            ...props.phone
        }),
        captcha: Form.createFormField({
            ...props.captcha
        }),
        email: Form.createFormField({
            ...props.email
        })
    }
}
// value改变事件
const onValuesChange = (_, values) => {
}

const WrappedRegistrationForm = Form.create({onFieldsChange, mapPropsToFields, onValuesChange})(RegistrationForm);

// 传递参数给form组件
class Register extends React.Component {
    state = {
        fields: {
            username: {
                value: '我是useranme默认值'
            }
        }
    }
    // 当input的value发生改变， 就改变值，
    handleFormChange = (changedFields) => {
        this.setState(({fields}) => {
            return {
                fields: {...fields, ...changedFields}
            }
        })
    }
    // 点击获取验证码事件。
    handleCaptcha = (captchaValue) => {
        this.setState(({fields}) => {
            let captcha = { // 合并captcha对象， 修改value
                ...((typeof fields.captcha === 'object') ? fields.captcha : {}),
                value: captchaValue
            }
            return {
                fields: {...fields, captcha}
            }
        })
    }
    render () {
        let fields = this.state.fields
        return (
            

                
            
        )
    }
}

export default Register

• views/register/index.css

.register {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    background: #f3f3f3;
}
.register>.register-form {
    width: 60%;
    height: auto;
    padding: 36px;
    -webkit-box-shadow: 0 0 100px rgba(0, 0, 0, 0.08);
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.08);
    background: #fff;
}

#root{
    height: 100%;
}
.App{
    height: 100%;
}

• utils/index

export const validatorPhone = function () {
    return (rule, value, callback) => {
        const form = this.props.form;
        if (value && !(/^1[3|4|5|8][0-9]\d{4,8}$/.test(form.getFieldValue('phone'))) ) {
            callback('请输入正确的手机号码');  还没有账号？ 去注册
        } else {
            callback();
        }
    }
}

• views/login/index.js

添加一个注册入口

  还没有账号？ 去注册

• router/index.js

别忘了， 添加到路由配置里面
注意: 这里添加了一个meta对象， 用来自定义一些参数。
@params: isAuth 是否不需要验证（是否登录）

import React from 'react'
import Login from '@/views/login/index'
import Index from '@/views/index/index'
import Register from '@/views/register/index' // +
import { RenderRoutes } from '@/router/utils'
const Ui = ({routes}) => (

    
Ui
    
    
)
const Button = () => 
Button
const Icon = () => 
Icon
const Animation = () => 
Animation
const From = () => 
From


export const menus = [    // 菜单相关路由
    { path: '/index/UI', name: 'UI', icon:'video-camera', component: Ui , routes: [
            {path: '/index/UI/button', name: '按钮', icon: 'video-camera', component: Button },
            {path: '/index/UI/Icon', name: '图标', icon: 'video-camera', component: Icon }
        ]
    },
    { path: '/index/animation', name: '动画', icon: 'video-camera', component: Animation },
    { path: '/index/form', name: '表格', icon: 'video-camera', component: From },
]
// isAuth 表示不用验证是否登录
export const main = [
    { path: '/login', exact: true, name: '登录', component: Login, meta: { // +-
            isAuth: true
        } },
    { path: '/register', exact: true, name: '注册', component: Register, meta: { // +
            isAuth: true
        }  },
    { path: '/', exact: true,  name: '首页', Redirect: '/index'},
    {
        path: '/index', name: '首页', component: Index,
        routes: menus
    }
]

export const routerConfig =  {
    main, menus
}

• router/utils.js

修改渲染组件，
当路径是 不需要验证是否登录的页面 的时候， 就不进行判断是否重定向到登录页面了。

// 渲染当前组件
export const RouteWithSubRoutes = route => ({
           var isAuthenticated  = sessionStorage.getItem('isAuthenticated')
            if ( !(typeof route.meta === 'object' && route.meta.isAuth) && !isAuthenticated ) {  // +-
                return 
            }
            return (
                route &&( route.Redirect ? () :
                ())
            )
        }}
    />
);

就这样， 页面做好了。

查看github代码
切换Log 到
添加注册页面， 修改路由配置， 修改路由渲染组件， 修改重定向登录规则
即可看到当前代码。

2. 添加后台接口

注册页面做好了， 但是需要后台接口， 这里添加后台接口。
先打开后台项目。

修改package.json 添加打开项目快捷方式

"nodemon": "nodemon bin/www"  // +

然后运行项目

npm run nodemon

• 修改routes/index.js

// 添加接口

const utils = require ('../utils/index')
let { isEmpty }  = utils

router.post('/register', async (ctx, next) => {
    let body = ctx.request.body
    let username = body.username;
    let password = body.password;
    let captcha = body.captcha;
    let phone = body.phone;
    console.log(body)
    if (isEmpty(username)) {
        ctx.body = {
            code: 0,
            message: "用户名不能为空",
        }
    }
    else if (isEmpty(password)) {
        ctx.body = {
            code: 0,
            message: "密码不能为空",
        }
    }
    else if (isEmpty(captcha)) {
        ctx.body = {
            code: 0,
            message: "验证码不能为空",
        }
    }
    else if (isEmpty(phone)) {
        ctx.body = {
            code: 0,
            message: "手机号码不能为空",
        }
    } else {
        ctx.body = {
            code: 200,
            message: "注册成功",
        }
    }
})

• /utils/index.js

新增工具

const isEmpty = (text) => {
    if (text) {
        return false
    }
    return true
}
module.exports = {
    isEmpty
}

好了 后台接口做好了。

3. 添加接口请求

• views/register/index
  这里把 connect 的参数都放到connect里面， 因为（每次都需要引用action ，太过繁琐，放到一个页面统一管理也很方便）
  this.props.hanleRegister(values) 执行传递过来的接口事件

import {connect} from "react-redux";  // +
import { mapReigster } from '@/reducer/connect.js' // +
handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
                this.props.hanleRegister(values)  // +
            }
        });
    }


const WrappedRegistrationForm = connect( mapReigster.mapStateToProps, mapReigster.mapDispatchToProps )(Form.create({onFieldsChange, mapPropsToFields, onValuesChange})(RegistrationForm));  // +-

• reducer/connect.js

这里把创建action创建函数都封装起来import { receive } from '@/reducer/actionCreate.js'
封装一个fetchPosts事件， 用来请求数据并切换数据。
添加 mapReigster
添加 mapLogin （这里顺便把登录里面的connect参数也提取出来了）

import { action_slidecollapsed, routerConfig, action_login } from '@/reducer/action.js'
import http from '@/api/http.js'  // +
import { receive } from '@/reducer/actionCreate.js' // +
import { ACTION_LOGIN, ACTION_REGISTER } from '@/reducer/action.js' // +

export const mapStateToProps = (state) => {
    console.log(state)
    return {slidecollapsed:  state.slidecollapsed,
        isSlide: false,
    }
}
export const mapDispatchToProps = (dispatch) => {
    return {onSlidecollapsed: () => dispatch(action_slidecollapsed), getRouterConfig: () => {
            return dispatch(routerConfig)
        }, toggleSlide: () => {
        dispatch({type: action_slidecollapsed.type})
    }}
}

export const crumbsMap = {
    mapStateToProps (state) {
        return { routerConfig: state.routerConfig }
    },
    mapDispatchToProps (dispatch) {
        return {getRouterConfig: () => {
                return dispatch(routerConfig)
            }}
    }
}
@params: url 接口路径
@params: actionType action.type
@params: subreddit 数据名称
@params: data