商城的设计

网站开发隶属于软件工程，开发流程为：

需求分析 --> 设计说明（细分为概要设计和详细设计）--> 代码编写 --> 程序测试 -->软件交付--> 客户验收--> 后期维护

需求分析

假设我们是一家软件开发公司，公司员工分别有需求工程师、网页设计师、前端工程师、后端工程师和测试工程师，现有一名客户想开发自家的购物平台，该客户拥有实体门店，专售母婴产品。

大多数情况下，客户对网站平台的开发流程只有表面的认知，他们不会提出详细的需求，只会说出他们的目的，比如说“我只想有一个自家的购物平台，能让我的客户在线购买产品，好像淘宝那样就行了。

”在实际开发中，我们肯定不能直接仿造淘宝交付给客户，毕竟客户有自己的实体门店，应结合门店现有的业务流程定制购物平台。

对于客户的精简需求，需求工程师需要深入了解客户的具体需求，比如了解客户现有的顾客量、产品类型、实体店的进销存管理方式等因素，这些都会影响网站设计模式，例如现有的顾客数量需要考虑网站的并发量、产品类型影响网站页面设计（如商品详细页的布局设计）、实体店的进销存管理方式影响商品库存管理，是否考虑缺货提醒、预售功能等。

需求工程师根据客户的实际情况，梳理并归纳以下需求要点：

（1）网站需要提供搜索功能，便于用户搜索商品。

（2）搜索结果需要根据销量、价格、上架时间和收藏数量进行排序

（3）商品详情应有尺寸、原价、活动价、图片展示、收藏功能和购买功能。

（4）用户购买后应看到订单信息，订单信息包括支付金额、购买时间和订单状态。

（5）商品购买应支持在线支付，如支付宝或微信支付等功能。

（6）目前顾客数量约有3000人，实体店暂无进销存系统。在需求分析阶段，需求工程师要不断地与客户反复交流，并将交流结果以Demo的方式展示给客户，直到客户确认无误为止。在此阶段，需求工程师需要使用简单的绘图软件完成Demo设计，比如Axure或Visio等软件。除此之外，需求工程师还要将收集的需求信息编写成需求规格说明书。

设计说明

当我们完成客户的需求分析之后，下一步是执行系统的设计说明，它包括了概要设计和详细设计。

概要设计划分为系统总体结构设计、数据结构及数据库设计、概要设计文档说明；详细设计是对系统每个功能模块进行算法设计、业务逻辑处理、网页界面设计、代码设计等具体的实现过程。

在概要设计阶段，系统总体结构设计需要由需求工程师和开发人员共同商议，针对用户需求来商量如何设计系统各个功能模块以及各个模块的数据结构。

我们根据用户需求，网站的概要设计说明如下：

（1）网站首页应设有导航栏，并且所有功能展示在导航栏，在导航栏的下面展示各类的热销商品，当单击商品图片时即可进入商品详细页面，导航栏上方设有搜索框，便于用户搜索相关商品。

（2）商品列表页将所有商品以一定规则排序展示，用户可以从销量、价格、上架时间和收藏数量设置商品的排序方式，并且在页面的左侧设置分类列表，选择某一分类可以筛选出相应的商品信息。

（3）商品详细页展示某一商品的主图、名称、规格、数量、详细介绍、购买按钮和收藏按钮，并在商品详细介绍的左侧设置了热销商品列表。

（4）购物车页面只能在用户已登录的情况下才能访问，它是将用户选购的商品以列表形式展示，列表的每行数据包含了商品图片、名称、单价、数量、合计和删除操作，用户可以增减商品的购买数量，并且能自动计算费用。

（5）个人中心页面用于展示用户的基本信息及订单信息，只能在用户已登录的情况下才能访问。

（6）用户登录注册页面是共用一个页面，如果用户账号已存在，则对用户账号密码验证并登录，如果用户不存在，则对当前的账号密码进行注册处理。

（7）数据库使用MySQL 5.7以上版本，数据表除了Django内置数据表之外，还需定义商品信息表、商品类别表、购物车信息表和订单信息表。

