前后联调初阶

已于 2022-05-25 18:03:34 修改
阅读量393 收藏 5
点赞数 1
文章标签： python 开发语言 django vue.js 前端
于 2022-05-25 17:57:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h2463400852/article/details/124968771
版权

注册功能

一.注册功能的逻辑功能,配置相关配置

在这里插入图片描述

一.1 编写(model)模型类

定义一个User(用户)的模型类

在这里插入图片描述

一.2配置setting文件

这个配置文件前几篇很熟悉了不多说了
在这里插入图片描述
中间件
把csrf防跨站伪造关闭
导入

'corsheaders.middleware.CorsMiddleware'

在这里插入图片描述数据库配置
在这里插入图片描述
ip白名单
配置允许cookie访问,请求方式 请求头
在这里插入图片描述

一.3 迁移和之行迁移

python manage.py makemigrations users  #迁移
python manage.py migrate users   # 执行迁移

一.4 路由分发

主路由
在这里插入图片描述
在子应用下创建一个py文件urls 用于存放 子路由
在这里插入图片描述

二 实现编写和实现功能

二.1 编写视图(views) 用户注册

用户注册

class CheckUserNameView(APIView):
    def get(self,request,username):
        # 判断用户名是否输入，没有输入username = ""
        if not username:
            return Response({
                'code':400,
                'msg':'用户名不可用不'
            })
        # 程序走到这一步，代表 username 一定有东西
        if not (6 <= len(username) <= 32):   #len  函数  判断一个字符串的长度
            # 查询一下数据库有没有username的这条数据
            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':'用户名可以使用'
        })

二.1.①用户注册路由配置

动态路由,str:username的参数

path('check/username/<str:username>/', views.CheckUserNameView.as_view()),

二.2 确认密码

post请求,
判断 如果pwd 为空的话 返回一个 code400,msg 请输入密码
简单判断
长度 不是 小于等于6 和 大于等于32 返回 code 400 msg:长度不符合规定
最后返回一个response code 200 密码可用使用
在这里插入图片描述
放个代码块方便复制 ![在这里插入图片描述](https://img-blog.csdnimg.cn/6e954240bc71431e8b40388d5ef1e25b.gif

class CheckPasswordView(APIView):
    def post(self,request):
        pwd = request.data.get('pwd1')
        print(pwd)
        # 校验 密码
        if pwd == '':
            return Response({
                'code':400,
                'msg':'请输入密码'
            })
        else:
            if not (6 <= len(pwd) <= 32) :
                return Response({
                'code':400,
                'msg': '长度格式不符合规定'
                })
        return Response({
            'code':200,
            'msg':'密码可用'
        })

二.2.①确认密码路由

路由

path("check/password/", views.CheckPasswordView.as_view()),

二.3手机号注册

正则匹配一下手机号要求
1开头 第二位3-9 第三位0-9 在加上 9位 共11位,
简单小判断
如果不是的返回一个 长度不符合
过滤保存
判断 存在的话 里面有 就返回一个存在
最后 response 可以使用

在这里插入图片描述

二.3.① 手机号注册的路由

path('check/mobile/<str:mobile>/', views.CheckMobileView.as_view()),

二.4.确认密码 二次确认密码 ‘和上面顺序写反了问题不大’

获取接收两个参数
简单小判断 如果密码 不等于确认密码
return 一个 response 密码不一致
最后 返回一个 response code 200 msg 可以使用
在这里插入图片描述

二.4.①二次确认密码的路由

path('check/password2/', views.CheckPwdView.as_view()),

二.5.生成图片验证码！！！！

get 请求
导包 pycham自带的 随即生成字符串 random
把字符串变成图片的一个 导包 captcha 导入一下
实例化验证码
生成器生成验证图片

在这里插入图片描述
链接到redis数据库
host 127.0.0.1 端口6379, 密码是自己的密码 db 到 1的数据库
可以到redis里面看看

在这里插入图片描述
可以看到是空的
在这里插入图片描述
打开前端 运行前端
在这里插入图片描述
点击可以获取图片
控制台出的什么？
get 一下看看
在这里插入图片描述
对应的数

二.5.①生成验证码路由

在这里插入图片描述

二.6校验验证码

注释的很清楚 不逼逼了![在这里插入图片描述](https://img-blog.csdnimg.cn/6810acdef80f44608c68a212a070e605.jpeg

class CheckCodeView(APIView):
    def post(self,request):
        code = request.data.get("code")   #用户输入的验证码
        uuid = request.data.get("uuid")   #用户的唯一标志

        # 1.链接数据库，取出uuid对应的验证码
        import redis
        r = redis.Redis(host="127.0.0.1", password=123456,db=1)
        sys_code = r.get(uuid)

        # 如果uuid对应的数据为空的话，说明验证码已过期
        if not sys_code:
            return Response({
                "code":400,
                "msg":'验证码已过期'
            })
        sys_code_str = sys_code.decode()

        # 2.用户输入的验证码和数据库的验证码做比对
        if sys_code_str != code:
            # 如果不一致，验证码错误
            return Response({
                "code":400,
                "msg":'验证码错误'
            })

        # 如果一致，说明验证码通过
        return Response({
            "code":200,
            "msg":'校验通过'
        })

二.6.①校验验证码路由

   path('check/img/code/', views.CheckCodeView.as_view()),
    # 校验验证码

二.7 校验注册

简单了和上面差不多 不多说了
post请求 获取相应的数据 然后小判断 返回response

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):     #  字符串的0 不可用not 判断
            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':'失败'
            })

