《课次31：前后端联调初试》学习笔记

一、教学目标

1. 打通前后端：修改前端代码，使登录请求能正确发送到后端接口。
2. 解决跨域问题：在后端添加 @CrossOrigin 注解，解决浏览器跨域请求拦截。
3. 验证联调成功：启动前后端工程，完成登录并跳转到首页。

二、核心知识点

知识点	说明
前后端分离	前端（Vue）独立运行，通过 HTTP 请求调用后端（SpringBoot）API
CORS（跨域资源共享）	浏览器安全策略，跨域请求需后端返回允许跨域的响应头
@CrossOrigin	Spring 注解，用于允许指定来源的跨域请求

三、操作步骤

本课次需要同时具备后端工程（课次30完成）和前端工程（能运行起来）。
1. 修改前端 Login.vue 中的 handleLogin 函数

const handleLogin = async () => {
  try {
    const res = await login({ username: username.value, password: password.value })
    console.log('登录接口响应：', res)
    if (res.code === 200) {
      const token = res.message
      userStore.setUser(username.value, token)
      router.push('/home')
      ElMessage.success('登录成功')
      console.log('登录成功，token:', token)
    } else {
      ElMessage.error(res.message || '登录失败，请检查用户名或密码')
      console.error('登录失败：', res.message)
    }
  } catch (error) {
    ElMessage.error('登录请求失败，请检查网络')
    console.error('登录请求异常：', error)
  }
}

为什么要这样改？ 原先的代码可能直接从 res.data 中取数据，但后端 Result 类返回的是 {code, message, data} 结构，登录成功时 Token 放在 data 字段中。修改后的代码正确地从 res.code 判断状态，从 res.message 或 res.data 中取数据。
2. 修改前端 user.js 中的 login 方法

export const login = (data) => {
  return request.post('/user/login', data)
}

3. 修改前端 request.js 中的 baseURL

// 将 baseURL 改为后端地址
baseURL: 'http://localhost:8080'

4. 分别启动前后端工程

• 启动后端：运行 WeiTouTiaoSpringBootApplication 主类
• 启动前端：在前端工程目录中运行 npm run dev
  5. 解决跨域问题
• 报错现象：前端（http://localhost:5173）向不同源（http://localhost:8080）发送请求时，浏览器先发送 OPTIONS 预检请求，后端未返回允许跨域的响应头，导致请求被拦截。
• 解决方案：在后端 Controller 类上添加 @CrossOrigin 注解：

@CrossOrigin(origins = "http://localhost:5173")
@RestController
@RequestMapping("/user")
public class UserController {
    // ...
}

改完之后重新启动后端。
6. 验证登录成功

• 前端输入用户名 testuser、密码 123456
• 点击登录，成功跳转到 home 首页，控制台打印出 Token

---

四、笔记总结

步骤	核心内容
Login.vue	handleLogin 函数改为从 res.code 判断状态，从 res.message 取 Token
user.js	login 方法直接调用 request.post('/user/login', data)
request.js	baseURL 改为 http://localhost:8080
跨域解决	后端 Controller 添加 @CrossOrigin(origins = "http://localhost:5173")
验证结果	登录成功，跳转首页，控制台打印 Token
本课次完成了前后端联调，解决了跨域问题，验证了登录流程的完整性。自此，“微头条”项目的前后端框架已经完全打通，后续就是完善具体功能了。