React后台管理系統-登錄頁面

登錄頁面

1. <div className="col-md-4 col-md-offset-4">
2.                <div className="panel panel-default login-panel">
3.                    <div className="panel-heading">歡迎登錄 - MMALL管理系統</div>
4.                    <div className="panel-body">
5.                        <div>
6.                            <div className="form-group">
7.                                <input type="text"
8.                                    name="username"
9.                                    className="form-control"
10.                                    placeholder="請輸入用戶名"
11.                                    onKeyUp={e => this.onInputKeyUp(e)}
12.                                    onChange={e => this.onInputChange(e)}/>
13.                            </div>
14.                            <div className="form-group">
15.                                <input type="password"
16.                                    name="password"
17.                                    className="form-control"
18.                                    placeholder="請輸入密碼"
19.                                    onKeyUp={e => this.onInputKeyUp(e)}
20.                                    onChange={e => this.onInputChange(e)}/>
21.                            </div>
22.                            <button className="btn btn-lg btn-primary btn-block"
23.                                onClick={e => {this.onSubmit(e)}}>登錄</button>
24.                        </div>
25.                    </div>
26.                </div>
27.            </div>

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

1. this.state = {
2.            username: '',
3.            password: '',
4.            redirect: _mm.getUrlParam('redirect') || '/'
5.        }
6. // 當用戶名發生改變
7.   onInputChange(e){
8.       let inputValue = e.target.value,
9.           inputName = e.target.name;
10.       this.setState({
11.           [inputName] : inputValue
12.       });
13.   }

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

1. onInputKeyUp(e){
2.        if(e.keyCode === 13){
3.            this.onSubmit();
4.        }
5.    }

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

1. // 檢查登錄接口的數據是不是合法
2.     checkLoginInfo(loginInfo){
3.         let username = $.trim(loginInfo.username),
4.             password = $.trim(loginInfo.password);
5.         // 判斷用戶名為空
6.         if(typeof username !== 'string' || username.length ===0){
7.             return {
8.                 status: false,
9.                 msg: '用戶名不能為空！'
10.             }
11.         }
12.         // 判斷密碼為空
13.         if(typeof password !== 'string' || password.length ===0){
14.             return {
15.                 status: false,
16.                 msg: '密碼不能為空！'
17.             }
18.         }
19.         return {
20.             status : true,
21.             msg : '驗證通過'
22.         }
23.     }

 

1. onSubmit(){
2.        let loginInfo = {
3.                username : this.state.username,
4.                password : this.state.password
5.            },
6.            //驗證表單
7.            checkResult = _user.checkLoginInfo(loginInfo);
8.        // 驗證通過
9.        if(checkResult.status){
10.            _user.login(loginInfo).then((res) => {
11.                _mm.setStorage('userInfo', res);
12.                //console.log(this.state.redirect);
13.                this.props.history.push(this.state.redirect);
14.            }, (errMsg) => {
15.                _mm.errorTips(errMsg);
16.            });
17.        }
18.        // 驗證不通過
19.        else{
20.            _mm.errorTips(checkResult.msg);
21.        }
22.  
23.    }

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

1. // 跳轉登錄
2.    doLogin(){
3.        //window.location.pathname url路徑部分,端口后邊，問號前邊
4.        //例如 redirect="/user/index"
5.        window.location.href = '/login?redirect=' + window.location.pathname;
6.       // window.location.href = '/login?redirect=' + encodeURIComponent(window.location.pathname);
7.    }
8.    // 獲取URL參數
9.    getUrlParam(name){
10.        //http://localhost:8086/login?redirect=/product/index
11.        // param=123&param1=456
12.  
13.        let queryString = window.location.search.split('?')[1] || '',
14.            reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"),
15.            result = queryString.match(reg);
16.        console.log(result);
17.        return result ? decodeURIComponent(result[2]) : null;
18.    }