【Django开发】前后端分离django美多商城项目第3篇：用户注册业务实现,用户注册前端逻辑【附代码文档】

举报
程序员一诺python 发表于 2025/07/02 18:15:06 2025/07/02
【摘要】 欢迎来到美多商城！ 项目需求分析 1. 项目主要页面介绍 2. 归纳项目主要模块 3. 知识要点 项目架构设计 1. 项目开发模式 2. 项目运行机制 项目介绍 创建工程 1. 准备项目代码仓库 3. 创建美多商城工程 配置开发环境 1. 新建配置文件 2. 指定开发环境配置文件 配置Jinja2模板引擎 1. 安装Jinja2扩展包 配置MySQL数据库 3. 安装PyMyS

教程总体简介：欢迎来到美多商城！ 项目需求分析 1. 项目主要页面介绍 2. 归纳项目主要模块 3. 知识要点 项目架构设计 1. 项目开发模式 2. 项目运行机制 项目介绍 创建工程 1. 准备项目代码仓库 3. 创建美多商城工程 配置开发环境 1. 新建配置文件 2. 指定开发环境配置文件 配置Jinja2模板引擎 1. 安装Jinja2扩展包 配置MySQL数据库 3. 安装PyMySQL扩展包 配置Redis数据库 1. 安装django-redis扩展包 配置工程日志 2. 准备日志文件目录 3. 日志记录器的使用 4. Git管理工程日志 配置前端静态文件 2. 指定静态文件加载路径 工程创建和配置 项目准备 收货地址 展示地址前后端逻辑 1. 展示地址接口设计和定义 设置默认地址 2. 设置默认地址后端逻辑实现 修改地址标题 3. 修改地址标题前端逻辑实现 修改密码 1. 修改密码后端逻辑 用户中心 商品数据库表设计 SPU和SKU 1. SPU介绍 思考 首页广告数据库表分析 2. 定义首页广告模型类 文件存储方案FastDFS 1. FastDFS介绍 准备商品数据 容器化方案Docker 1. Docker介绍 2. Docker安装（ubuntu 16.04） Docker和FastDFS上传和下载文件 1. Docker安装运行FastDFS 3. 浏览器下载并渲染图片 录入商品数据和图片数据 1. SQL脚本录入商品数据 2. FastDFS服务器录入图片数据 首页广告 展示首页商品频道分类 1. 分析首页商品频道分类数据结构 自定义Django文件存储类 1. Django文件存储类url()方法介绍 商品列表页分析 1. 商品列表页组成结构分析 列表页面包屑导航 列表页分页和排序 列表页热销排行 1. 查询列表页热销排行数据 全文检索方案Elasticsearch 1. 全文检索和搜索引擎原理 3. 使用Docker安装Elasticsearch 商品搜索 Haystack扩展建立索引 1. Haystack介绍和安装配置 3. 全文检索测试 渲染商品搜索结果 1. 准备商品搜索结果页面 商品详情页分析和准备 3. 商品详情页初步渲染 展示详情页数据 1. 查询和渲染SKU详情信息 3. 查询和渲染详情、包装和售后信息 商品详情页 统计分类商品访问量 设计浏览记录存储方案 1. 存储数据说明 保存和查询浏览记录 1. 保存用户浏览记录 商品 购物车存储方案 1. 登录用户购物车存储方案 购物车管理 添加购物车 展示商品页面简单购物车 订单 结算订单 1. 结算订单逻辑分析 4.结算订单页面渲染 创建订单数据库表 2. 订单模型类迁移建表 保存订单基本信息和订单商品信息 2. 保存订单基本信息 使用事务保存订单数据 1. Django中事务的使用 展示用户注册页面 创建用户模块子应用 2. 查看项目导包路径 追加导包路径 2. 重新注册用户模块应用 定义用户模型类 2. Django默认用户模型类 用户注册业务逻辑分析 用户注册接口设计和定义 1. 设计接口基本思路 2. 用户注册接口设计 提交订单 使用乐观锁并发下单 1. 并发下单问题演示和解决方案 3. MySQL事务隔离级别 展示提交订单成功页面 我的订单 订单支付功能 保存订单支付结果 评价订单商品 详情页展示评价信息 支付 页面静态化 MySQL读写分离 性能优化 状态保持 1. login()方法介绍 3. 查看状态保持结果 用户名重复注册 1. 用户名重复注册逻辑分析 图形验证码逻辑分析 容联云通讯短信平台 2. 容联云通讯短信SDK测试 3. 封装发送短信单例类 短信验证码后端逻辑 1. 短信验证码接口设计 补充注册时短信验证逻辑 避免频繁发送短信验证码 pipeline操作Redis数据库 1. pipeline的介绍 生产者消费者设计模式 RabbitMQ介绍和使用 3. 新建administrator用户 4. RabbitMQ配置远程访问 Celery介绍和使用 2. 创建Celery实例并加载配置 4. 启动Celery服务 5. 调用发送短信任务 6. 补充celery worker的工作模式 异步方案RabbitMQ和Celery 验证码 账号登录 用户名登录 3. 用户名登录接口定义 首页用户名展示 2. 用户名写入到cookie 3. Vue渲染首页用户名 退出登录 判断用户是否登录 1. 展示用户中心界面 2. is_authenticate 判断用户是否登录 3. login_required装饰器 判断用户是否登录 4. 登录时next参数的使用 1. 定义模型类基类 OAuth2.0认证获取openid 2. 接收Authorization Code 4. 本机绑定www.meiduo.site域名 openid是否绑定用户的处理 1. 判断openid是否绑定过用户 4. 补充itsdangerous的使用 用户基本信息 添加邮箱后端逻辑 3. 判断用户是否登录并返回JSON Django发送邮件的配置 2. 准备发邮件服务器 发送邮箱验证邮件 1. 定义和调用发送邮件异步任务 2. 生成邮箱验证链接 添加和验证邮箱 省市区三级联动 2. 准备省市区模型和数据

