基于element UI修改密码接口页面设计，加载页面，异常全局捕捉
一、修改密码接口设计
修改密码接口设计，传入本地存储的userId,和输入的旧密码password进行效验，效验旧密码是否正确，采用post请求
checkPassword(userId, password) {
return request({
url: '/user/pwd',
method: 'post',
data: {
userId,
password
}
})
},
更新密码接口设计，传入本地的userId和新密码password，对密码进行更新，采用put请求
updatePwd(userId, password){
return request({
url:'/user/pwd',
method:'put',
data:{
userId,
password
}
})
}
二、基于elmentUI的效验密码的设计
加入在效验密码外面加入el-dialog组件，在data下面绑定dialogFormVisible为false
<el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="400px">
</el-dialog>
修改密码模块如下所示
<el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="400px">
<el-form
:model="ruleForm"
status-icon
:rules="rules"
ref="ruleF"
label-width="100px"
class="demo-ruleForm"
style="width:350px"
>
<el-form-item label="原密码" prop="oldPass">
<el-input type="password" v-model="ruleForm.oldPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleF')">提交</el-button>
<el-button @click="resetForm('ruleF')">重置</el-button>
</el-form-item>
</el-form>
</el-dialog>
三、点击更新密码触发方法
点击修改密码触发自定义方法handlePwd()，将this.dialogFormVisible 修改成true，采用this.$nextTick(()=>{})采用异步的方式，将更新提交后将 ref="ruleF"绑定的表单清空，
// 修改密码
handlePwd() {
this.dialogFormVisible = true;
this.$nextTick(()=>{
this.$refs["ruleF"].resetFields()
})
},
四、绑定属性，效验旧密码
data () {
return {
}
},
在data的return中，绑定表单上的属性，
1、user,采用JSON.parse(localStorage.getItem(“jhj-user”)),拿到本地存储的登录人的信息，
2、dialogFormVisible的绑定为false，弹出框不弹出
3，ruleForm绑定输入框的属性，
4，rules绑定效验规则
return {
user: JSON.parse(localStorage.getItem("jhj-user")),
dialogFormVisible: false,
ruleForm: {
oldPass: "",
pass: "",
checkPass: ""
},
rules: {
oldPass: [
{
required: true,
message: "密码不能为空",
trigger: "blur"
},
{
validator: validateOldPass, trigger: "blur" }
],
pass: [
{
required: true,
message: "密码不能为空",
trigger: "blur"
}
],
checkPass: [
{
required: true,
message: "密码不能为空",
trigger: "blur"
},
{
validator: validatePass, trigger: "change" }
]
}
rules绑定效验规则
采用rules：{}，方式效验规则
oldPass是字段名：[{}]这样的方式进行效验，
trigger: “blur”，效验方式，blur鼠标移出时候效验，change,输入改变的时候进行效验
rules: {
oldPass: [
{
required: true,
message: "密码不能为空",
trigger: "blur"
},
{
validator: validateOldPass, trigger: "blur" }
],
pass: [
{
required: true,
message: "密码不能为空",
trigger: "blur"
}
],
checkPass: [
{
required: true,
message: "密码不能为空",
trigger: "blur"
},
{
validator: validatePass, trigger: "change" }
]
}
旧密码的效验
进行旧密码的效验的时候 采用validator绑定一个validateOldPass属性，属性在data里面return外面定义，且后面不能接逗号，只能为空，或者分号，trigger: “blur”，当鼠标移出输入框就触发validateOldPass属性
{
validator: validateOldPass, trigger: "blur" }
validateOldPass属性 进行旧密码的效验，value为输入的值，this.user.id表示拿到用户的Id,传到后端进行效验
callback();表示通过， callback(new Error(“原密码错误”));表示弹出错误提示信息
// 在data中的return上面自定义效验，只能加分号;或者不加，不能加逗号
// 使用一个箭头函数
// 输入的值
const validateOldPass = (rule, value, callback) => {
passwordApi.checkPassword(this.user.id, value).then(response => {
const resp = response.data;
if (resp.flag) {
// 验证通过
callback();
} else {
callback(new Error("原密码错误"));
}
});
};
新密码的效验
效验两次输入的密码是否一致，效验checkPass第三个输入框比对，trigger: “change”，第三个输入框改变，就触发validatePass这个属性，将确认密码与新密码比对，value !== this.ruleForm.pass
checkPass: [
{
required: true,
message: "密码不能为空",
trigger: "blur"
},
{
validator: validatePass, trigger: "change" }
]
// 效验新密码是否一致
const validatePass = (rule, value, callback) => {
// value代表第三个框的确认密码checkPass
if (value !== this.ruleForm.pass) {
callback(new Error("两次输入的密码不一致"));
} else {
callback();
}
};
加载页面的处理
也就是在前端请求后端的过程中，加入一个加载页面，这样使得在请求后台数据的时候不单调，
引入Loading页面加载组件
// 引入loading组件
import {
Loading,Message } from 'element-ui'
定义一个loading 属性，定义两个实例 open：function(){},和close：function(){}
下面这个就是定义的加载中，定义的区域是div中的class=main的地方
text：对应的是自定义加载的时候的语句
background:对应加载后的背景
Loading.service(
{
target: '.main',
text: "加载中",
background:"rega(0,0,0,0.1)"
})
运用单例的模式，每次只创建一个实例
const loading = {
loadingInstance: null,//loading 的实例
// 打开加载
open: function () {
// 创建单例模式
if(this.loadingInstance==null){
this.loadingInstance = Loading.service(
{
target: '.main',
text: "加载中",
background:"rega(0,0,0,0.1)"
}
)
}
},
// 关闭加载
close: function () {
// 请求为空的时候关闭窗口
if (this.loadingInstance !== null) {
this.loadingInstance.close()
}
// 关闭时候清空，这样就不会创建多个实例
this.loadingInstance=null
}
}
请求拦截器
调用上面的 loading.open()，在请求的时候打开加载页面，如果出现异常，则调用loading.close()，这样将加载中的样式关闭
// 请求拦截器
request.interceptors.request.use(config => {
loading.open()
// 请求拦截
return config
}, error => {
// 出现异常
// 关闭加载中
loading.close()
return Promise.reject(error);
})
响应拦截器
当响应过来，将加载中关闭 loading.close()，
并且全局异常捕捉，正常响应，定义的code为2000，如果不等于2000则使用elementUI的message的方法，
duration:5*1000持续时间5秒
Message({
message:resp.message||'系统异常',
type:'warning',
duration:5*1000
})
// 响应拦截器
request.interceptors.response.use(response => {
// response.data
// 关闭加载中
loading.close()
// 拦截请求
const resp=response.data
// 后台正常响应的数据
if(resp.code!==2000){
Message({
message:resp.message||'系统异常',
type:'warning',
duration:5*1000
})
}
return response
}, error => {
// 关闭加载中
loading.close()
Message({
message:error.message,
type:'warning',
duration:5*1000
})
return Promise.reject(error);
})
axios请求页面的整个加载页面，异常全局捕捉如下
import axios from 'axios'
// 引入loading组件
import {
Loading,Message } from 'element-ui'
const loading = {
loadingInstance: null,//loading 的实例
// 打开加载
open: function () {
// 创建单例模式
if(this.loadingInstance==null){
this.loadingInstance = Loading.service(
{
target: '.main',
text: "加载中",
background:"rega(0,0,0,0.1)"
}
)
}
},
// 关闭加载
close: function () {
// 请求为空的时候关闭窗口
if (this.loadingInstance !== null) {
this.loadingInstance.close()
}
// 关闭时候清空，这样就不会创建多个实例
this.loadingInstance=null
}
}
const request = axios.create({
// /db.json > 通过 axios > /dev-api/db.json > 通过 代理转发（vue.config.js）》 http://localhost:8001/db.json
// baseURL: '/dev-api',
baseURL: process.env.VUE_APP_BASE_API,
// baseURL: '/',
timeout: 5000 // 请求超时，5000毫秒
})
// 请求拦截器
request.interceptors.request.use(config => {
loading.open()
// 请求拦截
return config
}, error => {
// 出现异常
// 关闭加载中
loading.close()
return Promise.reject(error);
})
// 响应拦截器
request.interceptors.response.use(response => {
// response.data
// 关闭加载中
loading.close()
// 拦截请求
const resp=response.data
// 后台正常响应的数据
if(resp.code!==2000){
Message({
message:resp.message||'系统异常',
type:'warning',
duration:5*1000
})
}
return response
}, error => {
// 关闭加载中
loading.close()
Message({
message:error.message,
type:'warning',
duration:5*1000
})
return Promise.reject(error);
})
// http://localhost:8888/dev-api/db.json 404
// request.get('/db.json').then(response => {
// console.log(response.data)
// })
export default request // 导出自定义创建 axios 对象