前端(vue3)和后端(django)的交互

news2025/2/23 19:43:01

  

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 中所有异常类的基类,这个可以捕获到任意错误,同时将捕获到的异常对象赋 e
            return JsonResponse({'error': str(e)}, status=400)#404表示客户端发送了错误的请求
            #同时返回json格式的数据,表示是一个字典,主键是error,值是通过把e变成str类型的数据类型
    return JsonResponse({'error': '只接受POST请求'}, status=405)#405表示使用错误的方法https请求

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1981119.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C++威力强大的助手 --- const

Welcome to 9ilks Code World (๑•́ ₃ •̀๑) 个人主页: 9ilk (๑•́ ₃ •̀๑) 文章专栏&#xff1a; C之旅 const是个奇妙且非比寻常的东西&#xff0c;博主从《Effective C》一书中认识到关于const更深层次的理解&#xff0c;写此博客进行巩固。 &#x…

无人机之运输的优势

无人机在进行运输任务时使用的是电力驱动&#xff0c;从而可以减少对环境的污染和碳排放&#xff0c;对于改善大气质量和减少碳足迹具有积极的意义。 无人机运输可以避免人为错误和事故的发生&#xff0c;通过预先设定的飞行路线&#xff0c;进行精确点投放。此外&#xff0c;还…

零基础小白备考PMP需要多长时间?

PMP考试在中国大陆&#xff0c;平均每三个月安排一次考试。报名缴费一般在考试前两个月&#xff0c;报完名后开始进入备考&#xff0c;所以基本上是2-3个月的时间。 PMP考试备考不是越久越好&#xff0c;把备考战线拉得太长 &#xff0c;我们的精力都是有限的&#xff0c;后期…

学习HTTP2中的HPACK算法

文章目录 HPACK动态表中的数据插入点两种基本数据类型 Integer String HPACK 专业术语&#xff1a; Header Field&#xff08;头部字段&#xff09;&#xff1a;指的是一个由name - value组成的键值对。名称和值都被视为不透明的字节序列。Dynamic Table&#xff08;动态表&a…

哪个软件可以识别字幕并生成文本?5款最佳工具分享

你是否曾在深夜&#xff0c;抱着手机或电脑&#xff0c;对着那些充满异国情调却无从下手的外语视频感到束手无策&#xff1f; 那些或激昂、或深情、或幽默的对话&#xff0c;因为语言的隔阂而变得遥不可及&#xff0c;让你的观看体验大打折扣。 别急&#xff0c;今天我来告诉你…

AI绘画进阶 ComfyUI 实战教程:轻松给图片添加文字,附工作流教程使用

大家好&#xff0c;我是设计师阿威 在AI绘画中书写文字一直是个老大难的问题&#xff0c;直到SDXL的出现&#xff0c;文字生成才迎来转机&#xff0c;可以在提示词中指定一些英文字符&#xff0c;不过也是经常出错&#xff0c;生成中文就更加不可求了。 本文介绍一种在图片中…

2018-Comment-网鼎杯复现,二次注入

进入靶场 发现只有一个发帖功能&#xff0c;尝试发帖 提交后要去登录&#xff0c;但这里提示了账号密码&#xff0c;但密码后三位不知&#xff0c;可以尝试暴力破解 bp抓包 假设后三位是数字&#xff0c;设置payload 爆破成功&#xff0c;后三位为666 登录成功 但除了发帖没有…

安泰电压放大器放大的是什么信号

电压放大器是一种广泛应用于电子设备中的放大器&#xff0c;它主要用于放大电压信号。电压信号是指以电压形式传输的信号&#xff0c;可以是来自于传感器、音频设备、无线通信设备等各种电子设备中的信号。 电压放大器的基本原理 电压放大器是一种电子设备&#xff0c;它可以将…

使用idea对spring全家桶的各种项目进行创建

目录 1. 简介2. spring2.1 简介2.2 创建 3. springmvc3.1 介绍3.2 创建 4. springboot4.1 简介4.2 创建&#xff08;仅仅就其中一种&#xff09; 5. 其他&#xff1a;maven6. 参考链接 1. 简介 因为总是分不清spring全家桶&#xff0c;所以就在这里进行一个总结。 2. spring …

Java毕业设计-基于SSM框架的大型商场会员管理系统项目实战(附源码+论文)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &…

在手机中安装Fiddler CA证书后,完美解决Fiddler无法进行手机HTTPS请求抓包的难题!