从概要设计看到，我们大概搭建了网站的整体架构，下一步是在整体架构的基础上完善各个功能模块的细节内容。在详细设计中，网站开发最主要的是完成网页设计和数据库的数据结构，如果某些功能涉及复杂的逻辑业务，还需编写相应的算法。

根据概要设计说明，分别对网站的网页设计和数据库的数据结构进行具体设计说明。一共设计了6个网页界面，每个网页界面的设计说明如下：网站首页一共划分了5个不同的功能区域：商品搜索功能、网站导航、广告轮播、商品分类热销、网站尾部，如图所示，每个功能的设计说明如下：

（1）商品搜索功能：用户输入关键字并单击搜索按钮，网站将进行数据查询处理，将符合条件的商品在商品列表页展示；如果没有输入关键字的情况下单击搜索按钮，网站直接访问商品列表页并展示所有的商品信息。

（2）网站导航：设有首页、所有商品、购物车和个人中心的地址链接，每个链接分别对应网站首页、商品列表页、购物车页面和个人中心页面。

（3）广告轮播：以图片形式展示，用于商品的广告宣传。

（4）商品分类热销：分为今日必抢和分类商品。今日必抢是在所有商品中获取前十名销量最高的商品进行排序；分类商品是在某分类的商品中获取前五名销量最高的商品进行排序。

（5）网站尾部：这是每个网站的基本架构，用于说明网站的基本信息，如备案信息、售后服务、联系我们等。

商品列表页分为4个功能区域：商品搜索功能、网站导航、商品分类和商品列表信息，如图2-2所示，每个功能的设计说明如下：

（1）商品分类：当用户选择某一分类的时候，网站会筛选出对应的商品信息并在右侧的商品列表信息展示。

（2）商品列表信息：提供了销量、价格、上架时间和收藏数量的排序方式，商品默认以销量排序，并设置分页功能，每一页只显示6条商品信息。

商品详细页分为5个功能区：商品搜索功能、网站导航、商品基本信息、商品详细介绍和热销推荐，如图2-3所示，每个功能的设计说明如下：

（1）商品基本信息：包含了商品的规格、名称、价格、主图、购买数量、收藏按钮和购买按钮。收藏按钮使用JavaScript脚本完成收藏功能，购买按钮将商品信息和购买数量添加到购物车。

（2）商品详细介绍：以图片形式展示，用于描述商品的细节内容。

（3）热销推荐：在所有商品中（排除当前商品之外）获取并展示前五名销量最高的商品。

购物车页面分为3个功能区域：商品搜索功能、网站导航、商品的购买费用核算，如图所示。商品的购买费用核算允许用户编辑商品的购买数量、选择购买的商品和删除商品，结算按钮根据购买信息自动跳转到支付页面。

个人中心页面分为4个功能区域：商品搜索功能、网站导航、用户基本信息和订单信息，如图2-5所示，用户基本信息和订单信息的设计说明如下：

（1）用户基本信息：在网页的左侧位置，展示了用户的头像、名称和登录时间，按钮功能分别有购物车页面链接和退出登录。

（2）订单信息：以数据列表展示，每行数据包含了订单编号、价格、购买时间和状态，并设置分页功能，每一页显示7条订单信息。

用户登录注册页面分为3个功能区域：商品搜索功能、网站导航、登录注册表单，如图所示。登录注册表单是共用一个网页表单，如果用户账号已存在，则对用户账号密码验证并登录，如果用户不存在，则对当前的账号密码进行注册处理。

从网站的6个页面看到，每个页面的设计和布局都需要数据支持，比如商品的规格、名称、价格、主图等数据信息。由于Django内置了用户管理功能，已为我们提供了用户信息表，因此我们只需定义商品信息表、商品类别表、购物车信息表和订单信息表。

数据表设计

商品信息表的数据结构

商品类别表的数据结构

购物车信息表的数据结构

订单信息表的数据结构

综合上述，我们将商品信息表、商品类别表、购物车信息表、订单信息表和Django内置用户表的数据关系进行整理。