完整笔记资料代码：https://gitee.com/yinuo112/Backend/tree/master/Django/前后端分离django美多商城项目/note.md

感兴趣的小伙伴可以自取哦~

全套教程部分目录：

部分文件图片：

用户注册业务实现

用户注册前端逻辑

为了学会使用Vue.js的双向绑定实现用户的交互和页面局部刷新效果。

1. 用户注册页面绑定Vue数据

1.准备div盒子标签

1
2
3
4
5
<div id="app">
    <body>
    ......
    </body>
</div>

2.register.html

  • 绑定内容：变量、事件、错误提示等
1
2
3
4
5
<form method="post" class="register_form" @submit="on_submit" v-cloak>
    {{ csrf_input }}
    <ul>
        <li>
            <label>用户名:</label>
            <input type="text" v-model="username" @blur="check_username" name="username" id="user_name">
            <span class="error_tip" v-show="error_name">[[ error_name_message ]]</span>
        </li>
        <li>
            <label>密码:</label>
            <input type="password" v-model="password" @blur="check_password" name="password" id="pwd">
            <span class="error_tip" v-show="error_password">请输入8-20位的密码</span>
        </li>
        <li>
            <label>确认密码:</label>
            <input type="password" v-model="password2" @blur="check_password2" name="password2" id="cpwd">
            <span class="error_tip" v-show="error_password2">两次输入的密码不一致</span>
        </li>
        <li>
            <label>号:</label>
            <input type="text" v-model="mobile" @blur="check_mobile" name="mobile" id="phone">
            <span class="error_tip" v-show="error_mobile">[[ error_mobile_message ]]</span>
        </li>
        <li>
            <label>图形验证码:</label>
            <input type="text" name="image_code" id="pic_code" class="msg_input">
            <img src="{{ static('images/pic_code.jpg') }}" alt="图形验证码" class="pic_code">
            <span class="error_tip">请填写图形验证码</span>
        </li>
        <li>
            <label>短信验证码:</label>
            <input type="text" name="sms_code" id="msg_code" class="msg_input">
            <a href="javascript:;" class="get_msg_code">获取短信验证码</a>
            <span class="error_tip">请填写短信验证码</span>
        </li>
        <li class="agreement">
            <input type="checkbox" v-model="allow" @change="check_allow" name="allow" id="allow">
            <label>同意”美多商城用户使用协议“</label>
            <span class="error_tip2" v-show="error_allow">请勾选用户协议</span>
        </li>
        <li class="reg_sub">
            <input type="submit" value="注 册">
        </li>
    </ul>
</form>

