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

注册功能实现

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