搭建开发环境

本项目为Django教学入门项目，采用前后端不分离模式开发，后端使用Django 4.0+MySQL 8.0实现，前端使用layui框架+jQuery实现网页设计。

前后端不分离模式要求前端开发人员提供静态的HTML模板，并且HTML模板实现简单的JavaScript脚本功能，如果涉及Ajax异步数据传输，则需要在开发阶段中与后端人员相互调试API接口的数据结构。

我们将项目命名为babys，在Windows的CMD窗口输入Django的项目创建指令，然后在新建的项目中创建项目应用（App）index、commodity和shopper，分别创建文件夹media、pstatic和templates具体操作如下所示。

django-admin.exe startproject babys
cd babys

python manage.py startapp index
python manage.py startapp commodity
python manage.py startapp shopper

mkdir  media 
mkdir  pstatic 
mkdir  templates

整个项目共有7个文件夹和1个文件，每个文件夹和文件的功能说明如下：

（1）babys文件夹与项目名相同，该文件夹下含有文件__init__.py、asgi.py、settings.py、urls.py和wsgi.py

（2）commodity是Django创建的项目应用（App），文件夹含有__init__.py、admin.py、apps.py、models.py、tests.py和views.py文件，它主要实现网站的商品列表页和商品详细页。

（3）index是Django创建的项目应用（App），文件夹含有的文件与项目应用（App）commodity相同，它主要实现网站首页。

（4）media是网站的媒体资源，用于存放商品的主图和详细介绍图。

（5）pstatic是网站的静态资源，用于存放网站的静态资源文件，如CSS、JavaScript和网站界面图片。

（6）shopper也是Django创建的项目应用（App），它主要实现网站的购物车页面、个人中心页面、用户登录注册页面、在线支付功能等。

（7）templates用于存放HTML模板文件，即网站的网页文件。

（8）manage.py是项目的命令行工具，内置多种方法与项目进行交互。

在命令提示符窗口下，将路径切换到项目babys并输入python manage.py help，可以查看该工具的指令信息。

由于文件夹media、pstatic和templates是我们自行创建的，因此还需要在这些文件夹中添加前端提供的HTML静态模板。

至此，我们已完成项目babys的整体架构搭建，整个搭建过程可以分为两个步骤，说明如下：

（1）使用指令创建Django项目，并在新建的项目下创建相应的项目应用（App）。

（2）根据前端提供的HTML静态模板，分别创建文件夹media、pstatic和templates，并将HTML静态模板的CSS、JavaScript和HTML文件分别放置在文件夹pstatic和templates。

项目的功能配置

由于文件夹media、pstatic和templates是我们自行创建的，Django在运行中无法识别这些文件夹的具体作用，因此，我们还需要在Django的配置文件settings.py中添加这些文件夹，使Django在运行中能识别这些文件夹的作用。

使用PyCharm打开项目babys，然后打开babys文件夹的settings.py文件。进行如下配置：

# 允许所有人访问
ALLOWED_HOSTS = ["*"] 

# 将新创建的APP添加到INSTALLED_APPS
INSTALLED_APPS = [
    # ...省略 
    'index.apps.IndexConfig',
    'commodity.apps.CommodityConfig',
    'shopper.apps.ShopperConfig'
]

# 配置模板路径
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],
       # ...省略 
    },
]

# 语言设置为中文简体
LANGUAGE_CODE = 'zh-hans'
# 时区设为为亚洲上海
TIME_ZONE = 'Asia/Shanghai'
# 不启用TIME_ZONE(时区)
USE_TZ = False

# 静态文件路径
STATIC_URL = 'static/'
STATICFILES_DIRS = [
    BASE_DIR / 'pstatic'
]
# 媒体文件配置
MEDIA_URL = 'media'
MEDIA_ROOT = BASE_DIR / 'media'

settings.py 文件详解

（1）项目路径BASE_DIR：读取当前项目在计算机系统的具体路径，该代码在创建项目时自动生成，一般情况下无须修改。

