Django前后端连调(注册)

最新推荐文章于 2022-06-21 11:18:48 发布
最新推荐文章于 2022-06-21 11:18:48 发布
阅读量726 收藏 5
点赞数
文章标签： django 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67425175/article/details/124977222
版权

文章目录

1. 注册

注册的内容需要完成用户名，密码，确认密码，手机号，验证码，注册按钮六个事件

1.1 校验用户名

1.1.1 后端实现校验用户名

判断用户名首先要定义类和请求方法，之后再进行判断是否写入，是否存在，长度是否符合条件

class CheckUserNameView(APIView):
    def get(self,request,username):
        if not username:
            return Response("用户名错误")
        #判断用户名的长度
        if not (6 <= len(username) <= 32) :
            return Response({
                "code" : 400,
                "msg" : "用户名长度不符"
            })
        # 在数据库查找用户名是否存在
        user_count = User.objects.filter(username=username).count()
        if user_count :   #如果存在
            return Response({
                "code" : 400,
                "msg" : "用户名已存在"
            })
		# 如果不存在
        return Response({
            "code" : 200,
            "msg" : "用户名可用"
        })

在url.py文件里写入路由

from django.urls import path
from users import views
urlpatterns = [
    path('check/username/<str:username>/',views.CheckUserNameView.as_view()),
]
1.1.2 前端实现校验用户名
     // 用户名的校验方法
    let validateName = (rule, value, callback) => {
      console.log("校验用户名，规则", rule, "用户名", value, "回调函数", callback)
      // TODO 校验用户名
      // 失败 return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      // 成功 return callback();
      this.$axios.get("/user/check/username/" + value + '/').then((result) => {
        if(result.data.code == 200){
          return callback()
        }else{
          return callback(new Error(result.data.msg))
        }
      }).catch((err) => {
        console.log(err)
        alert("页面错误")
      });
    };

1.2 校验密码

1.2.1 后端实现校验密码

首先定义类，定义请求方法，然后从页面里获取密码，再判断密码的长度

class CheckPassword(APIView):
    def post(self,request):
    	#从页面里获取的密码
        pawd = request.data.get("pawd")
        #判断密码的长度
        if not (6 <= len(pawd) <= 32) :
            return Response({
                "code" : 400,
                "msg" : "密码长度不符"
            })
        return Response({
            "code" : 200,
            "msg" : "密码可用"
        })

写入路由

from django.urls import path
from users import views
urlpatterns = [
    path('check/username/<str:username>/',views.CheckUserNameView.as_view()),
    path("check/password/",views.CheckPassword.as_view()),  #密码路由
]
1.2.2 前端实现校验密码
    // 密码的校验方法
    let validatePass = (rule, value, callback) => {
      console.log("校验密码，规则", rule, "密码", value, "回调函数", callback)
      // TODO 校验密码
      // 失败 return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      // 成功 return callback();
      this.$axios.post("/user/check/password/",{"pawd":value}).then((result) => {    //传参数{}
        if(result.data.code == 200){
          return callback()
        }else{
          return callback(new Error(result.data.msg))
        }
      }).catch((err) => {
        console.log(err)
      });
    };

1.3 校验确认密码

1.3.1 后端实现校验确认密码

从页面中获取密码和确认密码，在对两者进行比较，如果相等就通过，不相等就重新输入

# 检测再次输入的密码
class CheckPawd(APIView):
    def post(self,request):
        # 从页面中获取密码和确认密码
        pawd = request.data.get("pawd")
        pwd = request.data.get("pwd")
        # 判断密码是否一致
        if pawd != pwd :
            return Response({
                "code" : 400,
                "msg" : "密码不一致"
            })
        return Response({
            "code" : 200,
            "msg" : "密码一致"
        })

写入路由

