注册功能代码实现--Django播客系统(十)

比眉伴天荒 2022-12-15 12:59 95阅读 0赞

### 文章目录 ###

*   *  注册功能实现
     *  Ant Design
     *  信息显示
     *  进阶装饰器

## 注册功能实现 ##

1.  在service/user.js中增加reg注册函数
    
        import axios from "axios";
        import store from "store";
        import expire from "store/plugins/expire";
        import { observable} from "mobx";
        
        // 过期插件
        store.addPlugin(expire)
        
        export default class UserService { 
            @observable loggedin = false; //被观察者
        
            // 登录函数
            login (email,password) { 
                console.log(email,password);
        
                axios.post("/api/users/login",{ 
                    email:email,
                    password:password
                }) /* dev server会代理 */
                .then( /* 成功后返回执行函数 */
                    (function (response){ 
                        console.log(response.data)
                        console.log("response.status: " + response.status);
                        // 存储token,注意需要重开一次chrome的调试窗口才能看到
                        store.set("token",response.data.token,(new Date()).getTime() + (8*3600*1000));
                        this.loggedin = true; // 修改被观察者
                    }).bind(this)
                ).catch(/* 出错后执行函数 */
                    function(error){ 
                        console.log(error);
                    }
                )
            }
        
            // 注册函数
            reg(name,email,password){ 
                console.log(name,email,password)
        
                axios.post('/api/users/',{ 
                    email:email,
                    password:password,
                    name:name
                })/* dev server会代理 */
                .then(
                    response => { //此函数要注意this的问题
                        console.log(response.data);
                        console.log(response.status);
                        // * 存储token，注意需要重开一次chrome的调试窗口才能看到
                        store.set("token",response.data.token,(new Date()).getTime()+(8*3600*1000));
                        this.loggedin=true; //修改被观察者
                    }
                ).catch(
                    error => { 
                        console.log(error);
                    }
                )
            }
        }
2.  修改Reg.js组件
    
        import React from "react";
        import { Link, Redirect} from "react-router-dom";
        import "../css/login.css"
        import UserServer from '../service/user';
        import {  observer } from 'mobx-react';
        
        const userserver = new UserServer;
        
        export default class Reg extends React.Component { 
            render() { 
                return <_Reg service={ userserver} />
            }
        }
        
        @observer
        class _Reg extends React.Component { 
            validate(password,confirmpwd){ 
                //表单验证函数
                return password.value === confirmpwd.value
            }
        
            handleClick(event){ 
                event.preventDefault();
                const [name,email,password,confirmpwd] = event.target.form;
                console.log(this.validate(password,confirmpwd));// +要验证表单数据后才发往后台
                this.props.service.reg(name.value,email.value,password.value);
            }
        
            render(){ 
                if (this.props.service.loggedin){  //已经登录的用户不允许注册
                    return <Redirect to="/" />;
                }
                return (
                    <div className="login-page">
                    <div className="form">
                        <form className="register-form">
                        <input type="text" placeholder="name"/>
                        <input type="text" placeholder="email" />
                        <input type="password" placeholder="密码"/>
                        <input type="password" placeholder="确认密码"/>
                        <button onClick={ this.handleClick.bind(this)}>注册</button>
                        <p className="message">如果已经注册 <Link to="/login">请登录</Link></p>
                        </form>
                    </div>
                    </div>
                )
            }
        }
    
     *  测试发现，重新登录，登录成功后，点击注册链接，没有跳转到首页，或者先注册，注册成功后，点击登录，还可以再次登录。原因是构造并使用了不同的UserServer实例。
     *  如下，使用同一个UserServer实例(在service/user.js中导出唯一的UserService实例即可)，其他模块直接导入并使用这个实例即可。
3.  修改service/user.js
    
        class UserService { 
            //此处省略
        }
        const userService = new UserService();
        export { userService};
        // 注意，还需要修改对应的login.js以及对应的reg.js文件中同时去掉实例化语句。导入语句修改为：
        // import {userService} from '../service/user';

## Ant Design ##

