• React开发实时聊天招聘工具 -第六章 登陆注册(1)


    1.基于cookie的用户认证

    express 依赖 cookie-parser

    2.axios语法:

    axios.get('/data').then(res=>{

             if(res.status==200){

                          if(res.data.code==0)

                            {

                               ..........

                            }

               }

    })

    3.非route组件通过@withRouter包裹组件获取props中属性(比如要使用this.props.history.push)

    sd

    总结一下:

    登陆页面:

    先用antd-mobile做好UI,

    点击注册的时候会history.push()到注册页

    在index.js中所有Route前有一个AuthRoute组件 组件

    AuthRoute组件在ComponentDidMount时会判断this.props.location.pathname,如果是register或者login页面就return null

    如果不是两者之一就开始axios请求后端,请求是否有登陆信息(后期要用cookie实现)

    axios.get('/data').then(function(res){   if(res.status ==200){  if...  } })

    注册页面:

    注册页面Register组件维护了一个user的state

    输入的时候会把数据用onChange监听放置到state中

    user.redux.js:

    redux相关信息是这样的:

    reducer是这样的:

    action(行为)是注册成功和注册失败(报错)

     action creator是这样的

    点击注册按钮后是这样的结果:

    register函数定义在user.redux.js中:

  • 相关阅读:
    shell加载配置文件
    Shell四种运行方式(启动方式)
    Linux下Fork与Exec使用
    ln -snf 的个人理解
    利用python3将已有的某几个pptx文件的某些slides来生成新的pptx文件的范例
    如何在centos7中安装python3
    ng-include
    ng-class细说 by破狼
    AngularJS的Filter用法详解
    理解angularjs中的$emit,$broadcast和$on by Four
  • 原文地址:https://www.cnblogs.com/eret9616/p/9285795.html
Copyright © 2020-2023  润新知