摘 要
本论文针对使用Vue3和uni-app构建多端电商平台的技术实践进行了深入研究。首先,论文介绍了Vue3和uni-app的基本概念和特点,解释了它们在多端开发中的优势和应用场景。随后,论文详细阐述了电商平台的设计与实现过程,包括需求分析、架构设计、页面布局、数据交互等关键步骤。在设计阶段,通过对用户需求和功能模块的分析,确定了系统的整体结构和各个模块的功能设计。在实现阶段,采用Vue3和uni-app的组合技术栈,实现了多端的适配和统一开发,提高了开发效率和用户体验。最后,论文对实现的电商平台进行了功能测试和性能优化,确保系统稳定可靠,并对未来的优化和扩展方向进行了展望。
本研究旨在借助Vue3+uni-app的组合技术栈,实现在不同终端上高效、统一地开发电商平台,从而提高开发效率、降低维护成本,满足多终端用户的需求。同时,该研究还可为其他多端应用开发提供借鉴和参考,促进相关领域的发展和进步。本研究具有重要的理论和实际意义。
关键词:SpringBoot;多端电商平台;Vue3;Uni-app
Abstract
This paper conducts in-depth research on the technical practice of building a multi end e-commerce platform using Vue3 and uni app. Firstly, the paper introduces the basic concepts and characteristics of Vue3 and uni app, and explains their advantages and application scenarios in multi end development. Subsequently, the paper elaborated on the design and implementation process of the e-commerce platform, including key steps such as requirement analysis, architecture design, page layout, and data interaction. In the design phase, the overall structure of the system and the functional design of each module were determined through the analysis of user requirements and functional modules. In the implementation phase, a combination of Vue3 and uni app technology stack was used to achieve multi end adaptation and unified development, improving development efficiency and user experience. Finally, the paper conducted functional testing and performance optimization on the implemented e-commerce platform to ensure system stability and reliability, and provided prospects for future optimization and expansion directions.
This study aims to utilize the combination technology stack of Vue3+uni app to efficiently and uniformly develop e-commerce platforms on different terminals, thereby improving development efficiency, reducing maintenance costs, and meeting the needs of multiple end users. At the same time, this study can also provide reference and inspiration for the development of other multi end applications, promoting the development and progress of related fields. This study has important theoretical and practical significance.
Key words:SpringBoot; Multi terminal e-commerce platforms; Vue3; Uni app
目录
1 绪论
1.1 研究背景与意义
随着移动互联网的快速发展,电商行业已经成为了现代商业的重要组成部分。随着智能手机的普及,越来越多的人选择使用移动设备进行网上购物。为了满足用户需求,电商平台需要具备良好的用户界面和流畅的交互体验。同时,随着技术的不断发展,前端开发技术也在不断更新,以适应用户需求和提升用户体验。
Vue3作为一款流行的前端开发框架,具有更快的渲染速度和更好的开发体验,能够更好地满足电商平台对于性能和用户体验的要求。而uni-app则是一个跨平台的应用程序开发框架,它可以将Vue3的代码转化为多个平台的应用程序,包括iOS、Android和Web端,为电商平台提供了更广泛的覆盖范围。
因此,基于Vue3+uni-app的组合技术栈开发电商平台具有重要的现实意义和市场需求。研究如何将这两种技术结合起来,设计和实现一个高性能、跨平台的电商平台,对于提升电商行业的竞争力,满足用户需求,具有重要的价值。本研究旨在探讨基于Vue3+uni-app技术栈的电商平台设计与实现。通过研究该技术栈的特点和优势,将其应用于电商平台开发中,设计一个流畅、高性能的电商平台,使用户可以享受到更好的界面交互体验,提升购物体验。本研究对于提升用户体验、技术创新、促进行业发展都具有重要的意义和价值。
1.2国内外研究现状
随着电子商务的飞速发展,越来越多的消费者转向了线上购物渠道,这也推动多端电商平台的发展。多端电商平台是指能够在多个终端设备上进行电商交易的平台,包括PC端、移动端、智能终端等。目前,多端电商平台已经成为各大电商企业的发展趋势。
国内方面,目前多端电商平台几乎是所有电商企业共同的选择。阿里巴巴旗下的淘宝、天猫,京东,拼多多,唯品会等知名电商企业都在努力打造适应多端设备的电商平台。各大电商企业都在不断地优化平台的UI设计、推出更多的移动端应用,提升用户体验,增加用户留存。同时,为了应对激烈的市场竞争,电商企业也在积极拓展海外市场,进行全球化的布局。这要求多端电商平台能够应对多语种、多货币、多国家的电商交易。
国外方面,多端电商平台同样是各大电商企业的共同选择。例如,亚马逊、eBay、AliExpress等知名电商平台都在积极开发适合多端设备的应用程序。与国内不同的是,国外电商企业在电商交易上更注重用户隐私保护问题的解决,同时更加注重用户界面设计的人性化。此外,由于国外市场需求的多样性将促使更多企业关注全球多语种和多货币的问题,以及更严格的电商法规。
总之,无论国内外,多端电商平台的发展都是不可逆转的趋势。针对国内外的研究现状,可以通过深入分析电商领域的发展趋势,结合先进的技术手段,打造适应多端设备的电商平台。这将是电商企业应对激烈市场竞争的一种重要手段。
1.3论文结构与章节安排
本次写作的论文,在结构方面主要分为六大部分,每一部分都必不可少,共同组合形成一个完好的论文结构,具体的安排列出如下。
一、绪论部分,该部分讲述的是多端电商平台的开发背景,明确开发的意义以及系统的研究动态,并对系统的整个章节安排进行介绍。
二、系统分析部分,该部分首先从可行性入手进行分析,明确程序开发可行后,进而对程序的功能以及姓名需求进行分析。
三、系统概要设计,对系统前后台的功能分别进行设计,然后完成系统的总体功能以及各个子模块的设计。系统数据库的设计,对系统的数据库实体以及数据库表进行设计。
四、系统的实现部分,对系统每一角色主要实现的功能的页面来进行展示一下。
五、系统测试部分,介绍测试的测试目的,用例,完成对程序测试工作,让投入运行的程序减少出错的几率,力求最好。
六、总结部分,此刻所有的工作都已经完成了,在此进行总结,展望。
2 系统分析设计
2.1 可行性分析
可行性分析是系统分析的第一步,通过可行性分析我们可以得出系统是不是值得开发,如果系统的开发是不可信的,那么就没有必要再进行下面的操作,对于本多端电商平台在可行性方面进行了技术、经济以及操作的分析。
2.1.1 技术可行性分析
多端电商平台在技术上采用的是Java语言、基于Browser/Server模式,结合使用了Vue3和uni-app等技术,后台使用了SpringBoot框架配合MySQL数据库,这些技术在校期间都已经学习过,而且用这些技术开发过一些小的系统,同时在实际开发中uni-app跨平台功能强大被普通应用,因此开发技术是没有问题的。
2.1.2 经济可行性分析
开发多端电商平台并不需要投入太多,开发工具、服务器、数据库等,都可以通过网络搜索、下载、安装,只需要一台普通的计算机和移动设备就可以完成操作,而且在系统功能规划上都是通过问卷调查了解用户需求,通过百度、知网库、学校图书馆查阅相关系统,了解它们对系统具体实现的功能需求,然后进行设计开发,不存在任何开销,因此系统的开发在经济方面是可行的。
2.1.3 操作可行性分析
多端电商平台的在开发的时候充分了解用户群体,对于使用智能机不熟练的用户也进行考虑在内,在多端电商平台的开发中首页有醒目的导航栏,使得即使没有使用过智能机的用户,也可以根据导航栏的提示进行操作,非常方便,因此系统在操作上是可行的。
2.2 系统流程分析
2.2.1 用户登录流程
第一步,为了保证系统的安全性,用户需要在登录窗口中输入自己的个人信息,并确保信息准确无误。如果输入的信息不正确,将会弹出提示框,导致用户登录失败,需要重新输入,如图3-1所示。

