1、首先是新建專案，並引入相關依賴

新建專案參考部落格

在開始之前，推薦先學習一下redux的簡單使用

相關庫：

npm install redux --save
npm run eject 展示出所有配置
npm install express --save
npm install -g nodemon //每次修改之後不需要手動重啟server.js
npm install mongoose --save
npm install antd-mobile --save
npm install babel-plugin-import --save 按需載入
npm install redux --save
npm install redux-thunk --sava   處理非同步操作
npm install react-redux --save  自動連線react和redux


npm install babel-plugin-transform-decorators-legacy --save-dev   裝飾器外掛
   在package.json中配置 
   "plugins": [
      "transform-decorators-legacy"
    ]
報錯：
最後使用
"devDependencies": {
    "@babel/plugin-proposal-decorators": "^7.1.0"
  },
"plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ]
    ]
    
npm install react-router-dom --save
npm install axios --save   前後端聯調
    配置："proxy":"http://localhost:9093" 處理跨域請求
npm install cookie-parser --save  使用cookie
 

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

注：此部分程式碼提交的簡介為first commit，在檢視原始碼時按照順序看循序漸進，會更容易理解。如果覺得寫得不錯，希望給個start。