61.1-注册功能实现和高阶组件装饰器

作者: BeautifulSoulpy | 来源:发表于2020-08-21 18:04 被阅读0次

有苦，自我释放；有乐，欣然品尝。风吹雨打知生活，苦尽甘来懂人生。其实人生，就是一种感受，一场历练，一次懂得！

1. 前端注册功能实现

在service/user.js中增加reg注册函数

import axios from 'axios';
// import { resolve } from '../../webpack.config.dev';
import { observable } from 'mobx';
import store from 'store';

store.addPlugin(require('store/plugins/expire'));

export default class UserService {
    @observable loggedin = false;

    login(email,password){
        // 从view层发来邮箱和密码，转发给后台服务器；
        console.log(name)
        console.log(email)
        console.log(password)
        console.log('__________________')

        axios.post('/api/user/login', {
            email:email,
            password:password
          })
          .then(response => {
            console.log(1,response);
            console.log(response.data);
            const {token, user}=response.data;
            console.log(token);
            console.log(user);
            store.set('token',token,new Date().getTime()+18888*3600*10000);
            this.loggedin = true;
          })
          .catch(error => {
            console.log(2,error);
            this.loggedin = false;
          });
    }


    reg(email,name,password){
        // 从view层发来邮箱和密码，转发给后台服务器；
        console.log(email)
        console.log(name)
        console.log(password)
        console.log('__________________')

        axios.post('/api/user/login', {
            email:email,
            password:password
          })
          .then(response => {
            console.log(1,response);
            console.log(response.data);
            const {token, user}=response.data;
            console.log(token);
            console.log(user);
            store.set('token',token,new Date().getTime()+18888*3600*10000);
            this.loggedin = true;
          })
          .catch(error => {
            console.log(2,error);
            this.loggedin = false;
          });
    }
}

Reg组件类

import React from 'react';
import '../css/login.css';
import { Link, Redirect } from 'react-router-dom';
import { userService as service} from '../service/user';
import { observable } from 'mobx';
import { observer } from 'mobx-react';

export default class Reg extends React.Component {
  render() {
    return <_Reg service={service} />;
  }
}

class _Reg extends React.Component {
    validatePwd(pwd1,pwd2) {
      return pwd1.value == pwd2.value;
    }

    handleClick(event){
      event.preventDefault();
      const [email,name,password,confirm] = event.target.form;
      console.log(email);
      console.log(name);
      console.log(password);
      console.log(confirm);
      if (this.validatePwd(password,confirm))
        this.props.service.reg(email.value,name.value,password.value);
      else {
        console.log('error~~~~~~~~~~~~~~~')
      }
    }


    render() {
      console.log('reg page',this.props.service.loggedin)
      if (this.props.service.loggedin) return <Redirect to="/" />;
        return (<div className="login-page">
        <div className="form">
        <form className="login-form">
            <input type="text" placeholder="邮箱"/>
            <input type="text" placeholder="用户名"/>
            <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>);
    }
}

测试
重新登录，登录成功后，点击注册链接，看看是否跳转到了首页？或先注册，注册成功后，点击登录，看看是否还
能登录？
原因是什么？
原因就是构造并使用了不同的User Service实例。如何使用同一个?
在service/user.js中导出唯一的User Service实例即可，其他模块直接导入并使用这个实例即可

// service/user.js
class UserService {
// 此处省略
}
const userService = new UserService();
export {userService};

2. Ant Design

Ant Design 蚂蚁金服开源的 React UI 库。
官网 https://ant.design/index-cn
官方文档 https://ant.design/docs/react/introduce-cn

安装
$ npm install antd

使用
import { List } from 'antd'; // 加载
import 'antd/lib/list/style/css'; // 加载 CSS
ReactDOM.render(<List />, mountNode);

每一种组件的详细使用例子，官网都有，需要时查阅官方文档即可

3. 信息显示

网页开发中，不管操作成功与否，有很多提示信息，目前信息都是控制台输出，用户看不到。
使用Antd的message组件显示友好信息提示。
在service/user.js中增加一个被观察对象

import axios from 'axios';
// import { resolve } from '../../webpack.config.dev';
import { observable } from 'mobx';
import store from 'store';

// 过期插件；
store.addPlugin(require('store/plugins/expire'));

export default class UserService {
    @observable loggedin = false;
    @observable errMsg = ''; // 错误信息；

    login(email,password){
        // 从view层发来邮箱和密码，转发给后台服务器；
        console.log(name)
        console.log(email)
        console.log(password)
        console.log('__________________')

        axios.post('/api/user/login', {
            email:email,
            password:password
          })
          .then(response => {
            console.log(1,response);
            console.log(response.data);
            const {token, user}=response.data;
            console.log(token);
            console.log(user);
            store.set('token',token,new Date().getTime()+18888*3600*10000);
            this.loggedin = true;
          })
          .catch(error => {
            console.log(2,error);
            this.loggedin = false;
            this.errMsg = '用户名密码错误';
          });
    }

