现在需要完成用户的注册,和登录有点像,都是发起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一模一样