vue3中:
<template><div><h2>注册页面</h2><form @submit.prevent="submitForm"><label for="username">用户名:</label><input type="text" id="username" v-model="username" required><label for="email">邮箱:</label><input type="email" id="email" v-model="email" required><label for="password">密码:</label><input type="password" id="password" v-model="password" required><button type="submit">注册</button></form></div></template><script setup lang="ts">import { ref } from 'vue';
import axios from 'axios';const username = ref('');const email = ref('');const password = ref('');const submitForm = async () => {//构造一个异步函数try {const userData = {username: username.value,email: email.value,password: password.value};const response = await axios.post('/home/register/', userData);//await关键词表示会在得到数据之后才继续执行(等一等)console.log('注册成功!服务器返回的数据:', response.data);// 这里可以根据后端返回的数据进行进一步处理,例如显示成功提示或者跳转页面} catch (error) {//error本身也是一个对象console.error('注册失败:', error);// 这里可以处理错误情况,例如显示错误信息给用户}
};</script>
Django(view):
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
import json@csrf_exempt#装饰器,防止 CSRF 攻击
def register_user(request):#定义一个注册的视图函数if request.method == 'POST':try:# 从请求体中获取前端发送的数据data = json.loads(request.body)#将request请求体中的json数据转化为字典类型的数据结构username = data.get('username')#通过get方式获取到前端发送过来是详细信息email = data.get('email')password = data.get('password')# 在这里处理注册逻辑,例如创建用户等#这里的逻辑是与models交互(省略)response_data = {'message': '注册成功!', 'username': username}# 成功注册后返回一个成功消息return JsonResponse(response_data, status=201)except Exception as e:#Exception 是 Python 中所有异常类的基类,这个可以捕获到任意错误,同时将捕获到的异常对象赋 ereturn JsonResponse({'error': str(e)}, status=400)#404表示客户端发送了错误的请求#同时返回json格式的数据,表示是一个字典,主键是error,值是通过把e变成str类型的数据类型return JsonResponse({'error': '只接受POST请求'}, status=405)#405表示使用错误的方法https请求