04. 带你开发用户登录、注册、个人信息、修改密码功能

106 字约 1 分钟读完6473 次阅读更新于 2026/5/3

用户登录后端接口实现

/**
 * 登录
 */
@PostMapping("/login")
public Result login(@RequestBody Account account) {
    Account ac = null;
    if ("管理员".equals(account.getRole())) {
        ac = adminService.login(account);
    }
    if ("普通用户".equals(account.getRole())) {
        ac = userService.login(account);
    }
    if (ac == null) {
        return Result.error("登录失败，用户不存在");
    }
    return Result.success(ac);
}

在 service 里面做一些查询处理

public Account login(Account account) {
    User dbUser = userMapper.selectByUsername(account.getUsername());
    if (ObjectUtil.isNull(dbUser)) {
        throw new CustomException("用户不存在");
    }
    if (!account.getPassword().equals(dbUser.getPassword())) {
        throw new CustomException("账号或密码错误");
    }
    return dbUser;
}

登录前台实现

<el-form-item prop="role">
  <el-select size="large" style="width: 100%" v-model="data.form.role">
    <el-option value="普通用户" label="普通用户"></el-option>
    <el-option value="管理员" label="管理员"></el-option>
  </el-select>
</el-form-item>

// 点击登录按钮的时候会触发这个方法
  const login = () => {
    formRef.value.validate((valid => {
      if (valid) {
        // 调用后台的接口
        request.post('/login', data.form).then(res => {
          if (res.code === '200') {
            ElMessage.success("登录成功")
            localStorage.setItem('system-user', JSON.stringify(res.data))
            if (res.data.role === '管理员') {
              router.push('/manager/home')
            } else {
              router.push('/front/home')
            }
          } else {
            ElMessage.error(res.msg)
          }
        })
      }
    })).catch(error => {
      console.error(error)
    })
  }

前端路由

{
  path: '/front',
  component: () => import('@/views/Front.vue'),
  redirect: '/front/home',
  children: [
    { path: 'home', component: () => import('@/views/front/Home.vue')},
  ]
},

注册后端接口

/**
 * 注册
 */
@PostMapping("/register")
public Result register(@RequestBody User user) {
    if (!user.getPassword().equals(user.getNewPassword())) {
        return Result.error("两次输入密码不一致");
    }
    userService.add(user);
    return Result.success();
}

注册页面

用户前台框架 Front.vue

个人信息页面 front/Person.vue

<div style="background-color: #f0f2ff">
  <router-view @updateUser="updateUser" />
</div>


// 更新Front里面的user对象为最新值
const updateUser = () => {
  data.user = JSON.parse(localStorage.getItem('system-user') || '{}')
}

修改密码 front/Password.vue