2020/03/19 01-注册功能实现和高阶组件装饰器

最新推荐文章于 2022-08-30 10:32:32 发布

48N6E

最新推荐文章于 2022-08-30 10:32:32 发布

阅读量279

点赞数

分类专栏： 61前后端分离博客项目(七)核心业务开发与项目部署

本文链接：https://blog.csdn.net/qq_42227818/article/details/104971372

版权

61前后端分离博客项目(七)核心业务开发与项目部署专栏收录该内容

6 篇文章 0 订阅

订阅专栏

现在需要完成用户的注册，和登录有点像，都是发起post请求到后端，后端进行处理，一旦登录成功后，后端返回一个信息。
在这里插入图片描述
、之前的注册成功发送这个

其实这里可以调用gen_token发送token回来，是不可更改的id
看一下就要知道在哪个文件当中

如果要实现用户注册的功能该如何去写，注册页在这，从这里下手或者service下手都是差不多的
在这里插入图片描述
登录采用这种方案

抄一下

下面需要解决的是要提交什么，一般确认密码不需要提交，只需要在前端确认一下，我们要提交邮箱，用户名，和密码，邮箱验证可以用正则表达式，用户名按照要求，有长度验证就长度验证，用户名注册的时候还需要发ajax请求，在变化onchange的时候要定义到一个onchange函数，变化到时候就会把值发到后面的函数，这个函数对服务器进行查询，查询这个用户名是否存在
在这里插入图片描述
一旦点击验证，服务器后端要对这写数据在做一次验证，客户发过来的数据不可信，从头验证

要加一个onclick，上面主要是阻止表单默认提交，阻止页面刷新

准备拿到一些数据，这种用解构的方式写法可能好点

在这里插入图片描述
可以先改service的也可以先改可视组件的，不管怎么样，先把函数添加完

修改下user.js
拿到这三样东西

这就是偷懒的写法，上面的也就是同样的到

我们对reg发起post请求，最后等response回来，能否拿到token就是我们想要做的事情，能拿到token就免登陆了
在这里插入图片描述

可以把这些放到reg里，只是token现在是没有的
在这里插入图片描述
跟login一样，token用这里生成一下

在这里插入图片描述
用这种方案也可以

我们做的实际是，注册成功后不需要去登陆了，这些信息都给它，只要个token，因为跳转到登陆页，没有这些信息，别人可能不太方便，看你的情况，选择什么信息返回

总之response.data里有两个东西，200信息都进入then所以不用太担心
在这里插入图片描述
这里小心this的问题，因为这里如果用传统函数function来写的话,这里的this是大问题

这里也是一样，如果不用箭头函数，this就会有问题，所以建议使用箭头函数

登录成功这么写的话，store里token只有一个，原来里面存的值被刷新掉了

在这里插入图片描述

如果注册成功也代表登录成功了，如果有任何失败相当于登录失败了

启动服务

在这里插入图片描述
现在有这样几个用户

在这里插入图片描述
删除几个，等会再注册

在这里插入图片描述
注意底下的钩，这样已经是自动提交了

在这里插入图片描述
启动服务

在这里插入图片描述
现在是注册页面

在这里插入图片描述
密码123提交

在这里插入图片描述
现在还没调用，reg里有三个东西

自己内部要写的话，validate，可以写成工具类，里面有好多函数，对这些数据进行验证，相当于返回true

要做很多判断，如果验证通过才可以向下调用，否则应该做一些提示
在这里插入图片描述

这个要通过，所有其他验证都要通过，email需要正则表达式，name需要在可定长度
在这里插入图片描述
验证就这么写，这里习惯用小驼峰的方式，跟python不太一样

在这里插入图片描述 还是tom看看能不能调用成功
返回了，信息都打印出来了，现在实际上完成了其中一部分功能

这里loggedin已经等于true了

在这里插入图片描述
如果loggedin=true这里的做法是直接跳转到/跟上去

在这里插入图片描述
一个已经登录的用户还能点击注册，这就有点问题

在这里插入图片描述
如果已经登录就跳转

在这里写一下，如果已经登录就跳转

但是这个loggedin刚才登录的时候没有什么太大的反应

现在假定注册成功就登录了

这一块该保存保存

在这里插入图片描述

在这里插入图片描述

验证成功就发起这样的请求到后台去，依然是异步的方式

如果是已经注册成功且登录的用户，就不用再注册了

注册成功后，登录的状态值已经发生变化了，但是点了登录页没用
假定现在登录了，lggedin应该看做是true了 在这里插入图片描述
现在没问题，实现跳转

**但是点注册没有效果，注册里的代码是对的 **

打印注册里的代码看看，下面做区分

重新登录
在这里插入图片描述
点登录就是true

在这里插入图片描述
点注册就是false

在这里插入图片描述
login和reg，查看问题在哪里

