教程总体简介:欢迎来到美多商城! 项目需求分析 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. 准备省市区模型和数据
完整笔记资料代码:gitee.com/yinuo112/Ba…
感兴趣的小伙伴可以自取哦~
全套教程部分目录:
部分文件图片:
用户注册业务实现
用户注册前端逻辑
为了学会使用Vue.js的双向绑定实现用户的交互和页面局部刷新效果。
1. 用户注册页面绑定Vue数据
1.准备div盒子标签
<div id="app">
<body>
......
</body>
</div>
2.register.html
- 绑定内容:变量、事件、错误提示等
<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请求的库
<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文件
<script type="text/javascript" src="{{ static('js/register.js') }}"></script>
绑定内容:变量、事件、错误提示等
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(){
},
// 校验确认密码
che