图2-1登录操作流程图
2.2.2 信息添加流程
多端电商平台可以实现快速、准确地收集和处理各种信息,而且在使用过程中,只有在按照指定的界面和指定的参考文献,才能够正确地获取和处理信息,而若信息未能满足预期,就会被退出第一步,并且在第二步中,还会继续检查信息的准确性,以确保最终的结果能够满足预期的目标。
图2-2 信息添加流程图
2.2.3 信息删除流程
无论是何种用户角色,只要进入了不正常的系统操作界面,就可以使用不同的信息内容来进行操作。当用户尝试删除系统中的数据时,必须先ACK这些数据是否已经被删除,如果没有,就应该按照图3-3的指示进行操作,以免影响系统的正常运行。
图2-3 信息删除流程图
2.3 功能需求分析
(1)商品中心模块:本多端电商平台主要的功能之一是可以购买商品,所以系统中需要管理员和商家用户添加各种电商商品信息供用户查询,购买,管理员和商家用户在此模块主要是对商品中心信息的增删改查,游客实现对商品中心的查询,普通用户则实现商品中心的收藏、评论、加购、立即购买等操作。如下图2-4所示。

图2-4 商品中心模块用例图
(2)电商资讯模块:管理员在后台可以对电商资讯及其分类进行增删改查,游客实现查看电商资讯,用户进行收藏、点赞、评论。如下图2-5所示。

图2-5电商资讯模块用例图
(3)用户管理模块:在前台游客可以通过注册,然后参与到系统当中,管理员可以对注册的用户进行修改、删除、查询、也可以添加新的用户。如下图2-6所示。
图2-6用户管理模块用例图
(4)购物管理:用户对喜欢的商品可以进行购买,可以选择立即购买或者加入到购物车中进行购买,如下图2-7所示。

图2-7购物管理模块用例图
(5)我的订单管理:在多端电商平台中,用户、商家和管理员都能够管理订单,可以对订单进行查看、删除、配送。如下图2-8所示。
图2-8订单管理模块用例图
(6)移动端我的模块:我的模块是用户独有的功能,可以在“我的”管理基本信息、收货地址、收藏、订单、购物车、订单配送,我的用例如下图2-9所示。

图2-9移动端我的管理模块用例图
2.4 非功能性需求分析
系统的非功能需求方面主要是从系统的安全性、存储性、可靠性、易学性、稳定性等方面进行分析:
(1)安全性:系统的安全问题是开发者首先要考虑的,如果系统存在安全隐患,可能使得用户个人信息被泄露,给用户带来困扰,造成损失。
(2)储存性:因为用户使用的关于电商商品交易的网站,普通用户多,而且登录后要查询各种商品信息,那就需要一个强大的数据库来进行数据的存储,对数据库的要求是非常严格的,本系统选用的是MYSQL数据库,MYSQL的运行速度很快,执行命令的速度也非常快,而且体积小。
(3)可靠性:可靠性指的是用户在进行商品信息查询、评论以及购买的时候,能够按照用户的指示进行显示信息,如果用户点击查询商品详细信息,显示出来的是不可购买的信息,那就违背用户的初衷。
(4)易学性:系统的开发面向对象学历不尽相同,所有在开发的时候要考虑系统操作应该简单,不需要进行任何学习、培训,只能上网的用户就可以操作。
(5)稳定性:系统在运行方面要很稳定,系统的界面、字体要清楚,没有失真现象,给用户以良好的体验。
(6)可拓展性:本多端电商平台的功能还有待完善,因此系统要有很好的拓展性,方便后期功能更新维护。
2.5系统角色用例分析
2.5.1系统前台用户用例
多端电商平台前台用户在移动端和PC端的电商平台都可以进行登录,其用户主要功能是对系统信息的查看、收藏、评论,对商品信息的查看以及对电商商品的购买,购买的过程中需要对收货地址进行设置,对购物车进行管理,查看自己的订单等。前台普通用户用例图如图2-10所示。