每一个组件都使用了完全不同的userservice实例，所以在使用的时候，造成用的东西完全不一样。（现在不一样好像不符合道理），现在要实现的效果是注册完之后相当于登录，所以这两个值是要有关系的，要用同一个userservice实例
在这里插入图片描述
所以必须模块化，没有模块化根本没有前端开发

现在就不导出了，导出类没有用，现在是需要实例

写一个实例，另外一边就需要改一下了

这里也就需要修改

在这里插入图片描述
下面是service所以需要as

reg里把这里删除

在这里插入图片描述
不是缺省导出，就要加大括号，as方法取一个别名，这样就完成了对同一个实例的导入

在这里插入图片描述
登录后点注册，redirect没有用

要跳转一下

在这里插入图片描述
登陆后点注册就是true了

在这里插入图片描述 这个值是不能跨浏览器的，这是前端开发，用session的方式就跟浏览器无关了，session不过期，只要把sessionid带来即可，跨标签页是用的同一个sessionid

再刷新，注册一个

登录一个注册一个，现在就没问题了
在这里插入图片描述
主要是实例不同，发现用多个实例就会带来问题

在这里插入图片描述
在里面改掉这个即可

把login的value值去掉

在这里插入图片描述
用户输入有些动态的信息的，可以考虑加到这里来，会显示登陆密码错误这些信息

大括号写一个变量，观察这个变量

假如现在是登录，登录失败告诉登录失败，这是一种方案；还要一种是在这里观察observable ，刚开始是空的，错误的信息
在这里插入图片描述
登录页做一下演示，登录失败就现实中这个

登录成功这个值也就需要改掉，loggedin

在这里加个span，span里加个东西，把这个值拿来显示一下

在这里插入图片描述

在这里插入图片描述
实际上这里还可以调用函数，settimeout，延迟一段时间后清除掉

把state去掉
还可以用提示框的方式，现在使用antdesigner，阿里的蚂蚁金服提供的控件，这个控件非常丰富

像这个前台页面就是ANTdesign来做的 在这里插入图片描述
是完成react组件化的

Pro版本提供来了更强的脚手架功能

在这里插入图片描述
这就是Pro版本做的

在这里插入图片描述
安装很简单

我们现在需要用到一个消息提示

这就是消息提示

这里就有代码告诉你怎么操作

在这里插入图片描述
有个自定义显示几秒，第一个调用显示消息级别的函数

后面是显示的内容，再后面写延时的时长
这边有三个参数

第一个内容，第二个时长，默认是10，第三个参数可以控制onclose，当关闭的时候还可以做一些清理的工作 在这里插入图片描述
onclose关联一个回调函数，关闭的时候关联这样一个函数

如果已经登录就跳转，这个没什么说的

这里跟python不一样，空列表之类的空容器也是作为真来处理，后面要写一段话

需要先调用
在这里插入图片描述

官方这里说明import是什么了

在这里插入图片描述
如果已登录，应该不走下面了登录失败提示，登录成功就跳转了

跑偏了

需要加样式表，官网的样式在快速上升这块

在这里插入图片描述
样式表的两种导入方式

发现变化了，它的样式表对底部和字体做了一些改变的

现在样式表就过来了

在这里插入图片描述
这个是5秒钟结束，又调用了一次render，但是dom没有变化

在这里插入图片描述
上面的警告是偷懒的，现在可以容忍，下面的警告是弹了提示框出现的

提示现在写的有点问题，需要去检查一下login

在这里插入图片描述
都是它引起的

在这里插入图片描述
先注释掉

在这里插入图片描述
现在就没有警告了

在这里插入图片描述
有几个生命周期函数，在render完之后做

props这么写有点不对

在这里插入图片描述
这里的service是同一个东西，所以用prevprops也行，用props也行

在这里插入图片描述
现在不显示了

在这里插入图片描述
原因是我们这里都没用，没用所以都没渲染

在这里插入图片描述
就写着一句话，就是引用了一下，这就是告诉要观察这个东西

引起这个render的变化，就引起整个生命周期函数的触发

执行完之后到componentdidupdate，这个时候就可以显示一下了

如果不写这句，render不执行，整个生命流程都不执行
在这里插入图片描述
这个400是我们写的，当时密码错误，不确定抛出401还是400多少，就是不告诉具体什么原因引起的

用这个组件就需要用到message，而这个message是antdesigner，这个antdesigner模块里去把你要的东西提取出来，都是缺省的
在这里插入图片描述
导入之前要导入样式

这里块叫什么名字就是什么名字

在这里插入图片描述
这样相当于message可以用了，如果在上面用，就出现了提示，这个提示很不好，就用这种方式了

reg也有类似注册失败的事情

在这里插入图片描述
user中加一下注册失败

在这里插入图片描述
reg里也加一下，这样注册失败也会出现这样的情况

