摘要
由于实体店购物无法满足人们日益增长的个性化需求，伴随着互联网技术的飞速发展和不断创新，依托于电子商务的网上购物也迅速兴起，它将传统的商品信息转换为电子信息化数据，并分类展现给使用网络购物的消费者，不管从时间上还是空间上看，这都是一种销售模式的升级。目前，传统的网上购物平台采用前后端耦合的方式进行开发，可能会导致用户体验较差，同时代码冗余导致可读性和可重用性较低。鉴于此，在可行性分析和需求分析的基础上，采用前后端分离的开发模式，使用Flask、MariaDB和前端框架Vue.js，设计实现了基于Python和Vue的购物平台，主要提供了用户管理、商品管理、订单管理、评论管理、公告管理、优惠码管理等功能，通过对系统的功能测试，结果表明该系统各个模块均可正常运行，在开发和维护方面也更加方便，并可以为用户提供良好的购物体验。
关键词：购物平台；MariaDB；Vue.js；Flask
ABSTRACT
As shopping in physical shops cannot meet the growing personalised needs of people, along with the rapid development and continuous innovation of Internet technology, online shopping relying on e-commerce has also emerged rapidly, which converts traditional commodity information into electronic informational data and classifies it to show to consumers using online shopping, which is an upgrade of the sales model, both in terms of time and space. Currently, traditional online shopping platforms are developed using front and back-end coupling, which may result in a poor user experience and low readability and reusability due to code redundancy. In view of this, on the basis of feasibility analysis and requirement analysis, the development mode of front and back-end separation is adopted, and a shopping platform based on Python and Vue is designed and implemented using Flask, MariaDB and the front-end framework Vue.js, It provides features such as user management, product management, order management, comment management, public notice management, and preferential code management, and through system functional tests, the results show that all modules of the system can work normally, and it is more convenient in development and maintenance, and can provide a good shopping experience for users.
Keywords: shopping platform; MariaDB; Vue.js; Flask
目录
第1章 绪论1
1.1 研究背景及意义1
1.2 国内外研究现状1
1.3 主要研究内容2
第2章 相关技术简述3
2.1 Python3
2.2 Flask框架3
2.3 Flask-SQLAlchemy3
2.4 Vue.js4
2.5 MariaDB4
第3章 系统分析6
3.1 可行性分析6
3.2 需求分析6
3.2.1 功能需求6
3.2.2 非功能需求7
3.3 用例分析7
3.3.1 游客用例7
3.3.2 用户用例7
3.3.3 管理员用例8
第4章 系统设计9
4.1 网站总体设计9
4.2 数据库设计10
4.2.1 概念结构设计10
4.2.2 逻辑结构设计12
第5章 系统实现16
5.1 用户管理16
5.2 商品管理27
5.3 商品推荐34
5.4 订单管理36
5.5 支付管理38
5.6 公告管理39
5.7 优惠码管理40
5.8 评论管理42
第6章 系统测试46
6.1 测试方法46
6.2 功能测试46
6.2.1 用户管理46
6.2.2 商品管理52
6.2.3 商品推荐54
6.2.4 支付管理55
6.2.5 订单管理57
6.2.6 公告管理58
6.2.7 优惠码管理59
6.2.8 评论管理59
6.3 测试结论61
总结62
参考文献63
致谢65
第1章 绪论
1.1 研究背景及意义
随着网络技术的飞速发展，人们的生活方式和生活习惯产生了极大的影响，为各行各业都带来了一定的好处，同时也推动了一些新兴产业的发展。在线购物相较于传统的店面购物，具有诸多优点。除了方便、快捷、自主选择等优点外，在线购物还能够为买卖双方带来更多的好处。现今，通过各种终端设备进行网络购物已然成为人们的一种日常，成为人们网络生活中不可或缺的重要组成部分。尽管国内外很多学者着手于一些购物平台相关的设计和开发，但多用前后端不分离的开发模式进行开发，由于其动静态资源要耦合在一起，导致服务器压力大，一旦出现问题直接影响用户体验；将静态的html页面修改为动态页面时，出错率较高，效率较低；往往运行所需环境复杂，调试困难等问题逐渐显露出来。所以尝试基于Python和Vue并结合前后端分离的开发模式设计开发一个购物平台，系统完成后，预期可以提高用户购物及交易效率，商家的管理效率，用户体验整体上会有所提升。
1.2 国内外研究现状
尽管电子商务起源于欧洲和美国，但在亚洲被广泛使用。2018年，张钰在《中国跨境电商的问题及对策研究》[1]中指出：亚洲的在线销售交易占世界市场的半壁江山。中国的电子商务在经历了探索和理性调整后，步入了快速发展的轨道[2]，开启了中国电子商务快速发展的十几年[3]。阿里巴巴集团（Alibaba Group）、腾讯（Tencent）和京东（JD.com）等中国本土科技巨头引导着快速发展的电子商务生态系统，中国独特的环境也促进了商业和数字贸易的创新发展，并培养了许多新的发展理念，以促进全球电子商务市场的发展[4]。2022年全国网上零售额13.79万亿元，同比增长4%，电商新业态新模式彰显活力[5]。
2019年，高阳在《新淘淘在线购物平台的设计与实现》[4]中采用了SSM框架设计并实现了在线购物平台，同时并结合了FastDFS和Nginx实现了文件服务器，Nginx在面向广大消费者时也可以起到负载均衡的作用，缓解了系统在处理大量数据时的缺陷，对于负载均衡方面也有一定的优化，但未在用户体验方面进行优化。2020年，薄志强在《基于SSM框架的网上商城系统的设计与实现》[6]中分析了现代电子商务和移动网上商城系统，并根据各项需求整合了各项技术，设计了一个基于SSM的网上商城系统。该系统使用了Spring的AOP技术来实现横切关注点的切面编程，使用了Guava缓存进行本地缓存，并采用了Flink技术，实现了与客服的交流沟通，并提供了产品的详细信息咨询，为用户提供了良好的用户体验。虽然薄志强的系统实现了所需功能，但数据库和安全性方面存在缺陷，同年李晨对其进行了一定的优化。2020年李晨在《基于Spring Boot的电子商城设计与实现》[7]使用了MySQL关系型数据库和MyBatis数据持久层框架提供数据存储，并使用Redis内存数据库提供数据缓存，以避免高并发场景下对数据库频繁读操作所带来的系统性能瓶颈，此外，该系统还采用了接口请求数据签名校验的方式，以提高系统的安全性。
据统计，2022年美国的电商销售额达到了1.09万亿美元，在线渠道在美国零售额中的份额占比达到22.1％。2017年，Zhang Yali和Wang Xiaokan在《Design And Implementation of Online Shopping Mall System Based On ASP.NET》[8]中采用ASP.NET和ADO.NET技术设计并实现了网上商城系统，同时使用了Data Consistency Technology和Paging Display Technology。在一个异步尝试的过程中，首先会创建一个不可见的订单。当同步调用扣除库存时，将会向消息队列发送消息。如果消息没有发送成功，则只会执行新的异步尝试。但如果消息发送成功，那么优惠券和库存系统将会确定是否需要进行业务回滚。一定程度上避免了财产损失和信息丢失，在缓解数据库负载的同时使前端页面更美观，保证了在较大体量数据时能够更好的提供服务。虽然Zhang Yali和Wang Xiaokan在系统设计时保证了数据一致性，但在用户体验方面未进行优化。2018年，Fan Wei和Qian Zhang在《Design and Implementation of Online Shopping System Based on B/S Model》[9]中采用JSP技术、Spring框架和MySQL数据库，实现了商品的销售排名以及发布优惠等功能，提高了服务质量，优化了用户体验，但没有提到对系统的维护问题。2019年，Yun Quan在《Design and Implementation of E-commerce Platform based on Vue.js and MySQL》[10]中采用了SSM框架和MySQL数据库以及前端框架Vue.js，提出了传统的水平数据库设计难以满足数据库中的参数要求，并提供了解决方案：在数据库中使用垂直存储以更好地适应组件属性的变化。使得系统更易维护和扩展。
1.3 主要研究内容
本设计基于Python和Vue进行开发，使用PyCharm和Visual Studio Code作为开发工具，并将数据存储于MariaDB数据库中，采用前后端分离的开发模式，实现一个在线购物平台，以降低用户进行购物的时间成本及商家用作线下的销售成本。预期可实现用户管理、商品管理、评论管理、订单管理、商品类别管理等功能。应完成的主要工作有:
-
对该平台的背景及意义和国内外相关平台的研究现状进行总结和梳理；
-
对购物平台在开发过程中使用到的技术进行简单介绍；
-
对该平台进行可行性和需求分析；
-
基于对系统的分析，进行功能和数据库的设计；
-
对平台各个功能进行具体实现；
-
对平台的功能进行测试，以保证平台的稳定运行。
第2章 相关技术简述
2.1 Python
自2004年以来，编程语言Python的使用率呈线性增长，目前已成为最流行的编程语言之一。由于它的简洁性、易读性和良好的跨平台性[11]，许多世界知名的大学都采用Python来进行编程课程的教学。同时Python还具有易维护、可移植性、可扩展性、丰富的标准库、互动模式支持以及为所有数据库提供接口和嵌入式等特点，也使其可以应用于网站开发、软件开发、网络爬虫、大数据分析、机器学习等各个领域[12]。
2.2 Flask框架
随着Python热度高涨， Web领域也诞生了很多优秀的框架，例如，Django、Flask等，它们有着各自的优点，不同情况下选用不同的框架可以达到事半功倍的效果。虽然Flask、Django框架在开发时都采用了MVT模式，但Flask是一个可个性化定制的轻量级框架，和同类型的框架相比更为灵活、轻便、安全且容易上手，小巧灵活[13]。它核心功能简洁明了的同时还具备丰富的扩展功能，用户能够根据需求添加对应的功能，并利用该框架强大的插件库，设计和开发个性化的网站。
2.3 Flask-SQLAlchemy
Flask-SQLAlchemy是一个Flask的扩展，它使Flask在使用SQLAlchemy时更容易。
SQLAlchemy是一个通过使用关系对象映射器（ORM，Object Relational Mapper）来操作数据库的Python框架。
通过使用类和对象操作数据库，将自己从繁琐的SQL语句中解放出来。其具有以下优点：
-
提供了语法提示，用户不必自己拼写SQL，一定程度上保证了SQL语法的正确性；
-
具有方言功能(dialect)，能为多种数据库提供语法的转换；
-
可以防止SQL注入攻击；
-
结合了数据迁移，可以方便的更新数据库；
-
面向对象，可读性和开发效率较高。
SQLAlchemy提供了两种使用方式：Core和ORM，其组件依赖关系图如图2.1所示：
添加图片注释，不超过 140 字（可选）
图2.1 SQLAlchemy组件依赖关系图
2.4 Vue.js
Vue.js是一款用于构建用户界面的渐进式框架，采用MVVM模式进行设计[14]，MVVM本质上是MVC的改进版。它基于最初的MVP框架，并结合了WPF的新功能。其基本工作原理如图2.2所示。
添加图片注释，不超过 140 字（可选）
图2.2 基本工作原理
Vue.js是目前热门的前端框架之一。它基于标准HTML、CSS和JavaScript进行构建，并提供了一套声明式的、组件化编程模型，使得开发者可以更高效地开发用户界面[15]。
2.5 MariaDB
MariaDB是MySQL的一个分支，由开源社区进行维护和管理。MariaDB致力于保持与MySQL兼容性，并提供与MySQL相同的功能和性能。同时，MariaDB还提供了一些额外的功能，如支持事务处理、列存储、异步I/O等，使其在高性能和可扩展性方面具有优势。
第3章 系统分析
3.1 可行性分析
可行性研究的目的是确定在尽可能短的时间内以最低成本解决问题的可能性，其对于整个项目的成功具有重要的经济意义和现实意义[16]。
技术可行性：目前购物平台在我国发展较为迅速，开发其各项技术也相对成熟。本设计前端采用目前热门的前端框架之一的Vue.js及其组件库；数据库采用MariaDB；通过Flask框架进行数据的分析和处理。这些技术目前都较为成熟且有在类似系统的应用，此外，我也具备一定基础知识，因此在技术上是可行的。
经济可行性：鉴于该购物平台没有平台限制且使用的工具都是免费的，仅需要一台电脑即可稳定运行，所需成本低。平台开始运行后可以为人们带来一定的便利性，同时产生的收益也能较快的回收成本。因此在经济上是可行的。
操作可行性：在开发设计时，基于人们常用的网上购物平台情况进行开发，同时充分考虑用户体验。因此，即使用户缺乏专业知识或未经过系统培训也可以轻易上手使用，因此在操作上是可行的。
法律可行性：开发中使用的技术都是合法使用的，同时虽然会参考相关的平台及资料，但并不会直接获取其源码，不存在侵权行为，因此在法律上是可行的。
3.2 需求分析
3.2.1 功能需求
对购物平台进行需求分析是购物平台构建中必不可少的阶段，而功能需求分析是购物网站需求分析中的核心部分。该设计是实现一个购物平台，应综合考虑实现以下几项主要业务功能：
用户管理：用户需要能够登录到该平台购买商品，也需要能够修改个人信息和注销账号。
商品管理：用户需要根据关键词搜索并展示想要购买的商品，同时需要可以将想要购买的商品放入购物车一并进行结算；而管理员需要可以添加商品和修改商品的详细信息。
商品推荐功能：根据协同过滤算法并结合用户的购物车、订单及收藏等数据进行商品推荐；对游客则展示点击量最高的商品。
订单管理：用户需要添加、修改自己的收货信息，查看自己的所有订单及其状态；而管理员需要能够查看所有用户的订单及其状态，并对其进行管理。
公告管理：用户需要查看平台的通知或优惠信息；管理员需要对其进行设置和修改。
优惠码管理：用户需要在支付时可以享受一些优惠；管理员需要对优惠码进行管理。
评论管理：用户需要对商品进行评论；管理员需要可以查看所有的评论，并可设置屏蔽词，对之后的评论进行关键词屏蔽。
3.2.2 非功能需求
非功能需求是对系统提供的功能给出的约束。满足如下几点：
-
数据的准确性和完整性。商品的各类信息准确无误，不影响用户体验。
-
易用性。符合用户的操作习惯以及其对该平台的使用期望。
-
可扩展性和可维护性。
3.3 用例分析
通过用例分析能够直观地将系统的功能需求进行展示，而用例图可以从参与者的角度描述系统需求和系统使用情况。
3.3.1 游客用例
游客可以进行注册、查看商品及其详情和评论，其用例图如图3.1所示：
图3.1 游客用例图
3.3.2 用户用例
用户能够登录平台，修改个人信息，检索、浏览、购买商品并评论等。用例图如图3.2所示：
图3.2 用户用例图
3.3.3 管理员用例
管理员可以登录平台，管理用户、商品、优惠码、订单、评论以及公告等。用例图如图3.3所示：
图3.3 管理员用例图
第4章 系统设计
4.1 网站总体设计
在基于系统需求分析的基础上，遵循软件工程中的“高内聚”、“低耦合”原则，对该系统的功能模块进行划分。其功能结构图如图4.1所示。
图4.1 系统功能结构图
用户管理：为用户提供注册账号和登录的功能，并可以修改自己的信息；管理员不可注册，可以查看所有用户的基本信息。
商品管理：用户可通过商品关键字、词对商品进行筛选并对查看商品的详细信息，并将商品添加到购物车以方便购买；管理员能够上架新的商品，以及对原有商品的信息进行修改包括图片和详细介绍，同时可以对商品分类和优惠码进行设置和修改。
商品推荐：根据协同过滤算法并结合用户的行为(购买或收藏等)进行商品推荐。
订单管理：用户在进行购买时平台将自动生成订单，可在我的订单页面查看订单详情及其当前状态，对未付款的订单也可以再次进行支付；管理员可以查看所有用户的订单情况，并可以对已付款但未发货的订单及时发货。
公告管理：在用户每次打开浏览器并首次进入到平台时，公告将以弹窗的形式进行展示；管理员可对该平台的公告进行设置和修改。
优惠码管理：用户在支付时可以选用平台优惠码后进行支付，每笔订单仅能使用一个优惠码且每个用户对单个优惠码仅可使用一次；管理员可以设置优惠码。
评论管理：用户可在商品详情页面对商品进行评论；管理员能够查看所有商品中的评论，且可以设置屏蔽词。
4.2 数据库设计
4.2.1 概念结构设计
概念结构设计是将从需求分析中得到的用户需求抽象为信息结构的过程，之后通过分析角度整合设计观点，最终完成整个E-R图的设计。每个实体都有属于自己的属性，一个实体的变更会通过实体间依赖关系的传递，对非直接关联的实习产生影响。
用户实体包括用户id、是否完成实名认证、购物车、地址、登录设备、收藏等属性。如图4.2所示。
图4.2 用户实体属性图
商品实体包括商品id、商品类型、商品名、价格、简介、库存、图片、添加人等属性。如图4.3所示。
图4.3 商品实体属性图
商品类别实体包括类别id、类别名、创建时间等属性。如图4.4所示。
图4.4 商品类别实体属性图
实名认证实体包括id、用户id、真实姓名、身份证号属性，其中id为表的主键。如图4.5所示。
图4.5实名认证实体属性图
订单实体包括订单id、订单编号、商品信息、支付状态、收货人信息等属性。如图4.6所示。
图4.6 订单实体属性图
管理员实体包括管理员id、用户名、密码、权限、是否启用属性。如图4.7所示。
图4.7 管理员实体属性图
1
系统的实体关系E-R图如图4.8所示。
n
m
n
n
1
m
m
n
1
图4.8 实体关系E-R图
4.2.2 逻辑结构设计
在逻辑结构设计阶段，需要将概念结构设计阶段所完成的概念模型转换为所选定的数据库管理系统(DBMS)支持的数据模型。该平台使用MariaDB数据库进行数据存储，它是一种关系型数据库，在这个阶段，需要将E-R模型转换为关系模型，而这每个关系都是一张二维表。本平台中有6张较为重要的数据表，分别为：
1、用户信息表
存放了本购物平台中用户除实名认证信息外所有的基本信息。用户表中的字段包括：用户id、是否已进行实名认证、收货地址信息、头像信息等。用户表结构如表4.1所示。
表4.1 用户表
| 字段名 | 数据类型 | 是否允许为空 | 备注 |
|---|---|---|---|
| id | int | 否 | 主键，用户id |
| username | varchar(12) | 否 | 用户名 |
| gender | enum | 是 | 性别 |
| password | varchar(20) | 否 | 密码 |
| phone | varchar(11) | 否 | 手机号 |
| | varchar(30) | 是 | 邮箱 |
| authentication | int | 是 | 是否完成实名认证 |
| address | longtext | 是 | 收货地址 |
| avatar | varchar(50) | 是 | 头像 |
2、实名认证信息表
存放了所有用户的实名认证信息。包括用户id、姓名、身份证号等字段。实名认证信息表结构如表4.2所示。
表4.2 实名认证信息表
| 字段名 | 数据类型 | 是否允许为空 | 备注 |
|---|---|---|---|
| id | int | 否 | 主键，id |
| uid | int | 否 | 用户id |
| name | varchar(5) | 否 | 姓名 |
| card | varchar(18) | 否 | 身份证号 |
3、商品分类表
存放了所有的商品类别信息。其中包含商品类别id、类别名称、创建时间等字段。商品分类表结构如表4.3所示。
表4.3 商品分类表
| 字段名 | 数据类型 | 是否允许为空 | 备注 |
|---|---|---|---|
| goods_type_id | int | 否 | 主键，类别id |
| goods_type | varchar(10) | 是 | 类别名 |
| goods_type_date | date | 是 | 修改时间 |
| creation_date | date | 是 | 创建时间 |
4、商品信息表
存放了所有商品的详细信息。包含商品id、商品名称、商品类别、商品图片、价格、简介、库存、颜色集等字段。商品信息表结构如表4.4所示。
表4.4 商品信息表
| 字段名 | 数据类型 | 是否允许为空 | 备注 |
|---|---|---|---|
| pid | int | 否 | 主键，商品id |
| type | varchar(10) | 是 | 类别 |
| name | varchar(50) | 否 | 商品名 |
| img | varchar(255) | 否 | 主图 |
| nprice | float | 是 | 现价 |
| oprice | float | 是 | 原价 |
| desc | varchar(255) | 是 | 简介 |
| stock | int | 是 | 库存 |
| detailsImg | varchar(255) | 是 | 图片 |
| color | varchar(255) | 是 | 颜色集 |
| gift | varchar(255) | 是 | 赠品 |
| operator | int | 否 | 发布商品的管理员id |
5、管理员信息表
存放了管理员的基本信息。包括管理员id、权限、是否启用等字段。管理员信息表结构如表4.5所示。
表4.5 管理员信息表
| 字段名 | 数据类型 | 是否允许为空 | 备注 |
|---|---|---|---|
| id | int | 否 | 主键，管理员id |
| username | varchar(12) | 否 | 用户名 |
| password | varchar(20) | 否 | 密码 |
| phone | varchar(11) | 否 | 手机号 |
| | varchar(20) | 否 | 邮箱 |
| gender | enum | 是 | 性别 |
| role | int | 是 | 权限 |
| state | int | 是 | 是否启用 |
6、订单表
存放了订单信息。其中包括id、订单编号、商品信息、支付状态、用户id、收货人信息、快递单号等字段。订单表结构如表4.6所示。
表4.6 订单表
| 字段名 | 数据类型 | 是否允许为空 | 备注 |
|---|---|---|---|
| oid | varchar(20) | 是 | 订单号 |
| pid | int | 是 | 商品id |
| pdetails | varchar(50) | 是 | 订单详情 |
| count | int | 是 | 数量 |
| state | enum | 是 | 支付状态 |
| uid | int | 是 | 用户id |
| address | text | 是 | 收货地址 |
| time | datetime | 是 | 创建时间 |
| shipped | enum | 是 | 是否发货 |
| useCoupons | varchar(20) | 是 | 是否使用优惠码 |
| discount | varchar(10) | 是 | 折扣信息 |
第5章 系统实现
本章节详细介绍了平台的实现过程。编辑器使用Visual Studio Code和PyCharm，前端采用目前流行的Vue.js框架进行页面开发，后端使用Flask框架，数据库使用MariaDB数据库进行数据存储。在此环境下进行实现。
5.1 用户管理
游客在主页右上方点击注册按钮，即可进入注册页面，填写相应的信息完成注册。注册界面如图5.1所示。
添加图片注释，不超过 140 字（可选）
图5.1 前台注册页面
注册完成后可进入登录界面，输入已注册的用户信息以及验证码，后端接收并校验这些信息是否正确，验证通过即成功登录。登录界面如图5.2所示。
添加图片注释，不超过 140 字（可选）
图5.2 前台登录页面
管理员需要在平台后台进行登录。实现效果如图5.3所示。
添加图片注释，不超过 140 字（可选）
图5.3 后台登录页面
注册的关键代码如下:
@app.route('/register', methods=['GET', 'POST'])
def register():
if request.method == 'POST':
get_data = request.get_json()
username = get_data.get('username')
phone = get_data.get('phoneNum')
password = get_data.get('password')
flag = get_data.get('flag')
if not all([username, password, phone, flag]):return jsonify(message='不能为空', errno=1)
data = {'username': username, 'password': password, 'phone': phone}
for k in data.keys():
if data.get(k):
ret = dataCheck(data[k], k)
if not ret:continue
elif ret.get('errno') == 1:return jsonify(ret)
else:jsonify(message='数据错误', errno=1)
global userCount
if int(flag) == 0:
ulist = User.query.filter(User.username == username).all()
for i in ulist:
if username == i.username:
return jsonify(message='用户名已存在', errno=1)
u = User(username=username, password=password,\
phone=phone, authentication=0)
db.session.add(u)
db.session.commit()
userCount += 1
data = {username: username, password: password, phone: phone}
return jsonify(message='注册成功', errno=0, data=data)
elif int(flag) == 1:
code = get_data.get('code')
hostname = get_data.get('hostname')
if code:
ulist = User.query.filter(User.username == username).all()
for i in ulist:
if username == i.username:
return jsonify(message='用户名已存在', errno=1)
u = User(username=username, password=password, phone=phone, authentication=0)
db.session.add(u)
db.session.commit()
userCount += 1
result = login(username, password, hostname, 'user', code)
checkResult = result.get_json().get('errno')
if checkResult == 1:
message = result.get_json().get('message')
u = User.query.filter(User.username == username).delete()
db.session.commit()
return jsonify(errno=checkResult, message=message)
return result
else:
return jsonify(message='请输入验证码', errno=1)
登录的关键代码如下:
@app.route('/login', methods=['POST'])
def login():
hostNameFlag = 0
get_data = request.get_json()
username = get_data.get('username')
password = get_data.get('password')
hostname = get_data.get('hostname')
flag = get_data.get('flag')
code = get_data.get('code')
if flag == 'user':
u = User.query.filter(User.username == username).all()
if u:
if u[0].password == password:
address = eval(u[0].address) if u[0].address else ""
data = {
'uid': u[0].id,
'username': u[0].username,
'password': u[0].password,
'authentication': u[0].authentication,
'cart': u[0].cart,
'address': str(address).replace("'", '"'),
'gender': u[0].gender,
'avatar': u[0].avatar
}
hostname = {
'dn': hostname,
'time': time.strftime("%Y-%m-%d %X")
}
device = eval(u[0].device) if u[0].device else []
index = 0
for i in device:
if hostname['dn'] == i['dn']:hostNameFlag = 1;break
index += 1
if not hostNameFlag:
device.append(hostname)
device = str(device)
else:
device[index] = hostname
device = str(device)
if addDeviceLength == 1:db.session.commit()
return jsonify(message='登录成功', errno=0, data=data)
else:return jsonify(message='密码错误', errno=1)
else:return jsonify(message='账号不存在', errno=1)
在个人信息页面，用户能够修改个人信息。实现效果如图5.4所示。
添加图片注释，不超过 140 字（可选）
图5.4 个人信息修改页面
关键代码如下：
@app.route('/updateInfo', methods=['POST'])
def updateInfo():
get_data = request.get_json()
username = get_data.get('username')
gender = get_data.get('gender')
uid = get_data.get('uid')
changeUsername = bool(get_data.get('changeUsername'))
changeGender = bool(get_data.get('changeGender'))
changeAvatar = bool(get_data.get('changeAvatar'))
if User.query.filter(User.id == uid).all():
duplicateNameOrNot = User.query.filter(User.username == username).all()
if duplicateNameOrNot and changeUsername:return jsonify({'errno': 1, 'message': '用户名重复'})
else:
if changeUsername and changeGender:
if User.query.filter(User.id == uid).update({'username': username, 'gender': gender}) == 1:
db.session.commit()
return jsonify({'errno': 0, 'message': '修改用户信息成功'})
elif changeUsername:
if User.query.filter(User.id == uid).update({'username': username}) == 1:
db.session.commit()
return jsonify({'errno': 0, 'message': '修改用户名成功'})
elif changeGender:
if User.query.filter(User.id == uid).update({'gender': gender}) == 1:
db.session.commit()
return jsonify({'errno': 0, 'message': '修改用户性别成功'})
else:return jsonify({'errno': 1, 'message': '账号错误'})
账号安全页面，用户可以修改自己的安全手机、安全邮箱、进行实名认证、修改密码和查看登录过的所有设备。实现效果如图5.5示。
添加图片注释，不超过 140 字（可选）
图5.5 账号安全页面
收货地址页面，用户可以修改或新增收货地址。实现效果如图5.6示。
添加图片注释，不超过 140 字（可选）
图5.6 收货地址页面
账号安全和收货地址页面的关键代码如下:
@app.route('/checkUser', methods=['POST', 'GET'])
def checkUser(username='', uid=0):
data = {}
dataList = []
if not all([username, uid]):
get_data = request.get_json()
check = get_data.get('check')
username = get_data.get('username')
uid = get_data.get('uid')
if all([username, uid]):
u = User.query.filter(User.id == uid, User.username == username).all()
if u and len(u) == 1:
if "check" in dir():
for i in range(len(check)):
if eval(f'u[0].{check[i]}'):
if eval(f'u[0].{check[i]}')[0]=='[' and eval(f'u[0].{check[i]}')[-1] == ']':data[f'{check[i]}'] = eval(eval(f'u[0].{check[i]}'))
elif eval(f'u[0].{check[i]}')[0]=='{' and eval(f'u[0].{check[i]}')[-1] == '}':
dic = eval(eval(f'u[0].{check[i]}'))
for j in dic:
if j != 'num':
dic[j].setdefault('key', j)
dataList.append(dic[j])
return jsonify({'errno': 0, 'data': dataList, 'message': 'success'})
else:data[f'{check[i]}'] = eval(f'u[0].{check[i]}')
else:
if check[i] == 'address' or check[i] == 'cart' or check[i] == 'like':
return jsonify({'errno': 0, 'data': '', 'message': 'success'})
elif check[i] == 'device':
return jsonify({'errno': 0, 'data': '', 'message': 'success'})
else:data[f'{check[i]}'] = eval(f'u[0].{check[i]}')
return jsonify({'errno': 0, 'data': data, 'message': 'success'})
else:return 'success'
else:return jsonify({'errno': 1, 'message': '账号错误'})
else:return jsonify({'errno': 1, 'message': '数据错误'})
喜欢的商品页面，展示用户收藏的所有商品，点击可跳转至详情页面。实现效果如图5.7。
添加图片注释，不超过 140 字（可选）
图5.7 个人中心-喜欢的商品页面
关键代码如下：
@app.route('/getLike', methods=['POST'])
def getLike():
get_data = request.get_json()
uid = get_data.get('uid')
u = User.query.filter(User.id == uid).all()
if u and len(u) == 1:
resultList = []
for i in eval(u[0].like) if u[0].like else []:
g = Goods.query.filter(Goods.pid == i).all()
if g and len(g) == 1:
data = {
'img': g[0].img,
'pid': g[0].pid,
'name': g[0].name,
'price': g[0].nprice
}
resultList.append(data)
return jsonify(errno=0, likeList=resultList)
注销页面，用户可通过邮箱验证码注销自己的账号。实现效果如图5.8所示。
添加图片注释，不超过 140 字（可选）
图5.8 注销页面
关键代码如下：
@app.route('/cancellation', methods=['POST'])
def cancellation():
if request.method == 'POST':
get_data = request.get_json()
username = get_data.get('username')
uid = get_data.get('uid')
code = get_data.get('code')
if all([username, uid, code]):
result = checkUser(username, uid)
if result == 'success':
v = Verification.query.filter(Verification.uid == uid).all()
if v and len(v) == 1 and v[0].code == code:
flag = False
for i in Order.query.filter(Order.uid == uid).all():
if i.state == "1" and i.shipped == '0':
flag = True
break
if flag:return jsonify(errno=1, message='您还有未完成的订单,暂时无法注销')
if User.query.filter(User.id == uid).delete() == 1:
db.session.commit()
return jsonify(errno=0, message='注销成功')
在后台管理员能够查看用户的基础信息，同时也可以修改、删除或添加用户。实现效果如图5.9所示。
添加图片注释，不超过 140 字（可选）
图5.9 用户管理页面
关键代码如下：
@app.route('/userList', methods=['POST'])
def userList():
if request.method == 'POST':
get_data = request.get_json()
flag = get_data.get('flag')
currentPage = get_data.get('currentPage')
pageSize = get_data.get('pageSize')
if not all([pageSize,currentPage]) and flag:return jsonify(errno=1, message='数据错误')
userList = []
if flag == 'user':
u = User.query.all()
for i in u[(currentPage - 1) * pageSize: currentPage * pageSize]:
email = ''
if i.email:
emailList = i.email.split('@')
email = emailList[0][:3] + '******@' + emailList[1]
data = {
'id': i.id,
'username': i.username,
'phone': i.phone[:3]+'****'+i.phone[-4:] if len(i.phone)==11 else '',
'email': email,
'authentication': '已认证' if i.authentication else '未认证'
}
userList.append(data)
return jsonify(errno=0, userList=userList, total=userCount)
5.2 商品管理
商品管理模块主要分为商品的展示和管理员对商品信息的维护。
在平台首页用户可以分类查看商品并进行商品检索。如图5.10所示。
添加图片注释，不超过 140 字（可选）
图5.10 平台首页
关键代码如下：
@app.route('/products/newProducts', methods=['GET'])
def newProducts():
types, lengths, imgs = locals(), locals(), locals()
for i in allType:
p = Goods.query.filter(Goods.type == i).order_by(Goods.pid.desc()).limit(10)
types[i] = {}
num = 10 if length >= 10 else length
for j in p:
types[i][num] = {
'id': j.pid,
'name': j.name,
'img': j.img,
'nprice': j.nprice,
'oprice': j.oprice,
'desc': j.desc
}
num -= 1
types[i]['length'] = length
data = {}
for i in allType:data[i] = types[i]
result = {'data': data, 'errno': 0, 'message': 'Success'}
return Response(json.dumps(result), mimetype='application/json')
当用户点击商品图片或文字时，会跳转至对应商品的详情页面。用户可以在此页面查看该商品的详细信息，并可以点击“加入购物车”按钮将该商品放入购物车，还可以点击“查看评论”按钮查看其他用户对该商品的评论信息，或者点击“喜欢”按钮收藏该商品。实现效果如图5.11所示。
添加图片注释，不超过 140 字（可选）
图5.11 商品详情页面
关键代码如下：
@app.route('/product', methods=['POST'])
def product():
get_id = request.get_json()
pid = int(get_id.get('pid'))
p = Goods.query.get(pid)
changeHits = Goods.query.filter(Goods.pid == pid).update({'hits': str(int(p.hits) + 1)})
db.session.commit()
detailsImg = []
if p.detailsImg:detailsImg = p.detailsImg.split(';')
if type(detailsImg) == list:detailsImg.insert(0, p.img)
else:p.detailsImg = [p.img]
if p.color: p.color = eval(p.color)
if p.memory: p.memory = eval(p.memory)
if p.gift: p.gift = p.gift.split(';')
data = {
'name': p.name,
'img': p.img,
'nprice': p.nprice,
'oprice': p.oprice,
'desc': p.desc,
'stock': p.stock,
'detailsImg': detailsImg,
'color': p.color,
'memory': p.memory,
'gift': p.gift,
'errno': 0
}
return jsonify(data)
全部商品页面以分类的形式展示所有的商品。实现效果如图5.12所示。
添加图片注释，不超过 140 字（可选）
图5.12 全部商品页面
关键代码如下：
@app.route('/products/all', methods=['GET'])
def allProducts():
if request.method == 'GET':
types = locals()
for i in allType:
p = Goods.query.filter(Goods.type == i)
types[i] = {}
num = 0
for j in p:
num += 1
types[i][num] = {
'id': j.pid,
'name': j.name,
'img': j.img,
'nprice': j.nprice,
'oprice': j.oprice,
'desc': j.desc
}
data = {}
for i in allType:data[i] = types[i]
result = {'data': data, 'errno': 0, 'message': 'Success'}
return Response(json.dumps(result), mimetype='application/json')
分类管理页面，管理员可以添加、编辑和删除商品的类别信息。实现效果如图5.13所示。
添加图片注释，不超过 140 字（可选）
图5.13 分类管理页面
主要代码如下：
@app.route('/changeGoodsType', methods=['POST'])
def changeGoodsType():
get_data = request.get_json()
type = get_data.get('type')
date = get_data.get('date')
flag = get_data.get('flag')
oldType = get_data.get('oldType')
global allType
if flag > 0:
gt = GoodsType.query.filter( GoodsType.goods_type == oldType ).update( {'goods_type': type, 'goods_type_date': date})
if gt == 1:
g = Goods.query.filter(Goods.type == oldType).update({'type': type})
db.session.commit()
allType[allType.index(oldType)] = type
return jsonify(errno=0, message=g)
elif flag == 0:
gt = GoodsType(goods_type=type, goods_type_date=date, creation_date=date)
db.session.add(gt)
db.session.commit()
allType.append(type)
return jsonify(errno=0)
elif flag == -1:
gt = GoodsType.query.filter(GoodsType.goods_type == type).delete()
allType.pop(allType.index(type))
if gt == 1:
g = Goods.query.filter(Goods.type == type).update({'type': '其他'})
db.session.commit()
return jsonify(errno=0, message=g)
编辑商品页面，所有的商品进行分页展示，管理员可编辑、新增或删除商品。实现效果如图5.14所示。
添加图片注释，不超过 140 字（可选）
图5.14 编辑商品页面
关键代码如下：
@app.route('/updateGoods', methods=['POST'])
def updateGoods():
files = request.files.getlist('file')
flag = int(dict(request.form)['flag'])
pId = dict(request.form)['pid']
pName = dict(request.form)['pName']
pType = dict(request.form)['type']
imgType = dict(request.form)['imgType']
stock = dict(request.form)['stock']
nprice = dict(request.form)['nprice']
oprice = dict(request.form)['oprice'] or nprice
desc = dict(request.form)['desc']
gift = dict(request.form)['gift']
color = dict(request.form)['color'].split(',')
colorName = dict(request.form)['colorName'].split(',')
mid = dict(request.form)['mid']
imgIndex = 0;img = ''; detailsImg = []; colorDict = {}
if all([colorName, color]):
colorDict = dict(zip(colorName, color))
g = Goods.query.all()
if not flag:
for i in g:
if pName == i.name: return jsonify(errno=1, message='商品名已存在')
if not files: return jsonify(errno=1, message='商品图片未上传')
g = Goods.query.order_by(Goods.pid.desc()).limit(1).all()
pId = int(g[0].pid) + 1
if flag == -1 and pId:
g = Goods.query.filter(Goods.pid == pId).delete()
if g == 1:
db.session.commit()
if os.path.exists(f'comment/{pId}-comment'):
os.remove(f'comment/{pId}-comment')
creatCommentCount()
return jsonify(errno=0)
if files:
for i in files:
suffix = secure_filename(i.filename).split('.')[-1]
if imgIndex == 0:
img = imgType + '/' + imgType + '_' + str(pId) + '.' + suffix
filename = imgType + '_' + str(pId) + '.' + suffix
else:
detailsImg.append(imgType + '/' + imgType + '_' + str(pId) + '_' + str(imgIndex) + '.' + suffix)
filename = imgType + '_' + str(pId) + '_' + str(imgIndex) + '.' + suffix
imgIndex += 1
i.save(os.path.join(r'E:\shop-vue\src\assets\imgs\products' + f'\{imgType}', filename))
if not flag:
g = Goods(pid=pId, name=pName, type=pType, img=img, detailsImg=';'.join(detailsImg), gift=gift, nprice=nprice, oprice=oprice, stock=stock, desc=desc, hits=0, color=str(colorDict) if colorDict else '', operator=mid)
db.session.add(g)
db.session.commit()
global goodsCount
goodsCount += 1
with open('comment/commentCount.conf', 'a', encoding='utf-8') as f:
f.write(f'{pId}:2\n')
else:
g = Goods.query.filter(Goods.pid == pId).update(
{'name': pName, 'type':pType,'img':img,'detailsImg':';'.join(detailsImg), 'gift': gift,'nprice': nprice, 'oprice': oprice, 'stock': stock, 'desc': desc, 'color': str(colorDict) if colorDict else ''})
if g==1:db.session.commit()
else:
g = Goods.query.filter(Goods.pid == pId).update({'name': pName, 'type': pType, 'gift': gift, 'nprice': nprice, 'oprice': oprice, 'stock': stock,'desc': desc, 'color': str(colorDict) if colorDict else ''})
if g == 1: db.session.commit()
return jsonify(errno=0)
5.3 商品推荐
通过协同过滤算法并结合用户的购物车、订单和收藏数据，向用户个性化的推荐商品。实现效果如图5.15所示。
添加图片注释，不超过 140 字（可选）
图5.15 商品推荐页面
关键代码如下：
@app.route('/recommend',methods=['POST'])
def recommend():
resultData = {};num = 0;user = request.get_json().get('uid')
if not user:return jsonify(errno=0, data=recommendNext(0))
orderList = Order.query.filter(Order.state == '1').all()
orders = []
for i in orderList:
good = Goods.query.filter(i.pname == Goods.name)
orders.append(f'{i.uid},{i.pname},{good[0].hits}')
data = {}
for line in orders:
line = line.strip().split(',')
if not line[0] in data.keys():data[line[0]] = {line[1]: line[2]}
else:data[line[0]][line[1]] = line[2]
if user not in data.keys():return jsonify(errno=0, data=recommendNext(user))
else:
top_sim_user = top_simliar(user, data)[0][0]
items = data[top_sim_user]
recommendations = []
for item in items.keys():
if item not in data.get(f'{user}').keys():
recommendations.append((item, items[item]))
recommendations.sort(key=lambda val: val[1], reverse=True)
for i in recommendations:
if num >= 10:break
good = Goods.query.filter(Goods.name == i[0]).all()[0]
num += 1
resultData[num] = {
'id': good.pid,
'name': good.name,
'img': good.img,
'nprice': good.nprice,
'oprice': good.oprice,
'desc': good.desc
}
if num < 10:resultData = recommendNext(user, resultData, num)
return jsonify(errno=0, data=resultData)
5.4 订单管理
我的订单页面向用户展示了其所有订单的详细信息，包括订单状态、商品信息、付款及发货情况等。实现效果如图5.16所示。
添加图片注释，不超过 140 字（可选）
图5.16 我的订单页面
管理员
添加图片注释，不超过 140 字（可选）
可以在后台查看所有用户的订单情况，并可以对已付款的订单进行发货操作。实现效果如图5.17所示。
图5.17 订单管理页面
用户查看订单页面和订单管理页面的关键代码如下：
@app.route('/getOrder', methods=['POST'])
def getOrder():
if request.method == 'POST':
orderList = []
get_data = request.get_json()
uid = get_data.get('uid')
flag = get_data.get('flag')
def getData(o, cp=0, ps=0):
def appendData(i):
uName = User.query.filter(User.id == i.uid).all()
uName = uName[0].username
dic = {
'oid': i.oid,'pname': i.pname,'pdetails': i.pdetails,
'count': i.count,'price': i.price,
'state': '未付款' if i.state == '0' else '已付款',
'uid': i.uid,'uname': uName,'cname': i.cname,
'cphone': i.cphone,'time': str(i.time),
'shipped': '待发货' if i.shipped == '0' else '已发货',
'packageCompany': i.packageId.split(' ')[0] if i.packageId else i.packageId,
'packageId': i.packageId.split(' ')[1] if i.packageId else i.packageId,
'discount': i.discount if i.useCoupons else '无'
}
orderList.append(dic)
if cp == 0 and ps == 0:
for i in o:appendData(i)
if uid and not flag:
o = Order.query.filter(Order.uid == uid).order_by(Order.time.desc()).all()
if o:getData(o)
else:return jsonify(errno=0, orderList=orderList)
管理员在订单管理页面，点击订单后对应的“填写物流信息”，即可对相应订单进行发货操作。界面如图5.18所示。
添加图片注释，不超过 140 字（可选）
图5.18 管理员对订单进行发货页面
关键代码如下:
@app.route('/orderState', methods=['POST'])
def orderState():
if request.method == 'POST':
get_data = request.get_json()
uid = get_data.get('uid')
oid = get_data.get('oid')
packageId = get_data.get('packageId')
if all([oid, uid, packageId]):
o = Order.query.filter(
Order.oid == oid,
Order.uid == uid,
Order.state == '1'
).update({
'shipped': '1',
'packageId': packageId
})
db.session.commit()
return jsonify(errno=0)
else:return jsonify(message='信息校验错误', errno=1)
5.5 支付管理
使用支付宝的模拟支付。如图5.19所示。
添加图片注释，不超过 140 字（可选）
图5.19 支付页面
关键代码如下:
@app.route('/alipay', methods=['POST'])
def alipay():
if request.method == 'POST':
get_data = request.get_json()
uid = get_data.get('uid')
price = get_data.get('price')
product = get_data.get('product')
oid = get_data.get('oid')
if all([uid, product, orderTime, oid, details]):
alipay = comm.get_ali_object()
params = alipay.direct_pay(
subject="test", out_trade_no=oid,total_amount=price)
pay_url="https://openapi.alipaydev.com/gateway.do?{0}".format(params)
return jsonify(url=pay_url, oid=oid, errno=0)
else:return jsonify(message='数据错误', errno=1)
5.6 公告管理
用户在首次进入平台时公告会以弹窗的形式进行展示。实现效果如图5.20所示。
添加图片注释，不超过 140 字（可选）
图5.20 公告展示页面
添加图片注释，不超过 140 字（可选）
管理员可在公告管理页面对公告进行编辑操作。如图5.21所示。
图5.21 公告管理页面
关键代码如下：
@app.route('/getNotice', methods=['GET', 'POST'])
def getNotice():
global myNotice
if request.method == 'GET':return jsonify(notice=myNotice, errno=0)
elif request.method == 'POST':
get_data = request.get_json()
uid = get_data.get('id')
notice = get_data.get('notice')
myNotice = notice.strip().split('\n')
for index, i in enumerate(myNotice):
myNotice[index] = i + '\n'
with open('./log/notice.log', 'w', encoding='utf-8') as f:
f.write(notice.strip())
return jsonify(errno=0, notice=myNotice)
5.7 优惠码管理
用户可以在确认订单页面添加优惠券。实现效果如图5.22所示。
添加图片注释，不超过 140 字（可选）
图5.22 用户使用优惠码页面
关键代码如下:
@app.route('/checkDiscount', methods=['POST'])
def checkDiscount():
if request.method == 'POST':
get_data = request.get_json()
uid = get_data.get('uid')
code = get_data.get('code')
if code:
d = Discount.query.filter(Discount.code == code).all()
if d and len(d) == 1:
if d[0]:
user = eval(d[0].use)
if uid in user:
return jsonify(errno=1, message='已使用过该优惠码')
return jsonify(errno=0, discount=d[0].discount)
else:return jsonify(errno=1)
else:return jsonify(errno=1)
在优惠码管理页面展示所有的优惠码并可新增、修改或删除。实现效果如图5.23所示。
添加图片注释，不超过 140 字（可选）
图5.23 优惠码管理页面
关键代码如下：
@app.route('/changeDiscount', methods=['POST'])
def changeDiscount():
get_data = request.get_json()
code = get_data.get('code')
discount = get_data.get('discount')
flag = get_data.get('flag')
oldCode = get_data.get('oldcode')
if flag > 0:
if Discount.query.filter(Discount.code == oldCode).update({'code': code, 'discount': discount}) == 1:
db.session.commit()
return jsonify(errno=0)
elif flag == 0:
d = Discount(code=code, discount=discount, use='[]')
db.session.add(d)
db.session.commit()
return jsonify(errno=0)
elif flag == -1:
if Discount.query.filter(Discount.code == code).delete() == 1:
db.session.commit()
return jsonify(errno=0)
5.8 评论管理
用户可以在商品详情页面对商品进行评论。如图5.24所示。
添加图片注释，不超过 140 字（可选）
图5.24 评论页面
关键代码如下：
@app.route('/changeComment', methods=['POST'])
def changeComment():
get_id = request.get_json()
pid = get_id.get('pid')
comment = get_id.get('comment')
flag = get_id.get('flag')
commentCountList = []
with open(f'./comment/{pid}-comment', 'w', encoding='utf-8') as f:
f.write(comment)
if flag == 'add':
with open('comment/commentCount.conf', 'r', encoding='utf-8') as f:
commentCountList = f.readlines()
commentCountList[int(pid) - 1] = \
f"{pid}:{int(commentCountList[int(pid) - 1].split(':')[1]) + 1}\n"
with open('comment/commentCount.conf', 'w', encoding='utf-8') as f:
f.writelines(commentCountList)
return jsonify(errno=0)
管理员可对评论进行查看。如图5.25所示。
添加图片注释，不超过 140 字（可选）
图5.25 管理员评论管理页面
关键代码如下：
@app.route('/commentList', methods=['POST'])
def commentList():
get_data = request.get_json()
flag = get_data.get('flag')
if flag == 1:
currentPage = get_data.get('currentPage')
pageSize = get_data.get('pageSize')
if not (type(currentPage) is int):
if currentPage.isdigit() and pageSize.isdigit():
currentPage = int(currentPage)
pageSize = int(pageSize)
else:return jsonify(errno=1, message='参数错误')
else:currentPage -= 1
with open('log/comment.log', encoding='utf-8') as f:
for i in range(0, currentPage * pageSize):next(f)
commentList = [next(f, None) for i in range(currentPage * pageSize, (currentPage + 1) * pageSize)]
if None in commentList:commentList = list(filter(None, commentList))
with open('log/removeComment.log', encoding='utf-8') as f:
removeComment = f.readlines()
res = []
for i in commentList:
item = i.rstrip('\n').split(',')
data = {
'uName': User.query.get(item[0]).username if User.query.get(
item[0]) else '<span class="delComment">账号已注销</span>',
'pId': item[1],'cid': item[2],'parentId': item[3],
'time': item[4],'content': item[5],
'remove': 1 if i in removeComment else 0
}
res.append(data)
return jsonify(errno=0, total=commentCount, commentList=res)
管理员可对评论设置屏蔽词。如图5.26所示。
添加图片注释，不超过 140 字（可选）
图5.26 评论屏蔽词设置页面
关键代码如下：
@app.route('/changeComment', methods=['POST'])
def changeComment():
get_id = request.get_json()
pid = get_id.get('pid')
comment = get_id.get('comment')
with open(f'./comment/{pid}-comment', 'w', encoding='utf-8') as f:
f.write(comment)
return jsonify(errno=0)
第6章 系统测试
6.1 测试方法
黑盒测试也被称为功能测试或数据驱动测试，用以检查程序是否可以根据需要进行正常使用，是否能接收输入数据并产生正确的输出信息，同时保持数据库和文件等外部信息的完整性。这种方法从使用者的角度出发，检测程序的功能是否符合要求。
与之相比，白盒测试是基于代码的系统测试方法。旨在检查系统的逻辑结构和代码结构，并采用穷举法对所有逻辑结构进行一次测试，以确保测试结果的严谨性与正确性。然而，白盒测试需要对代码进行深入的分析，耗时耗力，并且无法明显提高用户的购物体验。因此该平台采用黑盒测试。
6.2 功能测试
6.2.1 用户管理
1、用户登录注册
在用户注册时，用户需输入符合注册规则的信息并同意用户协议和隐私政策，即可前往登录页面。输入正确的用户信息和验证码并同意用户协议和隐私政策后点击登录，即可跳转至平台首页。
输入用户名不符合规则将提示用户名规则，如图6.1所示。
添加图片注释，不超过 140 字（可选）
图6.1 注册时信息不符合规则时结果界面
信息输入符合规则即可注册成功，在后台用户管理页面可显示该用户，如图6.2所示。
添加图片注释，不超过 140 字（可选）
图6.2 用户注册成功时后台用户管理页面
用户登录时，需输入正确的信息且同意用户协议和隐私政策，即可跳转至平台首页。当输入密码错误时将提示密码错误，如图6.3所示。
添加图片注释，不超过 140 字（可选）
图6.3 登录时输入信息错误时结果界面
2、个人中心
个人中心首页展示了账号安全等级、所绑定手机和邮箱以及是否完成实名认证等信息。如图6.4所示。
添加图片注释，不超过 140 字（可选）
图6.4 个人中心首页
用户可点击修改个人信息前往个人信息页面以修改自己的基本信息，当输入信息不符合规定时将做出对应提示。输入用户名不符合规定时如图6.5所示。
添加图片注释，不超过 140 字（可选）
图6.5 信息修改不符合规定时结果界面
信息输入全部符合规定即可修改成功，如图6.6所示。
添加图片注释，不超过 140 字（可选）
图6.6 信息修改符合规定时结果界面
在用户第一次进入安全邮箱页面时，需要填写邮箱账号和验证码来进行绑定。如果用户输入的邮箱账号不符合规则，平台将给出相应的提示。并非第一次进入时可输入验证码和新的邮箱账号进行邮箱换绑操作。当邮箱输入不符合规则如图6.7所示。
添加图片注释，不超过 140 字（可选）
图6.7 用户输入不符合规则时结果界面
输入邮箱符合规则时如图6.8所示。
添加图片注释，不超过 140 字（可选）
图6.8 输入符合规则时结果界面
输入验证码错误时，如图6.9所示。
添加图片注释，不超过 140 字（可选）
图6.9 邮箱绑定验证码错误时结果界面
输入验证码正确即可成功绑定邮箱，如图6.10所示。
添加图片注释，不超过 140 字（可选）
图6.10 邮箱绑定成功时结果界面
用户需进行实名信息认证并认证通过后才可以购买商品。如图6.11和6.12所示。
添加图片注释，不超过 140 字（可选）
图6.11 实名认证信息不合法时结果界面
添加图片注释，不超过 140 字（可选）
图6.12 实名认证成功时结果界面
完成上述操作后，个人中心首页如图6.13所示。
添加图片注释，不超过 140 字（可选）
图6.13 修改信息后个人中心首页
购买商品时需要添加并选择收货地址，如图6.14和6.15所示。
添加图片注释，不超过 140 字（可选）
图6.14 收货信息填写错误时结果界面
添加图片注释，不超过 140 字（可选）
图6.15 收货地址成功添加时结果界面
6.2.2 商品管理
修改或添加商品，如图6.16所示。
添加图片注释，不超过 140 字（可选）
图6.16 编辑商品页面
添加或修改完成后前台数据相应改变。如图6.17所示。
添加图片注释，不超过 140 字（可选）
图6.17 商品详情页面
添加图片注释，不超过 140 字（可选）
删除商品如图3.18所示。
图6.18 删除商品界面
删除后前台将不再展示，如图6.19所示。
添加图片注释，不超过 140 字（可选）
图6.19 删除商品成功后的全部商品页面
6.2.3 商品推荐
平台根据协同过滤算法并结合用户数据进行商品推荐。游客或新用户则展示点击量最高的商品。如图6.20所示。
添加图片注释，不超过 140 字（可选）
图6.20 商品推荐界面
用户购买商品后。商品推荐如图6.21所示
添加图片注释，不超过 140 字（可选）
图6.21 发生购物操作后的商品推荐界面
6.2.4 支付管理
确认订单页面点击使用本次订单的收货地址。点击使用优惠券并通过可用性检测即可成功使用。点击选用收货地址如下图6.22-6.24所示。
添加图片注释，不超过 140 字（可选）
图6.22 在确认订单页面选用收货地址
添加图片注释，不超过 140 字（可选）
图6.23 优惠码检测不通过时结果界面
添加图片注释，不超过 140 字（可选）
图6.24 优惠码检测通过时结果界面
点击确定后价格和优惠券抵扣金额处会发生改变。如图6.25所示。
添加图片注释，不超过 140 字（可选）
图6.25 优惠码使用成功时结果界面
支付成功后，平台对订单是否完成支付进行检测。如图6.26所示。
添加图片注释，不超过 140 字（可选）
图6.26 支付成功时结果界面
6.2.5 订单管理
此时我的订单页面，根据是否支付显示不同的状态。如图6.27所示。
添加图片注释，不超过 140 字（可选）
图6.27 未付款及已付款时的订单页面
管理员可对已支付订单进行发货。如图6.28和6.29所示。
添加图片注释，不超过 140 字（可选）
图6.28 对已支付订单进行发货界面
添加图片注释，不超过 140 字（可选）
图6.29 发货成功时结果界面
6.2.6 公告管理
管理员对平台公告进行修改操作。如图6.30所示。
添加图片注释，不超过 140 字（可选）
图6.30 修改平台公告页面
前台将同步修改公告。如图6.31所示。
添加图片注释，不超过 140 字（可选）
图6.31 修改后平台公告弹窗界面
6.2.7 优惠码管理
编辑优惠码，如图6.32和6.33所示。
添加图片注释，不超过 140 字（可选）
图6.32 编辑优惠码界面
添加图片注释，不超过 140 字（可选）
图6.33 编辑优惠码成功时结果界面
6.2.8 评论管理
用户可以对商品发表评论。如图6.34和6.35所示。
添加图片注释，不超过 140 字（可选）
图6.34 发表评论界面
添加图片注释，不超过 140 字（可选）
图6.35 评论成功时结果界面
管理员在后台可查看用户的评论信息。如图6.36所示。
添加图片注释，不超过 140 字（可选）
图6.36 管理员查看用户评论页面
6.3 测试结论
本章主要从对该购物平台进行功能测试。经测试，结果表明该平台各个模块皆可正常运行，并能够满足用户的基本使用需求，保证了用户的良好体验。
总 结
本设计是考虑当前购物平台多用前后端不分离的开发模式进行开发，存在着一些缺陷，影响用户体验和平台维护效率。因此，在可行性分析和需求分析的基础上，采用前后端分离的开发模式，前端使用了目前流行的Vue.js框架，而后端则使用了Python的Flask框架，数据库方面，选择了MariaDB进行数据存储，最终设计实现了该购物平台，主要提供了用户管理、商品管理、商品推荐、订单管理、评论管理、公告管理、优惠码管理功能。主要完成了以下工作：
首先，对系统的研究目的与意义进行了深入分析，总结和梳理了国内外相关研究的现状，并学习借鉴他们所使用的技术，综合考虑并确定了所采用的技术路线。
其次，对本设计进行了全面的可行性分析，涵盖技术、经济、操作以及法律四个方面，并进行了功能与非功能需求分析，以确定功能模块的合理划分和数据库设计方案。
最后，对本设计中的所有功能模块进行了实现和测试。通过语言叙述、主要功能代码和平台截图的方式展示了系统中的所有功能，并使用黑盒测试方法对平台逐模块进行检验，以确保平台各项功能都能够按照需求正常使用。
本设计已基本能够满足用户在购物平台中的需求，各项功能模块相对全面和完整，保证用户能够顺畅的使用所有功能，没有各种复杂的装饰，更没有各种广告的困扰，能够极大的方便用户的使用。不过，该平台只局限于PC浏览器端，使用移动端访问体验较差，因此应对移动端进行设计；同时，网站的UI界面缺少美感，进而影响用户购物体验，之后也会对该购物平台页面进行改进和优化，以更好的提升用户的购物体验。
参考文献
[1]张钰.中国跨境电商的问题及对策研究[D].安徽:安徽大学,2018.
[2]吴乙燕.论浅谈电子商务教学[J].中外交流,2017,19:141-143.
[3]Yuan J,Svensson C.Interoperation support for electronic business[J].Communications of theAcm,2016, 43(6):39-47.
[4]高阳.新淘淘在线购物平台的设计与实现[D].河北工业大学,2019.
[5]张翼.2022年全国网上零售额13.79万亿元-电商新业态新模式彰显活力[N].光明日报,2023-01-31(第10版).
[6]薄志强.基于SSM框架的网上商城系统的设计与实现[D].西安电子科技大学,2020.
[7]李晨.基于Spring Boot的电子商城设计与实现[D].哈尔滨工业大学,2020.
[8]Yali Z, Xiaokan W. Design And Implementation of Online Shopping Mall System Based On ASP. NET[C]//2017 2nd Joint International Information Technology, Mechanical and Electronic Engineering Conference (JIMEC 2017).Atlantis Press,2017:542-545.
[9]Wei F, Zhang Q. Design and implementation of online shopping system based on B/S Model[C]. MATEC Web of Conferences. EDP Sciences,2018,246:03033.
[10]Quan Y. Design and implementation of E-commerce platform based on Vue. js and MySQL[C]//3rd International Conference on Computer Engineering, Information Science & Application Technology(ICCIA 2019).Atlantis Press,2019: 449-454.
[11]朱赟.Python语言的Web开发应用[J].电脑知识与技术,2017,13(32):95.
[12]施宸昊.基于Django的水果销售系统设计与实现[J].丽水学院学报,2022,44(02):16-19.
[13]Eric Matthes. Python编程:从入门到实践[M].袁国忠.北京:人民邮电出版社,2016:122-133.
[14]陈陆扬.Vue.js前端开发快速入门与专业应用[M].北京:人民邮电出版社,2017.
[15]尤雨溪.Vue.js官网[EB/OL].[2023-03-18].https://cn.vuejs .org/.
[16]惠恩,褚秋砚. 软件工程[M].人民邮电出版社:, 201712.284.
[17]黄真真.基于SSH的“ibook”书店商城设计与实现[J].科技与创新,2021(16):173-174+178.
[18]张玉.基于Web平台的购物网站的设计与实现[D].华中科技大学,2020.
[19]张慧敏,王飒,张腾达.基于SSM框架的网上购物商城设计与实现[J].软件,2020,41(06):143-146.
[20]候婷.协同过滤推荐算法在智慧图书馆中的应用[J].科技资讯,2021(33):149.
[21]钟耀亿,丁晓剑,杨帆.结合用户主观偏好与项目属性扩充的推荐算法[J].计算机系统应用,2021,9(30):192.
[22]刘易.网上商城及推荐系统的设计与实现[D].哈尔滨工业大学,2017.
[23]徐亚.基于HTML5和CSS3的网页前端设计研究[J].电脑知识与技术:学术版,2022(7):61-62,70.
[24] Alghazzawi D M, Badri S. Using the B/S Model to Design and Implement Online Shopping System for Gulf Brands[J]. Sustainability, 2022, 14(6): 3176.
[25]邹瑞,段华琼.基于前后端分离技术的在线商城的设计与实现[J].电脑知识与技术,2020,16(26):231-232+239.
致 谢
时光飞逝，大学生涯马上就要结束了，在这几年种，我学习到了很多计算机相关的知识，给我带来了深刻的影响，并通过我不断学习和奋斗，不断的完善自己，在这几年中我获得了许多，一方面是从教材当中，另一方面是从生活所得。
经过这段时间的设计与开发，该购物平台已经开发完成了。这段时间非常感谢老师、同学们的帮助，这成果是与大家的帮助密不可分。
首先，我要感谢我的老师和同学们，当我在平台的设计中遇到困难时，他们及时且耐心的帮我找出错误并帮助我一起解决问题。在这期间，同学间相互帮助、相互监督，不会的问题大家一起讨论，让我不仅学到了专业知识，更深深的感觉到了集体的重要，感谢他们的鼓励和陪伴。
最后，我要向我的家人和朋友表示最深的感谢，他们一直支持我并为我提供了无尽的动力和关爱。