2. 用户注册JS文件实现用户交互

1.导入Vue.js库和ajax请求的库

1
2
3
4
5
<script type="text/javascript" src="{{ static('js/vue-2.5.16.js') }}"></script>
<script type="text/javascript" src="{{ static('js/axios-0.18.0.min.js') }}"></script>

2.准备register.js文件

1
2
3
4
5
<script type="text/javascript" src="{{ static('js/register.js') }}"></script>

绑定内容：变量、事件、错误提示等

1
2
3
4
5
let vm = new Vue({
    el: '#app',
    // 修改Vue读取变量的语法
    delimiters: ['[[', ']]'],
    data: {
        username: '',
        password: '',
        password2: '',
        mobile: '',
        allow: '',

        error_name: false,
        error_password: false,
        error_password2: false,
        error_mobile: false,
        error_allow: false,

        error_name_message: '',
        error_mobile_message: '',
    },
    methods: {
        // 校验用户名
        check_username(){
        },
        // 校验密码
        check_password(){
        },
        // 校验确认密码
        check_password2(){
        },
        // 校验号
        check_mobile(){
        },
        // 校验是否勾选协议
        check_allow(){
        },
        // 监听表单提交事件
        on_submit(){
        },
    }
});

3.用户交互事件实现

1
2
3
4
5
methods: {
    // 校验用户名
    check_username(){
        let re = /^[a-zA-Z0-9_-]{5,20}$/;
        if (re.test(this.username)) {
            this.error_name = false;
        } else {
            this.error_name_message = '请输入5-20个字符的用户名';
            this.error_name = true;
        }
    },
    // 校验密码
    check_password(){
        let re = /^[0-9A-Za-z]{8,20}$/;
        if (re.test(this.password)) {
            this.error_password = false;
        } else {
            this.error_password = true;
        }
    },
    // 校验确认密码
    check_password2(){
        if(this.password != this.password2) {
            this.error_password2 = true;
        } else {
            this.error_password2 = false;
        }
    },
    // 校验号
    check_mobile(){
        let re = /^1[3-9]\d{9}$/;
        if(re.test(this.mobile)) {
            this.error_mobile = false;
        } else {
            this.error_mobile_message = '您输入的号格式不正确';
            this.error_mobile = true;
        }
    },
    // 校验是否勾选协议
    check_allow(){
        if(!this.allow) {
            this.error_allow = true;
        } else {
            this.error_allow = false;
        }
    },
    // 监听表单提交事件
    on_submit(){
        this.check_username();
        this.check_password();
        this.check_password2();
        this.check_mobile();
        this.check_allow();

        if(this.error_name == true || this.error_password == true || this.error_password2 == true
            || this.error_mobile == true || this.error_allow == true) {
            // 禁用表单的提交
            window.event.returnValue = false;
        }
    },
}

4. 知识要点

  1. Vue绑定页面的套路

  2. 导入Vue.js库和ajax请求的库

  3. 准备div盒子标签
  4. 准备js文件
  5. html页面绑定变量、事件等

  6. js文件定义变量、事件等

  7. 错误提示

  8. 如果错误提示信息是固定的，可以把错误提示信息写死，再通过v-show控制是否展示

  9. 如果错误提示信息不是固定的，可以使用绑定的变量动态的展示错误提示信息，再通过v-show控制是否展示

  10. 修改Vue变量的读取语法，避免和Django模板语法冲突

  11. delimiters: ['[[', ']]']

  12. 后续的页面中如果有类似的交互和刷新效果，也可按照此套路实现

用户注册后端逻辑

1. 接收参数

提示：用户注册数据是从注册表单发送过来的，所以使用request.POST来提取。

1
2
3
4
5
username = request.POST.get('username')
password = request.POST.get('password')
password2 = request.POST.get('password2')
mobile = request.POST.get('mobile')
allow = request.POST.get('allow')

2. 校验参数

前端校验过的后端也要校验，后端的校验和前端的校验是一致的

1
2
3
4
5
# 判断参数是否齐全
# 判断用户名是否是5-20个字符
# 判断密码是否是8-20个数字
# 判断两次密码是否一致
# 判断号是否合法
# 判断是否勾选用户协议

```python

判断参数是否齐全

if not all([username, password, passwo

【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
5G diango Python 后端
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

目录

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入