Web开发 ------ 基于Django+Vue网上购物商城（一）：数据库模型和xadmin后台设计

基于Django+Vue网上购物商城

完整项目地址：https://gitee.com/dadadaliuliuliiu/ShopProject

一、项目介绍

1.技术难点

• Vue + Django Rest Framework 前后端分离技术
• xadmin后台管理系统
• throttling 用户和IP限速
• 文档自动化管理
• Sentry 完成线上系统的错误日志的监控和告警
• 第三方登录和支付宝支付的集成
• 本地调试远程服务器代码的技巧

2.系统功能

• 用户注册、登录、注销和第三方登录。 其中手机号码注册支持倒计时功能，服务器端手机号码发送频次限制。
• 用户个人中心展示和更新个人信息、用户收藏、用户评论、用户收货地址和用户订单。
• 商品管理: 商品分页展示、商品过滤/搜索/排序、商品搜索、热卖商品、商品详情、商品收藏等。
• 商品分类管理 ： 子分类、 搜索、 大类的推荐商品。
• 留言 支付宝支付，扫码支付。跳回商户页面。
• 购物车管理、订单管理。
  

3.项目环境

操作系统: Windows/Linux/Mac
编程语言: Python3.x
Web框架: Django 2.2 Xadmin
前端框架: Vue Vue-router Vuex
数据库: MySQL/Mariadb/sqlite
IDE工具: Pycharm

4.后台管理页面展示

二、项目准备

1.创建Django工程

因为django安装比较慢
先创建一个pure python 工程 名为DjangoProject
在这个工程里 pip install dango==2.2
再在同一个目录下创建一个djang工程 名为 ShopProject

pip install -i https://pypi.douban.com/simple/ django==2.2

确保django版本为2.2

(base) F:\ziliao\python_kaifa\my_code\12_Django项目2\ShopProject>python
Python 3.7.3 

>>> import django
>>> django.get_version()
'2.2'

2.报错 及解决

1.创建django新工程报错
No such file or directory:'D:\Anaconda3\lib\venv\scripts\nt\python.exe’
原因：相应目录下没有python解释器
解决：将D：/Anaconda3下的 python.exe,python.pdb,pythonw.exe,pythonw.pdb四个文件复制到 D:\Anaconda3\lib\venv\scripts\nt\python.exe 目录中，即可

三、项目 数据库模型 和 xadmin后台 设计

0.admin和xadmin后台管理对比

Xadmin 是一款基于 Django 编写的 admin 的替代管理系统。Django 中是自带后台管理模型（admin）的， admin 的实现步骤和呈现效果在个人博客项目中介绍。
【Xadmin 的优势】：

• 更人性化的前端页面设计，甚至实现了自定义主题
• Xadmin 可实现更细致的后台管理，例如权限的划分、用户信息的导出机制、用户信息的自定义显示等
• 整个实现过程是快速高效的

下面是admin和xadmin后台管理的页面对比：
admin后台管理展示

Xadmin后台管理

admin实现步骤（个人博客）：
1.创建一个超户
2.创建一个blog应用，并在setting中注册
3.创建一个数据库模型来存储我们的文章数据
（数据库迁移）
4.在admin后台注册模型，并且定制admin后台

Xadmin实现步骤（电商平台）：
1.创建一个超户
2.创建应用，并在setting中注册。
如果有多个子应用（例如：用户、商品、交易等），需要创建一个包来存放这些子应用，如本项目一样 app/users。如果仅有一个子应用也不需要放在同一文件夹下。将每一个子应用子setting中注册。
3.创建每个子应用的数据库模型
4.在admin后台注册模型，并且定制admin后台。
如果项目中存在多个子应用，需要将每个子应用注册到Xadmin后台，包括在其 admin.py、apps.py、init.py 文件中进行注册以及显示列的设置。但是关于xadmin的基本配置和全局配置仅需要设置一次即可。

1.创建app包以及app里面的四个应用

• 创建项目
• 创建子应用： 存储在app中
  users 用户认证
  goods 商品管理
  trade 交易管理
  user_operation 用户操作

(base) F:\ziliao\python_kaifa\my_code\12_Django项目2\ShopProject>cd app
(base) F:\ziliao\python_kaifa\my_code\12_Django项目2\ShopProject\app>python ../manage.py startapp users
(base) F:\ziliao\python_kaifa\my_code\12_Django项目2\ShopProject\app>python ../manage.py startapp goods
(base) F:\ziliao\python_kaifa\my_code\12_Django项目2\ShopProject\app>python ../manage.py startapp trade
(base) F:\ziliao\python_kaifa\my_code\12_Django项目2\ShopProject\app>python ../manage.py startapp user_operate

2.用户认证 数据库模型设计

（1）数据库模型设计代码

