React后台管理系统-登录页面

React后台管理系统-登录页面

登录页面

2.                
3.                    

   欢迎登录 - MMALL管理系统
4.                    
5.                        
6.                            
7.                                
8.                                    name="username"
9.                                    className="form-control"
10.                                    placeholder="请输入用户名"
11.                                    onKeyUp={e => this.onInputKeyUp(e)}
12.                                    onChange={e => this.onInputChange(e)}/>
13.                            

                           

                               

                                   name="password"

                                   className="form-control"

                                   placeholder="请输入密码"

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

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

                           

                           

                               onClick={e => {this.onSubmit(e)}}>登录

                       

                   

               

           

当用户名和密码发生改变的时候，设置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¶m1=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.    }