图2-10 多端电商平台前台普通用户用例图
在系统前台中主要实现的是对多端电商平台中信息的浏览,用户对商品信息的查看、点赞、收藏、评论以及在商品中心中对商品购买几个功能。
(1)电商资讯查看功能,主要实现了游客是对电商资讯的查看,用户进行评论、收藏、点赞,用例说明如下表所示:
表2-1电商资讯用例说明
用例名称 | 电商资讯 |
角色 | 用户 |
用例说明 | 对电商资讯查看、评论 |
前置条件 | 用户登录到系统当中 |
后置条件 | 用户提交评论信息 |
基本事件流 | 1.进入系统登录界面 2.点击电商资讯,选择某条电商资讯查看详情 3.输入评论内容 4.点击提交按钮,提交评论 |
扩展流程 | 3a.用户没有登录成功 |
异常事件流 | 3a.输入评论内容为空 |
其他 | 无 |
(2)商品中心购买功能,本功能是系统的主要功能,主要是实现在线购买功能,用例说明如下标所示:
表2-2 商品中心用例说明
用例名称 | 商品购买 |
角色 | 用户 |
用例说明 | 对商品加入购物车购买或者立即购买 |
前置条件 | 用户登录到系统当中 |
后置条件 | 对商品加入购物车购买或者立即购买 |
基本事件流 | 1.进入系统登录界面 2.点击商品中心,选择某条商品中心查看详情 3.加入购物车或者立即购买 4.输入订单信息提交订单 |
扩展流程 | 3a.现在支付方式 |
异常事件流 | 3a.用户没有登录 |
其他 | 无 |
2.5.2系统后端用例
用户不能进入后台,商家用户进入后台主要对商城管理子菜单下的商品中心、订单列表、订单配送进行管理;管理员进入以后可以对系统用户、系统管理、公告消息管理、资源管理、商城管理(商品中心、分类列表、订单列表、订单配送)进行管理。
后台商家用户用例图如图2-11所示。
图2-11多端电商平台后台商家用户用例图
后台管理员用例图如图2-12所示。
图2-12多端电商平台后台管理员用户用例图
后台管理员主要实现了是对系统用户信息、轮播图、公告通知信息、电商资讯、商品中心、分类列表、订单列表、订单配送等信息的增删改查操作。后台管理员的用例说明如下表所示:
表2-3 后台管理员用例说明
用例名称 | 后台管理 |
角色 | 管理员 |
用例说明 | 对前端显示的信息进行管理 |
前置条件 | 管理员登录进入后台管理页面 |
后置条件 | 无 |
基本事件流 | 1.管理员登录进入后台管理界面 2.点击左侧选择相应功能板块 3.选择所要操作的数据 4.点击选择的内容进行增加/删除/修改/查找 5.点击立即保存按钮 |
扩展流程 | 无 |
异常事件流 | 无 |
其他 | 无 |
3 系统概要设计
3.1开发流程设计
开发多端电商平台需要经过多个步骤,包括分析管理模块+编写代码+规划和操作,这些步骤是打造多端电商平台信息管理AP的关键,它们将决定系统能否达到预期的功能,并且能够在完成设计之后得到实施。在开发过程中,为了确保系统的有效性,每个阶段的开发必须严格遵循线性顺序,并且每个步骤的完成情况都要经过技术检验,以确保每个步骤的准确性,避免出现拖拽现象,从而保证系统的设计功能能够得到有效实施。
通过对多端电商平台的成功开发,我们可以看出,采用这种方法可以显著降低系统的复杂性,并且可以通过图3-1进一步证明。
图3-1开发系统流程图
3.2系统功能结构设计
通过Vue3+uni-app的组合技术栈开发的多端电商平台,不仅支持用户的登录,还支持对用户的信息、商品信息、电商资讯的查看,并且提交全面的数据和信息,从而满足用户的各种需求。此外,该软件还支持查看商品中心和购买,为用户带来更为便利的操作体验,并且通过对用户的人性化反馈,为用户带来更为全面的服务体验。根据系统功能需求建立的模块关系图如下图:
图3-2 功能结构关系图
3.3数据库概念结构设计
数据库系统作为一个重要的组件,其优化针对整体网络的运行非常重要。为了构建一个高效的数据库系统,我们需要明确每个元素的特征,并将它们组合在一起。在本次研究中,我们将重点关注多端电商平台的项目概述和设计分析,并对数据库进行设计。我们将使用MySQL数据库来支持我们的系统,同时我们将采用更加人性化的操作设计,以便在系统中及时处理和反馈错误信息。
下面是整个多端电商平台中主要的数据库表总E-R实体关系图。

