sunyu 2024.7.31 1:29

完成对侧边栏修改密码功能的添加并且测试可用

src/layout/components/Navbar.vue

 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" v-if = "false"/>
-<!--    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>-->
+    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
+               @toggleClick="toggleSideBar" v-if="false"/>
+    <!--    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>-->
     <img src="../../assets/images/titlePic.png" alt="" style="width: 200px;height: 80px;">
     <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
     <div class="right-menu" style="margin-top: 20px">
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           <img :src="avatar" class="user-avatar">
-          <i class="el-icon-caret-bottom" />
+          <i class="el-icon-caret-bottom"/>
         </div>
         <el-dropdown-menu slot="dropdown">
           <router-link to="/user/profile">
@@ -17,6 +18,32 @@
           <el-dropdown-item @click.native="setting = true">
             <span>布局设置</span>
           </el-dropdown-item>
+<!--          sunyu 新加了修改密码的弹窗,完成修改密码功能-->
+          <el-dropdown-item @click.native="resetPwdVisible = true">
+            <span>修改密码</span>
+          </el-dropdown-item>
+          <el-dialog title="修改密码" :visible.sync="resetPwdVisible" :before-close="handleClose" append-to-body="true">
+            <el-form ref="form" :model="user" :rules="rules" label-width="80px">
+              <el-form-item label="旧密码" prop="oldPassword">
+                <el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password/>
+              </el-form-item>
+              <el-form-item label="新密码" prop="newPassword">
+                <el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password/>
+              </el-form-item>
+              <el-form-item label="确认密码" prop="confirmPassword">
+                <el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password/>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" size="mini" @click="submit">保存</el-button>
+                <el-button type="danger" size="mini" @click="close">关闭</el-button>
+              </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+              <el-button @click.native="resetPwdVisible = false">取 消</el-button>
+              <el-button type="primary" @click.native="resetPwdVisible = false">确 定</el-button>
+            </span>
+          </el-dialog>
+
           <el-dropdown-item divided @click.native="logout">
             <span>退出登录</span>
           </el-dropdown-item>
@@ -27,7 +54,7 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import {mapGetters} from 'vuex'
 import Breadcrumb from '@/components/Breadcrumb'
 import TopNav from '@/components/TopNav'
 import Hamburger from '@/components/Hamburger'
@@ -36,8 +63,43 @@ import SizeSelect from '@/components/SizeSelect'
 import Search from '@/components/HeaderSearch'
 import RuoYiGit from '@/components/RuoYi/Git'
 import RuoYiDoc from '@/components/RuoYi/Doc'
+import {updateUserPwd} from "@/api/system/user";
 
 export default {
+  data() {
+
+
+    const equalToPassword = (rule, value, callback) => {
+      if (this.user.newPassword !== value) {
+        callback(new Error("两次输入的密码不一致"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      user: {
+        oldPassword: undefined,
+        newPassword: undefined,
+        confirmPassword: undefined,
+      },
+      // 表单校验
+      rules: {
+        oldPassword: [
+          {required: true, message: "旧密码不能为空", trigger: "blur"}
+        ],
+        newPassword: [
+          {required: true, message: "新密码不能为空", trigger: "blur"},
+          {min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur"},
+          {pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur"}
+        ],
+        confirmPassword: [
+          {required: true, message: "确认密码不能为空", trigger: "blur"},
+          {required: true, validator: equalToPassword, trigger: "blur"}
+        ]
+      },
+      resetPwdVisible: false,
+    };
+  },
   components: {
     Breadcrumb,
     TopNav,
@@ -72,6 +134,29 @@ export default {
     }
   },
   methods: {
+    submit() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
+            this.$modal.msgSuccess("修改成功");
+          });
+        }
+      });
+    },
+    close() {
+      this.$tab.closePage();
+    },
+    handleClose(done) {
+      this.$confirm('确定关闭吗').then(() => {
+        // function(done)，done 用于关闭 Dialog
+        done();
+
+        console.info("点击右上角 'X' ，取消按钮或遮罩层时触发");
+      }).catch(() => {
+
+        console.log("点击确定时触发");
+      });
+    },
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
     },
@@ -84,7 +169,8 @@ export default {
         this.$store.dispatch('LogOut').then(() => {
           location.href = '/index';
         })
-      }).catch(() => {});
+      }).catch(() => {
+      });
     }
   }
 }
@@ -97,15 +183,16 @@ export default {
   overflow: hidden;
   position: relative;
   background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
   justify-content: space-between;
+
   .hamburger-container {
     line-height: 46px;
     height: 100%;
     float: left;
     cursor: pointer;
     transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
+    -webkit-tap-highlight-color: transparent;
 
     &:hover {
       background: rgba(0, 0, 0, .025)
@@ -117,7 +204,7 @@ export default {
   }
 
   .topmenu-container {
-    margin-top:30px ;
+    margin-top: 30px;
     //margin-left: -10px;
     //height: 80px;
     //position: absolute;

src/router/index.js

@@ -86,8 +86,11 @@ export const constantRoutes = [
         name: 'Profile',
         meta: { title: '个人中心', icon: 'user' }
       }
+
     ]
   },
+
+
   {
     path: '/monitoring',
     component: Layout,
@@ -144,6 +147,7 @@ export const constantRoutes = [
       }
     ]
   }
+
 ]
 
 // 动态路由，基于用户权限动态去加载

vue.config.js

@@ -35,7 +35,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://192.168.10.129:8080`,
+        target: `http://127.0.0.1:8080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''