Fiddler抓包的通用配置 关与fidder抓取手机包的配置方法就不多说了&#xff0c;网上有很多方式&#xff0c;配置方式如下图&#xff1a; 但是即使成功配置&#xff0c;在抓取手机中https包时也会出错&#xff0c;这个时候&#xff0c;我们就需要在手机中安装Fiddler的 CA证书!…

80.SAP ME - SAP ERP向SAP ME传输物料主数据的方法

目录 SAP ERP与ME传输物料的几种方式 1.自动传输物料到SAP ME 2.手动发送 2.1 BD10 发送物料 2.2 DRFOUT 执行数据复制 2.3 POIM 发送主数据 SAP ERP与ME传输物料的几种方式 1.自动传输物料到SAP ME 这是标准方法&#xff0c;需要全面的配置&#xff0c;当在ERP里修改物…

Powerdesigner连接mysql数据库,逆向工程生成ER图 (保姆级教程:下载->连接->配置)看这一篇就够了

一、下载powerdesigner 下载的教程请看如下链接&#xff0c;我太懒了&#xff0c;直接借鉴&#xff01; 把别大佬的博客搬过来了嘿嘿~我真聪明&#xff01;ㄟ( ▔, ▔ )ㄏ 操作到完成汉化就好&#xff01;&#xff01;第5步不看了&#xff0c;别按那个走&#xff0c;因为新手…

数据获取- 抓住股市脉搏,用Python轻松获取比亚迪股票数据!

Hey小伙伴们&#xff0c;今天给大家带来一个超级实用的项目教程——如何用Python和tushare库来获取比亚迪的股票数据&#xff01;&#x1f31f; &#x1f50d; 项目背景 股市是个充满机遇与挑战的地方&#xff0c;而获取实时准确的股票数据则是每个投资者的基础技能。今天&am…

2024华数杯全国大学生数学建模竞赛B题-VLSI电路单元的自动布局

超大规模集成电路(VLSI&#xff0c;VeryLarge Scale Integration)将大量电路单元集成于单一芯片。随着设计复杂度增加&#xff0c;如今开展VLSI设计已离不开电子设计自动化(EDA&#xff0c;Electronic DesignAutomation)工具的支持。EDA作为算法密集型产业&#xff0c;需要对数…

Python 爬虫入门(七):requests 库的使用「详细介绍」

Python 爬虫入门&#xff08;七&#xff09;&#xff1a;requests 库的使用「详细介绍」 前言1. 初识 requests1.1 安装 requests 库1.2 发送 GET 请求1.3 发送 POST 请求 2. HTTP 请求详解2.1 请求方法2.2 请求头2.3 请求参数 3. 处理响应3.1 响应内容3.2 响应状态码3.3 响应头…

控件的拖拽移动及定时器及画家

定时器时时都在调用 virtual void timerEvent(QTimerEvent *event);//定时器更新函数 timer new QTimer(this);timer->start(1000);connect(timer,&QTimer::timeout,[this](){static int num 0;ui->led1->display(num);if(num10){timer->stop();}}); 画图事…

【杂谈】计算机世界的原理——二进制数和位运算以及各种进制数的表示方法

【杂谈】计算机世界的原理——二进制数和位运算以及各种进制数的表示方法 1.常见位运算符和常用操作2.各种进制数的表示方法 1.常见位运算符和常用操作 大家都知道&#xff0c;计算机中是使用二进制数储存数据的。在这一篇文章&#xff0c;我将会带领大家初步探索二进制数。在后…

8G 显存玩转书生大模型 Demo 进阶任务

使用 LMDeploy 完成 InternLM-XComposer2-VL-1.8B 的部署&#xff0c;并完成一次图文理解对话&#xff0c;记录复现过程并截图。 使用 LMDeploy 完成 InternVL2-2B 的部署&#xff0c;并完成一次图文理解对话&#xff0c;记录复现过程并截图。 总结&#xff1a;貌似没加上下文…

2024最新最全面的Selenium 3.0 + Python自动化测试框架

文档说明 Selenium是一个用于Web应用程序自动化测试的工具。Selenium测试直接运行在浏览器中&#xff0c;就像真正的用户在操作一样。 Selenium测试的主要功能包括&#xff1a; 测试与浏览器的兼容性&#xff1a;测试应用程序是否能很好的工作在不同的浏览器和操作系统之上。…