react项目实战二登录注册页面的完成

Z时代
2024-01-10
分类：综合

react

1、首先是新建项目，并引入相关依赖

新建项目参考博客

https://blog.csdn.net/TH226/article/details/83014317

2、文件目录结构

文件目录结构

│ .gitignore │ list.txt │ package-lock.json │ package.json │ README.md │ ├─config ├─public ├─scripts ├─server │ model.js │ server.js │ user.js └─src │ config.js │ index.css │ index.js │ reducer.js │ ├─component │ ├─authroute │ │ authroute.js │ │ │ └─logo │ job.png │ logo.css │ logo.js │ ├─container │ ├─login │ │ login.js │ │ │ └─register │ register.js │ └─redux user.redux.js

各个文件夹的介绍

server

文件夹是为了与数据库连接，我们此部分这里只做一个简单的配置，在后续的文章中我会继续介绍，

compoent

存放公共组件

container

redux

存放各个对象模块的对应组件状态变化的处理

index.js

项目主架构，组件的组合

reducer.js

所有的reducer在这个里边合并

config.js

项目的一些相关配置

3、开始编码

首先我们来构建登录注册的页面

如图所示，登录注册页面都分为上下两个部分，其中上部是logo，下部分是输入框，

所以我们可以抽离出来三个组件

logo

logo

import React from 'react'
import logoImg from './job.png'
import './logo.css'
class Logo extends React.Component{
    render(){
        return (
            <div className="logo-container">
                <img className="logo-img" src={logoImg} alt=""/>
            </div>
        )
    }
}
export default Logo

login

import React from 'react'
import Logo from '../../component/logo/logo.js'
import {List,InputItem,WingBlank,WhiteSpace,Button} from 'antd-mobile'
class Login extends React.Component{
    constructor(props){
        super(props);
        //绑定this时间，如果不绑定，无法传递this
        this.register = this.register.bind(this);
    }
    register(){
        console.log(this.props);
        //跳转到注册页面
        this.props.history.push('/register')
    }
    render(){
        return (
            <div>
                <Logo></Logo>
                <h2>我是登录页</h2>
                <WingBlank>
                    <List>
                        <InputItem>用户名</InputItem>
                        <InputItem  type="password">密码</InputItem>
                    </List>
                    <WhiteSpace/>
                    <Button type="primary">登录</Button>
                    <WhiteSpace/>
                    <Button onClick={this.register} type="primary">注册</Button>
                </WingBlank>
            </div>
        )
    }
}
export default Login

register

import React from 'react'
import Logo from '../../component/logo/logo'
import {List,InputItem,WingBlank,WhiteSpace,Button,Radio} from 'antd-mobile'
import {connect} from 'react-redux'
import {register} from '../../redux/user.redux'
import '../../index.css'
@connect(
    state => state.user,
    {register}
)
class Register extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            user:'',
            pwd:'',
            repeatpwd:'',
            type:'genius',
        }
        this.handleRegister = this.handleRegister.bind(this)
    }
    //调用redux/user.redux中的register方法，判断是否可以注册
    handleRegister(){
        this.props.register(this.state)
        // console.log(this.state);
    }
    //监控输入框的变化，及时更新state中的值
    handleChange(key,val){
        this.setState({
            [key]:val
        })
    }
    render(){
        const RadioItem = Radio.RadioItem
        return (
            <div>
                <Logo></Logo>
                <WingBlank>
                    <List>
                        {this.props.msg?<p className="error-msg">{this.props.msg}</p>:null}
                        <InputItem onChange={v=>this.handleChange('user',v)}>用户名</InputItem>
                        <InputItem onChange={v=>this.handleChange('pwd',v)} type="password">密码</InputItem>
                        <InputItem onChange={v=>this.handleChange('repeatpwd',v)} type="password">确认密码</InputItem>
                        <RadioItem onChange={()=>this.handleChange('type','genius')} checked={this.state.type=='genius'}>
                            牛人
                        </RadioItem>
                        <RadioItem onChange={()=>this.handleChange('type','boss')} checked={this.state.type=='boss'}>
                            boss
                        </RadioItem>
                    </List>
                    <WhiteSpace/>
                    <Button type="primary" onClick={this.handleRegister}>注册</Button>
                    <WhiteSpace/>
                </WingBlank>
            </div>
        )
    }
}
export default Register

authroute 是用来判断输入的链接地址是否符合要求以及用户登录情况，进而判断是否跳转

import React from 'react'
import axios from 'axios'
import {withRouter} from 'react-router-dom'
//进行判断是否登陆并进行路由跳转
@withRouter
class AuthRoute extends React.Component{
    componentDidMount(){
        const publicList = ['/login','/register']
        const pathname = this.props.location.pathname
        //判断输入的链接是否符合要求
        if(publicList.indexOf(pathname)>-1){
            return null
        }
        //获取用户信息
        axios.get('/user/info').then(res=>{
            //判断是否登录，如果没有登录，则跳转到登录界面
            if(res.status==200){
                if(res.data.code==0){
                }else{
                    this.props.history.push('/login')
                }
                console.log(res.data);
            }
        })
        //用户状态：是否登陆 
        //现在的URL地址  login是不需要跳转的
        //用户的身份是boss还是牛人
        //用户是否完善信息（头像，简介）
    }
    render(){
        return null
    }
}
export default AuthRoute

源码下载：https://github.com/TH226/react-muke

注：此部分代码提交的简介为first commit，在查看源码时按照顺序看循序渐进，会更容易理解。如果觉得写得不错，希望给个start。

以上是 react项目实战二登录注册页面的完成的全部内容，来源链接： utcz.com/z/381318.html

react项目实战二 登录注册页面的完成