2.2　设计说明

当我们完成客户的需求分析之后，下一步是执行系统的设计说明，它包括了概要设计和详细设计。概要设计划分为系统总体结构设计、数据结构及数据库设计、概要设计文档说明；详细设计是对系统每个功能模块进行算法设计、业务逻辑处理、网页界面设计、代码设计等具体的实现过程。

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

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

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

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

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

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

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

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

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

根据概要设计说明，分别对网站的网页设计和数据库的数据结构进行具体设计说明。一共设计了6个网页界面，每个网页界面的设计说明如下：

网站首页一共划分了5个不同的功能区域：商品搜索功能、网站导航、广告轮播、商品分类热销、网站尾部，如图2-1所示，每个功能的设计说明如下：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

从表2-1看到，商品信息表负责记录商品的基本信息，其中商品主图和商品描述是以文件路径的形式记录在数据库中的。一般来说，如果网站中涉及文件的存储和使用，那么数据库最好记录文件的路径地址。若将文件内容以二进制的数据格式写入数据库，则会对数据库造成一定的压力，从而降低网站的响应速度。

商品信息表的字段types是代表商品类型，每一个商品类型都记录在商品类别表中，因此商品类别表的数据结构如表2-2所示。

商品类别表分为一级分类和二级分类，它的设计是由商品列表页的商品分类决定，如图2-2所示，比如图2-2的“奶粉辅食”作为一级分类，该分类下设置了二级分类（进口奶粉、宝宝辅食、营养品），而商品信息表的字段types来自商品类别表的二级分类字段seconds。

虽然商品信息表的字段types来自商品类别表的二级分类字段seconds，但两个数据表之间并没有设置外键关系，这样的设计方式能够降低两个数据表之间的耦合性。如果网站需要改造成微服务架构或分布式架构，这种设计方式符合微服务或分布式的拆分要求。

购物车信息表的数据来自于商品信息表，为了简化表字段数量，我们在购物车信息表设置字段commodityInfos_id，该字段是商品信息表的主键id，从而使商品信息表和购物车信息表构成数据关联，这种方式不仅能简化字段数量，当商品信息发生改动，购物车的商品信息也能及时更新。此外，购物车信息表还需要设置字段user_id，该字段是Django内置用户表的主键id，用于区分不同用户的购物车信息，因此购物车信息表的数据结构如表2-3所示。

当购物车信息表的商品执行结算操作的时候，结算费用将写入订单信息表的字段price，并且还需要根据不同的用户区分相应的订单信息，因此订单信息表的数据结构如表2-4所示。

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