图3-3 多端电商平台总E-R关系图
3.4数据库逻辑结构设计
通过上一小节中多端电商平台中总E-R关系图上得出一共需要创建很多个数据表。在此我主要罗列几个主要的数据库表结构设计。
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | token_id | int | 10 | 0 | N | Y | 临时访问牌ID | |
2 | token | varchar | 64 | 0 | Y | N | 临时访问牌 | |
3 | info | text | 65535 | 0 | Y | N | ||
4 | maxage | int | 10 | 0 | N | N | 2 | 最大寿命:默认2小时 |
5 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
6 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
7 | user_id | int | 10 | 0 | N | N | 0 | 用户编号: |
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | address_id | int | 10 | 0 | N | Y | 收货地址: | |
2 | name | varchar | 32 | 0 | Y | N | 姓名: | |
3 | phone | varchar | 13 | 0 | Y | N | 手机: | |
4 | postcode | varchar | 8 | 0 | Y | N | 邮编: | |
5 | address | varchar | 255 | 0 | N | N | 地址: | |
6 | user_id | mediumint | 8 | 0 | N | N | 用户ID:[0,8388607]用户获取其他与用户相关的数据 | |
7 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
8 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
9 | default | bit | 1 | 0 | N | N | 0 | 默认判断 |
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | article_id | mediumint | 8 | 0 | N | Y | 文章id:[0,8388607] | |
2 | title | varchar | 125 | 0 | N | Y | 标题:[0,125]用于文章和html的title标签中 | |
3 | type | varchar | 64 | 0 | N | N | 0 | 文章分类:[0,1000]用来搜索指定类型的文章 |
4 | hits | int | 10 | 0 | N | N | 0 | 点击数:[0,1000000000]访问这篇文章的人次 |
5 | praise_len | int | 10 | 0 | N | N | 0 | 点赞数 |
6 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
7 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
8 | source | varchar | 255 | 0 | Y | N | 来源:[0,255]文章的出处 | |
9 | url | varchar | 255 | 0 | Y | N | 来源地址:[0,255]用于跳转到发布该文章的网站 | |
10 | tag | varchar | 255 | 0 | Y | N | 标签:[0,255]用于标注文章所属相关内容,多个标签用空格隔开 | |
11 | content | longtext | 2147483647 | 0 | Y | N | 正文:文章的主体内容 | |
12 | img | varchar | 255 | 0 | Y | N | 封面图 | |
13 | description | text | 65535 | 0 | Y | N | 文章描述 |
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | type_id | smallint | 5 | 0 | N | Y | 分类ID:[0,10000] | |
2 | display | smallint | 5 | 0 | N | N | 100 | 显示顺序:[0,1000]决定分类显示的先后顺序 |
3 | name | varchar | 16 | 0 | N | N | 分类名称:[2,16] | |
4 | father_id | smallint | 5 | 0 | N | N | 0 | 上级分类ID:[0,32767] |
5 | description | varchar | 255 | 0 | Y | N | 描述:[0,255]描述该分类的作用 | |
6 | icon | text | 65535 | 0 | Y | N | 分类图标: | |
7 | url | varchar | 255 | 0 | Y | N | 外链地址:[0,255]如果该分类是跳转到其他网站的情况下,就在该URL上设置 | |
8 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
9 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | auth_id | int | 10 | 0 | N | Y | 授权ID: | |
2 | user_group | varchar | 64 | 0 | Y | N | 用户组: | |
3 | mod_name | varchar | 64 | 0 | Y | N | 模块名: | |
4 | table_name | varchar | 64 | 0 | Y | N | 表名: | |
5 | page_title | varchar | 255 | 0 | Y | N | 页面标题: | |
6 | path | varchar | 255 | 0 | Y | N | 路由路径: | |
7 | position | varchar | 32 | 0 | Y | N | 位置: | |
8 | mode | varchar | 32 | 0 | N | N | _blank | 跳转方式: |
9 | add | tinyint | 3 | 0 | N | N | 1 | 是否可增加: |
10 | del | tinyint | 3 | 0 | N | N | 1 | 是否可删除: |
11 | set | tinyint | 3 | 0 | N | N | 1 | 是否可修改: |
12 | get | tinyint | 3 | 0 | N | N | 1 | 是否可查看: |
13 | field_add | text | 65535 | 0 | Y | N | 添加字段: | |
14 | field_set | text | 65535 | 0 | Y | N | 修改字段: | |
15 | field_get | text | 65535 | 0 | Y | N | 查询字段: | |
16 | table_nav_name | varchar | 500 | 0 | Y | N | 跨表导航名称: | |
17 | table_nav | varchar | 500 | 0 | Y | N | 跨表导航: | |
18 | option | text | 65535 | 0 | Y | N | 配置: | |
19 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
20 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | cart_id | int | 10 | 0 | N | Y | 购物车ID: | |
2 | title | varchar | 64 | 0 | Y | N | 标题: | |
3 | img | varchar | 255 | 0 | N | N | 0 | 图片: |
4 | user_id | int | 10 | 0 | N | N | 0 | 用户ID: |
5 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
6 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
7 | state | int | 10 | 0 | N | N | 0 | 状态:使用中,已失效 |
8 | price | double | 9 | 2 | N | N | 0.00 | 单价: |
9 | price_ago | double | 9 | 2 | N | N | 0.00 | 原价: |
10 | price_count | double | 11 | 2 | N | N | 0.00 | 总价: |
11 | num | int | 10 | 0 | N | N | 1 | 数量: |
12 | goods_id | mediumint | 8 | 0 | N | N | 商品id:[0,8388607] | |
13 | type | varchar | 64 | 0 | N | N | 未分类 | 商品分类: |
14 | description | varchar | 255 | 0 | Y | N | 描述:[0,255]用于产品规格描述 |
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | collect_id | int | 10 | 0 | N | Y | 收藏ID: | |
2 | user_id | int | 10 | 0 | N | N | 0 | 收藏人ID: |
3 | source_table | varchar | 255 | 0 | Y | N | 来源表: | |
4 | source_field | varchar | 255 | 0 | Y | N | 来源字段: | |
5 | source_id | int | 10 | 0 | N | N | 0 | 来源ID: |
6 | title | varchar | 255 | 0 | Y | N | 标题: | |
7 | img | varchar | 255 | 0 | Y | N | 封面: | |
8 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
9 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | comment_id | int | 10 | 0 | N | Y | 评论ID: | |
2 | user_id | int | 10 | 0 | N | N | 0 | 评论人ID: |
3 | reply_to_id | int | 10 | 0 | N | N | 0 | 回复评论ID:空为0 |
4 | content | longtext | 2147483647 | 0 | Y | N | 内容: | |
5 | nickname | varchar | 255 | 0 | Y | N | 昵称: | |
6 | avatar | varchar | 255 | 0 | Y | N | 头像地址:[0,255] | |
7 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
8 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
9 | source_table | varchar | 255 | 0 | Y | N | 来源表: | |
10 | source_field | varchar | 255 | 0 | Y | N | 来源字段: | |
11 | source_id | int | 10 | 0 | N | N | 0 | 来源ID: |
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | goods_id | mediumint | 8 | 0 | N | Y | 产品id:[0,8388607] | |
2 | title | varchar | 125 | 0 | Y | N | 标题:[0,125]用于产品和html的<title>标签中 | |
3 | img | text | 65535 | 0 | Y | N | 封面图:用于显示于产品列表页 | |
4 | description | varchar | 255 | 0 | Y | N | 描述:[0,255]用于产品规格描述 | |
5 | price_ago | double | 8 | 2 | N | N | 0.00 | 原价:[1] |
6 | price | double | 8 | 2 | N | N | 0.00 | 卖价:[1] |
7 | sales | int | 10 | 0 | N | N | 0 | 销量:[0,1000000000] |
8 | inventory | int | 10 | 0 | N | N | 0 | 商品库存 |
9 | type | varchar | 64 | 0 | N | N | 商品分类: | |
10 | hits | int | 10 | 0 | N | N | 0 | 点击量:[0,1000000000]访问这篇产品的人次 |
11 | content | longtext | 2147483647 | 0 | Y | N | 正文:产品的主体内容 | |
12 | img_1 | text | 65535 | 0 | Y | N | 主图1: | |
13 | img_2 | text | 65535 | 0 | Y | N | 主图2: | |
14 | img_3 | text | 65535 | 0 | Y | N | 主图3: | |
15 | img_4 | text | 65535 | 0 | Y | N | 主图4: | |
16 | img_5 | text | 65535 | 0 | Y | N | 主图5: | |
17 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
18 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
19 | customize_field | text | 65535 | 0 | Y | N | 自定义字段 | |
20 | source_table | varchar | 255 | 0 | Y | N | 来源表: | |
21 | source_field | varchar | 255 | 0 | Y | N | 来源字段: | |
22 | source_id | int | 10 | 0 | N | N | 0 | 来源ID: |
23 | user_id | int | 10 | 0 | Y | N | 0 | 添加人 |
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | type_id | int | 10 | 0 | N | Y | 商品分类ID: | |
2 | father_id | smallint | 5 | 0 | N | N | 0 | 上级分类ID:[0,32767] |
3 | name | varchar | 255 | 0 | Y | N | 商品名称: | |
4 | desc | varchar | 255 | 0 | Y | N | 描述: | |
5 | icon | varchar | 255 | 0 | Y | N | 图标: | |
6 | source_table | varchar | 255 | 0 | Y | N | 来源表: | |
7 | source_field | varchar | 255 | 0 | Y | N | 来源字段: | |
8 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
9 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | hits_id | int | 10 | 0 | N | Y | 点赞ID: | |
2 | user_id | int | 10 | 0 | N | N | 0 | 点赞人: |
3 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
4 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
5 | source_table | varchar | 255 | 0 | Y | N | 来源表: | |
6 | source_field | varchar | 255 | 0 | Y | N | 来源字段: | |
7 | source_id | int | 10 | 0 | N | N | 0 | 来源ID: |
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | logistics_delivery_id | int | 10 | 0 | N | Y | 物流配送ID | |
2 | order_number | varchar | 64 | 0 | Y | N | 订单号 | |
3 | product_name | varchar | 64 | 0 | Y | N | 商品名称 | |
4 | purchase_quantity | varchar | 64 | 0 | Y | N | 购买数量 | |
5 | total_transaction_amount | double | 11 | 2 | Y | N | 0.00 | 交易总额 |
6 | the_date_of_issuance | date | 10 | 0 | Y | N | 发货日期 | |
7 | delivery_number | varchar | 30 | 0 | Y | N | 配送订单 | |
8 | ordinary_users | int | 10 | 0 | Y | N | 0 | 普通用户 |
9 | shipping_address | varchar | 64 | 0 | Y | N | 收货地址 | |
10 | delivery_status | varchar | 64 | 0 | Y | N | 配送状态 | |
11 | signing_status | varchar | 64 | 0 | Y | N | 签收状态 | |
12 | recommend | int | 10 | 0 | N | N | 0 | 智能推荐 |
13 | contact_name | varchar | 255 | 0 | Y | N | 联系人名字 | |
14 | merchant_id | int | 10 | 0 | Y | N | 商家id | |
15 | create_time | datetime | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间 |
16 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间 |
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | member_users_id | int | 10 | 0 | N | Y | 会员用户ID | |
2 | member_name | varchar | 64 | 0 | Y | N | 会员姓名 | |
3 | member_gender | varchar | 64 | 0 | Y | N | 会员性别 | |
4 | membership_age | varchar | 64 | 0 | Y | N | 会员年龄 | |
5 | examine_state | varchar | 16 | 0 | N | N | 已通过 | 审核状态 |
6 | user_id | int | 10 | 0 | N | N | 0 | 用户ID |
7 | create_time | datetime | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间 |
8 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间 |
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | merchant_users_id | int | 10 | 0 | N | Y | 商家用户ID | |
2 | merchant_name | varchar | 64 | 0 | Y | N | 商家姓名 | |
3 | merchant_gender | varchar | 64 | 0 | Y | N | 商家性别 | |
4 | merchant_age | varchar | 64 | 0 | Y | N | 商家年龄 | |
5 | examine_state | varchar | 16 | 0 | N | N | 已通过 | 审核状态 |
6 | user_id | int | 10 | 0 | N | N | 0 | 用户ID |
7 | create_time | datetime | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间 |
8 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间 |
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | notice_id | mediumint | 8 | 0 | N | Y | 公告id: | |
2 | title | varchar | 125 | 0 | N | N | 标题: | |
3 | content | longtext | 2147483647 | 0 | Y | N | 正文: | |
4 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
5 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | order_id | int | 10 | 0 | N | Y | 订单ID: | |
2 | order_number | varchar | 64 | 0 | Y | N | 订单号: | |
3 | goods_id | mediumint | 8 | 0 | N | N | 商品id:[0,8388607] | |
4 | title | varchar | 32 | 0 | Y | N | 商品标题: | |
5 | img | varchar | 255 | 0 | Y | N | 商品图片: | |
6 | price | double | 10 | 2 | N | N | 0.00 | 价格: |
7 | price_ago | double | 10 | 2 | N | N | 0.00 | 原价: |
8 | num | int | 10 | 0 | N | N | 1 | 数量: |
9 | price_count | double | 8 | 2 | N | N | 0.00 | 总价: |
10 | norms | varchar | 255 | 0 | Y | N | 规格: | |
11 | type | varchar | 64 | 0 | N | N | 未分类 | 商品分类: |
12 | contact_name | varchar | 32 | 0 | Y | N | 联系人姓名: | |
13 | contact_email | varchar | 125 | 0 | Y | N | 联系人邮箱: | |
14 | contact_phone | varchar | 11 | 0 | Y | N | 联系人手机: | |
15 | contact_address | varchar | 255 | 0 | Y | N | 收件地址: | |
16 | postal_code | varchar | 9 | 0 | Y | N | 邮政编码: | |
17 | user_id | int | 10 | 0 | N | N | 0 | 买家ID: |
18 | merchant_id | mediumint | 8 | 0 | N | N | 0 | 商家ID: |
19 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
20 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
21 | description | varchar | 255 | 0 | Y | N | 描述:[0,255]用于产品规格描述 | |
22 | state | varchar | 16 | 0 | N | N | 待付款 | 订单状态:待付款,待发货,待签收,已签收,待退款,已退款,已拒绝,已完成 |
23 | remark | text | 65535 | 0 | Y | N | 订单备注 | |
24 | delivery_state | varchar | 16 | 0 | Y | N | 未配送 | 发货状态:未配送,已配送 |
25 | vip_discount | double | 11 | 2 | Y | N | 0.00 | 折扣 |
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | praise_id | int | 10 | 0 | N | Y | 点赞ID: | |
2 | user_id | int | 10 | 0 | N | N | 0 | 点赞人: |
3 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
4 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
5 | source_table | varchar | 255 | 0 | Y | N | 来源表: | |
6 | source_field | varchar | 255 | 0 | Y | N | 来源字段: | |
7 | source_id | int | 10 | 0 | N | N | 0 | 来源ID: |
8 | status | bit | 1 | 0 | N | N | 1 | 点赞状态:1为点赞,0已取消 |
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | product_center_id | int | 10 | 0 | N | Y | 商品中心ID | |
2 | merchant_users | int | 10 | 0 | Y | N | 0 | 商家用户 |
3 | contact_information | varchar | 64 | 0 | Y | N | 联系方式 | |
4 | cart_title | varchar | 125 | 0 | Y | N | 标题:[0,125]用于产品html的标签中 | |
5 | cart_img | text | 65535 | 0 | Y | N | 封面图:用于显示于产品列表页 | |
6 | cart_description | varchar | 255 | 0 | Y | N | 描述:[0,255]用于产品规格描述 | |
7 | cart_price_ago | double | 8 | 2 | N | N | 0.00 | 原价:[1] |
8 | cart_price | double | 8 | 2 | N | N | 0.00 | 卖价:[1] |
9 | cart_inventory | int | 10 | 0 | N | N | 0 | 商品库存 |
10 | cart_type | varchar | 64 | 0 | N | N | 未分类 | 商品分类: |
11 | cart_content | longtext | 2147483647 | 0 | Y | N | 正文:产品的主体内容 | |
12 | cart_img_1 | text | 65535 | 0 | Y | N | 主图1: | |
13 | cart_img_2 | text | 65535 | 0 | Y | N | 主图2: | |
14 | cart_img_3 | text | 65535 | 0 | Y | N | 主图3: | |
15 | cart_img_4 | text | 65535 | 0 | Y | N | 主图4: | |
16 | cart_img_5 | text | 65535 | 0 | Y | N | 主图5: | |
17 | create_time | datetime | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间 |
18 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间 |
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | slides_id | int | 10 | 0 | N | Y | 轮播图ID: | |
2 | title | varchar | 64 | 0 | Y | N | 标题: | |
3 | content | varchar | 255 | 0 | Y | N | 内容: | |
4 | url | varchar | 255 | 0 | Y | N | 链接: | |
5 | img | varchar | 255 | 0 | Y | N | 轮播图: | |
6 | hits | int | 10 | 0 | N | N | 0 | 点击量: |
7 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
8 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | upload_id | int | 10 | 0 | N | Y | 上传ID | |
2 | name | varchar | 64 | 0 | Y | N | 文件名 | |
3 | path | varchar | 255 | 0 | Y | N | 访问路径 | |
4 | file | varchar | 255 | 0 | Y | N | 文件路径 | |
5 | display | varchar | 255 | 0 | Y | N | 显示顺序 | |
6 | father_id | int | 10 | 0 | Y | N | 0 | 父级ID |
7 | dir | varchar | 255 | 0 | Y | N | 文件夹 | |
8 | type | varchar | 32 | 0 | Y | N | 文件类型 |
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | user_id | mediumint | 8 | 0 | N | Y | 用户ID:[0,8388607]用户获取其他与用户相关的数据 | |
2 | state | smallint | 5 | 0 | N | N | 1 | 账户状态:[0,10](1可用|2异常|3已冻结|4已注销) |
3 | user_group | varchar | 32 | 0 | Y | N | 所在用户组:[0,32767]决定用户身份和权限 | |
4 | login_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 上次登录时间: |
5 | phone | varchar | 11 | 0 | Y | N | 手机号码:[0,11]用户的手机号码,用于找回密码时或登录时 | |
6 | phone_state | smallint | 5 | 0 | N | N | 0 | 手机认证:[0,1](0未认证|1审核中|2已认证) |
7 | username | varchar | 16 | 0 | N | N | 用户名:[0,16]用户登录时所用的账户名称 | |
8 | nickname | varchar | 16 | 0 | Y | N | 昵称:[0,16] | |
9 | password | varchar | 64 | 0 | N | N | 密码:[0,32]用户登录所需的密码,由6-16位数字或英文组成 | |
10 | | varchar | 64 | 0 | Y | N | 邮箱:[0,64]用户的邮箱,用于找回密码时或登录时 | |
11 | email_state | smallint | 5 | 0 | N | N | 0 | 邮箱认证:[0,1](0未认证|1审核中|2已认证) |
12 | avatar | varchar | 255 | 0 | Y | N | 头像地址:[0,255] | |
13 | open_id | varchar | 255 | 0 | Y | N | 针对获取用户信息字段 | |
14 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
15 | vip_level | varchar | 255 | 0 | Y | N | 会员等级 | |
16 | vip_discount | double | 11 | 2 | Y | N | 0.00 | 会员折扣 |
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | group_id | mediumint | 8 | 0 | N | Y | 用户组ID:[0,8388607] | |
2 | display | smallint | 5 | 0 | N | N | 100 | 显示顺序:[0,1000] |
3 | name | varchar | 16 | 0 | N | N | 名称:[0,16] | |
4 | description | varchar | 255 | 0 | Y | N | 描述:[0,255]描述该用户组的特点或权限范围 | |
5 | source_table | varchar | 255 | 0 | Y | N | 来源表: | |
6 | source_field | varchar | 255 | 0 | Y | N | 来源字段: | |
7 | source_id | int | 10 | 0 | N | N | 0 | 来源ID: |
8 | register | smallint | 5 | 0 | Y | N | 0 | 注册位置: |
9 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
10 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
4 系统的实现
4.1前台用户功能模块
4.1.1 前台首页界面
前台首页界面是用户访问系统的入口页面,它应该展示平台的主要功能和特色,并提供导航链接以便用户浏览和搜索商品。首页界面的设计应注重页面的美观性和用户体验,同时也需要考虑页面的加载速度和响应性能。
当进入多端电商平台首页的时候,首先映入眼帘的是系统的导航栏和轮播图。移动端首页还展示电商资讯和网站公告信息,此外还提供了商品中心的快捷入口。
移动端首页界面展示如下图4-1所示。
图4-1 移动端首页界面图
PC端首页界面展示如下图4-2所示。

