react專案實現登入註冊

阿新 • • 發佈：2018-12-05

eact專案中實現登入註冊簡單粗暴感悟

全域性安裝react官方推薦腳手架 create-react-app

npm install create-react-app -g

建立react專案

create-react-app react-login-register

進入專案並執行

npm start

image.png

安裝此demo中各種依賴

  npm install antd-mobile -S  // UI框架
  npm install redux -S  // redux
  npm install react-redux -S  // react-redux
  npm install react-router-dom -S  // react路由
  npm install axios -S // react請求互動
  npm install redux-thunk -S // redux中介軟體 配合redux解決非同步問題
  npm install babel-plugin-transform-decorators-legacy -D // 配合react-redux 支援@裝飾器
  npm install mongoose -D // 安裝mondoose MongoDB資料庫外掛
  npm install express -S // 基於node開發，搭建請求環境
  npm install babel-plugin-import -S antd-mobile按需載入babel外掛
  npm install body-parser -S  後臺資料介面使用者傳進來的引數解析外掛
  npm install cookie-parser -S 通過cookie儲存使用者登入狀態
  PS: 合併安裝飛起來~

  npm run eject // 釋放react關於webpack的封裝配置
  sudo brew install mongodb（我這裡是mac安裝方式，其他平臺可百度下）

刪掉 src目錄下面所有檔案並新建index.js

 // index.js
import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
    <div>Demo</div>,
    document.getElementById('root')
)

image.png

在src目錄新建一下檔案和資料夾

image.png

components 放置元件
containers 放置頁面
redux 放置redux元素集合檔案（定義各種常量，reducers, create actions）
reducer.js 集合redux裡面各種檔案

image.png

containers 新建登入註冊兩個頁面基本內容

import React, {Component} from 'react'

class Login extends Component {
    render() {
        return (
            <div>登入頁面</div>
        )
    }
}

export default Login

redux 新建user.redux.js

export function user(state=0,action) {
    switch (action.type) {
        default:
            return state;
    }
}

reducer.js 引入user.redux.js 併合並

import {combineReducers} from 'redux'

import {user} from './redux/user.redux'

export default combineReducers({user})

components 新建 checkLogin 判斷使用者是否登入

import {Component} from 'react';
import {withRouter} from 'react-router-dom'

@withRouter
class CheckLogin extends Component {
    componentDidMount() {
         // 在這裡請求相關介面判斷使用者是否完成登入
        axios.get('xxxxx')
            .then(res => {
                if(res.status === 200) {
                    if(res.data.code === 0) {

                    }else {
                        this.props.history.push('/login')
                    }
                }
            })
    }
    render() {
        return null;
    }
}

export default CheckLogin;

index.js完成登入註冊準備工作

import React from 'react'
import ReactDOM from 'react-dom'

// 配合applyMiddleware解決redux非同步問題
import thunk from 'redux-thunk'

// createStore接受reducer生成stote compose合併生成store其他資料 applyMiddleware接受thunk解決redux非同步問題
import {createStore, compose, applyMiddleware} from 'redux'

// Provider負責傳遞store
import {Provider} from 'react-redux'

// 引入react-router-dom各種路由元素
import {BrowserRouter as Router, Route} from 'react-router-dom'

// 引入判斷是否登入元件
import CheckLogin from './components/checkLogin/CheckLogin'

// 引入頁面路由元件
import Login from './containers/login/login'
import Register from './containers/register/register'

// 生成store
import reducer from './reducer'

const store = createStore(reducer, compose(
    applyMiddleware(thunk), //解決redux非同步問題
    window.devToolsExtension ? window.devToolsExtension() : f => f // chrome控制檯redux工具
))

// 頁面渲染
ReactDOM.render(
    <Provider store={store}>
        <Router>
            <div className="react-login-register">
                    <CheckLogin></CheckLogin>
                    <Route path='/login' component={Login}></Route>
                    <Route path='/register' component={Register}></Route>
            </div>
        </Router>
    </Provider>,
    document.getElementById('root')
)

從控制檯，可以看到redux相關資訊（user: 定義的reducer user 值是返回state的初始值0）
PS：前提是chrome安裝redux外掛Redux DevTools

image.png

在package.json的babel裡新增一下外掛

 "plugins": [
      "transform-decorators-legacy", // 配合react-redux 的connent 支援裝飾器寫法
      [
          "import",
          {
            "libraryName": "antd-mobile",
            "style": "css"
          }
      ] // antd-mobile 按需載入
  ]

