【Django开发】django美多商城项目完整开发4.0第6篇：用户部分,1. 业务说明【附代码文档】

程序员一诺python

于 2024-08-23 22:12:51 发布

阅读量524

点赞数 4

分类专栏： Django教程 python教程爬虫教程文章标签： django python 框架后端

本文链接：https://blog.csdn.net/m0_72919230/article/details/141475765

版权

python教程同时被 3 个专栏收录

36 篇文章 1 订阅

订阅专栏

爬虫教程

36 篇文章 0 订阅

订阅专栏

Django教程

10 篇文章 0 订阅

订阅专栏

本教程的知识点为：项目准备项目准备配置 1. 修改settings/dev.py 文件中的路径信息 2. INSTALLED_APPS 3. 数据库用户部分图片 1. 后端接口设计：视图原型 2. 具体视图实现用户部分使用Celery完成发送判断帐号是否存在 1. 判断用户名是否存在后端接口设计：用户部分 JWT 什么是JWT 起源传统的session认证用户部分登录 1. 业务说明 2. 后端接口设计 3. 后端实现登录使用登录的流程创建模型类 urllib使用说明登录回调处理登录使用登录的流程创建模型类 urllib使用说明绑定用户身份接口邮件与验证学习目标：业务说明：技术说明：保存邮箱并发送验证邮件省市区地址查询数据库建表说明页面静态化注意定时任务安装部分详情页异步任务的触发。后端接口设计收货地址使用缓存安装使用方法为省市区视图添加缓存数据库表设计表结构数据表结构首页数据表结构 Docker使用 Docker简介用户浏览历史记录 1. 保存后端接口设计后端实现搜索 1. 需求分析 2. 搜索引擎原理 3. Elasticsearch 部分业务需求分析技术实现数据存储设计 1. Redis保存已登录用户商品部分业务需求分析技术实现查询数据 1. 后端接口设计部分业务需求分析技术实现登录合并修改登录视图部分保存 1. 后端接口设计 2. 后端实现保存的思路创建数据库模型类接入开发平台登录沙箱环境 Xadmin 1. 安装 2. 使用站点的全局配置站点Model管理。在Ubuntu中安装 2. 启动与停止 3. 镜像操作端与自定义文件存储系统 1. 的Python客户端安装使用。

完整笔记资料代码->：https://gitee.com/yinuo112/Backend/tree/master/Django/django美多商城项目完整开发4.0/note.md

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

全套教程部分目录：

部分文件图片：

用户部分

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

返回值	类型	是否必须	说明
username	str	是	用户名
user_id	int	是	用户id
token	str	是	身份认证凭据

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

<!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>

在js目录中新建login.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;
                            localStorage.user_id = response.data.user_id;
                            localStorage.username = response.data.username;
                        } else {
                            // 未记住登录
                            localStorage.clear();
                            sessionStorage.token = response.data.token;
                            sessionStorage.user_id = response.data.user_id;
                            sessionStorage.username = response.data.username;
                        }

                        // 跳转页面
                        var return_url = this.get_query_string('next');
                        if (!return_url) {
                            return_url = '/index.html';
                        }
                        location.href = return_url;
                    })
                    .catch(error => {
                        if (error.response.status == 400) {
                            this.error_pwd_message = '用户名或密码错误';
                        } else {
                            this.error_pwd_message = '服务器错误';
                        }
                        this.error_pwd = true;
                    })
            }
        },
        // qq登录
        qq_login: function(){

        }
    }
});

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类型

返回登录网址的视图

1. 后端接口设计：

请求方式： GET /oauth/qq/authorization/?next=xxx

请求参数：查询字符串

参数名	类型	是否必须	说明
next	str	否	用户登录成功后进入美多商城的哪个网址

返回数据： JSON

{
    "login_url": "
}

返回值	类型	是否必须	说明
login_url	str	是	qq登录网址

在配置文件中添加关于登录的应用开发信息

# 登录参数


_CLIENT_ID = '101474184'
_CLIENT_SECRET = 'c6ce949e04e12ecc909ae6a8b09b637c'
_REDIRECT_URI = '
_STATE = '/'

新建oauth/utils.py文件，创建登录辅助工具类

from urllib.parse import urlencode, parse_qs
from urllib.request import urlopen
from itsdangerous import TimedJSONWebSignatureSerializer as Serializer, BadData
from django.conf import settings
import json
import logging

from . import constants

logger = logging.getLogger('django')


class OAuth(object):
    """
    认证辅助工具类
    """
    def __init__(self, client_id=None, client_secret=None, redirect_uri=None, state=None):
        self.client_id = client_id or settings._CLIENT_ID
        self.client_secret = client_secret or settings._CLIENT_SECRET
        self.redirect_uri = redirect_uri or settings._REDIRECT_URI
        self.state = state or settings._STATE  # 用于保存登录成功后的跳转页面路径

    def get_qq_login_url(self):
        """
        获取qq登录的网址
        :return: url网址
        """
        params = {
            'response_type': 'code',
            'client_id': self.client_id,
            'redirect_uri': self.redirect_uri,
            'state': self.state,
            'scope': 'get_user_info',
        }
        url = ' + urlencode(params)
        return url

在oauth/views.py中实现视图

#  url(r'^qq/authorization/$', views.AuthURLView.as_view()), 


class AuthURLView(APIView):
    """
    获取登录的url
    """
    def get(self, request):
        """
        提供用于qq登录的url
        """
        next = request.query_params.get('next')
        oauth = OAuth(state=next)
        login_url = oauth.get_qq_login_url()
        return Response({'login_url': login_url})

2. 前端

修改login.js，在methods中增加qq_login方法

// qq登录
        qq_login: function(){
            var next = this.get_query_string('next') || '/';
            axios.get(this.host + '/oauth/qq/authorization/?next=' + next, {
                    responseType: 'json'
                })
                .then(response => {
                    location.href = response.data.login_url;
                })
                .catch(error => {
                    console.log(error.response.data);
                })
        }

程序员一诺python

关注

4
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
【Django开发】django美多商城项目完整开发4.0第6篇：用户部分,1. 业务说明【附代码文档】

本教程的知识点为：项目准备项目准备配置 1. 修改settings/dev.py 文件中的路径信息 2. INSTALLED_APPS 3. 数据库用户部分图片 1. 后端接口设计：视图原型 2. 具体视图实现用户部分使用Celery完成发送判断帐号是否存在 1. 判断用户名是否存在后端接口设计：用户部分 JWT 什么是JWT 起源传统的session认证用户部分登录 1. 业务说明 2. 后端接口设计 3. 后端实现登录使用登录的流程创建模型类 urllib使用说明登录
复制链接

扫一扫