二.7.①注册路由

path('reg/',views.RegView.as_view()),

三.注册前端编写

三.1用户名校验

// 用户名的校验方法
    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(resp=>{
        console.log(resp);
        if(resp.data.code == 200){
          return callback();
        }else{
          return callback(new Error(resp.data.msg));
        }
      }).catch(err=>{
        console.log(err);
        // alert('页面报错')
      })

三.2 前端手机号校验

axios请求,get 地址 then 成功走下面 失败走catch
在这里插入图片描述

三.3 前端密码校验

// 密码的校验方法
    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/',{pwd1:this.RegisterUser.pass}).then(resp=>{
        console.log(resp);
        if(resp.data.code == 200){
          return callback();
        }else{
          return callback(new Error(resp.data.msg));
        }
      }).catch(err=>{
        console.log(err);
        // alert('校验密码页面报错')
      })

三.4.确认密码(二次确认)前端校验

// 确认密码的校验方法
    let validateConfirmPass = (rule, value, callback) => {
      console.log("校验确认密码，规则", rule, "二次输入的密码", value, "回调函数", callback)
      // TODO 校验确认密码
      // 失败 return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      // 成功 return callback();
            this.$axios.post('user/check/password/',{pwd1:this.RegisterUser.pass,pwd2:this.RegisterUser.confirmPass}).then(resp=>{
        console.log(resp);
        if(resp.data.code == 200){
          return callback();
        }else{
          return callback(new Error(resp.data.msg));
        }
      }).catch(err=>{
        console.log(err);
        // alert('校验密码页面报错')
      })```

##  三.5前端图片校验

```python
 // 校验图片验证码
    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(resp=>{
        if(resp.data.code == 200){
          return callback();
        }else{
          return callback(new Error(resp.data.msg))
        }
      }).catch(err=>{
        console.log(err)
        alert('校验图片页面报错')
      })

三.5.前端图片校验注册

  this.$axios.post("/user/check/img/code/",{
        "uuid":this.imageCodeID,
        "code":value,
      }).then(resp=>{
        if(resp.data.code == 200){
          return callback();
        }else{
          return callback(new Error(resp.data.msg))
        }
      }).catch(err=>{
        console.log(err)
        alert('校验图片页面报错')
      })
    };

三.6.前端注册校验(难)

在这里插入代码片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(res=>{
            if (res.data.code == 200){
              // alert("注册成功")
              // 清空注册输入的内容
              this.RegisterUser.name = ""
              this.RegisterUser.pass = ""
              this.RegisterUser.mobile = ""
              this.RegisterUser.confirmPass = ""
              this.RegisterUser.imageCode = ""
              this.aggree = false

              //关闭注册弹窗
              this.isRegister = false
              this.notifySucceed(res.data.msg);
            }else{
              // alert("注册失败")
              this.nottifyError(res.data.msg);
            }
          }).catch(err=>{
            console.log(err)
            alert("页面报错")
          })
        } else {
          return false;
        }
      });

四. 使用APIPOST检查后端代码

四.1用户

长度符合 code200

在这里插入图片描述

长度不符合 code 400
在这里插入图片描述

四.2 手机号

符合长度并符合要求 1开头 第二位3-9
在这里插入图片描述

四.3密码

注意一下画圈地方
长度不够我们之前定义的 至少6位 就 code 一个400
在这里插入图片描述在这里插入图片描述

四.4图片

检验图片
在这里插入图片描述

四.5注册

在这里插入图片描述
结束