from django.urls import path
from users import views
urlpatterns = [
    path('check/username/<str:username>/',views.CheckUserNameView.as_view()),
    path("check/password/",views.CheckPassword.as_view()),
    path("check/pawd/",views.CheckPawd.as_view()),  # 确认密码

]
1.3.2 前端实现校验确认密码
    // 确认密码的校验方法
    let validateConfirmPass = (rule, value, callback) => {
      console.log("校验确认密码，规则", rule, "二次输入的密码", value, "回调函数", callback)
      // TODO 校验确认密码
      // 失败 return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      // 成功 return callback();
      this.$axios.post("/user/check/pawd/",
      {"pawd":this.RegisterUser.pass,
      "pwd":value}).then((result) => {
        if(result.data.code == 200){
          return callback()
        }else{
          return callback(new Error(result.data.msg))
        }
      }).catch((err) => {
        console.log(err)
      });
    };

1.4 校验手机号

1.4.1 后端实现校验手机号

校验手机号需要用到正则表达式进行判断，输入的手机号是否符合手机号格式或手机号长度是否符合

# 手机电话号码
class CheckMobile(APIView):
    def get(self,request,mobile):
        # 正则判断手机号
        rule = r'^1[3-9][0-9]{9}$'
        rs = re.findall(rule,mobile)
        # 如果不匹配
        if not rs:
            return Response({
                "code" : 400,
                "msg" : "手机号格式或长度不匹配"
            })
        # 在数据库查找手机号是否存在
        mobile_count = User.objects.filter(mobile=mobile).count()
        if mobile_count:
            return Response({
                "code" : 400,
                "msg" : "手机号已存在"
            })
        return Response({
            "code" : 200,
            "msg" : "手机号可用"
        })

写入路由

from django.urls import path
from users import views
urlpatterns = [
    path('check/username/<str:username>/',views.CheckUserNameView.as_view()),
    path("check/mobile/<str:mobile>/",views.CheckMobile.as_view()),
    path("check/password/",views.CheckPassword.as_view()),
    path("check/pawd/",views.CheckPawd.as_view()),

]
1.4.2 前端校验手机号
    // 手机号的校验方法
    let validateMobile = (rule, value, callback) => {
      console.log("校验手机号，规则", rule, "手机号", value, "回调函数", callback)
      // TODO 校验手机号
      // 失败 return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线")); 
      // 成功 return callback();
      this.$axios.get("/user/check/mobile/" + value + '/').then((result) => {
        if(result.data.code == 200){
          return callback()
        }else{
          return callback(new Error(result.data.msg))
        }
      }).catch((err) => {
        console.log(err)
      });
    };

1.5 校验验证码

想要校验验证码，首先得生成验证码的图片

1.5.1 生成验证码图片

后端

通过django中的模块，生成随机数和图片

class VerImageView(APIView):
    def get(self,request,uuid):
        # 1.生成创建验证码需要的字符串
        code = str(random.randint(1000,9999))
        # 2.根据字符串生成图片
        from captcha.image import ImageCaptcha
        img = ImageCaptcha()
        img_pic = img.generate(code)
        print("生成的图片是",img_pic)
        # 把验证码存到redis
        r = redis.Redis(host="localhost",port=6379,password="123456")
        r.set(uuid,code,ex=3000)     #失效时间5分钟
        print(code)
        print(uuid)
        return HttpResponse(img_pic,content_type="image/png")

写入路由

from django.urls import path
from users import views
urlpatterns = [
    path('check/username/<str:username>/',views.CheckUserNameView.as_view()),
    path("check/mobile/<str:mobile>/",views.CheckMobile.as_view()),
    path("check/password/",views.CheckPassword.as_view()),
    path("check/pawd/",views.CheckPawd.as_view()),
    path("check/image/<str:uuid>/",views.VerImageView.as_view()),   #生成图片

]

1.5.2 校验验证码

后端

需要从页面获取验证码，并且需要与验证码图片上的数字进行比较

