大米商城注册

最新推荐文章于 2024-09-26 18:13:11 发布
最新推荐文章于 2024-09-26 18:13:11 发布
阅读量123 收藏
点赞数
文章标签： django python 中间件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZXY_lucky/article/details/125161282
版权
该博客介绍了使用Django REST框架搭建后端，包括配置settings，数据库设置，跨域处理，路由分发以及模型类创建。同时详细阐述了后端如何验证用户名、手机号、密码，并提供了前端校验方法。最后实现了注册功能，包括前端表单验证和后端数据写入。整个流程展示了前后端交互的完整过程。
摘要由CSDN通过智能技术生成

1.settings配置

# 注册
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',  # drf框架
    'corsheaders',     # 跨域 pip install cors
    'users',           # 注册用户子应用子应用
    'goods',    # 注册商品子应用
]

# 跨域
MIDDLEWARE = [
    "middleware.Loginmiddleware.CheckUser",
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'corsheaders.middleware.CorsMiddleware',  # 跨域中间件

]

# 配置数据库
DATABASES = {
    # 'default': {
    #     'ENGINE': 'django.db.backends.sqlite3',
    #     'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    # }
    'default': {
            'ENGINE': 'django.db.backends.mysql',
            'HOST':'localhost',
            'USER':'root',
            'POST':3306,
            "PASSWORD":'123123',
            'NAME':"h2111_p5"
        }
}

# 配置时间
TIME_ZONE = 'Asia/Shanghai'

# 配置跨域相关配置项 
# 注：单词不能写错
CORS_ORIGIN_WHITELIST = [  # 配置ip白名单
    "http://127.0.0.1:8080",
    "http://localhost:8080",
    "http://127.0.0.1:8000",
    "http://127.0.0.1:8866"
]
CORS_ALLOW_CREDENTIALS = True  # 允许cookie
CORS_ALLOW_METHODS = ("*")     # 配置允许的请求方式
CORS_ALLOW_HEADERS = ("*")     # 配置允许的请求头

2.安装数据库

import pymysql
pymysql.install_as_MySQLdb()

3.路由分发

主路由

from django.contrib import admin
from django.urls import path,include

urlpatterns = [
    path('admin/', admin.site.urls),
    path("user/",include("users.urls")),
    path("goods/",include("goods.urls"))
]

在子应用下创建urls.py文件

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.CheckMobileView.as_view()),       # 检测手机号
    path("check/password/",views.CheckPasswordView.as_view()),                # 检测密码
    path("check/password2/",views.CheckPasswordView2.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()),                   # 注册
    path("login/",views.LoginView.as_view()), # 登录
    path("index/images/",views.IndexImageView.as_view()), # 图片
    path("info/",views.UserInfoView.as_view()), # 获取用户信息
    path("addr/",views.AddrView.as_view()), # 用户收货地址信息
    path("pwd/change/",views.ChangePwdView.as_view()), # 修改密码
]

4.创建模型类

根据要求创建模型类

# 用户模型
class User(models.Model):
    username = models.CharField("用户名",max_length=32,unique=True)
    password = models.CharField("密码",max_length=32)
    mobile = models.CharField("手机号",max_length=16)

    class Meta:
        verbose_name = '用户表'
        verbose_name_plural = verbose_name

    def __str__(self):
        return "%s (%s)" % (self.username,self.mobile)

5.判断用户名

后端

from rest_framework.response import Response
from rest_framework.views import APIView
from users.models import User,IndexImage,Addr
from django.http import HttpResponse

# 定义检查用户名的类试图



class CheckUserNameView(APIView):
    def get(self,request,username):
        # 判断用户名是否输入，没有输入 username = NULL
        if not username:
            return Response({
                "code":400,
                "msg":'用户没输入'
            })

        # 检测用户名长度
        if not (6<= len(username) <= 32):
            return Response({
                "code":400,
                "msg":'用户长度不符'
            })

        # 检测用户名是否存在
        # 查询数据库有没有当前用户名
        user_count = User.objects.filter(username=username).count()
        if user_count:
            # 根据用户名查询出的用户条数不为0
            return Response({
                "code":400,
                "msg":'用户已存在'
            })

        return Response({
                "code":200,
                "msg":'用户输入成功'
            })