（2）密钥配置SECRET_KEY：这是一个随机值，在项目创建的时候自动生成，一般情况下无须修改。主要用于重要数据的加密处理，提高项目的安全性，避免遭到攻击者恶意破坏。密钥主要用于用户密码、CSRF机制和会话Session等数据加密。用户密码：Django内置一套Auth认证系统，该系统具有用户认证和存储用户信息等功能，在创建用户的时候，将用户密码通过密钥进行加密处理，保证用户的安全性。CSRF机制：该机制主要用于表单提交，防止窃取网站的用户信息来制造恶意请求。会话Session：Session的信息存放在Cookie中，以一串随机的字符串表示，用于标识当前访问网站的用户身份，记录相关用户信息。

（3）调试模式DEBUG：该值为布尔类型。如果在开发调试阶段，那么应设置为True，在开发调试过程中会自动检测代码是否发生更改，根据检测结果执行是否刷新重启系统。如果项目部署上线，那么应将其改为False，否则会泄漏项目的相关信息。

（4）域名访问权限ALLOWED_HOSTS：设置可访问的域名，默认值为空列表。当DEBUG为True并且ALLOWED_HOSTS为空列表时，项目只允许以localhost或127.0.0.1在浏览器上访问。当DEBUG为False时，ALLOWED_HOSTS为必填项，否则程序无法启动，如果想允许所有域名访问，可设置ALLOW_HOSTS = ['*']。

（5）App列表INSTALLED_APPS：告诉Django有哪些App。在项目创建时已有admin、auth和sessions等配置信息，这些都是Django内置的应用功能，各个功能说明如下：

admin：内置的后台管理系统。
auth：内置的用户认证系统。
contenttypes：记录项目中所有model元数据（Django的ORM框架）。
sessions：Session会话功能，用于标识当前访问网站的用户身份，记录相关用户信息。
messages：消息提示功能。
staticfiles：查找静态资源路径。

（6）中间件MIDDLEWARE：这是一个用来处理Django的请求（Request）和响应（Response）的框架级别的钩子，它是一个轻量、低级别的插件系统，用于在全局范围内改变Django的输入和输出。

SecurityMiddleware：内置的安全机制，保护用户与网站的通信安全。SessionMiddleware：会话Session功能。
LocaleMiddleware：国际化和本地化功能。
CommonMiddleware：处理请求信息，规范化请求内容。
CsrfViewMiddleware：开启CSRF防护功能。
AuthenticationMiddleware：开启内置的用户认证系统。
MessageMiddleware：开启内置的信息提示功能。
XFrameOptionsMiddleware：防止恶意程序单击劫持。

（7）路由入口设置ROOT_URLCONF：告诉Django从哪个文件查找整个项目的路由信息（路由信息即我们定义的网址信息），默认值是与项目同名的文件夹的urls.py文件，即babys文件夹的urls.py。

（8）模板配置TEMPLATES：主要配置模板的解析引擎、模板的存放路径地址以及Django内置功能的模板使用配置信息。

（9）WSGI配置WSGI_APPLICATION：告诉Django如何查找WSGI文件，并从WSGI文件启动并运行Django系统服务，默认值是与项目同名的文件夹的wsgi.py文件，即babys文件夹的wsgi.py。

（10）数据库配置DATABASES：配置数据的连接信息，如连接数据库的模块、数据库名称、数据库的账号密码等，默认连接sqlite数据库。

（11）内置Auth认证的功能配置AUTH_PASSWORD_VALIDATORS：主要实现Django的Auth认证系统的内置功能。

（12）国际化与本地化配置：包含配置属性LANGUAGE_CODE、TIME_ZONE、USE_I18N、USE_L10N、USE_TZ，主要实现网站的语言设置、不同时区的时间设置等。

（13）静态资源配置STATIC_URL：设置静态文件的路径信息。在网站开发阶段中，我们经常对配置文件settings.py的INSTALLED_APPS、MIDDLEWARE、TEMPLATES、DATABASES和STATIC_URL进行配置，从而完成网站的开发过程，而配置属性DEBUG和ALLOWED_HOSTS则用于网站上线阶段。