class CheckCodeView(APIView):
    def post(self,request):
        # 从页面获取验证码和验证码图片上的字符串
        code = request.data.get("code")
        uuid = request.data.get("uuid")
        # 存入redis数据库中
        r = redis.Redis(host="localhost", port=6379, password="123456")
        sys_code = r.get(uuid)
        # 判断是否过期
        if not sys_code:
            return Response({
                "code" : 400,
                "msg" : "验证码过期"
            })
        sys_code_str = sys_code.decode()
        # 判断两者是否相等
        if sys_code_str != code:
            return Response({
                "code": 400,
                "msg": "验证码错误"
            })
        return Response({
            "code" : 200,
            "msg" : "验证通过"
        })

写入路由

from django.urls import path
from users import views
urlpatterns = [
    path('check/username/<str:username>/',views.CheckUserNameView.as_view()),
    path("check/mobile/<str:mobile>/",views.CheckMobile.as_view()),
    path("check/password/",views.CheckPassword.as_view()),
    path("check/pawd/",views.CheckPawd.as_view()),
    path("check/image/<str:uuid>/",views.VerImageView.as_view()),
    path("check/img/code/",views.CheckCodeView.as_view()),  #校验验证码
]
前端
    // 校验图片验证码
    let validateImageCode = (rule, value, callback) => {
      console.log("校验验证码，规则", rule, "二验证码", value, "回调函数", callback)
      // TODO 校验验证码
      // 失败 return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      // 成功 return callback();
      this.$axios.post("/user/check/img/code/",{
        "uuid" : this.imageCodeID,"code" : value
      }).then((result) => {
        if(result.data.code == 200){
            return callback()
        }else{
          return callback(new Error(result.data.msg))
        }
      }).catch((err) => {
        console.log(err)
        alert("页面错误")
      });
    };

1.6 注册按钮

1.6.1 后端实现注册

从页面获取用户名，密码，手机号以及是否勾选用户协议

class RegView(APIView):
    def post(self,request):
        # 获取用户名，密码，电话号码
        username = request.data.get("username")
        password = request.data.get("password")
        mobile = request.data.get("mobile")
        agree = request.data.get("agree")
        # 判断是否勾选协议
        if not int(agree):
            return Response({
                "code" : 400,
                "msg" : "请勾选协议"
            })
        # 判断用户名，密码，手机号是否为空
        if not username or not password or not mobile:
            return Response({
                "code" : 400,
                "msg" : "参数输入错误"
            })
        # 尝试将数据添加到数据库中
        try:
            User.objects.create(
                username = username,
                password = password,
                mobile = mobile
            )
            return Response({
                "code": 200,
                "msg": "注册成功"
            })
        # 失败
        except Exception as e:
            print(e)
            return Response({
                "code" : 400,
                "msg" : "注册失败"
            })

写入路由

from django.urls import path
from users import views
urlpatterns = [
    path('check/username/<str:username>/',views.CheckUserNameView.as_view()),
    path("check/mobile/<str:mobile>/",views.CheckMobile.as_view()),
    path("check/password/",views.CheckPassword.as_view()),
    path("check/pawd/",views.CheckPawd.as_view()),
    path("check/image/<str:uuid>/",views.VerImageView.as_view()),
    path("check/img/code/",views.CheckCodeView.as_view()),
    path("reg/",views.RegView.as_view()),   #注册
]
1.6.1 前端实现注册按钮
    Register() {
      // 是否同意用户协议
      if (!this.aggree) {
        this.flag = true
        return
      }
      // 已勾选，则不显示提示信息
      this.flag = false
      // 通过element自定义表单校验规则，校验用户输入的用户信息
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          // TODO 注册用户
          this.$axios.post("/user/reg/",{
            "username" : this.RegisterUser.name,
            "password" : this.RegisterUser.pass,
            "mobile" : this.RegisterUser.mobile,
            "agree" : this.aggree,
          }).then((result) => {
            if(result.data.code == 200){
              this.RegisterUser.name = ""
              this.RegisterUser.pass = ""
              this.RegisterUser.mobile = ""
              this.RegisterUser.confirmPass = ""
              this.RegisterUser.imageCode = ""
              this.aggree = false

              // 关闭注册弹窗
              this.isRegister = false

              this.notifySucceed(result.data.msg);
            }else{
              this.notifyError(result.data.msg)
            }
          }).catch((err) => {
            console.log(err)
            alert("页面错误")
          });
        } else {
          return false;
        }
      });
    },
