登錄頁面

<div className="col-md-4 col-md-offset-4">

???????????????<div className="panel panel-default login-panel">

???????????????????<div className="panel-heading">歡迎登錄 - MMALL管理系統</div>

???????????????????<div className="panel-body">

???????????????????????<div>

???????????????????????????<div className="form-group">

???????????????????????????????<input type="text"

???????????????????????????????????name="username"

???????????????????????????????????className="form-control"

???????????????????????????????????placeholder="請輸入用戶名"

???????????????????????????????????onKeyUp={e => this.onInputKeyUp(e)}

???????????????????????????????????onChange={e => this.onInputChange(e)}/>

???????????????????????????</div>

???????????????????????????<div className="form-group">

???????????????????????????????<input type="password"

???????????????????????????????????name="password"

???????????????????????????????????className="form-control"

???????????????????????????????????placeholder="請輸入密碼"

???????????????????????????????????onKeyUp={e => this.onInputKeyUp(e)}

???????????????????????????????????onChange={e => this.onInputChange(e)}/>

???????????????????????????</div>

???????????????????????????<button className="btn btn-lg btn-primary btn-block"

???????????????????????????????onClick={e => {this.onSubmit(e)}}>登錄</button>

???????????????????????</div>

???????????????????</div>

???????????????</div>

???????????</div>

當用戶名和密碼發生改變的時候，設置onChange事件，重新設置state里邊username和password的值

this.state = {

???????????username: '',

???????????password: '',

???????????redirect: _mm.getUrlParam('redirect') || '/'

???????}

// 當用戶名發生改變

??onInputChange(e){

??????let inputValue = e.target.value,

??????????inputName = e.target.name;

??????this.setState({

??????????[inputName] : inputValue

??????});

??}

給輸入框設置onKeyUp事件，監聽輸入框按下enter鍵的時候，提交登錄數據

onInputKeyUp(e){

???????if(e.keyCode === 13){

???????????this.onSubmit();

???????}

???}

提交表單數據，提交之前先驗證表單數據，

// 檢查登錄接口的數據是不是合法

????checkLoginInfo(loginInfo){

????????let username = $.trim(loginInfo.username),

????????????password = $.trim(loginInfo.password);

????????// 判斷用戶名為空

????????if(typeof username !== 'string' || username.length ===0){

????????????return {

????????????????status: false,

????????????????msg: '用戶名不能為空！'

????????????}

????????}

????????// 判斷密碼為空

????????if(typeof password !== 'string' || password.length ===0){

????????????return {

????????????????status: false,

????????????????msg: '密碼不能為空！'

????????????}

????????}

????????return {

????????????status : true,

????????????msg : '驗證通過'

????????}

????}

?

onSubmit(){

???????let loginInfo = {

???????????????username : this.state.username,

???????????????password : this.state.password

???????????},

???????????//驗證表單

???????????checkResult = _user.checkLoginInfo(loginInfo);

???????// 驗證通過

???????if(checkResult.status){

???????????_user.login(loginInfo).then((res) => {

???????????????_mm.setStorage('userInfo', res);

???????????????//console.log(this.state.redirect);

???????????????this.props.history.push(this.state.redirect);

???????????}, (errMsg) => {

???????????????_mm.errorTips(errMsg);

???????????});

???????}

???????// 驗證不通過

???????else{

???????????_mm.errorTips(checkResult.msg);

???????}

???}

登錄之后跳轉地址this.sate.redirect= _mm.getUrlParam('redirect') || '/' , this.props.history.push(this.state.redirect);

// 跳轉登錄

???doLogin(){

???????//window.location.pathname url路徑部分,端口后邊，問號前邊

???????//例如 redirect="/user/index"

???????window.location.href = '/login?redirect=' window.location.pathname;

??????// window.location.href = '/login?redirect=' encodeURIComponent(window.location.pathname);

???}

???// 獲取URL參數

???getUrlParam(name){

???????//http://localhost:8086/login?redirect=/product/index

???????// param=123&param1=456

???????let queryString = window.location.search.split('?')[1] || '',

???????????reg = new RegExp("(^|&)" name "=([^&]*)(&|$)"),

???????????result = queryString.match(reg);

???????console.log(result);

???????return result ? decodeURIComponent(result[2]) : null;

???}

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的React后台管理系统-登录页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。