Vue.js作为主流的前端框架，搭配Node.js作为后端服务是很多全栈项目的常见选型，两者联调实现数据交互是项目开发的核心环节。本文将从环境准备到实际接口调用，完整讲解联调的全流程。
联调前环境准备
首先确保本地已经安装好Node.js环境，可通过命令行执行node -v查看版本，建议Node.js版本在14.0以上。同时需要准备好Vue前端项目，可使用Vue CLI创建基础项目，执行vue create vue-demo即可快速生成。
搭建Node.js后端服务
我们先创建一个简单的Node.js后端服务，使用express框架快速搭建接口。首先初始化项目并安装依赖：
mkdir node-server cd node-server npm init -y npm install express cors
然后创建入口文件app.js，编写基础接口：
const express = require('express')
const cors = require('cors')
const app = express()
// 解析json格式的请求体
app.use(express.json())
// 解决跨域问题
app.use(cors())
// 测试接口
app.get('/api/test', (req, res) => {
res.json({
code: 200,
msg: '接口调用成功',
data: {
name: '测试数据',
list: [1, 2, 3]
}
})
})
// 接收post请求的接口
app.post('/api/user', (req, res) => {
const { username, age } = req.body
res.json({
code: 200,
msg: '用户数据接收成功',
data: {
username,
age,
id: Date.now()
}
})
})
const port = 3000
app.listen(port, () => {
console.log(`后端服务运行在 http://127.0.0.1:${port}`)
})
启动后端服务，执行node app.js，即可看到服务启动成功的提示，此时后端接口已经可以正常访问。
Vue前端项目配置与接口调用
在Vue项目中，我们通常使用axios来完成接口请求，首先安装axios依赖：
cd vue-demo npm install axios
配置axios基础路径
在Vue项目的src目录下创建utils/request.js文件，统一配置axios：
import axios from 'axios'
// 创建axios实例
const request = axios.create({
// 后端服务的基础路径
baseURL: 'http://127.0.0.1:3000',
// 请求超时时间
timeout: 5000
})
// 请求拦截器
request.interceptors.request.use(
config => {
// 可在请求头中添加token等认证信息
return config
},
error => {
return Promise.reject(error)
}
)
// 响应拦截器
request.interceptors.response.use(
response => {
return response.data
},
error => {
return Promise.reject(error)
}
)
export default request
在组件中调用接口
打开Vue项目的src/views/Home.vue文件，编写接口调用逻辑：
<template>
<div class="home">
<h3>Vue与Node联调测试</h3>
<button @click="getTestData">调用GET接口</button>
<button @click="postUserData">调用POST接口</button>
<div v-if="testData">
<p>GET接口返回数据：{{ testData }}</p>
</div>
<div v-if="userData">
<p>POST接口返回数据：{{ userData }}</p>
</div>
</div>
</template>
<script>
import request from '@/utils/request'
export default {
name: 'HomeView',
data() {
return {
testData: null,
userData: null
}
},
methods: {
// 调用GET接口
async getTestData() {
try {
const res = await request.get('/api/test')
this.testData = res
console.log('GET接口返回：', res)
} catch (err) {
console.error('接口调用失败：', err)
}
},
// 调用POST接口
async postUserData() {
try {
const res = await request.post('/api/user', {
username: '张三',
age: 25
})
this.userData = res
console.log('POST接口返回：', res)
} catch (err) {
console.error('接口调用失败：', err)
}
}
}
}
</script>
跨域问题处理说明
如果后端没有配置cors中间件，前端调用接口时会出现跨域报错。除了后端使用cors解决，前端也可以通过配置代理的方式处理跨域。在Vue项目的vue.config.js中添加代理配置：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://127.0.0.1:3000',
changeOrigin: true
}
}
}
}
配置代理后，axios的baseURL可以改为/api，请求会被代理到后端服务，避免跨域问题。
联调常见问题排查
- 接口404：检查后端服务是否正常启动，接口路径是否和前端请求的路径一致
- 请求参数丢失：检查POST请求的请求体格式是否正确，后端是否正确配置了
express.json()中间件 - 跨域报错：检查后端是否配置了跨域，或者前端代理是否配置正确
按照以上步骤操作，即可完成Vue.js和Node.js的联调，实现前后端数据交互，开发过程中可根据实际需求扩展接口逻辑和前端交互功能。