测试平台开发:Django开发实战之注册界面实现(上)

实现注册功能,大概包括以下几个步骤

1、设计ui

##字段

通过看数据库里面的user表里面的字段,可以大概知道需要几个字段:

  • email
  • username
  • password
  • password_confirm

生成简单的ui界面,复制这个html代码

然后在项目路径下面创建一个register.html文件,粘贴刚复制的代码

2、创建视图

def register(request):html = open("register.html", encoding="utf-8").read()return HttpResponse(html)


3、添加路由,在应用下面添加,项目级路由保持不变

但是,这不是我期望的路由,我期望的路由是:http://127.0.0.1:8000/accounts/register/

那么怎么做呢?换一种思路,重新创建一个和账号相关的路由:

 

 

4、前后端对接

接下来需要做前后端对接,提交数据给到后端:

目前数据是没有给到后端的,那么接下来怎么做呢?

1)让我们的前端可以发送参数

首先在html文件引入axios

2) 编写请求方法

<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.min.js"></script>methods: {submitForm() {this.$refs.vFormRef.getFormData().then( (formData) => {// Form Validation OK// alert( JSON.stringify(formData) )axios({method:"post",url:"http://127.0.0.1:8000/accounts/register/",data:formData,})}).catch( function(error) {// Form Validation Failedalert(error)})}}

再次发送请求:

 可以加一些请求成功和失败的判断