*  Ant Design蚂蚁金服开源的React UI库。
 *  官网 [https://ant.design/index-cn][https_ant.design_index-cn]
 *  官方文档 [https://ant.design/docs/react/introduce-cn][https_ant.design_docs_react_introduce-cn]
 *  安装 `npm install antd` 或者`yarn add antd`
 *  使用
    
        import { List} from 'antd'; //加载antd的组件
        import 'antd/lib/list/style/css'; //加载组件的样式css
        
        ReactDom.render(<list />, mountNode);
    
    每一种组件的详细使用例子，官网都有，需要时查阅官方文档即可

## 信息显示 ##

*  网页开发中，不管操作成功与否，有很多提示信息，目前信息都是控制台输出，用户看不到。
 *  使用Antd的message组件显示油耗提示信息。

1.  在service/user.js中增加一个被观察对象
    
        import axios from "axios";
        import store from "store";
        import expire from "store/plugins/expire";
        import { observable} from "mobx";
        
        // 过期插件
        store.addPlugin(expire)
        
        class UserService { 
            @observable loggedin = false; //被观察者
            @observable errMsg = ''; //+ 被观察者
        
            login (email,password) { 
                console.log(email,password);
        
                axios.post("/api/users/login",{ 
                    email:email,
                    password:password
                }) /* dev server会代理 */
                .then( /* 成功后返回执行函数 */
                    (function (response){ 
                        console.log(response.data)
                        console.log("response.status: " + response.status);
                        // 存储token,注意需要重开一次chrome的调试窗口才能看到
                        store.set("token",response.data.token,(new Date()).getTime() + (8*3600*1000));
                        this.loggedin = true; // 修改被观察者
                    }).bind(this)
                ).catch(/* 出错后执行函数 */
                    function(error){ 
                        console.log(error);
                        this.errMsg = '登录失败';
                    }.bind(this)
                )
            }
        
            reg(name,email,password){ 
                console.log(name,email,password)
        
                axios.post('/api/users/',{ 
                    email:email,
                    password:password,
                    name:name
                })/* dev server会代理 */
                .then(
                    response => { //此函数要注意this的问题
                        console.log(response.data);
                        console.log(response.status);
                        // * 存储token，注意需要重开一次chrome的调试窗口才能看到
                        store.set("token",response.data.token,(new Date()).getTime()+(8*3600*1000));
                        this.loggedin=true; //修改被观察者
                    }
                ).catch(
                    error => { 
                        console.log(error);
                        this.errMsg = "注册失败" //+信息显示
                    }
                )
            }
        }
        
        const userService = new UserService();
        export { userService};
2.  在component/login.js文件中的 \_Login组件，增加Antd的message组件
    
        import React from "react";
        import { Link,Redirect} from "react-router-dom";
        import "../css/login.css";
        import { userService} from "../service/user";
        import { observer} from "mobx-react";
        import { message} from 'antd';
        import 'antd/lib/message/style'; //使用消息框样式表
        
        // const userService = new userService;
        
        export default class Login extends React.Component{ 
            render(){ 
                return <_Login service={ userService} />;
            }
        }
        
        @observer //将react组件转换为响应式组件
        class _Login extends React.Component { 
            handleClick(event){ 
                event.preventDefault(); /* 阻止from表单提交 */
                let fm = event.target.form;
                this.props.service.login(fm[0].value,fm[1].value)
            }
        
            render() { 
                if (this.props.service.loggedin) { 
                    return <Redirect to="/" />; //已经登录，直接跳转
                }
        
                let em = this.props.service.errMsg; //(必须使用)才能触发
        
                return (
                    <div className="login-page">
                    <div className="form">
                        <form className="login-form">
                        <input type="text" placeholder="email"/>
                        <input type="password" placeholder="password"/>
                        <button onClick={ this.handleClick.bind(this)}>登录</button>
                        <p className="message">还未注册？ <Link to="/reg">请注册</Link></p>
                        </form>
                    </div>
                    </div>
                )
            }
        
            componentDidUpdate(prevProps,prevState){  //+ 渲染后显示消息组件
                if (prevProps.service.errMsg){  //登录失败，则弹出消息框
                    message.info(prevProps.service.errMsg,3,setTimeout(() => prevProps.service.errMsg = '',1000))
                }
            }
        }
3.  component/reg.js中\_Reg组件同样增加message组件
    
        import React from "react";
        import { Link, Redirect} from "react-router-dom";
        import "../css/login.css"
        import { userService} from '../service/user';
        import {  observer } from 'mobx-react';
        import { message} from 'antd';
        import 'antd/lib/message/style';
        
        // const userserver = new UserServer;
        
        export default class Reg extends React.Component { 
            render() { 
                return <_Reg service={ userService} />
            }
        }
        
        @observer
        class _Reg extends React.Component { 
            validate(password,confirmpwd){ 
                //表单验证函数
                return password.value === confirmpwd.value
            }
        
            handleClick(event){ 
                event.preventDefault();
                const [name,email,password,confirmpwd] = event.target.form;
                console.log(this.validate(password,confirmpwd));// +要验证表单数据后才发往后台
                this.props.service.reg(name.value,email.value,password.value);
            }
        
            render(){ 
                if (this.props.service.loggedin){  //已经登录的用户不允许注册
                    return <Redirect to="/" />;
                }
        
                let em = this.props.service.errMsg;
        
                return (
                    <div className="login-page">
                    <div className="form">
                        <form className="register-form">
                        <input type="text" placeholder="name"/>
                        <input type="text" placeholder="email" />
                        <input type="password" placeholder="密码"/>
                        <input type="password" placeholder="确认密码"/>
                        <button onClick={ this.handleClick.bind(this)}>注册</button>
                        <p className="message">如果已经注册 <Link to="/login">请登录</Link></p>
                        </form>
                    </div>
                    </div>
                )
            }
        
            componentDidUpdate(prevProps,prevState){  //+ 渲染后显示消息组件
                if (prevProps.service.errMsg){  //注册失败，则弹出消息框
                    message.info(prevProps.service.errMsg,3,setTimeout(() => prevProps.service.errMsg = '',1000))
                }
            }
        
        }

## 进阶装饰器 ##

1.  新建src/utils.js放入以下内容
    
        import React from 'react';
        
        const inject = obj => Comp => props => <Comp { ...obj} { ...props} />
        
        export { inject}
2.  将登陆、注册组件装饰一下
    
     *  reg.js修改如下：
        
            import React from "react";
            import { Link, Redirect} from "react-router-dom";
            import "../css/login.css"
            import { userService as service} from '../service/user';
            import {  observer } from 'mobx-react';
            import { message} from 'antd';
            import 'antd/lib/message/style';
            import { inject} from '../utils';
            
            // export default class Reg extends React.Component { 
            // render() { 
            // return <_Reg service={userService} />
            // }
            // }
            
            // 注意装饰器顺序
            @inject({ service}) //+ 装饰器注入属性
            @observer
            export default class _Reg extends React.Component { 
                validate(password,confirmpwd){ 
                    //表单验证函数
                    return password.value === confirmpwd.value
                }
            
                handleClick(event){ 
                    event.preventDefault();
                    const [name,email,password,confirmpwd] = event.target.form;
                    console.log(this.validate(password,confirmpwd));// +要验证表单数据后才发往后台
                    this.props.service.reg(name.value,email.value,password.value);
                }
            
                render(){ 
                    if (this.props.service.loggedin){  //已经登录的用户不允许注册
                        return <Redirect to="/" />;
                    }
            
                    let em = this.props.service.errMsg;
            
                    return (
                        <div className="login-page">
                        <div className="form">
                            <form className="register-form">
                            <input type="text" placeholder="name"/>
                            <input type="text" placeholder="email" />
                            <input type="password" placeholder="密码"/>
                            <input type="password" placeholder="确认密码"/>
                            <button onClick={ this.handleClick.bind(this)}>注册</button>
                            <p className="message">如果已经注册 <Link to="/login">请登录</Link></p>
                            </form>
                        </div>
                        </div>
                    )
                }
            
                componentDidUpdate(prevProps,prevState){  //+ 渲染后显示消息组件
                    if (prevProps.service.errMsg){  //注册失败，则弹出消息框
                        message.info(prevProps.service.errMsg,3,setTimeout(() => prevProps.service.errMsg = '',1000))
                    }
                }
            
            }
     *  login.js修改如下
        
            import React from "react";
            import { Link,Redirect} from "react-router-dom";
            import "../css/login.css";
            import { userService as service} from "../service/user";
            import { observer} from "mobx-react";
            import { message} from 'antd';
            import 'antd/lib/message/style'; //使用消息框样式表
            import { inject} from '../utils';
            
            // export default class Login extends React.Component{ 
            // render(){ 
            // return <_Login service={service} />;
            // }
            // }
            
            // 注意装饰器顺序
            @inject({ service}) //+ 装饰器注入属性
            @observer //将react组件转换为响应式组件
            export default class _Login extends React.Component { 
                handleClick(event){ 
                    event.preventDefault(); /* 阻止from表单提交 */
                    let fm = event.target.form;
                    this.props.service.login(fm[0].value,fm[1].value)
                }
            
                render() { 
                    if (this.props.service.loggedin) { 
                        return <Redirect to="/" />; //已经登录，直接跳转
                    }
            
                    let em = this.props.service.errMsg; //(必须使用)才能触发
            
                    return (
                        <div className="login-page">
                        <div className="form">
                            <form className="login-form">
                            <input type="text" placeholder="email"/>
                            <input type="password" placeholder="password"/>
                            <button onClick={ this.handleClick.bind(this)}>登录</button>
                            <p className="message">还未注册？ <Link to="/reg">请注册</Link></p>
                            </form>
                        </div>
                        </div>
                    )
                }
            
                componentDidUpdate(prevProps,prevState){  //+ 渲染后显示消息组件
                    if (prevProps.service.errMsg){  //登录失败，则弹出消息框
                        message.info(prevProps.service.errMsg,3,setTimeout(() => prevProps.service.errMsg = '',1000))
                    }
                }
            }

[https_ant.design_index-cn]: https://ant.design/index-cn
[https_ant.design_docs_react_introduce-cn]: https://ant.design/docs/react/introduce-cn