### 如何在 Vue3 中通过按钮点击事件调用 Django 后端接口 在 Vue3 中，可以通过 `axios` 或原生的 `fetch API` 来发送 HTTP 请求到 Django 后端接口。以下是具体实现方法： #### 1. 安装 Axios 为了简化 HTTP 请求操作，可以使用第三方库 `axios`。如果尚未安装，则需先执行以下命令： ```bash npm install axios ``` #### 2. 创建 Django 后端接口 假设已经有一个 Django 视图处理 POST 请求并返回 JSON 数据。例如，在 Django 的 views.py 文件中定义如下视图函数[^1]: ```python from django.http import JsonResponse def handle_request(request): if request.method == 'POST': data = request.POST.get('message', '') response_data = {'status': 'success', 'data': f'Received: {data}'} return JsonResponse(response_data) return JsonResponse({'status': 'error', 'message': 'Invalid request method'}) ``` 并将此视图映射到 URL 配置中。 #### 3. 在 Vue3 组件中编写前端代码 下面是一个完整的 Vue3 单文件组件 (`.vue`) 示例，展示了如何通过按钮点击事件向 Django 发送请求[^1]: ```html <template> <div> <h1>Vue3 调用 Django 接口示例</h1> <input v-model="message" placeholder="输入消息..." /> <button @click="sendMessage">发送消息给 Django</button> <p>{{ responseMessage }}</p> </div> </template> <script> import axios from 'axios'; export default { data() { return { message: '', // 用户输入的消息 responseMessage: '' // 后端返回的结果 }; }, methods: { async sendMessage() { try { const response = await axios.post('/your-django-api-url/', { message: this.message }); // 替换为实际的 Django API 地址 this.responseMessage = response.data.data; } catch (error) { console.error('Error:', error); this.responseMessage = '发生错误，请重试'; } } } }; </script> ``` 在此代码片段中，当用户单击按钮时会触发 `sendMessage` 方法，该方法使用 `axios.post()` 将数据发送至指定的 Django 后端接口，并更新响应信息显示区域[^1]。 #### 4. 处理跨域问题 由于浏览器的安全策略，默认情况下不允许前后端分离的应用之间直接通信（即所谓的 CORS 问题）。可以在 Django 设置中启用 CORS 支持来解决这一问题。推荐安装并配置 `django-cors-headers` 库[^1]: ```bash pip install django-cors-headers ``` 接着修改项目的 settings.py 文件以允许来自特定源的请求： ```python INSTALLED_APPS += ['corsheaders'] MIDDLEWARE = [ ... 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', ] CORS_ALLOWED_ORIGINS = [ "http://localhost:8080", # 替换为 Vue 开发服务器的实际地址 ] ``` --- ### 注意事项 - 确保 Django 和 Vue 运行在同一网络环境中或者正确设置了代理规则。 - 如果项目处于生产环境部署阶段，建议采用 HTTPS 加密传输方式保护敏感数据交换过程中的安全性[^1]。