上述配置属性是Django默认的功能配置，在实际开发中，可根据实际情况适当添加或删除相应的功能配置。

配置数据库

默认情况下，Django支持使用PostgreSQL、MySQL、Sqlite3和Oracle数据库，如果要使用其他的数据库，如MSSQL或Redis等，需要自行安装第三方插件。配置属性DATABASES是设置项目所使用的数据库信息，不同的数据库需要设置不同的数据库引擎，数据库引擎用于实现项目与数据库的连接，Django提供了4种数据库引擎：

'django.db.backends.postgresql'
'django.db.backends.mysql'
'django.db.backends.sqlite3'
'django.db.backends.oracle'

在创建项目的时候，Django已默认使用Sqlite3数据库：

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}

由于项目babys需要使用MySQL数据库，因此在配置属性DATABASES中设置MySQL的连接信息。

在配置数据库信息之前，首先确保本地计算机已安装MySQL数据库系统，然后再安装MySQL的连接模块，Django可以使用mysqlclient和pymysql模块实现MySQL连接。

mysqlclient模块可以使用pip指令安装，打开命令提示符窗口并输入安装指令pip install mysqlclient，然后等待模板安装完成即可。

pip install mysqlclient
-----------------------------------------------------------
Defaulting to user installation because normal site-packages is not writeable
Looking in indexes: https://repo.huaweicloud.com/repository/pypi/simple
Collecting mysqlclient
  Using cached https://repo.huaweicloud.com/repository/pypi/packages/2c/2f/68e56c63b6d9c85a698b6f3d938e298572a2d63e587c2a52806ba4ffdccc/mysqlclient-2.1.0-cp38-cp38-win_amd64.whl (180 kB)
Installing collected packages: mysqlclient
Successfully installed mysqlclient-2.1.0
-----------------------------------------------------------

# 设置settings中DATABASES设置

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'HOST': 'localhost',
        'NAME': 'babys',
        'USER': 'root',
        'PASSWORD': 'root123'
    }
}

# 在cmd中登陆MySQL
mysql -uroot -p
Enter password: *******
# 在MySQL中创建babys库
mysql> create database babys charset utf8mb4;
Query OK, 1 row affected (0.01 sec)

刚创建的数据库babys是一个空白的数据库，接着在PyCharm的Terminal界面下输入Django操作指令python manage.pymigrate来创建Django内置功能的数据表。

因为Django自带了内置功能，如Admin后台系统、Auth用户系统和会话机制等功能，这些功能都需要借助数据表实现，所以该操作指令可以将内置的迁移文件生成数据表。

python manage.py migrate
--------------------------------------------------------------
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, sessions
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying admin.0003_logentry_add_action_flag_choices... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying auth.0009_alter_user_last_name_max_length... OK
  Applying auth.0010_alter_group_name_max_length... OK
  Applying auth.0011_update_proxy_permissions... OK
  Applying auth.0012_alter_user_first_name_max_length... OK
  Applying sessions.0001_initial... OK
--------------------------------------------------------------

配置媒体资源

一般情况下，STATIC_URL是设置静态文件的路由地址，如CSS样式文件、JavaScript文件以及常用图片等。

对于一些经常变动的资源，通常将其存放在媒体资源文件夹，如用户头像、商品主图、商品详细介绍图等。

媒体资源和静态资源是可以同时存在的，而且两者可以独立运行，互不影响，而媒体资源只有配置属性MEDIA_URL和MEDIA_ROOT。

以项目babys为例，新建的文件夹media是用来存放媒体资源文件的，在配置文件settings.py分别设置MEDIA_URL和MEDIA_ROOT，使Django在运行的时候能够自动识别媒体资源文件夹media。

配置属性设置后，还需要将media文件夹注册到Django里，让Django知道如何找到媒体文件，否则无法在浏览器中访问该文件夹的文件信息。打开babys文件夹的urls.py文件，为媒体文件夹media添加相应的路由地址，代码如下：

