【Django开发】django美多商城项目完整开发4.0第6篇：用户部分,登录【附代码文档】

举报
程序员一诺python 发表于 2025/08/10 21:56:55 2025/08/10
【摘要】 1.邮件验证系统包括Django发送邮件、保存邮箱并发送验证邮件、Celery使用Django配置文件设置。2. 地址管理涵盖收货地址、省市区地址查询、数据库建表、后端接口设计、前端实现、缓存使用（安装、使用方法、省市区视图缓存、缓存数据保存位置和有效期设置）、用户地址管理。3. 数据库设计包括用户部分、商品部分、数据库表设计、表结构、数据库模型类。4. 容器化部署涵盖Dock

图片无法加载

教程全知识点简介：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）、QQ登录（登录流程、模型类创建、urllib使用、回调处理）、用户中心个人信息。

👉👉👉   https://gitee.com/yinuo112/Backend/blob/master/Django/django美多商城项目完整开发4.0/note.md

用户部分

登录

1. 业务说明

验证用户名和密码，验证成功后，为用户签发JWT，前端将签发的JWT保存下来。

2. 后端接口设计

请求方式： POST /authorizations/

请求参数： JSON 或 表单

参数名 类型 是否必须 说明
username str 是 用户名
password str 是 密码

返回数据： JSON

{
    "username": "python",
    "user_id": 1,
    "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjo5LCJ1c2VybmFtZSI6InB5dGhvbjgiLCJleHAiOjE1MjgxODI2MzQsImVtYWlsIjoiIn0.ejjVvEWxrBvbp18QIjQbL1TFE0c0ejQgizui_AROlAU"
}
返回值 类型 是否必须 说明
username str 是 用户名
user_id int 是 用户id
token str 是 身份认证凭据

3. 后端实现

Django REST framework JWT提供了登录签发JWT的视图，可以直接使用

from rest_framework_jwt.views import obtain_jwt_token

urlpatterns = [
    url(r'^authorizations/$', obtain_jwt_token),
]

但是默认的返回值仅有token，我们还需在返回值中增加username和user_id。

通过修改该视图的返回值可以完成我们的需求。

在users/utils.py 中，创建

def jwt_response_payload_handler(token, user=None, request=None):
    """
    自定义jwt认证成功返回数据
    """
    return {
        'token': token,
        'user_id': user.id,
        'username': user.username
    }

修改配置文件

# JWT


JWT_AUTH = {
    'JWT_EXPIRATION_DELTA': datetime.timedelta(days=1),
    'JWT_RESPONSE_PAYLOAD_HANDLER': 'users.utils.jwt_response_payload_handler',
}

4. 增加支持用户名与手机号均可作为登录账号

JWT扩展的登录视图，在收到用户名与密码时，也是调用Django的认证系统中提供的authenticate()来检查用户名与密码是否正确。

我们可以通过修改Django认证系统的认证后端（主要是authenticate方法）来支持登录账号既可以是用户名也可以是手机号。

修改Django认证系统的认证后端需要继承django.contrib.auth.backends.ModelBackend，并重写authenticate方法。

authenticate(self, request, username=None, password=None, **kwargs)方法的参数说明：

  • request 本次认证的请求对象
  • username 本次认证提供的用户账号
  • password 本次认证提供的密码

我们想要让用户既可以以用户名登录，也可以以手机号登录，那么对于authenticate方法而言，username参数即表示用户名或者手机号。

重写authenticate方法的思路：

  1. 根据username参数查找用户User对象，username参数可能是用户名，也可能是手机号
  2. 若查找到User对象，调用User对象的check_password方法检查密码是否正确

在users/utils.py中编写：

def get_user_by_account(account):
    """
    根据帐号获取user对象
    :param account: 账号，可以是用户名，也可以是手机号
    :return: User对象 或者 None
    """
    try:
        if re.match('^1[3-9]\d{9}$', account):
            # 帐号为手机号
            user = User.objects.get(mobile=account)
        else:
            # 帐号为用户名
            user = User.objects.get(username=account)
    except User.DoesNotExist:
        return None
    else:
        return user


