头像的渲染及表单的验证

一.用户信息的接口调用       

调用用户信息接口api,在这个调入的过程中,在那个时机调用比较好呢?

可以在页面上调用,但是这不是最优的选择,中间有个拦截的过程,可以在这个过程中,发送请求获得数据,但是不能没跳一个页面都发送一次请求吧,显然这并不是可取的,因此我们可以在加一个if判断,如果请求来的了数据,我们就不再发送请求。

二.在Vuex里面存储用户的数据信息

和token一样在satae里面定义数据。

在mutation定义方法

在action触发,并调用mutation。

并且定义清除用户信息的方法。

三.token失效的处理

在响应拦截器里面进行处理,服务器会返回错误状态码为401状态码。

进行一个判断,如果状态码为401, 给出token失效的提示,清除token,清除用户信息,返回到登录页面。

四.  .native的作用

在一个自定义组件上面使用原生事件 click focus blur  必须在事件名称的后面加一个.native 就是告诉vue将自定义组件当做元素的dom元素 div span

四.表单的验证

基础的表单验证,今天我们暂且不谈这么多,通过自定义表单验证和正则表达式来验证手机号等一系列的东西。
在新密码和重复密码的时候,通过一个元素的js事件,来解决验证规则bug的问题。

调用接口,传过去参数来进行修改。

五.close弹窗关闭的回调

在关闭弹窗的时候我们可以通过:

1.弹窗上方的X号来进行

2.取消按钮

3.点空白的地方        

例如:

this.$refs.ruleForm.resetFields()

清空表单,并且清空一些阿验证规则。

你可能感兴趣的:(后台管理系统,vue.js,前端,javascript)