from django.contrib import admin
from django.urls import path, re_path
from django.views.static import serve
from django.conf import settings

urlpatterns = [
    path('admin/', admin.site.urls),
    # 配置媒体路由信息
    re_path('media/(?P<path>.*)', serve, {'document_root': settings.MEDIA_ROOT}, name='media'),
]

python manage.py runserver 8000

内置指令

本章小结

系统总体结构设计需要由需求工程师和开发人员共同商议，针对用户需求来商量如何设计系统各个功能模块以及各个模块的数据结构。本章商城网站的概要设计如下：

（1）网站首页应设有导航栏，并且所有功能展示在导航栏，在导航栏的下面展示各类的热销商品，当单击商品图片即可进入商品详细页面，导航栏上方设有搜索框，便于用户搜索相关商品。

（2）商品列表页将所有商品以一定的规则排序展示，用户可以从销量、价格、上架时间和收藏数量设置商品的排序方式，并且在页面的左侧设置分类列表，选择某一分类可以筛选出相应的商品信息。

（3）商品详细页展示某一商品的主图、名称、规格、数量、详细介绍、购买按钮和收藏按钮，并在商品详细介绍的左侧设置了热销商品列表。

（5）个人中心页面是展示用户的基本信息及订单信息，只能在用户已登录的情况下访问。（6）用户登录和注册页面共用一个页面，如果用户账号已存在，则对用户账号密码验证并登录，如果用户不存在，则对当前的账号密码进行注册处理。

（7）数据库使用MySQL 5.7以上版本，数据表除了Django内置数据表之外，还需定义商品信息表、商品类别表、购物车信息表和订单信息表

整个项目共有7个文件夹和1个文件，每个文件夹和文件的功能说明如下：

（1）babys文件夹与项目名相同，该文件夹下含有文件__init__.py、asgi.py、settings.py、urls.py和wsgi.py

（2）commodity是Django创建的项目应用（App），文件夹含有__init__.py、admin.py、apps.py、models.py、tests.py和views.py文件，它主要实现网站的商品列表页和商品详细页。

（3）index是Django创建的项目应用（App），该文件夹含有的文件与项目应用（App）commodity相同，它主要实现网站首页。

（4）shopper也是Django创建的项目应用（App），它主要实现网站的购物车页面、个人中心页面、用户登录注册页面、在线支付功能等。

（5）media是网站的媒体资源，用于存放商品的主图和详细介绍图。

（6）pstatic是网站的静态资源，用于存放网站的静态资源文件，如CSS、JavaScript和网站界面图片。

（7）templates用于存放HTML模板文件，即网站的网页文件。

（8）manage.py是项目的命令行工具，内置多种方法与项目进行交互。在命令提示符窗口下，将路径切换到项目babys并输入python manage.py help，可以查看该工具的指令信息。

Django已为我们设置了一些默认的配置信息，比如项目路径、密钥配置、域名访问权限、App列表和中间件等，每个配置说明如下：

（1）项目路径BASE_DIR：主要通过os模块读取当前项目在计算机系统的具体路径，该代码在创建项目时自动生成，一般情况下无须修改。

（2）密钥配置SECRET_KEY：这是一个随机值，在项目创建的时候自动生成，一般情况下无须修改。主要用于重要数据的加密处理，提高项目的安全性，避免遭到攻击者恶意破坏。密钥主要用于用户密码、CSRF机制和会话Session等数据加密。

（5）App列表INSTALLED_APPS：告诉Django有哪些App。在项目创建时已有admin、auth和sessions等配置信息，这些都是Django内置的应用功能。

（6）中间件MIDDLEWARE：这是一个用来处理Django请求（Request）和响应（Response）的框架级别的钩子，它是一个轻量、低级别的插件系统，用于在全局范围内改变Django的输入和输出。

（7）路由入口设置ROOT_URLCONF：告诉Django从哪个文件查找整个项目的路由信息，默认值是与项目同名的文件夹的urls.py文件，即babys文件夹的urls.py。