    reg(email,name,password){
        // 从view层发来邮箱和密码，转发给后台服务器；
        console.log(email)
        console.log(name)
        console.log(password)
        console.log('__________________')

        axios.post('/api/user/login', {
            email:email,
            password:password
          })
          .then(response => {
            console.log(1,response);
            console.log(response.data);
            const {token, user}=response.data;
            console.log(token);
            console.log(user);
            store.set('token',token,new Date().getTime()+18888*3600*10000);
            this.loggedin = true;
          })
          .catch(error => {
            console.log(2,error);
            this.loggedin = false;
            this.errMsg = '注册失败';
          });
    }
}

const userService = new UserService();
export{userService};

component/_Login 组件，增加Antd的message组件；

// component/login.js
import React from 'react';
import '../css/login.css';
import { Link } from 'react-router-dom';
import { userService as service} from '../service/user';
import { observable } from 'mobx';
import { observer } from 'mobx-react';
import {message} from 'antd';
import 'antd/lib/message/style';

export default class Login extends React.Component {
  render() {
    return <_Login service={service} />;
  }
}

@observer
class _Login extends React.Component {
  constructor (props) {
    super(props);
  }

  handleClick(event){
    event.preventDefault;
    const [email,password] = event.target.form;  
    this.props.service.login(email.value,password.value,this);   //async
    // this.setState({'ret':ret})
  }

  render() {
    console.log('login render+++++++++++++++++++++')
    console.log('login page',this.props.service.loggedin)
    if (this.props.service.loggedin) return <Redirect to="/" />;
    // if (this.props.service.errMsg){
    //   message.info(this.props.service.errMsg,5, ()=>this.props.service.errMsg='');
    // }
    let em = this.props.service.errMsg;

    return (<div className="login-page">

    <div className="form">
      <form className="login-form">
        <input type="text" placeholder="邮箱" />
        <input type="password" placeholder="密码" />
        <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,5, ()=>prevprops.service.errMsg='');
    }
  }
}

上面代码执行到用户登录失败时，浏览器控制台会抛出一个警告

Warning：_render New Root Component() ：Render methods should be a pure function of props and state；
triggering nested component updates from render is not allowed.If necessary， trigger neste
updates in component Did Update.Check the render method of_Login.

// 消息清除；
  componentDidUpdate(prevprops,prevState){
    if (prevprops.service.errMsg){
      message.info(prevprops.service.errMsg,5, ()=>prevprops.service.errMsg='');
    }
  }
}

component/_Reg组件同样增加message组件

import React from 'react';
import '../css/login.css';
import { Link, Redirect } from 'react-router-dom';
import { userService as service} from '../service/user';
import { observable } from 'mobx';
import { observer } from 'mobx-react';

export default class Reg extends React.Component {
  render() {
    return <_Reg service={service} />;
  }
}

class _Reg extends React.Component {
    validatePwd(pwd1,pwd2) {
      return pwd1.value == pwd2.value;
    }

    handleClick(event){
      event.preventDefault();
      const [email,name,password,confirm] = event.target.form;
      console.log(email);
      console.log(name);
      console.log(password);
      console.log(confirm);
      if (this.validatePwd(password,confirm))
        this.props.service.reg(email.value,name.value,password.value);
      else {
        console.log('error~~~~~~~~~~~~~~~')
      }
    }


  render() {
    console.log('reg page',this.props.service.loggedin)
    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="邮箱"/>
          <input type="text" placeholder="用户名"/>
          <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,5, ()=>prevprops.service.errMsg='');
    }
  }
}

1. js函数变型

// function inject(obj) {
//    return function (Comp) {
//     return class extends React.Component {
//       render() {
//         return <Comp {...obj} />;
//       }
//     };
//   }
// }

const injec=obj => Comp =>
  class extends React.Component {
     render() {
       return <Comp {...obj} />;
     }
   };

const injec = obj => Comp => props => <Comp {...obj}{...props} />;

import React from 'react';
import '../css/login.css';
import { Link } from 'react-router-dom';
import { userService as service} from '../service/user';
import { observable } from 'mobx';
import { observer, inject } from 'mobx-react';
import {message} from 'antd';
import 'antd/lib/message/style';
import {inject} from "../utils";

@inject({service})
@observer
export default class _Login extends React.Component {
  constructor (props) {
    super(props);
  }

  handleClick(event){
    event.preventDefault;
    const [email,password] = event.target.form;  
    this.props.service.login(email.value,password.value,this);   //async
    // this.setState({'ret':ret})
  }

  render() {
    console.log('login render+++++++++++++++++++++')
    console.log('login page',this.props.service.loggedin)
    if (this.props.service.loggedin) return <Redirect to="/" />;
    // if (this.props.service.errMsg){
    //   message.info(this.props.service.errMsg,5, ()=>this.props.service.errMsg='');
    // }
    let em = this.props.service.errMsg;

    return (<div className="login-page">

    <div className="form">
      <form className="login-form">
        <input type="text" placeholder="邮箱" />
        <input type="password" placeholder="密码" />
        <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,5, ()=>prevprops.service.errMsg='');
    }
  }
}

61.1-注册功能实现和高阶组件装饰器

1. 前端注册功能实现

2. Ant Design

3. 信息显示

1. js函数变型

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读