图4-2 PC端首页界面图
4.1.2用户注册界面
不是多端电商平台中正式普通用户的是可以在线进行注册的,当用户点击“注册”按钮,填写上自己的账号+密码+确认密码+昵称等,再点击“注册”按钮后将会先验证输入的有没有空数据,再次验证密码和确认密码是否是一样的,最后验证输入的账户名和数据库表中已经注册的账户名是否重复,只有都验证没问题后即可普通用户注册成功。其用注册流程图如图4-3所示。
图4-3注册流程图
移动端用户注册界面如图4-4所示。
图4-4 移动端注册界面图
PC端用户注册界面如图4-5所示。

图4-5 PC端注册界面图
注册关键代码如下所示。
/**
* 注册
* @param user
* @return
*/
@PostMapping("register")
public Map<String, Object> signUp(@RequestBody User user) {
// 查询用户
Map<String, String> query = new HashMap<>();
Map<String,Object> map = JSON.parseObject(JSON.toJSONString(user));
query.put("username",user.getUsername());
List list = service.selectBaseList(service.select(query, new HashMap<>()));
if (list.size()>0){
return error(30000, "用户已存在");
}
map.put("password",service.encryption(String.valueOf(map.get("password"))));
service.insert(map);
return success(1);
}
4.1.3用户登录界面
多端电商平台中的前台上注册后的普通用户是可以通过自己的账户名和密码进行登录的,当普通用户输入完整的自己的账户名和密码信息并通过滑动验证通过后,点击“登录”按钮后,将会首先验证输入的有没有空数据,再次验证输入的账户名+密码和数据库中当前保存的用户信息是否一致,只有在一致后将会登录成功并自动跳转到多端电商平台的首页中;否则将会提示相应错误信息,用户登录流程如图4-6所示。