mobile = models.CharField("电话", max_length=11, null=True, blank=True)

null 是针对数据库而言，如果 null=True, 表示数据库的该字段可以为空。
blank 是针对表单的，如果 blank=True，表示你的表单填写该字段的时候可以不填

# app/users/models.py

from datetime import datetime
from django.contrib.auth.models import AbstractUser
from django.db import models
# Create your models here.

class UserProfile(AbstractUser):
    """用户信息"""
    GENDER_CHOICES = (
        ("male", "男"),
        ("female", "女")
    )
    # 用户用手机注册，所以姓名，生日和邮箱可以为空
    name = models.CharField("姓名", max_length=30, null=True, blank=True)
    birthday = models.DateField("出生年月", null=True, blank=True)
    gender = models.CharField("性别", max_length=6, choices=GENDER_CHOICES,
                              default="female")
    """ 
    null 是针对数据库而言，如果 null=True, 表示数据库的该字段可以为空。 
    blank 是针对表单的，如果 blank=True，表示你的表单填写该字段的时候可以不填 
    """
    mobile = models.CharField("电话", max_length=11, null=True, blank=True)
    email = models.EmailField("邮箱", max_length=100, null=True, blank=True)

    # 元数据操作
    class Meta:
        # 后台管理显示单数和复数的名称
        verbose_name = "用户信息"
        verbose_name_plural = verbose_name

        def __str__(self):
            return self.username

class VerifyCode(models.Model):
    """验证码"""
    code = models.CharField("验证码", max_length=10)
    mobile = models.CharField("电话", max_length=11)
    add_time = models.DateTimeField("添加时间", default=datetime.now)

    class Meta:
        verbose_name = "短信验证"
        verbose_name_plural = verbose_name

        def __str__(self):
            return self.code

（2）settings中配置，重载系统用户

# ShopProject/settings.py 

#重载系统的用户，让UserProfile生效 
AUTH_USER_MODEL = 'app.users.UserProfile'

默认系统认证是AbstractUser，帮我们添加了一些信息。 这里UserProfile继承AbstractUser,可以看看AbstractUser的源码

# Ctrl + 鼠标点击进入源码 
class AbstractUser(AbstractBaseUser, PermissionsMixin):

（3）settings中注册应用，设置中文

设置中文

# LANGUAGE_CODE = 'en-us'
LANGUAGE_CODE = 'zh-hans'

（4）写入数据库

models.py文件有变动就要执行迁移数据库操作

makemigrations
migrate

3.用户认证 Xadmin后台管理

（1）xadmin和ueditor 路由配置

import xadmin
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    # path('admin/', admin.site.urls),
    # 使用xadmin进行后台管理
    path('xadmin/', xadmin.site.urls),
    # 富文本编辑时路由的配置
    path('ueditor/', include('DjangoUeditor.urls')),
]

（2）子应用Xadmin注册

四个app下面都新建文件admin.py，然后分别注册到后台。

如何配置xadmin的默认设置和通用设置?

• BaseAdminView: 所有AdminView的基础类，注册在该View上的插件可以影响所有的AdminView.
• CommAdminView:用户已经登录后显示的View，也是所有登陆后View的基础类。该View主要作用是创建了Xadmin的通用元素, 例如：系统菜单，用户信息等。插件可以通过注册该View来修改这些信息。

# app/users/admin.py

# 后台管理站点注册数据库模型，进行管理


import xadmin
from xadmin import views

from .models import VerifyCode


class BaseSetting(object):
    """xadmin的基本配置"""
    # 开启主题切换功能
    enable_themes = True
    # 支持切换主题
    use_bootswatch = True


class GlobalSettings(object):
    """xadmin的全局配置"""
    # 设置站点标题
    site_title = "DaLiu电商平台"
    # 设置站点的页脚
    site_footer = "http://www.cnblogs.com/westos/"
    # 设置菜单折叠，在左侧，默认的
    menu_style = "accordion"


class VerifyCodeAdmin(object):
    # 列表展示的字段
    list_display = ['code', 'mobile', "add_time"]

#把数据库模型和他的配置信息绑定在一起
#把视图函数返回的信息和配置信息绑定在一起
xadmin.site.register(VerifyCode, VerifyCodeAdmin)
xadmin.site.register(views.BaseAdminView, BaseSetting)
xadmin.site.register(views.CommAdminView, GlobalSettings)

（3）app.py文件设置相关信息

在每个应用目录中都包含了apps.py文件，用于保存该应用的相关信息。

• AppConfig.name 属性表示这个配置类是加载到哪个应用的，每个配置类必须包含此属性，默认自动生成。
• AppConfig.verbose_name 属性用于设置该应用的直观可读的名字，此名字在Django提供的Admin管理站点中会显示

# app/users/apps.py

from django.apps import