课次31：前后端联调初试
一、前提条件

  1. 后端工程WeiTouTiao-SpringBoot完成到了课次30
  2. 前端工程weitoutiao-front能运行起来
    二、前端工程准备
    1.首先要更改Login.vue中的handLogin函数

handLogin函数替换为如下代码：

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)
}
}
仔细看下两者的区别，为什么要这样更改？

  1. 再修改user.js中的login方法

login函数替换为如下代码：

export const login = (data) => {
return request.post('/user/login', data)
}
3. 再修改request.js中的axios请求
把baseURL的地址改为：http://localhost:8080

前端登录相关的就改完了

三、分别启动前后端工程

  1. 先启动后端工程WeiTouTiao-SpringBoot
    image-20260617192229767 image-20260617192301589
  2. 再启动前端工程weitoutiao-front
    工程目录中运行npm run dev

打开网址：http://localhost:5173/

用户名：testuser

密码：123456

image-20260617193647317
点击登录没有反应，按F12，进开发者模式，看下报错

报错原因：

你的错误是典型的 CORS（跨域资源共享） 问题：前端（ http://localhost:5173 ）向不同源（ http://localhost:8080 ）发送请求时，浏览器出于安全策略会先发送 OPTIONS 预检请求，而后端未返回允许跨域的响应头，导致请求被拦截。

跨域问题，在课次31，统一解决，现在先在后端Controller之上加上注解：@CrossOrigin(origins = "http://localhost:5173")

加在如图所示的位置：

image-20260617194918957
改完之后，再重新启动后端。

前端再输入用户名密码，点击登录

成功之后，直接跳转到home首页，并且控制台也成功把token显示出来了。

至此，前后端以及数据库就已经完全通了，整个前后端的框架就有了，剩下的就是完善具体功能了。
顺利拿下小目标，继续解锁新成就，你真是太棒啦！
课次31：前后端联调初试
一、前提条件
1. 后端工程WeiTouTiao-SpringBoot完成到了课次30
2. 前端工程weitoutiao-front能运行起来
二、前端工程准备
1.首先要更改Login.vue中的handLogin函数
2. 再修改user.js中的login方法
3. 再修改request.js中的axios请求
三、分别启动前后端工程
1. 先启动后端工程WeiTouTiao-SpringBoot
2. 再启动前端工程weitoutiao-front
至此，前后端以及数据库就已经完全通了，整个前后端的框架就有了，剩下的就是完善具体功能了。
顺利拿下小目标，继续解锁新成就，你真是太棒啦！

EOF