Wbig
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Django项目：前后端联调/ModelViewSet
Ben_boba的博客
05-14 1908
django前后端结合_django前后端交互
weixin_39663258的博客
12-19 694
前后端交互的方式有两种，一种是自己写个html页面，插入数据，一种是使用django自带的后台管理，插入数据下面介绍方式1：post.htmlTitle{% csrf_token %}写文章的title：content:{% for category in categories %}{{ category.name }}{% endfor %}form这里指定是post还是get过来的数据走这个表...
Django前后端关联
dixiu6699的博客
08-09 152
在urls.py中建立映射关系，index/是你model代码模块中的函数，也可以是你在界面上制定的form表单中的action，这样就可以建立前后端的联系 <form action="/index/" method="post" class="form-horizontal" onsubmit="return check()"> {% csrf_token %} ...
django快速入门？太慢！光速入门django前后端连接了解一下~
weixin_42455699的博客
03-22 473
本文旨在闪速人们django，并可以执行一些简单的操作。
electron之cli4+electron 创建项目
wanfangkeji0123的博客
09-12 628
目录 1.使用技术栈 2.创建项目 3.打包 1.使用技术栈 electron v9.0.0 electron-builder vue+vuex+axios+element-ui+vue-cli4 2.创建项目 使用cli4 脚手架工具快速搭建项目，首先全局安装cli4 npm install -g @vue/cli @vue/cli-init # or yarn global add @vue/cli @vue/cli-init 创建项目 vue create..
Django 项目之快速和前端联调接口
她°
04-01 1444
出现的问题点： 前后端如果不在一块，需要将部署到服务器上面供前端使用，如果问题很多，那么就要频繁上传代码，run 起来，中间可能浪费很多时间。 如果在一起办公，那么可以很方便的沟通，只是沟通效率提高了，但是也没有解决联调的效率性，究竟怎么样的项目架构可以使得前后端都可以很快的联调接口呢 项目架构 如果是前后端分离的，一般我们采用前端新建一个项目，在编写的过程中去调用后端的接口，项目目录如下: 后端人员也会创建一个后端的项目，这里使用 django 举例，目录结构如下： 第三种方式是两者结合在一起，
Python+Vue+Django前后端分离的学习学生管理系统源码.zip
05-08
Python+Vue+Django前后端分离的学习学生管理系统源码 Python+Vue+Django前后端分离的学习学生管理系统源码 Python+Vue+Django前后端分离的学习学生管理系统源码 Python+Vue+Django前后端分离的学习学生管理...
解决django前后端分离csrf验证的问题
09-19
今天小编就为大家分享一篇解决django前后端分离csrf验证的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Python Django 前后端分离 API的方法
12-26
步骤 根据之前的文章已经搭建好 Django的目录 开始流程 运行 manage.py 文件 # 创建一个app startapp ulb_manager settings.py 文件中 设置 ...urls.py 文件中 注册接口 from django.conf.urls import url fro
前后端分离Django项目
08-14
前后端分离Django项目
django前后端分离开发（三）——前后端联调
热门推荐
Harold_96_lxw的博客
09-17 7万+
django前后端分离开发（三）——前后端联调 1、前端打包 在vue项目路径下 npm run build 2、修改django后端setting.py配置 #修改 'DIRS': [os.path.join(BASE_DIR, 'ui/dist')] #其中ui是vue项目名称 #新增 STATICFILES_DIRS = [os.path.join(BASE_DIR, 'ui/dist/static')] #其中ui是vue项目名称 3、修改django项目下主urls.py from djan
django项目如何连接前端_工作笔记前端小白如何搭建前端项目
weixin_39788131的博客
11-30 565
“前言，来到杭州差不多有两年左右了，大小小做过不少项目。之前都是有技术大佬在前面抗住、作为菜鸡的本人只要在大佬后面听大佬指挥摸鱼划水就行。最近公司接到一个新项目，由于大佬们纷纷出走，于是搭建前端框架的任务就落到本人的头上。本来是想选择react 进行前端开发，但现实由于学艺不精，不得不放弃react采用vue。下面就是使用vue-cli4搭建项目的全过程”首先 我们安装vue-cli4，...
django项目如何连接前端_Django干货知识分享，如何创建项目及应用？
weixin_39878646的博客
11-25 157
您好，欢迎来到这里学习Django框架，关注我会持续更新内容哦～如果本文对您有帮助，还请您点赞转发哦，谢谢！大纲创建项目了解项目文件结构创建应用了解应用文件结构运行第一个Hello World一、创建项目# 使用命令行工具django-admindjango-admin startproject myproject二、项目文件结构项目文件结构图__init__.py 这是一个空文件，其作用是声明m...
django项目如何连接前端_如何保证 Django 项目的数据一致性
weixin_39779530的博客
11-25 122
0x00 前言本文是《提升你的 Python 项目代码健壮性和性能》系列的第三篇文章。第一篇，讲的是如何 用 Type Annotation 提升你的 Python 代码健壮性第二篇，讲的是如何通过测试提升 Python 代码的健壮性第三篇，即本文，我们来谈谈 Django 项目并发可能带来的问题以及如何保持 Django项目的数据一致性。本文目录如下： 0x00 前言 : section ...
django项目如何连接前端_教程：基于 Django + React 实现电商平台
weixin_39630855的博客
11-29 466
虽然这个模特一点都不好看，但这不是重点。重点是她的衣服，作为一件商品所在的电商平台。有一个笑话，说的是一个程序员去相亲网站找对象，结果跑去给人家网站提交了一大堆的Bug，把相亲的事全忘了。你们去淘宝、京东买东西的时候，有没有想过那些组件背后的原理，它们是如何实现的呢？今天跟大家分享的这个教程就是关于电商平台搭建的。没错，这是一个全栈的教程。用 Django + React 搭建一个支持多语言、具有...
2.Django 前后端数据交互
m0_60721514的博客
06-12 2059
2. 项目准备 2.1 新建项目 3.1 路由层 3.2 视图层 3.3 静态文件 1.介绍 2. 存放位置 3. 创建目录划分子目录 4.项目需要的静态文件 3.5 静态路径开放 3.6 浏览器缓存 4.1 GET请求访问服务端 4.2 GET请求提交表单数据 4.3 POST请求提交表单 4.4 Csrf中间件问题 4.5 获取POST请求数据 4.6 获取GET请求数据 4.7 获取POST后面的数据 5. 连接数据库 5.1 选择数
django连接数据库建立账号注册登陆界面
编程知识分享，主打前端
07-12 3万+
Django连接数据库 坏境的需要：python、pip、django、mysql和其他的一些必要类库 windows系统下载mysql官网链接：https://dev.mysql.com/downloads/installer/ 下载安装好配置用户名和密码 然后再django工程的setting.py设置database 我创建的是Admin应用 下面是的配置对应mysql的账号密码和端口号（...
python-Django后端开发(三)连接MySQL
七刀的专栏
09-27 542
1.安装pymysq pip install pymysql 2.配置settings文件 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', # 数据库引擎 'NAME': 'Django1', # 数据库名称 'USER': 'root', # 链接数据库的用户名 'PASSWORD': 'root', # 链接数据库的密码
Django的前后端联调
soildog的博客
06-21 1071
前后端联调
django前后端实例，以及连接数据库
最新发布
06-09
好的，我可以为您提供一个简单的 Django 前后端实例，并且展示如何连接数据库。 首先，在 Django 中，前端和后端通常是通过模板语言来实现交互。模板语言是一种将数据和 HTML 代码结合起来的方式，可以让我们更方便...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值