Jnin
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue项目前后端联调(使用proxyTable实现跨域方式)
10-15
主要介绍了Vue项目前后端联调(使用proxyTable实现跨域方式)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基础JNI语法和常见使用
xuexiangjys的博客
10-17 1633
基础JNI语法 基础类型 Java类型 native类型 描述 boolean jboolean unsigned 8 bits byte jbyte signed 8 bits char jchar unsigned 16 bits short jshort signed 16 bits int jint signed 32 bits long jlong s...
初识Django
h2463400852的博客
04-23 2382
😀
前端项目开发流程与前后端联调
赵广陆
01-30 5835
目录1 前端项目开发流程1.1 项目开发流程1.1.1定义路由模块1.1.2 定义api模块1.1.3 定义页面组件脚本1.1.4 定义页面组件模板1.2项目执行流程1.2.1 页面加载流程1.2.2 页面渲染流程2 分页列表组件2.1 分页查询2.1.1 定义api模块2.1.2、定义页面组件脚本2.1.3、定义页面组件模板2.1.4、改变每页条数2.1.5、翻页2.1.6、序号列2.1.7、查询表单2.2 数据删除2.2.1、定义api模块2.2.2、定义页面组件模板2.2.3、定义页面组件脚本2.3
什么是前后端联调？
yhr0322的博客
11-25 1万+
什么是前后端联调？？ 前后端联调是一种真实业务数据和本地mock数据之间来回切换以达到前后端分离架构下的不同开发速度时数据交换的一种方式方法 需要前后端联调时的应用资源！ 1.css,js,图片等静态资源文件。 2.ajax用来获取后端的数据。 需要前后端联调时的应用场景！ 1.开发阶段 2.调试阶段 前后端分离的架构的应用可能也分为两种情况： 1.前后端完全分离，前后端分别拥有自己的域名和服务器...
前后端联调总结
weixin_42448406的博客
06-22 8931
一、前后端联调的具体过程 1、swagger测试 2、测试api：浏览器network页签的xhr中的请求响应是否成功 3、测试数据绑定 4、数据渲染：模板中的html 二、具体功能实现 1、teacher.js,api模块，用来定义接口调用后端实现的接口 // @ 符号在build/webpack.base.conf.js 中配置 表示 'src' 路径 import request from '@/utils/request' export default{ // 查询教师列表 list() {
使用springboot 前后端联调的一个前端代码
08-21
使用springboot 前后端联调的一个前端代码
联调前前联调前前联调前前
最新发布
05-22
联调前前联调前前联调前前
安卓Unity联调
03-14
安卓 Unity 联调实例，告诉玩家如何使用Unity的classes的UnityPlayerActivity进行联调
联调后后联调后后联调后后联调后后
05-22
联调后后联调后后联调后后联调后后
java jni框架_Java-在调整JNIN框架时出现的问题
weixin_36295500的博客
02-16 224
在一个previous SO question我说的是一些关于MDI体系结构的问题。我现在在调整我的JinternalFrame的大小时遇到了另一个问题。这是a short video这说明了这一点。我有一个班:干部,基本上是我的金牛座。public class Cadre extends JInternalFrame{/** Largeur par d'une fenêtre interne ...
JNI 实战全面解析
热门推荐
banketree
11-01 10万+
项目决定移植一款C++开源项目到Android平台，开始对JNI深入研究。 JNI是什么？ JNI(Java Native Interface)意为JAVA本地调用，它允许Java代码和其他语言写的代码进行交互，简单的说，一种在Java虚拟机控制下执行代码的标准机制。 NDK是什么？ Android NDK（Native Development Kit ）是一套工具集合，允许你用像C/C++语言那样实现应用程序的一部分。 为什么要用NDK？ 1、安全性，java是半解释型语言，很容易被反汇编后拿到源代码文件
前后端联调什么意思？
dengshenjue2256的博客
05-29 3898
联调就是你跟后台接口的调试，你需要什么参数，后台接口返回你什么。 转载于:https://www.cnblogs.com/Chamberlain/p/10946490.html
联调注意事项
Object的博客
03-16 1750
1、首先解决跨域问题。 2、联调时确保双方网络在同一网络下，如果是笔记本确保都插网线，不使用无线。 3、列表和查询页：提供正确的展示字段和查询字段，时间类查询尽量用字符串接收，避免无谓的错误(常常是格式不匹配搜不到)。 4、添加和修改，注意时间格式的入参是否正确。如果控制台报400，多是由于参数格式不对的原因造成的。 5、理解业务需求，注意业务规则约束。 6、有耐心，一定要有耐心，不要急...
前后端联调（1） ——Web前端部分
loycine的博客
05-10 8429
前后端联调 问题引出 在前后端约定好api接口后，同步进行开发，前端没有数据支持，造成了阻塞。 这时候一般前端只能做假数据（专业点叫mock数据，^_^）理想情况下定义好api路径和数据之间的映射即可。但这是就有第一个问题。 前端是否需要写本地数据？如果写本地数据的话，那就意味着要写本地的相对路径，那如果最后要来修改的接口呢？（那如果后台开发的慢了，最后会有多少个接口要修改呀。 mock数据，...
前后端联调
静水流深de博客
04-22 1667
前后端联调 访问服务器的数据 config-index.js-proxyTable-api-target(修改服务器名称，IP地址) ifconfig:查看IP地址 192.168.3.14 "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js", "star...
【swagger】前后端分离联调利器——swagger安装和使用
哈士奇
11-16 5132
一、前言      互联网发展越来越迅速，近来项目中使用了前后端分离的模式。前端开发使用Angular4，后端开发使用SSM框架。这样的话就有了前后端联调的问题，接口数据类型，接口返回参数等等问题。项目初期的时候使用postman进行测试，但是测试比较麻烦，需要把url粘贴进去，然后再测试，后来发现了一个联调利器——swagger。      经过了3个月使用，发现这个联调利器真的是很好使，所以记录
pagehelper前后端联调
10-26
在前后端联调时，可以通过在controller中编写分页接口，使用PageHelper插件进行分页查询，并将查询结果返回给前端。在前端页面中，可以通过调用该接口获取分页数据，并进行展示。需要注意的是，在使用PageHelper插件...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值