接下來完善登入註冊頁面的UI 和基本互動邏輯

登入頁面

   // login.js
  import React, {Component} from 'react'
  import {List,InputItem,WingBlank,WhiteSpace, Button} from 'antd-mobile'
  import Logo from '../../components/logo/logo'

  class Login extends Component {
      render() {
          return (
              <div className="page-login">
                  <Logo />
                  <WhiteSpace></WhiteSpace>
                  <WhiteSpace></WhiteSpace>
                  <WhiteSpace></WhiteSpace>
                  <WhiteSpace></WhiteSpace>
                  <List>
                      <InputItem>lbj-賬號</InputItem>
                      <InputItem>lbj-密碼</InputItem>
                  </List>
                  <WhiteSpace></WhiteSpace>
                  <WhiteSpace></WhiteSpace>
                  <WhiteSpace></WhiteSpace>
                  <WhiteSpace></WhiteSpace>
                  <WhiteSpace></WhiteSpace>
                  <WingBlank>
                      <Button type="primary">登入</Button>
                      <WhiteSpace></WhiteSpace>
                      <Button onClick={this.handleGoRegister.bind(this)} type="primary">去註冊</Button>
                  </WingBlank>
              </div>
          )
      }
      /*
      *     去註冊
      * */
      handleGoRegister() {
          this.props.history.push('/register');
      }
  }

  export default Login

註冊頁面

  import React, {Component} from 'react'
  import {List, InputItem, WingBlank, WhiteSpace, Button, Radio} from 'antd-mobile'
  import Logo from '../../components/logo/logo'

  class Register extends Component {
      constructor(props) {
          super(props);
          this.state = {
              username: '', //賬號
              pwd: '', // 密碼
              pwdConfirm: '', // 確認密碼
              type: 'worker', // 使用者型別 預設求職者
          }
      }

      render() {
          const RadioItem = Radio.RadioItem
          return (
              <div className="page-register">
                  <Logo/>
                  <List>
                      <InputItem onChange={value => this.handleChange('username', value)}>lbj-賬號</InputItem>
                      <InputItem onChange={value => this.handleChange('pwd', value)}>lbj-密碼</InputItem>
                      <InputItem onChange={value => this.handleChange('pwdConfirm', value)}>lbj-確認</InputItem>
                  </List>
                  <WhiteSpace></WhiteSpace>
                  <List>
                      <RadioItem
                          onClick={() => this.handleChange('type', 'worker')}
                          checked={this.state.type === 'worker'}>牛人    </RadioItem>
                      <RadioItem
                          onClick={() => this.handleChange('type', 'boss')}
                          checked={this.state.type === 'boss'}>BOSS</RadioItem>
                  </List>
                  <WhiteSpace></WhiteSpace>
                  <WhiteSpace></WhiteSpace>
                  <WhiteSpace></WhiteSpace>
                  <WingBlank>
                      <Button type="primary">登入</Button>
                      <WhiteSpace></WhiteSpace>
                      <Button onClick={this.handleGoLogin.bind(this)} type="primary">已有賬號，去登入</Button>
                  </WingBlank>
              </div>
          )
      }

      /*
      *     去登入
      * */
      handleGoLogin() {
          this.props.history.push('/login')
      }

      /*
      *     繫結表單值
      * */
      handleChange(key, val) {
          this.setState({
              [key]: val
          })
      }
  }

  export default Register

下一步，就是搭建資料庫，之前安裝的MongoDB，mongoose, express派上了用場

專案根目錄下面新建server資料夾
資料夾下面新建server.js和user.js
server.js

const express = require('express');
const userRouter = require('./user')

// 新建app
const app = express();

app.use('/user',userRouter)

app.listen(8000, () => {
    `server is running at port 8000 success~~~`
})

user.js

const express = require('express')

// 生成express路由中介軟體
const Router = express.Router();

// CheckLogin.js 使用者查詢使用者是否登入的介面
Router.get('/info', (req, res) => {
    return res.json({code: 1,msg: '未登入'})
})

module.exports = Router

進入server資料夾執行

npm install nodemon -g   // nodemon 是基於node的實時監聽的工具
nodemon server.js

image.png

此時可以看到請求地址已經可以訪問
這裡丟擲一個問題，
專案地址是http://localhost:3001/，
請求地址是http://localhost:8000/user/info
由於瀏覽器同源策略限制，直接請求會存在著跨域問題（協議，域名，埠任何一個不一致，即視為跨域），所以這裡可以通過代理請求的方式解決跨域問題
在package.json 新增 "proxy": "http://localhost:8000"