methods: {submitForm() {this.$refs.vFormRef.getFormData().then( (formData) => {// Form Validation OK// alert( JSON.stringify(formData) )axios({method:"post",url:"http://127.0.0.1:8000/accounts/register/",data:formData,}).then(function (response){      //请求成功调用这个函数alert(response.data.message)}).catch( function(error) {// Form Validation Failedalert(error.response.data.message)})}).catch( function(error) {// Form Validation Failedalert(error.response.data.message)})}}

2)让我们的后端处理请求,编写注册的视图函数:


import json
import osfrom django.contrib.auth import login, logout
from django.contrib.auth.base_user import AbstractBaseUser
from django.shortcuts import render
from django.http import JsonResponse, HttpResponse, HttpResponseRedirect, HttpResponsePermanentRedirect
from django.contrib.auth.models import User
from django.contrib.auth.hashers import make_password
from django.template.loader import render_to_string
from django.urls import reverse
from django.contrib.auth.decorators import login_requiredfrom django.db import connectionfrom lili.models import Feedbackdef register(request):if request.method == 'POST':# 获取提交的表单数据data = json.loads(request.body)key_list = ["email","username","password","password_confirm"]for key in key_list:if len(data.get(key)) == 0:return JsonResponse({'code': -1,'message':f"{key}不能为空",'status': 422})if data['password'] != data['password_confirm']:return JsonResponse({'code':-2,'message':"两次密码必须相同",'status': 322})if len(data['password']) < 6:return JsonResponse({'code': -3,'message': "密码长度必须大于等于6",'status': 322})user_list = User.objects.filter(username=data['username'])if len(user_list) > 0:return JsonResponse({'code': -4,'message': "用户已经存在,请重新注册",'status': 222})User.objects.create_user(username=data['username'],password=data['password'],email=data['email'])return JsonResponse({'code':0,'message':"注册成功",})

根据校验的逻辑去发送请求

 

 可是这样的用户体验不好,我们希望用户创建成功的同时,也登录成功

这个时候可以对视图函数进行重新编辑,调用djang里面自带的登录方法:

from django.contrib.auth import login

编写html文件的请求成功的部分,希望它重定向到业务页面

submitForm() {this.$refs.vFormRef.getFormData().then( (formData) => {// Form Validation OK// alert( JSON.stringify(formData) )axios({method:"post",url:"http://127.0.0.1:8000/accounts/register/",data:formData,}).then(function (response){      //请求成功调用这个函数alert("请求成功" + response.data.message)//可以重定向到想要他跳转的界面window.location.href ='http://127.0.0.1:8000/lili/submit/'}).catch( function(error) {// Form Validation Failed   //请求失败调用这个函数alert("请求失败" + error.response.data.message)})}).catch( function(error) {// Form Validation Failedalert(error.response.data.message)})}

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

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

相关文章

鸿蒙 DevEcoStudio:简单实现网络请求登录案例

使用http或axios实现登录案例 在entry/src/main/ets/pages路径下新建Page9.ets文件&#xff1a; import http from ohos.net.http import router from ohos.router Entry Component struct Page9 {State message: string Hello WorldState username: string State password:…

数据结构(十二)----查找

目录 一.查找的概念 二.查找算法 1.顺序查找 顺序查找的查找效率&#xff1a; 顺序查找的优化&#xff1a; •有序表的优化&#xff08;缩短查找失败的平均查找长度&#xff09; •被查概率不相等的表的优化&#xff08;缩短查找成功的平均查找长度&#xff09; 2.折半…

2024年钉钉群直播回放怎么保存

钉钉群直播回放下载插件我已经打包好了&#xff0c;有需要的自己下载一下 小白钉钉工具打包链接&#xff1a;百度网盘 请输入提取码 提取码&#xff1a;1234 --来自百度网盘超级会员V10的分享 1.首先解压好我给大家准备好的压缩包 2.再把逍遥一仙下载器解压出来&#xff0…

CentOS 重启网络失败service network restart

命令 service network restart 提示 Job for network.service failed because the control process exited with error code. See “systemctl status network.service” and “journalctl -xe” for details. 原因分析 使用journalctl -xe命令查看日志后的具体错误 -- Un…

Baidu Comate——让软件研发更高效、更智能

个人名片&#xff1a; &#x1f60a;作者简介&#xff1a;一名大二在校生 &#x1f921; 个人主页&#xff1a;坠入暮云间x &#x1f43c;座右铭&#xff1a;给自己一个梦想&#xff0c;给世界一个惊喜。 &#x1f385;**学习目标: 坚持每一次的学习打卡 文章目录 一、Baidu Co…

LLM——大语言模型完整微调策略指南

1、 概述 GPT-4、LaMDA、PaLM等大型语言模型&#xff08;LLMs&#xff09;以其在广泛主题上的深入理解和生成高度类人文本的能力而闻名遐迩&#xff0c;它们在全球范围内引起了广泛关注。这些模型的预训练过程涉及对来自互联网、书籍和其他来源的数十亿词汇的海量数据集进行学…

杰理-701-单线灯-ws2812-驱动

杰理-701-单线灯-ws2812-驱动 LED_gradual_open(); //调用后 呼吸灯 set_led_colour&#xff08;R,G,B&#xff09;&#xff1b;//具体颜色 spi_dma_set_addr_for_isr //spi 配置dma 后灯才亮 #define LED_H 0x7c #define LED_L 0x40 发送高位和地位的字节&#xff0c;具体…

2024.5.12 机器学习周报

引言 Abstract 文献阅读 1、题目 Deep High-Resolution Representation Learning for Human Pose Estimation 2、引言 在本文中&#xff0c;我们感兴趣的是人类姿态估计问题&#xff0c;重点是学习可靠的高分辨率表示。大多数现有的方法从由高到低分辨率网络产生的低分辨…

YOLOv5改进(二)BiFPN替换Neck网络

前言 针对红绿灯轻量化检测&#xff0c;上一节使用MobileNetv3替换了主干网络&#xff0c;本篇将在使用BiFPN替换Neck的方式优化算法~ 往期回顾 YOLOv5改进&#xff08;一&#xff09;MobileNetv3替换主干网络 目录 一、BiFPN简介二、改进方法一第一步&#xff1a;在common.…

LeetCode509:斐波那契数(使用动态规划)

题目描述 斐波那契数 &#xff08;通常用 F(n) 表示&#xff09;形成的序列称为 斐波那契数列 。该数列由 0 和 1 开始&#xff0c;后面的每一项数字都是前面两项数字的和。也就是&#xff1a; F(0) 0&#xff0c;F(1) 1 F(n) F(n - 1) F(n - 2)&#xff0c;其中 n > 1…

D3CTF2024

文章目录 前言notewrite_flag_where【复现】D3BabyEscapePwnShell 前言 本次比赛笔者就做出两道简单题&#xff0c;但队里师傅太快了&#xff0c;所以也没我啥事。然后 WebPwn 那题命令行通了&#xff0c;但是浏览器不会调试&#xff0c;然后就简单记录一下。 note 只开了 N…

封装Springboot基础框架功能-03

在些模块中汇总了一些web开发常用的配置和功能。 模块源码结构 Restful API常用定义 QueryParam请求参数 Data public class QueryParam {private String key;private String value; }RestfulController实现 RestfulController.java&#xff0c;主要汇总一些常用的restful的…

CV每日论文--2024.4.29

1、Make-it-Real: Unleashing Large Multimodal Models Ability for Painting 3D Objects with Realistic Materials 中文标题&#xff1a;实现高仿真3D物体绘制:释放大型多模态模型的能力 简介&#xff1a;物理材料对于增强不同应用场景和光照条件下的3D资产的逼真感至关重要…

4.26.7具有超级令牌采样功能的 Vision Transformer

Vision Transformer在捕获浅层的局部特征时可能会受到高冗余的影响。 在神经网络的早期阶段获得高效且有效的全局上下文建模&#xff1a; ①从超像素的设计中汲取灵感&#xff0c;减少了后续处理中图像基元的数量&#xff0c;并将超级令牌引入到Vision Transformer中。 超像素…

应用软件安全保证措施方案书

系统安全保证措施方案—word原件 软件全套资料进主页获取或者本文末个人名片直接获取。

html的标签

基础标签 标签描述<h1>-<h6>定义标题&#xff0c;h1最大&#xff0c;h6最小<font>定义文本的字体&#xff0c;字体尺寸&#xff0c;字体颜色<b>定义粗体文本<i>定义斜体文本<u>定义文本下划线<center>定义文本居中<p>定义段落…

嘎嘎好用的虚拟键盘第二弹之中文输入法

之前还在为不用研究输入中文而暗自窃喜 这不新需求就来了&#xff08;新需求不会迟到 它只是在路上飞一会儿&#xff09; 找到了个博主分享的代码 是好使的 前端-xyq 已经和原作者申请转载了 感谢~~ 原作者地址&#xff1a;https://www.cnblogs.com/linjiangxian/p/16223681.h…

【Linux进程间通信(六)】深入理解 System V IPC

&#xff08;一&#xff09;引入 &#xff08;二&#xff09;IPC 命名空间 &#xff08;三&#xff09;ipc_ips结构体 &#xff08;四&#xff09;ipc_id_ary结构体 &#xff08;五&#xff09;kern_ipc_perm结构体 &#xff08;六&#xff09;操作系统对IPC资源是如何管理…

视频提取gif怎么制作?试试这个网站一键转换

通过把视频转换成gif动图的操作能够更加方便的在各种平台上分享和传播。相较于视频&#xff0c;gif图片具有较小的文件体积&#xff0c;gif动图能够快速的加载播放&#xff0c;不需要等待就能快速欣赏。很适合从事新媒体之类的小伙伴&#xff0c;可以用来做展示、宣传等。想要实…

刷题训练之模拟

> 作者&#xff1a;დ旧言~ > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;熟练掌握模拟算法。 > 毒鸡汤&#xff1a;学习&#xff0c;学习&#xff0c;再学习 ! 学&#xff0c;然后知不足。 > 专栏选自&#xff1a;刷题训…