文章目录
基于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