图4-6 登录流程图
移动端用户登录界面如图4-7所示。
图4-7 移动端登录界面图
PC端用户登录界面如图4-8所示。

图4-8 PC端登录界面图
/**
* 登录
* @param data
* @param httpServletRequest
* @return
*/
@PostMapping("login")
public Map<String, Object> login(@RequestBody Map<String, String> data, HttpServletRequest httpServletRequest) {
log.info("[执行登录接口]");
String username = data.get("username");
String email = data.get("email");
String phone = data.get("phone");
String password = data.get("password");
List resultList = null;
Map<String, String> map = new HashMap<>();
if(username != null && "".equals(username) == false){
map.put("username", username);
resultList = service.select(map, new HashMap<>()).getResultList();
}
else if(email != null && "".equals(email) == false){
map.put("email", email);
resultList = service.select(map, new HashMap<>()).getResultList();
}
else if(phone != null && "".equals(phone) == false){
map.put("phone", phone);
resultList = service.select(map, new HashMap<>()).getResultList();
}else{
return error(30000, "账号或密码不能为空");
}
if (resultList == null || password == null) {
return error(30000, "账号或密码不能为空");
}
//判断是否有这个用户
if (resultList.size()<=0){
return error(30000,"用户不存在");
}
User byUsername = (User) resultList.get(0);
Map<String, String> groupMap = new HashMap<>();
groupMap.put("name",byUsername.getUserGroup());
List groupList = userGroupService.select(groupMap, new HashMap<>()).getResultList();
if (groupList.size()<1){
return error(30000,"用户组不存在");
}
UserGroup userGroup = (UserGroup) groupList.get(0);
//查询用户审核状态
if (!StringUtils.isEmpty(userGroup.getSourceTable())){
String sql = "select examine_state from "+ userGroup.getSourceTable() +" WHERE user_id = " + byUsername.getUserId();
String res = String.valueOf(service.runCountSql(sql).getSingleResult());
if (res==null){
return error(30000,"用户不存在");
}
if (!res.equals("已通过")){
return error(30000,"该用户审核未通过");
}
}
//查询用户状态
if (byUsername.getState()!=1){
return error(30000,"用户非可用状态,不能登录");
}
String md5password = service.encryption(password);
if (byUsername.getPassword().equals(md5password)) {
// 存储Token到数据库
AccessToken accessToken = new AccessToken();
accessToken.setToken(UUID.randomUUID().toString().replaceAll("-", ""));
accessToken.setUser_id(byUsername.getUserId());
tokenService.save(accessToken);
// 返回用户信息
JSONObject user = JSONObject.parseObject(JSONObject.toJSONString(byUsername));
user.put("token", accessToken.getToken());
JSONObject ret = new JSONObject();
ret.put("obj",user);
return success(ret);
} else {
return error(30000, "账号或密码不正确");
}
}
4.1.4电商资讯界面
当用户点击多端电商平台中导航栏上的“电商资讯”后将会进入到该“电商资讯”列表的界面,然后选择想要看的电商资讯,点击进入到详细界面,在详细界面可以收藏+点赞+评论等操作。移动端电商资讯界面如下图所示。
图4-9移动端电商资讯界面图
PC端电商资讯界面如下图所示。