前端

 // 用户名的校验方法
    let validateName = (rule, value, callback) => {
      console.log("校验用户名，规则", rule, "用户名", value, "回调函数", callback)
      // TODO 校验用户名
      // 失败 return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      // 成功 return callback();

      if (!value){
        return
      }
      let url = "/user/check/username/" + value + "/";
      this.$axios.get(url).then((result) => {
        if (result.data.code == 200){
          return callback();
        }else{
          return callback(new Error(result.data.msg));
        }
        
      }).catch((err) => {
        console.log(err)
        alert('判错')
      });

    };

6.判断手机号

后端

import re
# 手机号校验
class CheckMobileView(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":"手机号输入正确"
        })

前端

// 手机号的校验方法
    let validateMobile = (rule, value, callback) => {
      console.log("校验手机号，规则", rule, "手机号", value, "回调函数", callback)
      // TODO 校验手机号
      // 失败 return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      // 成功 return callback();


      if (!value){
        return
      }
      let url = "/user/check/mobile/" + value + "/";
      this.$axios.get(url).then((resp)=>{
        if (resp.data.code == 200){
          return callback();
        }else{
          return callback(new Error(resp.data.msg))
        }
      }).catch((err)=>{
        console.log(err)
        alert("报错")
      })
    };

7.检验密码

后端

# 密码校验
class CheckPasswordView(APIView):
    def post(self,request):
        pwd = request.data.get("pwd")
        # 校验
        if not (6<= len(pwd) <= 32):
            return Response({
                "code":400,
                "msg":'密码长度不符'
            })
        return Response({
                "code":200,
                "msg":'密码输入成功'
            })

前端

// 密码的校验方法
    let validatePass = (rule, value, callback) => {
      console.log("校验密码，规则", rule, "密码", value, "回调函数", callback)
      // TODO 校验密码
      // 失败 return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      // 成功 return callback();


      if (!value){
        return
      }
      let url = "/user/check/password/"
      this.$axios.post(url,{"pwd":value}).then((resp)=>{
        
        if (resp.data.code == 200){
          return callback();
        }else{
          return callback(new Error(resp.data.msg))
        }
      }).catch((err)=>{
        console.log(err)
        alert("报错")
      })
    };

8.确认密码

后端

# 验证两次输入密码是否一致
class CheckPasswordView2(APIView):
    def post(self,request):
        pwd = request.data.get('pwd') # 密码
        pwd1 = request.data.get("pwd1") # 再次输入密码

        if pwd != pwd1:
            return Response({
                "code":400,
                "msg":"密码不一致"
            })
        return  Response({
            "code":200,
            "msg":"密码一致"
        })

前端

// 确认密码的校验方法
    let validateConfirmPass = (rule, value, callback) => {
      console.log("校验确认密码，规则", rule, "二次输入的密码", value, "回调函数", callback)
      // TODO 校验确认密码
      // 失败 return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      // 成功 return callback();

      let url = '/user/check/password2/';
      this.$axios.post(url,{"pwd":this.RegisterUser.pass,"pwd1":value})
      .then((resp)=>{
        if(resp.data.code==200){
          return callback();
        }else{
          return callback(new Error(resp.data.msg))
        }
      }).catch((err)=>{
        console.log(err)
        alert('报错')
      })
    };

9.生成验证码/检验验证码

后端

# 生成验证码
import random
class VerImageView(APIView):
    def get(self,request,uuid):
        # 1.生成创建验证码所需要的字符串 random
        code = str(random.randint(1000,9999))

        # 2.根据字符串变成图片
        from captcha.image import ImageCaptcha
        img = ImageCaptcha()  # 实例化验证码的类
        img_pic = img.generate(code)  # 生成器生成验证码图片
        print('生成的图片是', img_pic)  # 返回值是夜歌IO字节流
        # return HttpResponse(img_pic,content_type="image/png")

        # 把验证码存到redis
        import redis
        r = redis.Redis(host="127.0.0.1",port=6379,password='123123')
        r.set(uuid,code,ex=60 * 5) # 失效时间5分钟

        print(uuid)
        print(code)
        return HttpResponse(img_pic, content_type="image/png")

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="123123")
        sys_code = r.get(uuid)

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

        # 将code转化为字符串
        sys_code_str = sys_code.decode()

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

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

前端

 // 生成图片验证码地址
    genImageCode() {
      // 生成一个uuid
      this.imageCodeID = uuid4()
      // 生成一个图片验证码地址
      this.iamgeCodeUrl = "user/check/image/" + this.imageCodeID + "/"
    },
    
