前后端联调初试

前后端联调初试

一、前提条件

1. 后端工程WeiTouTiao-SpringBoot完成新闻的发布、分页列表、详情、修改、删除接口等

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)
    }
}

2. 再修改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

2. 再启动前端工程weitoutiao-front

• 工程目录中运行npm run dev

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

  用户名：testuser

  密码：123456

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

  报错原因：

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

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

  加在如图所示的位置：

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

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

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