图4-10 PC端电商资讯界面图
查询电商资讯的逻辑代码如下所示。
@RequestMapping("/get_obj")
public Map<String, Object> obj(HttpServletRequest request) {
List resultList = service.selectBaseList(service.select(service.readQuery(request), service.readConfig(request)));
if (resultList.size() > 0) {
JSONObject jsonObject = new JSONObject();
jsonObject.put("obj",resultList.get(0));
return success(jsonObject);
} else {
return success(null);
}
4.1.5 商品中心详情界面
当访客点击任意商品中心后将会进入该款商品的详情界面,可以了解到该电商商品的商品名称、商品图片、价格、原价、商品属性等,同时可以对该电商商品进行收藏、加购、购买评论。移动端商品中心商品详情展示页面如图4-11所示。
图4-11 移动端商品中心商品详情界面图
PC端商品中心商品详情展示页面如图4-12所示。

图4-12 PC端商品中心商品详情界面图
4.1.6购物车管理界面
当用户点击“购物车”按钮则会显示自己加入购物车的电商商品,然后对其进行购买管理,购买流程图如图4-13所示。
图4-13购买流程图
移动端购物车界面如下图4-14所示。
图4-14 移动端购物车管理界面图
PC端购物车界面如下图4-15所示。
、

图4-15 PC端购物车管理界面图
添加至购物车的逻辑代码如下所示。
@PostMapping("/add")
@Transactional
public Map<String, Object> add(HttpServletRequest request) throws IOException {
service.insert(service.readBody(request.getReader()));
return success(1);
}
public Map<String, Object> addMap(Map<String,Object> map){
service.insert(map);
return success(1);
}
4.2后台功能模块
4.2.1 商家用户操作界面
后台商家用户登录系统后,主要实现对商城管理菜单下的商品中心、订单列表和订单配送信息进行管理。商家用户后台操作界面如下图4-16所示。

图4-16商家用户后台操作界面图
4.2.2 系统用户界面
后台管理人员是可以对前台注册的普通用户、商家用户和管理员进行管理。系统用户管理界面如下图4-17所示。

图4-17系统用户管理界面图
修改用户信息关键代码如下:
@PostMapping("/set")
@Transactional
public Map<String, Object> set(HttpServletRequest request) throws IOException {
service.update(service.readQuery(request), service.readConfig(request), service.readBody(request.getReader()));
return success(1);
}
4.2.3 系统管理界面
管理人员在“系统管理”这一菜单下是可以对多端电商平台内展示的轮播图进行添加修改的。系统管理界面如下图4-18所示。

图4-18系统管理界面图
4.2.4 商品中心管理界面
后台管理人员对多端电商平台内的不同商品中心的分类下的商品中心信息进行维护和管理的,商品中心管理界面如下图4-19所示。

图4-19商品中心管理界面图
4.2.5 分类列表界面
后台管理人员是可以对多端电商平台内的商品中心的类别进行管控。分类列表界面如下图4-20所示。

图4-20分类列表界面图
5系统的测试
5.1测试的目的
系统的前台、后台、数据库完成以后,这个系统才算是完成了一半,我们在这之后要对系统进行最后的一个阶段,那就是测试了,测试对一个系统来说是非常重要的,有的时候开发完一个系统,如果测试不合格的话,这个系统是没有办法进行投入使用的,所有我们要用测试对系统的功能进行检验,把不完善的功能尽量完善,把出现的bug解决掉,然后给用户呈现出一个完美的系统。通过对系统最后一步的测试,使得开发人员对自己的系统更加有信心,更加积极的为后期的系统版本的更新提供支持。
5.2 系统测试用例
系统测试包括:用户登录功能测试、商品中心查看功能测试、商品中心添加、商品中心搜索、密码修改功能测试,如表5-1、5-2、5-3、5-4、5-5所示:
表5-1 用户登录功能测试表
用例名称 | 用户登录系统 |
目的 | 测试用户通过正确的用户名和密码可否登录功能 |
前提 | 未登录的情况下 |
测试流程 | 1) 进入登录页面 2) 输入正确的用户名和密码 |
预期结果 | 用户名和密码正确的时候,跳转到登录成功界面,反之则显示错误信息,提示重新输入 |
实际结果 | 实际结果与预期结果一致 |
商品中心查看功能测试:
表5-2 商品中心查看功能测试表
用例名称 | 商品中心查看 |
目的 | 测试商品中心查看功能 |
前提 | 用户登录 |
测试流程 | 点击商品中心列表 |
预期结果 | 可以查看到所有多端电商及周边商品信息 |
实际结果 | 实际结果与预期结果一致 |
管理员添加商品中心界面测试:
表5-3 管理员添加商品中心界面测试表
用例名称 | 商品中心发布测试用例 |
目的 | 测试商品中心发布功能 |
前提 | 管理员用户正常登录情况下 |
测试流程 | 1)管理员点击商品中心,然后点击添加后并填写信息。 2)点击进行提交。 |
预期结果 | 提交以后,页面首页会显示新的商品中心信息 |
实际结果 | 实际结果与预期结果一致 |
商品中心搜索功能测试:
表5-4 商品中心搜索功能测试表
用例名称 | 商品中心搜索测试 |
目的 | 测试商品中心搜索功能 |
前提 | 无 |
测试流程 | 1)在搜索框填入搜索关键字。 2)点击搜索按钮。 |
预期结果 | 页面显示包含有搜索关键字商品中心 |
实际结果 | 实际结果与预期结果一致 |
密码修改搜索功能测试:
表5-5 密码修改功能测试表
用例名称 | 密码修改测试用例 |
目的 | 测试管理员密码修改功能 |
前提 | 管理员用户正常登录情况下 |
测试流程 | 1)管理员密码修改并完成填写。 2)点击进行提交。 |
预期结果 | 使用新的密码可以登录 |
实际结果 | 实际结果与预期结果一致 |
5.3 系统测试结果
通过编写多端电商平台的测试用例,已经检测完毕以上功能模块的测试。在测试每个功能的过程中,我们应该严格按照指定的测试计划逐步进行测试,不能急于实现,并且每个测试的结果都应该充分记录下来,最好的选择是自动化测试,这样可以更准确、更快地完成,而不是依赖手动测试,因为这样可以避免问题,它还可以防止疲劳和问题。进行测试时,必须保持高度专注,密切关注测试结果,并及时纠正任何异常情况;最后,在测试完成后,应该正确保存文档以备将来使用。经过测试可以发现,原来开发的系统是清晰的,只有对其进行细化,编程的过程才会变得更加顺利。只有有了良好的结构,后期的编程工作才能顺利完成,同时也可以大大降低时间和精力成本。
结论
基于Vue3+uni-app的组合技术栈开发的多端电商平台使用的开发环境是功能强大的SpringBoot框架和Vue3以及跨平台框架的uni-app,在大学的学科中重点学习了这几种技术,在对这些技术学习、熟悉之后,结合对系统进行的需求分析顺利的完成了本次项目的设计。在最初接到任务书的那一刻,比较迷茫,没有任何的思路,在经过了老师的指导以后,调查了一些多端电商平台相关的资料后,慢慢的有了头绪,开始入手开题,明确了系统的内容,对系统进行可行性的分析,确定系统可行以及功能内容以后,就按照开题初步设计的内容进行完善,慢慢补充、学习,最终结束了程序的开发,也完成了论文的写作。这一过程,虽然艰辛,但也学习到了很多,对项目开发流程也有了一个新的认识,动手能力也得到了提高,这正是书本上所学习不到的。
经过开发本项目,让我非常有成就高,与此同时我对程序的开发更加感兴趣了,信息技术真的很强大,也很深奥,在以后工作中,我将会寻找与其相关工作,继续深入学习,开发出更优秀的项目。
参考文献
[1]Asaithambi S ,Ravi L ,Devarajan M , et al.Enhancing enterprises trust mechanism through integrating blockchain technology into e-commerce platform for SMEs[J].Egyptian Informatics Journal,2024,25100444-.
[2]Wang L ,Zhang S R ,Zhang X C .Live streaming E-commerce platform characteristics: Influencing consumer value co-creation and co-destruction behavior[J].Acta Psychologica,2024,243104163-.
[3]江幼彬.基于“互联网+”的电子商务配送平台设计[J].中国储运,2024,(01):116-117.
[4]贾慧文.网络营销策略在电子商务平台上的实施与效果评估[J].上海商业,2023,(12):39-41.
[5]龙芳,吴勇灵.微信小程序购物系统的设计与实现[J].现代信息科技,2023,7(23):25-30.
[6]张耕问,钱昕彤,崔坤鹏.一个基于微信小程序的海外拼团购物平台的设计[J].电脑知识与技术,2023,19(33):29-31.
[7]李婷.物联网背景下物流电子商务平台的建设分析[J].商场现代化,2023,(22):28-30.
[8]白琢,赵祎.拼多多电商平台营销策略研究[J].市场瞭望,2023,(15):30-32.
[9]许苑莉.网络购物消费者知情权研究[D].北方工业大学,2023.000873.
[10]张琦.基于质量功能展开的电商平台产品推荐排序问题研究[D].江南大学,2023.002209.
[11]毛吉源.网络直播购物特征对消费者购买意愿影响研究[D].四川师范大学,2023.000038.
[12]刘维佳.社区式购物平台发展现状及前景分析[J].产业创新研究,2023,(07):68-70.
[13]周超,赵思雅,王天玥.基于SICAS模型的线上购物平台品牌营销策略研究[J].淮南师范学院学报,2023,25(02):88-93.
[14]陈小燕,朱映辉,余晓春.基于SpringBoot+Vue的好农物商城的设计与实现[J].电脑知识与技术,2022,18(22):37-39.
[15]魏冉.新媒体运营下电商购物环境现状和成因分析——基于消费者视角[J].内蒙古科技与经济,2022,(12):60-61.
[16]徐德华,张心怡.基于网络购物平台的在线评论研究综述[J].情报探索,2022,(05):118-124.
[17]Chen G ,Xu J .Design and implementation of efficient Learning platform based on SpringBoot Framework[J].Journal of Electronics and Information Science,2020,6(1):
[18]陈倩怡,何军.Vue+Springboot+MyBatis技术应用解析[J].电脑编程技巧与维护,2020,(01):14-15+28.
[19]李曼.京东商城跨境经营的“社区购物”新模式研究[D].江苏大学,2020.DOI:10.27170/d.cnki.gjsuu.2020.000514.
[20]贾志勇.基于SpringBoot的下沉市场交易平台的设计与实现[D].安徽大学,2020.DOI:10.26917/d.cnki.ganhu.2020.000917.
致谢
通过这样设计与开发这样一个系统,首先向我们老师、同学和朋友表达真诚的感谢。没有指导老师的指导和平日子的教导,我也不能够学到如此多的专业知识。另外,也佩服老师兢兢业业的工作态度,给我们做好了表率。系统开发技术要学习的东西很多,前台框架、后台框架、业务流程、数据结构、操作系统等各种知识非常的丰富,都需要慢慢的专研。在这里,首先感谢老师细心的教导,我只想说一句:“老师,谢谢您,您辛苦了!有您在,大学生活才更加的充实。”另外,我要感谢我的室友,由于知识掌握得不够产生各种问题,正因为有了你们的帮忙,给我提出很多很好的建议,才能更好的解决系统开发问题。同时,我也应该感谢那些计算机专业的先哲们,正是由于有这么一群人,才能把这样的专业研究得如此透彻,才能助力新世界的诞生。你们的理论,是我们一生学习的内容,你们的成就,是我们一生追求的目标。
最后,也希望自己在未来的道路上能够走得更远,不辜负在大学的学习,以及老师们的细致的教导。