class UsernameMobileAuthBackend(ModelBackend):
    """
    自定义用户名或手机号认证
    """

    def authenticate(self, request, username=None, password=None, **kwargs):
        user = get_user_by_account(username)
        if user is not None and user.check_password(password):
            return user

在配置文件中告知Django使用我们自定义的认证后端

AUTHENTICATION_BACKENDS = [
    'users.utils.UsernameMobileAuthBackend',
]

5. 前端代码

修改login.html

[python-jose 文档]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns=" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>美多商城-登录</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 class="login_top clearfix">
        <a href="index.html" class="login_logo"><img src="images/logo02.png"></a>    
    </div>
    <div class="login_form_bg" id='app'>
        <div class="login_form_wrap clearfix">
            <div class="login_banner fl"></div>
            <div class="slogan fl">商品美 · 种类多 · 欢迎光临</div>
            <div class="login_form fr">
                <div class="login_title clearfix">
                    <a href="javascript:;" class="cur">账户登录</a>
                </div>
                <div class="form_con">
                    <div class="form_input cur">
                        <form id="login-form" @submit.prevent="on_submit">
                            <input type="text" v-model="username" @blur="check_username" name="" class="name_input" placeholder="请输入用户名或手机号">
                            <div v-show="error_username" class="user_error" v-cloak>请填写用户名或手机号</div>
                            <input type="password" v-model="password" @blur="check_pwd" name="pwd" class="pass_input" placeholder="请输入密码">
                            <div v-show="error_pwd" class="pwd_error" v-cloak>{{ error_pwd_message }}</div>
                            <div class="more_input clearfix">
                                <input type="checkbox" v-model="remember"> 
                                <label>记住登录</label>
                                <a href="/find_password.html">忘记密码</a>
                            </div>
                            <input type="submit" name="" value="登 录" class="input_submit">
                        </form>
                    </div>
                </div>
                <div class="third_party">
                    <a @click="qq_login" class="qq_login"></a>
                    <a href="#" class="weixin_login">微信</a>
                    <a href="/register.html" class="register_btn">立即注册</a>
                </div>

            </div>
        </div>
    </div>

    <div class="footer no-mp">
        <div class="foot_link">
            <a href="#">关于我们</a>
            <span>|</span>
            <a href="#">联系我们</a>
            <span>|</span>
            <a href="#">招聘人才</a>
            <span>|</span>
            <a href="#">友情链接</a>        
        </div>
        <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
        <p>电话：010-****888    京ICP备*******8号</p>
    </div>
    <script type="text/javascript" src="js/login.js"></script>
</body>
</html>

[W3Schools Python]

在js目录中新建login.js ```js var vm = new Vue({ el: '#app', data: { host: host, error_username: false, error_pwd: false, error_pwd_message: '请填写密码', username: '', password: '', remember: false }, methods: { // 获取url路径参数
get_query_string: function(name){ var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'); var r = window.location.search.substr(1).match(reg); if (r != null) { return decodeURI(r[2]); } return null; }, // 检查数据 check_username: function(){ if (!this.username) { this.error_username = true; } else { this.error_username = false; } }, check_pwd: function(){ if (!this.password) { this.error_pwd_message = '请填写密码'; this.error_pwd = true; } else { this.error_pwd = false; } }, // 表单提交 on_submit: function(){ this.check_username(); this.check_pwd();

        if (this.error_username == false && this.error_pwd == false) {
            axios.post(this.host+'/authorizations/', {
                    username: this.username,
                    password: this.password
                }, {
                    responseType: 'json',
                    withCredentials: true
                })
                .then(response => {
                    // 使用浏览器本地存储保存token
                    if (this.remember) {
                        // 记住登录
                        sessionStorage.clear();
                        localStorage.token = response.data.token;
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
5G diango Python 后端
  • 点赞
  • 收藏
  • 关注作者

评论（0）

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

全部回复

上滑加载中

设置昵称

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

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

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

确认 取消

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

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