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.    }

 

posted on 2018-06-26 16:41  gisery  阅读(9480)  评论(0编辑  收藏  举报