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

最新推荐文章于 2024-07-25 22:29:58 发布

置顶 hewie_th

最新推荐文章于 2024-07-25 22:29:58 发布

阅读量1.7w

点赞数 9

分类专栏： react

本文链接：https://blog.csdn.net/TH226/article/details/83047495

版权

react 专栏收录该内容

10 篇文章 4 订阅

订阅专栏

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

新建项目参考博客

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

在开始之前，推荐先学习一下redux的简单使用

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

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
login
register

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