完成密码修改模块

itbaima-monitor-server/src/main/java/com/example/controller/UserController.java

@@ -0,0 +1,25 @@
+package com.example.controller;
+
+import com.example.entity.RestBean;
+import com.example.entity.vo.request.ChangePasswordVO;
+import com.example.service.AccountService;
+import com.example.utils.Const;
+import jakarta.annotation.Resource;
+import jakarta.validation.Valid;
+import org.springframework.web.bind.annotation.*;
+
+@RestController
+@RequestMapping("/api/user")
+public class UserController {
+
+    @Resource
+    AccountService service;
+
+    @PostMapping("/change-password")
+    public RestBean<Void> changePassword(@RequestBody @Valid ChangePasswordVO vo,
+                                         @RequestAttribute(Const.ATTR_USER_ID) int userId) {
+        return service.changePassword(userId, vo.getPassword(), vo.getNew_password()) ?
+                RestBean.success() : RestBean.failure(401, "原密码输入错误！");
+    }
+
+}

itbaima-monitor-server/src/main/java/com/example/entity/vo/request/ChangePasswordVO.java

@@ -0,0 +1,12 @@
+package com.example.entity.vo.request;
+
+import lombok.Data;
+import org.hibernate.validator.constraints.Length;
+
+@Data
+public class ChangePasswordVO {
+    @Length(min = 6, max = 20)
+    String password;
+    @Length(min = 6, max = 20)
+    String new_password;
+}

itbaima-monitor-server/src/main/java/com/example/service/AccountService.java

@@ -11,4 +11,5 @@ public interface AccountService extends IService<Account>, UserDetailsService {
     String registerEmailVerifyCode(String type, String email, String address);
     String resetEmailAccountPassword(EmailResetVO info);
     String resetConfirm(ConfirmResetVO info);
+    boolean changePassword(int id, String oldPass, String newPass);
 }

itbaima-monitor-server/src/main/java/com/example/service/impl/AccountServiceImpl.java

@@ -1,5 +1,6 @@
 package com.example.service.impl;
 
+import com.baomidou.mybatisplus.core.toolkit.Wrappers;
 import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
 import com.example.entity.dto.Account;
 import com.example.entity.vo.request.ConfirmResetVO;
@@ -115,6 +116,17 @@ public class AccountServiceImpl extends ServiceImpl<AccountMapper, Account> impl
         return null;
     }
 
+    @Override
+    public boolean changePassword(int id, String oldPass, String newPass) {
+        Account account = this.getById(id);
+        String password = account.getPassword();
+        if(!passwordEncoder.matches(oldPass, password))
+            return false;
+        this.update(Wrappers.<Account>update().eq("id", id)
+                .set("password", passwordEncoder.encode(newPass)));
+        return true;
+    }
+
     /**
      * 移除Redis中存储的邮件验证码
      * @param email 电邮

itbaima-monitor-web/src/views/IndexView.vue

@@ -27,7 +27,9 @@
     <el-main class="main-content">
       <router-view v-slot="{ Component }">
         <transition name="el-fade-in-linear" mode="out-in">
-          <component :is="Component"/>
+          <keep-alive exclude="Security">
+            <component :is="Component"/>
+          </keep-alive>
         </transition>
       </router-view>
     </el-main>

itbaima-monitor-web/src/views/main/Manage.vue

@@ -5,6 +5,7 @@ import {get} from "@/net";
 import ClientDetails from "@/component/ClientDetails.vue";
 import RegisterCard from "@/component/RegisterCard.vue";
 import {Plus} from "@element-plus/icons-vue";
+import {useRoute} from "vue-router";
 
 const locations = [
   {name: 'cn', desc: '中国大陆'},
@@ -19,7 +20,13 @@ const checkedNodes = ref([])
 
 const list = ref([])
 
-const updateList = () => get('/api/monitor/list', data => list.value = data)
+const route = useRoute()
+
+const updateList = () => {
+  if(route.name === 'manage') {
+    get('/api/monitor/list', data => list.value = data)
+  }
+}
 setInterval(updateList, 10000)
 updateList()
 

itbaima-monitor-web/src/views/main/Security.vue

@@ -1,13 +1,95 @@
 <script setup>
+import {reactive, ref} from "vue";
+import {Lock, Switch} from "@element-plus/icons-vue";
+import {logout, post} from "@/net";
+import {ElMessage} from "element-plus";
+import router from "@/router";
 
+const formRef = ref()
+const valid = ref(false)
+const onValidate = (prop, isValid) => valid.value = isValid
+
+const form = reactive({
+  password: '',
+  new_password: '',
+  new_password_repeat: '',
+})
+
+
+const validatePassword = (rule, value, callback) => {
+  if (value === '') {
+    callback(new Error('请再次输入密码'))
+  } else if (value !== form.new_password) {
+    callback(new Error("两次输入的密码不一致"))
+  } else {
+    callback()
+  }
+}
+
+const rules = {
+  password: [
+    { required: true, message: '请输入原来的密码', trigger: 'blur' },
+  ],
+  new_password: [
+    { required: true, message: '请输入新的密码', trigger: 'blur' },
+    { min: 6, max: 16, message: '密码的长度必须在6-16个字符之间', trigger: ['blur'] }
+  ],
+  new_password_repeat: [
+    { required: true, message: '请重复输入新的密码', trigger: 'blur' },
+    { validator: validatePassword, trigger: ['blur', 'change'] },
+  ]
+}
+
+function resetPassword() {
+  formRef.value.validate(isValid => {
+    if(isValid) {
+      post('/api/user/change-password', form, () => {
+        ElMessage.success('密码修改成功，请重新登录!')
+        logout(() => router.push('/'))
+      })
+    }
+  })
+}
 </script>
 
 <template>
-  <div>
-    我是安全管理
+  <div style="display: flex;gap: 10px">
+    <div style="flex: 50%">
+      <div class="info-card">
+        <el-form @validate="onValidate" :model="form" :rules="rules"
+                 ref="formRef" style="margin: 20px" label-width="100">
+          <el-form-item label="当前密码" prop="password">
+            <el-input type="password" v-model="form.password"
+                      :prefix-icon="Lock" placeholder="当前密码" maxlength="16"/>
+          </el-form-item>
+          <el-form-item label="新密码" prop="new_password">
+            <el-input type="password" v-model="form.new_password"
+                      :prefix-icon="Lock" placeholder="新密码" maxlength="16"/>
+          </el-form-item>
+          <el-form-item label="重复新密码" prop="new_password_repeat">
+            <el-input type="password" v-model="form.new_password_repeat"
+                      :prefix-icon="Lock" placeholder="重复新密码" maxlength="16"/>
+          </el-form-item>
+          <div style="text-align: center">
+            <el-button :icon="Switch" @click="resetPassword"
+                       type="success" :disabled="!valid">立即重置密码</el-button>
+          </div>
+        </el-form>
+      </div>
+      <div class="info-card" style="margin-top: 10px">
+
+      </div>
+    </div>
+    <div class="info-card" style="flex: 50%">
+
+    </div>
   </div>
 </template>
 
 <style scoped>
-
+.info-card {
+  border-radius: 7px;
+  padding: 15px 20px;
+  background-color: var(--el-bg-color);
+}
 </style>