// 校验图片验证码
    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("页面报错")
      })
    };

10.注册

后端

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):
            print(agree)
            return Response({
                "code":400,
                "msg":"请勾选协议"
            })

        # 判断用户输入信息是否正确
        if not username or not password or not mobile:
            return Response({
                "code":400,
                "msg":"参数输入有误"
            })

        # TODO 检验用户名、密码、手机号

        # 校验完毕，写入数据库
        try:
            User.objects.create(
                username=username,
                password=password,
                mobile=mobile
            )

            return Response({
                "code" :200,
                "msg":"注册成功"
            })
        except Exception as e:
            return Response({
                "code":400,
                "msg":"注册失败"
            })

前端

// 用户注册
    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((resp)=>{
            if(resp.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(resp.data.msg)
            }else{
              // alert('注册失败')
              this.notifyError(resp.data.msg)
            }
          }).catch((err)=>{
            console.log(err)
            alert('页面报错')
          })

        } else {
          return false;
        }
      });
    },
ZXY_lucky
关注
小米商城代码
weixin_72964830的博客
09-09 1053
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/xiaomi.css"/> <script type="text/javascript" src="js/jquery-2.1.4.min.js"></s
仿大米官网
10-23
8. **安全性**：仿大米官网可能涉及用户登录注册、支付功能，因此必须考虑网络安全，如使用HTTPS加密传输、防止SQL注入、XSS攻击等。 9. **购物车逻辑**：购物车功能需要实现添加商品、修改数量、删除商品、计算...
大米商城项目总结
m0_70015188的博客
07-04 235
1.创建子应用 2.中间件 3.跨域配置 4.数据库 5.配置白名单 6.静态文件 7.创建模型类、路由分发首先是：校验用户名、校验手机号、图形验证码、校验图形验证码、注册、登录、用户中心、用户添加地址、用户修改密码 2.校验手机号 3.图形验证码 4.校验图形验证码 5.注册 6.登录用户 7.用户中心 8.用户地址 9.修改用户密码 3.创建商品子应用 首先是： 轮播图、获取一类商品信息、 获取热门商品、获取单个商品详情、获取单个商品的轮播图、添加历史记录、 添加收藏、购物车、实现全
js逆向 大米小米注册，EUI email password
m0_48072181的博客
12-06 994
2.搜索相关参数值 EUI，email ,password出来一大堆，找了好久定位到了位置看图。AES接口需要把key传递过去，但是接口里没有发现key。所有单步看了很久，KEY拼接在EUI参数上 蛋疼。1.搜索接口地址，调用栈追了好多，没看到。主要问题：不好定位参数的位置。单步发现这个地方加密了参数。
大米cms支付漏洞
weixin_53198216的博客
08-02 144
3.将数量改为-1，点击购买，付款方式改为站内付款，点击提交订单。1.进入页面进行注册登录。2.进入商城页面选择商品。5.发现我们的余额变了。
[附源码]PHP计算机毕业设计大米科技手机网站（程序+LW）
Python程序源码老哥
12-20 246
附源码]PHP计算机毕业设计大米科技手机网站（程序+LW）该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：小皮PHPstudy。项目技术：php+ Vue等等组成，B/S模式 +Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发环境：Vscode或HbuilderX都可以。推荐HbuilderX;3.mysql环境：建议是用5.7版本均可。
【业务安全05】业务逻辑漏洞之篡改交易数据——基于大米CMS-V5.4电子商城
Fighting_hawk的博客
03-17 4443
1. 加深对业务逻辑漏洞的理解。 2. 掌握篡改交易数据这个业务逻辑漏洞的测试方法。
大米项目 后端用户部分详解
czy1206527605的博客
06-22 174
1.注册输入的检测 Ss1-用户名检测 Ss2-手机号检测 Ss3-密码格式检测 Ss3.2-密码校验 Ss4-生成验证码 Ss4.2-验证码校验 Ss5-注册的类试图 二.登录 Ss6-登录的类试图 三.主页轮播图 四.用户信息的获取展示（测试） 五.修改用户信息（姓名，手机号，地址） 六.收货地址的增删查 六.密码的修改 拓展-支付宝支付块 1.支付宝支付 2.支付宝测试 路由展示...
乐优商城项目
m0_45209551的博客
06-01 3354
了解电商行业了解乐优商城项目结构能独立搭建项目基本框架能参考使用ES6的新语法学习电商项目，自然要先了解这个行业，所以我们首先来聊聊电商行业主要从需求方、盈利模式、技术侧重点这三个方面来看它们的不同各种企业里面用的管理系统（ERP、HR、OA、CRM、物流管理系统。。。。。。。）需求方：公司、企业内部盈利模式：项目本身卖钱技术侧重点：业务功能门户网站、电商网站：baidu.com、qq.com、taobao.com、jd.com ......需求方：广大用户群体盈利模式：虚拟币、增值服务、广告收益.....
米米商城项目实战（含项目源码）
码农研究僧的博客
08-18 6235
目录前言 前言 基于该项目的框架以及文章 还在完善以及更新 目前所需要的技术： 基础知识： java零基础从入门到精通（全） javaSE从入门到精通（全） 服务端： Spring框架从入门到学精（全） springmvc Mybatis从入门到精通（全） 数据库： 数据库中增删改常用语法语句（全） 数据库查询常用语句语法 web服务器：Tomcat详细配置（全） 项目管理：Maven实战从入门到精通（全） 前端： jQuery从入门到精通（全） bootstrap JavaScript从入门
大米CMS最新官方版 v3.0
04-03
大米CMS最新官方版，大米CMS是一个免费开源、快速、简单的PC建站和手机建站集成一体化系统，致力于为用户提供简单、快捷的PC建站和智能...注册大米CMS论坛会员免费还可以获取顶级域名隐藏转发服务以及大米CMS更多模板.
dami大米cms系统源码
08-07
dami大米CMS将这一概念与电子商务功能相结合，使得商城的运营和管理更加便捷，包括商品发布、订单处理、会员管理等都能在一个统一的平台上完成。 【电脑手机端兼容】dami大米CMS具备跨平台特性，能够适应不同设备的...
微信小程序-稻香米商城.zip
03-07
在这个“微信小程序-稻香米商城.zip”压缩包中，包含了一个名为"wechat_mall_applet-master"的项目源码，用于构建一个以销售大米为主的微型电商平台。这个小程序源码资源是开发者的宝贵参考资料，对于学习微信小程序...
电商选择及商城运作方案.ppt
09-21
例如，12斤的大米快递费可能达到60多元。 在选择电商平台时，天猫的优势在于其多档价格体系、较高的入驻门槛带来的正规性保证、便捷的发货流程，以及庞大的流量和全面的商品种类，使得推广活动更具效果。 至于天猫...
django使用笔记1--快速开始
罗曼蒂克在消亡
09-26 274
使用django脚手架，快速初始化python Web项目。
Django 请求配置
A乐神的博客
09-22 806
Django 请求配置
Vue.js与Flask/Django后端配合
清浅
09-24 226
使用Webpack进行构建：将Vue.js应用程序和后端API打包在一起，并使用Webpack等构建工具进行构建。在Vue.js应用程序中，您可以使用Vue Router进行页面路由，使用Axios进行HTTP请求，并使用Vuex进行状态管理。连接到后端API：在Vue.js应用程序中，使用Axios或其他HTTP库来连接到后端API。设置后端API：在Flask或Django中设置API端点，这些端点将用于与前端Vue.js应用程序进行通信。
Python 课程21-Django
最新发布
tim654654的博客
09-26 974
在当今互联网时代，Web开发已成为一项必备技能。而Python作为一门简洁、高效的编程语言，其Web框架Django以其强大的功能和快速开发的特点，受到了广大开发者的青睐。如果你想深入学习Django，构建自己的Web应用，那么本教程将是你的最佳起点。本教程将以循序渐进的方式，带你从零开始，深入了解Django的各个核心组件，包括模型、视图、模板、URL路由等。通过实践，你将学会如何创建一个功能完整的博客应用。Django项目是由多个应用组成的，每个应用负责特定的功能。应用可以很容易地被复用。在中，定义。
轻量化CNN在大米分选中的性能评估与应用
本文主要探讨了"基于轻量化卷积神经网络的大米分选实验"这一主题，由董玉德和甘骐榕两位作者在合肥工业大学数字化设计与制造省级重点实验室以及安徽宏实光机电高科有限公司进行的研究。针对大米质量控制领域中人工...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值