在checkLogin.js裡面請求user/info 來判斷是否登入
繼續完善 checkLogin

import {Component} from 'react';
import {withRouter} from 'react-router-dom'  // 由於checkLogin 不是路由，要想用跳轉的話得引入withRouter

@withRouter
class CheckLogin extends Component {
    componentDidMount() {
        // 登入註冊兩個頁面不需要判斷
        if(filterCheck.indexOf(this.props.location.pathname) > -1) {
            return;
        }
         // 在這裡請求相關介面判斷使用者是否完成登入
        axios.get('/user/info')
            .then(res => {
                if(res.status === 200) {
                    if(res.data.code === 0) {
                              
                    }else {
                        this.props.history.push('/login')
                    }
                }
            })
    }
    render() {
        return null;
    }
}

export default CheckLogin;

中場休息完繼續

通過上面的checkLogin，訪問其他頁面在沒有登入的情況下，自動跳轉到登入頁面。

從註冊頁面開始完善
因為專案是結合redux來操作，所以登入註冊都是生成各種action,通過之前寫好的user這個reducer來改變state的初始值

在註冊頁面寫好register方法並匯出給註冊按鈕呼叫，從而生成action，給reducer使用

// user.redux.js
import axios from 'axios'  // 用axios做請求

// 定義常量
const REGISTER_SUCCESS = 'REGISTER_SUCCESS'; // 註冊成功
const TODO_ERRSHOW = 'TODO_ERRSHOW'; // 操作失敗

// state初始值
let initState = {
    redirectTo: '', // 完成之後跳到哪裡
    username: '', // 賬號
    pwd: '', // 密碼
    pwdConfirm: '', // 確認密碼
    type: '', // 使用者型別
    msg: '', // 錯誤訊息
    isLogin: false // 是否登入
}

export function user(state=initState,action) {
    switch (action.type) {
       case REGISTER_SUCCESS:
            return {...state,...action.data, msg: '', redirectTo: '/login'}
       case TODO_ERRSHOW:
            return {...state,msg: action.msg}
       default:
            return state;
    }
}

function registerFail(msg) {
    return {
        msg,
        type: TODO_ERRSHOW
    }
}

function registerSuccess(data) {
    return {
        data,
        type: REGISTER_SUCCESS
    }
}

// register是一個action creator ，返回的action供user這個reducer使用，從而改變state
export function register({username,pwd,pwdConfirm,type}) {
    if(!username || !pwd) {
        registerFail('賬號密碼不能為空')
    }
    if(pwd !== pwdConfirm) {
        registerFail('兩次密碼不一致')
    }
    return dispatch => {
        axios.post('/user/register',{username,pwd,type})
            .then(res => {
                if(res.status === 200 && res.data.code === 0) {
                    dispatch(registerSuccess(res.data.data))
                }else {
                    dispatch(registerFail(res.data.msg))
                }
            })
    }
}

接下來在register.js裡面的註冊按鈕繫結的事件呼叫register這個方法

// register.js
import {connect} from 'react-redux'
import {register} from '../../redux/user.redux'
import Logo from '../../components/logo/logo'

@connect(
    state=> state,
    {register}
)

注意上面幾行程式碼，之前在package.json提到的plugins transform-decorators-legacy是為上面的connect裝飾器支援@寫法準備的。

裝飾器connnect接受兩個引數，給props定義的資料和函式

// 註冊按鈕繫結的事件
/*
*   註冊
* */
handleRegister() {
    this.props.register(this.state)
}

因為在register這個函式裡面，做了表單驗證判斷後開始請求“/user/register”這個介面，那麼接下來完善這個介面

登入註冊的介面設計到資料庫，這裡選用了mongoDB這種型別的資料庫最為後臺資料支撐

新建資料模型

// server/model.js
const mongoose = require('mongoose')

// mongoose 連線這個資料庫並生成"react-login-register"這個集合
mongoose.connect('mongodb://127.0.0.1:27017/react-login-register')

// 連線成功後的列印
mongoose.connection.on('connected',() => {
    console.log('mongo connect success');
})

// 建立資料模型
const models = {
    user: {
        'username': {type:String, require: true}, // 賬號
        'pwd': {type:String, require: true}, // 密碼
        'type': {type:String, require: true} // 使用者型別
    }
}