ant design是蚂蚁金服开源的，react UI库，基本上你想到的组件都有了

在这里插入图片描述
两种加载方式，到css也行（指定加载css样式表），到style也行(会选择less或者css）

信息的显示是被观察者，这个被观察者，当它登录失败的时候将这个信息做好

这里要用this，就用箭头函数

在这里插入图片描述
导出的是实例，大家一起用

在这里插入图片描述
在登录组件里做一些改动

在这里插入图片描述

登录组件要做一些改动，这么一加没有问题，也强行显示了警告，但是在控制台，，用户又不看，所以有一些提示

不加这句话相当于，这个观察者就没有要观察它，就不影响你，必须加到里面去引用一下即可

在这里插入图片描述
把原来的写进来即可，这里的props。service和,prevprops。service取到的是一个service，因为这个service注入的唯一的实例，根本没变化过，用哪个都没问题

reg里同样做下改动

登录和注册基本完成，凡是前端所有做的操作都得到后端要数据，要数据，后端就要检测有没有权限的，如果要有权限的就是要验证的。

在代码中这种结构非常多，注入了就是为了与服务器端如何连接的关系，我们借助一个service对象，这个service对象跟服务端打交道，也就是django写的，这个service几乎要在所有组件上全部要从后端上提取数据，比如在这里登陆,需要把数据提交到后端去，由后端判断OK不OK，你注册也需要把数据提交过去
在这里插入图片描述
都需要service的帮忙，以后写的所有组件都有类似的结构，能否简化

其实无非就是给这个增强一些功能

从login下手，加一些改进，做一下变形，内部return它

这个标识符return出去

这个可以理解为是一个类对应的对象给这个对象，把这个类定义给它
在这里插入图片描述
现在把类定义整个放到这里
这个可以抽象出去做参数

继续变化，这就是一个传参

再进行变化，进行柯里化，里面写一个function，以它为参数

传第一个参数和第二个参数的调用，传a，b返回这个类了
在这里插入图片描述
下面的调用方式是

上面的注释掉，现在一直转换成它了
单独这么解构是不行的，放在属性里是可以解开的，解开就是谁等于谁，相当于把字典解开，这就是抽取函数，抽取函数参数变形的过程，没有柯里化的知识学不好
在这里插入图片描述
可以变成这样就是匿名的

在这里插入图片描述

复制一个继续变形，这是一个当整体看，作为箭头函数
在这里插入图片描述
到目前为止变的差不多了

现在想把这个整体还掉

其实就是function props然后return一个组件

在这里插入图片描述

无状态组件最精简状态，一个箭头函数
在这里插入图片描述
这样一行搞定

换成另外的，这两个相等，看的清楚点

props就是个变量，最后就变成一句话了

前面都推到过程，

有了这个就可以这么写

service就是个对象，相当于service:service，这是个对象object,python里叫字典，在这里叫字面定义方式的object
在这里插入图片描述
把这个对象送进去一解构，变成service=你传入的service

变成了service={service}

props是外面组件的props

在这里插入图片描述
将外面组件props解构后，当这个组件，就是被包装的组件传进去，都注入到最内层组件
最内层组件就是_login，都注入给它了

前面的下划线可以去掉，这里需要导出，observer要求最贴这个类，让observer更加贴近你的类即可
在这里插入图片描述
写成这样揪心个，但是大家都要用

可以在src里创建一个新文件，把工具类函数都放这里，然后导出

导出之后，其他就需要导入，用相对的，是自己写的在utils

reg部分再进行修改，这样service实例就进入进来了
在这里插入图片描述

现在告诉你react utils在第三行找不到

告诉你需要用react

在这里插入图片描述
漏东西了

真正在写的时候这里不会有预设值

在这里插入图片描述
把value变成defaultValue就可以解决了

在这里插入图片描述、
改成defaultValue就行

在这里插入图片描述
先写一个错误密码

在这里插入图片描述
现在登录成功试试，y用这种注入方式可以让代码非常简洁

新的语法使用了装饰器以后就非常方便了，需要用到babel来转

有了柯里化后，等价不等价写两个函数对比一下

在这里插入图片描述

因为是JSX语法所以要导入react

在这里插入图片描述

在这里插入图片描述

用函数也可以，就是啰嗦，用装饰器，比较简单，等价方式跟python一模一样

在这里插入图片描述

48N6E

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020/03/19 01-注册功能实现和高阶组件装饰器

现在需要完成用户的注册，和登录有点像，都是发起post请求到后端，后端进行处理，一旦登录成功后，后端返回一个信息。、之前的注册成功发送这个其实这里可以调用gen_token发送token回来，是不可更改的id看一下就要知道在哪个文件当中如果要实现用户注册的功能该如何去写，注册页在这，从这里下手或者service下手都是差不多的登录采用这种方案抄一下下面需要解决的是要提交什...
复制链接

扫一扫

专栏目录