vue3+vite+ts后端对接

### Vue 3 和 Vite 使用 TypeScript 集成并与后端对接 #### 修改 `vite.config.ts` 文件支持 TypeScript 为了使项目能够识别和编译 TypeScript 文件，需调整 Vite 的配置文件。创建或编辑 `vite.config.ts` 并安装必要的依赖项。 ```bash npm install --save-dev @vitejs/plugin-vue vue-tsc ``` 接着更新 `vite.config.ts` 如下： ```ts import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], }) ``` 此设置允许 Vite 处理 `.ts` 及其他扩展名的文件[^1]。 #### 创建 API 请求服务 通常会建立一个专门的服务来处理所有的 HTTP 请求。这可以通过 Axios 库轻松实现。首先安装 Axios: ```bash npm install axios ``` 随后可以在 `src/services/apiService.ts` 中定义请求函数： ```ts // src/services/apiService.ts import axios, { AxiosResponse } from 'axios'; const apiClient = axios.create({ baseURL: 'http://localhost:5000', // 假设 Flask 运行在此地址 withCredentials: false, headers: { Accept: 'application/json', 'Content-Type': 'application/json' } }); class ApiService { get<T>(url: string): Promise<AxiosResponse<T>> { return apiClient.get<T>(url); } post<T>(url: string, data?: any): Promise<AxiosResponse<T>> { return apiClient.post<T>(url, data); } } export const apiService = new ApiService(); ``` 上述代码片段展示了如何通过 Axios 发起 GET 和 POST 请求到指定 URL 地址[^2]。 #### 调整后端 Flask 应用程序以接收来自前端的数据 对于 Python 后端部分，确保已按照之前描述的方法设置了 Flask 应用程序，并且启用了 CORS 支持以便跨域资源共享。具体来说，在 `app.py` 中添加如下内容可以解决这个问题： ```py from flask import Flask, jsonify, request from flask_cors import CORS app = Flask(__name__) CORS(app) @app.route('/api/data', methods=['POST']) def receive_data(): content_type = request.headers.get('Content-Type') if (content_type == 'application/json'): json = request.json return jsonify({"message": f"Received JSON: {json}"}), 200 else: return 'Content-Type not supported!', 400 ``` 这段脚本使得服务器能接受带有 JSON 数据体的 POST 请求，并返回确认消息给客户端。 #### 测试前后端交互功能 现在可以从 Vue 组件调用这些方法来进行测试。例如在一个按钮点击事件处理器内发起网络请求： ```html <template> <button @click="sendData">Send Data</button> </template> <script lang="ts"> import { ref } from 'vue'; import { apiService } from '../services/apiService'; export default { setup() { async function sendData(): Promise<void> { try { await apiService.post('/api/data', { key: 'value' }); console.log('Data sent successfully'); } catch (error) { console.error(error); } } return { sendData }; }, }; </script> ``` 当按下按钮时，将会向 `/api/data` 端点发送包含 `{key:"value"}` 对象作为负载的 POST 请求。