03. 实现登录功能

2267 字约 5 分钟读完3607 次阅读更新于 2026/5/3

image.png

配置 Vue 的启动项

image.png

画页面

image.png

表单校验

const formRef = ref()

const login = () => {
  formRef.value.validate((valid) => {
  	console.log(valid)
  })
}

formRef 这个变量 必须跟 表单里绑定的 ref 的名称一样!

Vue 登录

import {reactive, ref} from "vue"
import request from "@/utils/request";
import {ElMessage} from "element-plus";

const login = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      request.post('/login').then(res => {
        if (res.code === '200') {
          localStorage.setItem('student-user', JSON.stringify(res.data))
          ElMessage.success('登录成功')
          location.href = '/home'  // 跳转到主页
        } else {
          ElMessage.error(res.msg)
        }
      })
    }
  })
}

写接口

/**
 * 登录接口
 */
@PostMapping("/login")
public Result login(@RequestBody Admin admin) {
    Admin dbAdmin = adminService.login(admin);
    return Result.success(dbAdmin);
}

image.png
前端没传数据就会报这个错误

image.png
么有数据库 就会报这个错误

image.png