// 遍歷生成資料模型
for (let m in models) {
    mongoose.model(m, new mongoose.Schema(models[m]))
}

// 匯出供其他地方獲取
module.exports = {
    getModel: function (m) {
        return mongoose.model(m)
    }
}

// server/user.js
// 獲取註冊使用者列表
Router.get('/list',(req,res) => {
    //清空所有使用者
    // User.remove({},(err,doc) => {
    //  if(!err) {
    //      console.log(`使用者清空成功`);
    //  }
    // })
    // 在user這個資料模型中查詢所有使用者
    User.find({},(err,doc) => {
        if(!err) {
            return res.json({code: 0, data: doc,msg: '使用者列表獲取成功'})
        }
    })
})

完成註冊介面

// user.js
const express = require('express')
const model = require('./model')
const User = model.getModel('user')
// md5加密
const utils = require('utility')

// 生成express路由中介軟體
const Router = express.Router();

// 封裝MD5加密規則
function my_md5(pwd) {
    const xiao = 'akdf352FHhjfFHI34=123-`[email protected]!*@%!^';
    return utils.md5(utils.md5(xiao + pwd))
}

//過濾調不想暴露的資料
const _filter = {"__v": 0, "pwd": 0}

// CheckLogin.js 使用者查詢使用者是否登入的介面
Router.get('/info', (req, res) => {
    return res.json({code: 1, msg: '未登入'})
})

// 獲取註冊使用者列表
Router.get('/list', (req, res) => {
    //清空所有使用者
    // User.remove({}, (err, doc) => {
    //  if (!err) {
    //      console.log(`使用者清空成功`);
    //  }
    // })

    // 在user這個資料模型中查詢所有使用者
    User.find({}, (err, doc) => {
        if (!err) {
            return res.json({code: 0, data: doc, msg: '使用者列表獲取成功'})
        }
    })
})

// 註冊介面
Router.post('/register', (req, res) => {
    const {username, pwd, type} = req.body;
    // 在user這個資料模型中查詢使用者註冊的賬號是否存在
    User.findOne({username}, (err, doc) => {
        //
        if (doc) {
            return res.json({code: 1, msg: '使用者已存在'})
        }
        if (err) {
            return res.json({code: 1, msg: '伺服器異常'})
        }
        User.create({username, pwd: my_md5(pwd), type}, (err, doc) => {
            if (err) {
                return res.json({code: 1, msg: '伺服器異常'})
            }
            return res.json({code: 0, data: doc})
        })
    })
})


module.exports = Router
// 這裡注意，因為要接受引數，所以在server.js安裝body-parser並app.use(bodyParser.json())

{this.props.user.redirectTo ? <Redirect to={this.props.user.redirectTo}></Redirect>:null} //註冊完成後跳轉到登入頁面
<div className="err-show">{this.props.user.msg ? this.props.user.msg : ''}</div> //顯示錯誤資訊

至此註冊部分基本完成

繼續

接下來完成登入部分

大致思路是繫結事件

// login.js
/*
 *  登入
 * */
handleLogin() {
    this.props.login(this.state)
}

定義執行呼叫actions creator

// login.js
import {connect} from 'react-redux'

@connect (
    state => state,
    {login}
)

編寫login actions creator

// user.redux.js
// 登入時候呼叫
export function login({username,pwd}) {
    if(!username || !pwd) {
        return toDoFail('賬號密碼不能為空')
    }
    return dispatch => {
        axios.post('/user/login',{username,pwd})
            .then(res => {
                if(res.status === 200 && res.data.code === 0) {
                    dispatch(loginSuccess(res.data.data))
                }else {
                    dispatch(toDoFail(res.data.msg))
                }
            })
    }
}

編寫user/login這個介面

 // user.js
 Router.post('/login', (req, res) => {
    const {username, pwd} = req.body;
    console.log(username);
    User.findOne({username, pwd: my_md5(pwd)}, _filter, (err, doc) => {
        if (!doc) {
            return res.json({code: 1, msg: '賬號密碼不正確'})
        }
        if (err) {
            return res.json({code: 1, msg: '伺服器異常'})
        }
        res.cookie('userId',doc._id) // 登入成功儲存cookie
        return res.json({code: 0, msg: '登入成功', data: doc})
    })
})

登入的步驟和註冊部分很多相似之處
接下來，完善判斷使用者是否登入的介面，'/user/info'

