在前端使用Vue3时，我们通常会通过JSON
.stringify方法将数据转换为JSON字符串格式，然后通过HTTP请求（如
POST或PUT）发送到后端。在
Django后端，我们可以从请求中获取这些数据并进行处理。
以下是一个简单的示例来说明如何在Vue3前端和
Django后端之间传递和接收数据：
1
. 前端Vue3代码示例：
```javascript
<template>
<div>
<button @click="send
Data">发送数据</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
methods: {
send
Data() {
const
data = {
name: '张三',
age: 30
};
axios
.post('http://localhost:8000/api/
data/', JSON
.stringify(
data), {
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
console
.log('数据发送成功', response);
})
.catch(error => {
console
.error('发送数据出错', error);
});
}
}
}
</script>
```
在这个例子中，我们创建了一个名为`send
Data`的方法，该方法会将一个包含姓名和年龄的对象转换为JSON字符串，并通过
POST请求发送到
Django后端的指定API。
2
. Django后端代码示例：
首先，确保你的
Django项目已经设置好并且可以运行。接下来，创建一个视图来处理前端发送的数据：
```
python
from
django.http import JsonResponse
from
django.views
.decorators
.csrf import csrf_exempt
import json
@csrf_exempt
def receive_
data(
request):
if
request.method == '
POST':
try:
data = json
.loads(
request.body)
name =
data.get('name')
age =
data.get('age')
# 这里可以根据需要处理数据
return JsonResponse({'status': 'success', 'message': f'收到数据：{name}, {age}'})
except json
.JSONDecodeError:
return JsonResponse({'status': 'error', 'message': '无效的JSON数据'}, status=400)
return JsonResponse({'status': 'error', 'message': '只接受
POST请求'}, status=405)
```
在这个
Django视图中，我们使用`json
.loads`函数解析请求体中的JSON数据。我们从解析后的数据中提取出`name`和`age`字段，并返回一个JSON响应。
最后，确保在你的
Django项目的urls
.py文件中添加相应的URL配置：
```
python
from
django.urls import path
from
.views import receive_
data
urlpatterns = [
path('api/
data/', receive_
data, name='receive_
data'),
]
```
这样，当Vue3前端发送
POST请求到这个URL时，
Django后端就可以接收并处理这些数据了。
扫一扫
1156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
