基于element UI修改密码接口页面设计，加载页面，异常全局捕捉

最新推荐文章于 2024-05-22 11:23:12 发布

捡黄金的少年

最新推荐文章于 2024-05-22 11:23:12 发布

阅读量1.3k

点赞数 2

本文链接：https://blog.csdn.net/weixin_43288858/article/details/107208667

版权

一、修改密码接口设计

修改密码接口设计，传入本地存储的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 对象

捡黄金的少年

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
基于element UI修改密码接口页面设计，加载页面，异常全局捕捉

一、修改密码接口设计修改密码接口设计，传入本地存储的userId,和输入的旧密码password进行效验，效验旧密码是否正确，采用post请求checkPassword(userId, password) { return request({ url: '/user/pwd', method: 'post', data: { userId, passwo
复制链接

扫一扫