// user.js
Router.get('/info', (req, res) => {
    const {userId} = req.cookies
    if (!userId) {
        res.json({code: 1, msg: '使用者未登入'})
    }
    User.findOne({_id: userId}, _filter, (err, doc) => {
        if (err) {
            return res.json({code: 1, msg: '伺服器異常'})
        }
        if (doc) {
            return res.json({code: 0, msg: '使用者已登入',data: doc})
        }
    })
})
PS: server.js 記得使用cookie外掛
const cookieParser = require('cookie-parser')
app.use(cookieParser())

最後，我們在登入完成之後所進入的頁面展示使用者的基本資訊

// checkLogin.js
axios.get('/user/info')
  .then(res => {
      console.log(res);
      if(res.status === 200) {
          if(res.data.code === 0) {
              this.props.getUserInfo(res.data.data)
          }else {
              this.props.history.push('/login')
          }
      }
  })


// user.redux.js
// 登入之後獲取使用者資訊
export function getUserInfo(userInfo) {
    return {
        type: GET_USER_INFO,
        payload: userInfo
    }    
}

對此次demo完善退出登入
跳轉到login頁面，清空cookies

// workerInfo.js
import React, {Component} from 'react';
import {connect} from 'react-redux'
import {Button,WingBlank} from 'antd-mobile'
import {Redirect} from 'react-router-dom'
import {loginOut} from '../../redux/user.redux'

@connect(
    state => state,
    {loginOut}
)

class WorkerInfo extends Component {
    render() {
        return (
            <div>
                {this.props.user.redirectTo ? <Redirect to={this.props.user.redirectTo}></Redirect>:null}
                <h3>worker資訊頁面</h3>
                <p>使用者名稱稱:{this.props.user.username} </p>
                <p>使用者型別:{this.props.user.type} </p>
                <WingBlank>
                    <Button onClick={this.handleLoginOut.bind(this)} type="primary">退出登入</Button>
                </WingBlank>
            </div>
        );
    }
    /*
    *   退出登入
    * */
    handleLoginOut() {
        this.props.loginOut();
    }
}

export default WorkerInfo;

編寫退出登入action creator

// 退出登入呼叫
export function loginOut() {
    return dispatch => {
        axios.get('/user/loginOut')
                .then(res => {
                if (res.status === 200 && res.data.code === 0) {
                    dispatch(loginOutSuccess(res.data.data))
                } else {
                    dispatch(toDoFail(res.data.msg))
                }
            })
    }
}

編寫退出登入介面

// user.js
// 退出登入
Router.get('/loginOut', (req, res) => {
    const {userId} = req.cookies;
    if(!userId) {
        res.json({code: 1, msg: '伺服器異常'})
    }
    res.cookie('userId','');
    return res.json({code: 0, msg:'退出成功'})
})

到此整個demo寫完

留下一個報錯資訊，但是對功能沒有影響

登入或退出成功或註冊成功進行頁面跳轉後，會報錯
Warning: You tried to redirect to the same route you're currently on: "/workerInfo"
Warning: You tried to redirect to the same route you're currently on: "/bossInfo"
Warning: You tried to redirect to the same route you're currently on: "/login"
後續解決~~ 帶理解~

作者：feXiaojin
連結：https://www.jianshu.com/p/a735096f3eda
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。

react專案實現登入註冊

中場休息完繼續

繼續

react專案實現登入註冊

實現登入註冊功能（連線資料庫）的JSP小專案

C語言利用連結串列與檔案實現登入註冊

bootstrap實現登入註冊介面

javaEE之jsp+JavaBean實現登入+註冊+留言功能（外掛資料庫）

搭建自己的部落格（二十一）：通過django表單實現登入註冊

bootstarp標籤頁實現登入註冊頁面

JavaWeb實現登入註冊與驗證碼。

純Servlet實現登入註冊

ajax+springboot+mybits實現登入註冊功能

結合 Google quicklink，react 專案實現頁面秒開

SSM框架下實現登入註冊

Android使用MVP實現登入註冊

java利用jdbc連線Mysql資料庫——實現登入註冊功能

android studio使用Bmob來實現登入註冊的功能

web學習之部落格小專案（登入註冊模組）

tkinter實現登入註冊視窗

android實現登入註冊簡易程式碼

PHP PDO+MySQL實現登入註冊頁面

jsp實現登入註冊（與資料庫對接）

react專案實現登入註冊

中場休息完繼續

繼續

相關推薦