12. Vue3管理系统开发个人信息、修改密码页面

789 字约 2 分钟读完5776 次阅读更新于 2026/5/3

当你集成完登录功能后会出现白屏

为什么？

怎么解决？

把默认的路由重定向到 /login，让用户每次启动项目后重新登录

管理员相关的增删改查

admin 的 sql

CREATE TABLE `admin` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `username` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '账号',
  `password` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '密码',
  `name` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '名称',
  `role` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '角色',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='管理员信息';

后端接口

entity、controller、service、mapper、mapper.xml

前端页面

页面、路由、菜单

未找到接口错误

  1. 前端写错接口了
  2. 后端没重启

系统错误

退出登录逻辑

const logout = () => {
  localStorage.removeItem('xm-pro-user')  // 清除当前登录的用户缓存数据
  location.href = '/login'  // 退出到登录页面
}

管理员登录

/**
 * 管理员/员工登录
 */
@PostMapping("/login")
public Result login(@RequestBody Account account) {
    Account result = null;
    if ("ADMIN".equals(account.getRole())) {  // 管理员登录
        result = adminService.login(account);
    } else if ("EMP".equals(account.getRole())) {
        result = employeeService.login(account);
    }
    return Result.success(result);
}

个人中心页面

子组件发送请求更新父组件的数据

const emit = defineEmits(['updateUser'])
// 更新缓存数据
localStorage.setItem('xm-pro-user', JSON.stringify(data.form))
emit('updateUser')


const updateUser = () => {
  data.user = JSON.parse(localStorage.getItem('xm-pro-user'))
  }

个人信息页面源码

修改密码

/**
 * 修改密码
 */
@PutMapping("/updatePassword")
public Result updatePassword(@RequestBody Account account) {
    if ("ADMIN".equals(account.getRole())) {  // 管理员登录
        adminService.updatePassword(account);
    } else if ("EMP".equals(account.getRole())) {
        employeeService.updatePassword(account);
    }
    return Result.success();
}

public void updatePassword(Account account) {
    Integer id = account.getId();
    Admin admin = this.selectById(id);
    if (!admin.getPassword().equals(account.getPassword())) {  // 页面传来的原密码跟数据库密码对比  不匹配就报错
        throw new CustomException("500", "对不起，原密码错误");
    }
    admin.setPassword(account.getNewPassword());  // 设置新密码
    this.update(admin);
}

修改密码的前端页面