Reaccionar página de inicio de sesión del sistema de gestión de fondo Reaccionar página de inicio de sesión del sistema de gestión de fondo

Reaccionar la página de inicio de sesión del sistema de gestión en segundo plano

Página de inicio de sesión

1. <div className = " col-md-4 col-md-offset-4 ">
2.                <div className = " panel panel-default login-panel ">
3.                    <div className = " panel -header"> Bienvenido al sistema de gestión de inicio de sesión-MMALL </ div>
4.                    <div className = " panel-body ">
5.                        <div>
6.                            <div className = " form-group ">
7.                                <input type = " text "
8.                                    nombre = " nombre de usuario "
9.                                    className = " control de formulario "
10.                                    placeholder = " Ingrese un nombre de usuario "
11.                                    onKeyUp = {e => this .onInputKeyUp (e)}
12.                                    onChange = {e => this .onInputChange (e)} />
13.                            </div>
14.                            <div className = " form-group ">
15.                                <input type = " contraseña "
16.                                    nombre = " contraseña "
17.                                    className = " control de formulario "
18.                                    placeholder = " Por favor ingrese la contraseña "
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>

Cuando el nombre de usuario y la contraseña cambien, configure el evento onChange y restablezca los valores de nombre de usuario y contraseña en el estado

1. this .state = {
2.            nombre de usuario: '',
3.            contraseña: '',
4.            redirect: _mm.getUrlParam ('redirect') || '/'
5.        }
6. // Cuando cambia el nombre de usuario
7.   onInputChange (e) {
8.       deje inputValue = e.target. valor ,
9.           inputName = e.target.name;
10.       este .setState ({
11.           [inputName]: inputValue
12.       });
13.   }

Establezca el evento onKeyUp en el cuadro de entrada, escuche el cuadro de entrada cuando se presiona la tecla Intro y envíe los datos de inicio de sesión

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

Enviar datos del formulario, verificar los datos del formulario antes de enviarlo,

1. // Comprueba si los datos en la interfaz de inicio de sesión son legales
2.     checkLoginInfo (loginInfo) {
3.         let username = $ .trim (loginInfo.username),
4.             contraseña = $ .trim (loginInfo.password);
5.         // determina que el nombre de usuario está vacío
6.         if ( typeof username! == ' string ' || username.length === 0) {
7.             volver {
8.                 Estado: falso ,
9.                 msg: '¡El nombre de usuario no puede estar vacío! '
10.             }
11.         }
12.         // juzga que la contraseña está vacía
13.         if ( typeof password! == ' string ' || password.length === 0) {
14.             volver {
15.                 Estado: falso ,
16.                 msg: '¡La contraseña no puede estar vacía! '
17.             }
18.         }
19.         volver {
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 2020-04-16 19:52  six、hc  阅读(...)  评论(...)  编辑  收藏

登录页面

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