🏆🏆🏆教程全知识点简介:1.邮件验证系统包括Django发送邮件、保存邮箱并发送验证邮件、Celery使用Django配置文件设置。2. 地址管理涵盖收货地址、省市区地址查询、数据库建表、后端接口设计、前端实现、缓存使用(安装、使用方法、省市区视图缓存、缓存数据保存位置和有效期设置)、用户地址管理。3. 数据库设计包括用户部分、商品部分、数据库表设计、表结构、数据库模型类。4. 容器化部署涵盖Docker使用(Ubuntu安装、启动停止、镜像操作)、FastDFS客户端与自定义文件存储系统、页面静态化、定时任务、静态化首页脚本。5. 商品系统包括商品详情页、异步任务触发、脚本工具、用户浏览历史记录(保存、查看)。6. 商业模式涵盖B2B企业对企业、C2C个人对个人、O2O线上到线下、开发流程、需求分析。7. 购物车系统包括购物车管理、购物车数据存储设计(Redis保存已登录用户)、添加到购物车、查询购物车数据、登录合并购物车。8. 订单系统涵盖提交订单、我的订单、订单评价、订单结算、保存订单、MySQL事务隔离级别修改、下单成功页面。9. 搜索系统包括商品搜索、搜索引擎原理、Elasticsearch、Docker安装Elasticsearch扩展、前端实现。10. 支付系统涉及 集成、Xadmin管理后台。11. 项目配置包括项目准备、配置文件修改、数据库配置、Redis配置、本地化语言时区、异常处理、日志记录。12. 用户认证系统涵盖图片验证码、域名设置、前端Vue代码、跨域CORS、Celery发送短信、账号存在判断、JWT认证(JWT概念、构成、应用、Django REST framework JWT)、 登录(登录流程、模型类创建、urllib使用、回调处理)、用户中心个人信息。
📚📚👉👉👉 gitee.com/yinuo112/Ba… 🍅🍅
🎯🎯🎯全教程总章节

🚀🚀🚀本篇主要内容
登录
登录,亦即我们所说的第三方登录,是指用户可以不在本项目中输入 ,而直接通过第三方的验证,成功登录本项目。
若想实现登录,需要成为互联的开发者,审核通过才可实现。注册方法可参考链接wiki.connect.qq.com/%E6%88%90%E…
成为互联开发者后,还需创建应用,即获取本项目对应与互联的应用ID,创建应用的方法参考链接wiki.connect.qq.com/__trashed-2
登录开发文档连接wiki.connect.qq.com/%E5%87%86%E…
使用登录的流程

创建模型类
创建一个新的应用oauth,用来实现第三方认证登录。总路由前缀 oauth/
在meiduo/meiduo_mall/utils/models.py文件中创建模型类基类,用于增加数据新建时间和更新时间。
from django.db import models
class BaseModel(models.Model):
"""为模型类补充字段"""
create_time = models.DateTimeField(auto_now_add=True, verbose_name="创建时间")
update_time = models.DateTimeField(auto_now=True, verbose_name="更新时间")
class Meta:
abstract = True # 说明是抽象模型类, 用于继承使用,数据库迁移时不会创建BaseModel的表
在oauth/models.py中定义身份(openid)与用户模型类User的关联关系
from django.db import models
from meiduo_mall.utils.models import BaseModel
class OAuthUser(BaseModel):
"""
登录用户数据
"""
user = models.ForeignKey('users.User', on_delete=models.CASCADE, verbose_name='用户')
openid = models.CharField(max_length=64, verbose_name='openid', db_index=True)
class Meta:
db_table = 'tb_oauth_qq'
verbose_name = '登录用户数据'
verbose_name_plural = verbose_name
进行数据库迁移
python manage.py makemigrations
python manage.py migrate
urllib使用说明
在后端接口中,我们需要向服务器发送请求,查询用户的信息,Python提供了标准模块urllib可以帮助我们发送http请求。
- urllib.parse.urlencode(query)
将query字典转换为url路径中的查询字符串
- urllib.parse.parse_qs(qs)
将qs查询字符串格式数据转换为python的字典
- urllib.request.urlopen(url, data=None)
发送http请求,如果data为None,发送GET请求,如果data不为None,发送POST请求
返回response响应对象,可以通过read()读取响应体数据,需要注意读取出的响应体数据为bytes类型
登录回调处理
用户在登录成功后,会将用户重定向回我们配置的回调callback网址,在本项目中,我们申请登录开发资质时配置的回调地址为:
http://www.meiduo.site:8080/oauth_callback.html
我们在front_end_pc目录中新建oauth_callback.html文件,用于接收登录成功的用户回调请求。在该页面中,提供了用于用户首次使用登录时需要绑定用户身份的表单信息。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>美多mall-绑定用户</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/host.js"></script>
<script type="text/javascript" src="js/vue-2.5.16.js"></script>
<script type="text/javascript" src="js/axios-0.18.0.min.js"></script>
</head>
<body>
<div id="app">
<div v-if="is_show_waiting" class="pass_change_finish">请稍后...</div>
<div v-else>
<div class="register_con">
<div class="l_con fl">
<a class="reg_logo"><img src="images/logo.png"></a>
<div class="reg_slogan">商品美 · 种类多 · 欢迎光临</div>
<div class="reg_banner"></div>
</div>
<div class="r_con fr">
<div class="reg_title clearfix">
<h1>绑定用户</h1>
</div>
<div class="reg_form clearfix" id="app" v-cloak>
<form id="reg_form" v-on:submit.prevent="on_submit">
<ul>
<li>
<label>手机号:</label>
<input type="text" v-model="mobile" v-on:blur="check_phone" name="phone" id="phone">
<span v-show="error_phone" class="error_tip">{{ error_phone_message }}</span>
</li>
<li>
<label> :</label>
<input type="password" v-model="password" v-on:blur="check_pwd" name="pwd" id="pwd">
<span v-show="error_password" class="error_tip"> 最少8位,最长20位</span>
</li>
<li>
<label>图形:</label>
<input type="text" v-model="image_code" v-on:blur="check_image_code" name="pic_code" id="pic_code" class="msg_input">
<img v-bind:src="image_code_url" v-on:click="generate_image_code" alt="图形" class="pic_code">
<span v-show="error_image_code" class="error_tip">{{ error_image_code_message }}</span>
</li>
<li>
<label>:</label>
<input type="text" v-model="sms_code" v-on:blur="check_sms_code" name="msg_code" id="msg_code" class="msg_input">