vue2后端传参

### 如何在 Vue 2 中通过 Axios 向后端传递参数 #### 使用 Axios 的 GET 请求传递参数 GET 请求通常用于从服务器获取资源，可以通过 URL 查询字符串的方式传递参数。以下是具体实现方式： ```javascript const params = new URLSearchParams(); params.append('id', 1); params.append('name', 'John'); axios.get('https://api.example.com/data', { params: { id: 1, name: 'John' } }) .then(response => { console.log('数据获取成功:', response.data); }) .catch(error => { console.error('数据获取失败:', error); }); ``` 上述代码展示了如何通过 `axios.get()` 方法发送带有查询参数的请求[^2]。 --- #### 使用 Axios 的 POST 请求传递参数 POST 请求主要用于向服务器提交数据，可以将参数放在请求体（Body）中传输。以下是一个完整的示例： ```javascript const data = { id: 1, name: 'John' }; axios.post('https://api.example.com/data', data) .then(response => { console.log('数据提交成功:', response.data); }) .catch(error => { console.error('数据提交失败:', error); }); ``` 此代码片段说明了如何利用 `axios.post()` 将 JSON 数据作为请求体的一部分发送给服务器[^4]。 --- #### 参数类型总结 根据实际需求可以选择不同的参数传递方式： - **Query Parameters**: 常见于 GET 请求，适用于少量简单的键值对。 - **Request Body (JSON)**: 主要应用于 POST 或 PUT 请求，适合复杂结构的数据。 对于 Spring Boot 后端开发而言，接收这些参数时需要注意前端所使用的编码形式以及后端对应的解析逻辑[^3]。 --- #### 配置全局拦截器优化体验 为了增强项目的可维护性和统一处理能力，还可以设置 Axios 拦截器来自动附加公共字段或者 token 等信息到每次请求上： ```javascript axios.interceptors.request.use(config => { config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`; return config; }, error => { return Promise.reject(error); }); axios.interceptors.response.use(response => { return response; }, error => { if (error.response.status === 401) { alert('未授权访问'); } return Promise.reject(error); }); ``` 以上代码实现了基本的身份验证机制并提供了错误提示功能[^1]。 --- ### 注意事项 当涉及到跨域资源共享(CORS)问题时，请确认后端已正确配置允许来自特定源的请求；另外，在生产环境中应始终加密敏感信息以保障安全性。