基于vue全家桶的pc端仿淘宝系统_kebgy基于vue全家桶的pc端仿淘宝系统

本文主要是介绍基于vue全家桶的pc端仿淘宝系统_kebgy基于vue全家桶的pc端仿淘宝系统_kebgy--论文，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

@TOC

springboot478基于vue全家桶的pc端仿淘宝系统_kebgy基于vue全家桶的pc端仿淘宝系统_kebgy--论文

绪论

1.1开发背景

改革开放以来，中国社会经济体系复苏，人们生活水平稳步提升，中国社会已全面步入小康社会。同时也在逐渐转型，具有生活的现代化和劳动的社会化等特点。这不仅基于人们过快的工作节奏与生活方式，也是源于人们对于生活品质越来越严苛的要求。如何从工作压力与生活压力中得到解放，是现代人追求的永恒话题[1]。

单从工作压力来讲，网上购物系统在很大程度上可以解决一部分问题，逐渐进入人们的视野。网上购物系统采用的手工记录信息的方式，给工作人员的匹配工作造成很大的困难。这也充分说明了传统的信息处理方式已经很难适应现代管理系统的需要。

近年来，随着计算机技术的飞速发展以及其在全球范围内的普及，计算机技术的在人们生活中应用的占比越来越大，尤其是信息资源管理方面，广泛应用于各个行业，已经产生了不可估量的社会效益[6]。计算机技术在信息资源管理方面的应用大大提高了工作效率，简化了工作程序，改善了服务质量[7]。而这些特点正好对网上购物系统的难题对症下药。网上购物系统一经问世，就展现了其巨大的发展前景与优势。电子信息技术与网上购物系统的结合，使得用户足不出户就可以在系统上操作，符合人们现代生活方式发展；这种结合也对网上购物系统模式的变革也起到了决定性的作用，可以实现网上购物系统信息一次录入，永久使用的便捷，关键词输入即可将用户需求与网上购物系统人员信息进行匹配，达到客户需求最快最优实现的理想[8]。然后这种模式更加节省成本，无论是纸质文字的录入和保存，还有人工的费用都为网上购物系统的资本积累以及变革提供了保障。因此可以看出，网上购物系统网络化，不仅大大提高了本行业的工作效率，简化工作方式，更是一场网上购物系统的深刻变革[9]。

1.2开发目的与意义

1.2.1开发目的

近年来，网上购物系统发展迅猛，在拥有广阔发展前景的同时，也面临着许许多多的问题[10]。

我国线上管理起步晚，但发展快速，从业人员激增，多见于传统管理模式，管理体系不规范、不标准。且企业虽然多但规模普遍偏小，很难在市场形成有效的诚信经营的形象与品牌[11]。

我国目前存在的网上购物系统监管制度缺失、市场监管不规范等问题。由于缺乏专业人士的素质和服务品质的明确测量，导致网上购物系统内部鱼龙混杂，难以获得顾客的信赖。

网上购物系统是电子、信息技术相结合，是一种必然的发展趋势。以互联网为基础，以服务于广大用户为目的，发展整体优势，扩大规模，提升服务质量，提高网上购物的管理效率。网上购物系统实现了网上购物系统向现代化和网络化的转型，为管理决策和控制提供保障，这是网上购物系统发展中里程碑式的转型。

1.2.2开发意义

对于网上购物来说，系统的建设大大节省了管理成本和人工成本，增强用户信息安全建设，是网上购物实现管理现代化的有效途径，同时促进网上购物管理更加专业化和网络化。

对于用户来说，建立网上购物系统体系不仅丰富了网上购物系统的商业模式，还能刺激各网上购物进行自我改革，促使其专业性和规范性的提高。这是网上购物系统良性循环发展的里程碑[15]。

1.3本文研究内容

首先，要掌握有关系统的基本理论，如 Java技术、 MySQL数据库等，并对其进行全面的分析。为了给系统打下坚实的技术基础，本系统采用了 MySQL数据库的架构，在开始这项工作前，首先要设计好要用到的数据库表。该系统的使用者有两类：管理员和商家，主要功能包括个人中心、商家管理、用户管理、商品种类管理、商城商品管理、系统管理、订单管理等功能。

2开发技术

2.1 Java介绍

Java语言正式诞生于1995年，是由SUN公司开发研制的OAK语言发展而来的。Java语言继承了OAK语言可跨平台运行的特点，融合了面向对象编程的风格，JAVA以其独有的开放性、跨平台性和面向网络的交互性席卷全球，以其安全性、易用性和开发周期短的特点，迅速从最初的编程语言发展成为全球第一大软件开发平台.广受时下程序开发人员的好评[3]。后来又为了丰富Java语言的用途，提高生产力，将它进行设计和改造，以满足更多地开发和应用场景。经过改造后，它可以满足移动端开发，桌面应用开发和企业级应用开发。Java语言还为用户提供了丰富的类库，在掌握它的特性后，学习特定的工具包，就可以满足很多场景的开发。现在来看，Java语言在这三种平台的应用开发中，都占据了举足轻重的地位。

与其他语言相比，Java语言具有很多的优点，Java语言简单比较容易理解，有c语言的基础很容易就可以学会，中文和英文的学习资源也比较多，而且Java语言经过许多年的沉淀发展，逐渐演变出很多成熟的框架技术。企业还还可以封装自己的框架，让开发变得简单。它还具有跨平台性较其他语言这一个最大的优势，这意味着它只需要一次编译就可以运行在其他平台上。

2.2 MySql简介

它以其优秀的性能、强大的功能以及良好的扩展性受到越来越多的关注。目前，国内已经有很多企业采用了该系统进行管理，取得了很好的效果。随着网络技术的发展。MySQL是最流行的关系型数据库管理系统之一，我的SQL是WEB应用应用程序中最好的RDBMS（Relational Database Management System）应用程序之一。MySQL是一个关系型数据库管理系统，在这个系统中，关系数据库将数据存储在不同的表中，而不是全部存储在一个大仓库中，从而提高了速度和灵活性。

在信息管理中，对于数据库的应用也日益广泛，不仅有效对信息管理的质量进行了提升，也进一步提升了信息管理的安全性，让信息管理更加高效[6]。SQL Server是一种关系数据库管理系统，它能提供超大型系统所需的数据库服务。大型服务器可能有成千上万的用户同时连接到 SQL Server实例[7]。

我的SQL使用的SQL语言是访问数据库最常用的标准化语言。它可以通过简单操作实现复杂查询功能，并且具有良好的可扩展性和可维护性等优点。随着网络技术的不断发展，ASP.NET成为目前互联网上最为流行的Web应用之一。MySQL软件采用双授权政策，分为社区版版本和商业版。由于其体积小，速度快，总体拥有成本低，特别是开放源码，MySQL用作中小型网站发展的网站数据库[8]。

2.3 SPRINGBOOT框架

Spring Boot是由Pivotal的开发团队在2013年开发的一个免费、轻量级、开源的系统框架。SpringBoot的主要设计思想是约定大于配置，因此SpringBoot在设计时几乎达到零配置。SpringBoot集成了业界的开源框架。

SpringBoot是一个非常强大的后台框架，因为SpringBoot的开发基本上不需要写配置文件，所以利用SpringBoot来构建网站的后台环境，在SpringBoot的YML配置文件中写项目启动端口，项目就可以启动了。项目的Java和静态文件由SpringBoot管理。

2.4 Vue框架

Js是用于构建用户界面的增量框架。与其他重量级框架不同，Vue使用自下而上的增量开发设计。Vue的核心库只关注视图层，这很容易学习并与其他库或现有项目集成。另一方面，Vue完全能够驱动使用Vue生态系统支持的单个文件组件和库开发的复杂单页应用程序。

Vue.js的目标是使用最简单的API实现响应数据绑定和复合视图组件。

Vue.js本身并不是一个通用框架，它只关注视图层。因此，很容易学习并与其他库或现有项目集成。另一方面，当与相关工具和支持库一起使用时，Vue js还可以驱动复杂的单页应用程序。

2.5 B/S架构

B/S（Browser/Server,浏览器/服务器）模式，是一种架构模式，属于WEB发展后的所出现的一种网络构造，而WEB又是主要的浏览器应用商品软件。B/S架构模式不仅将系统的重新开发、维修及利用等简单化，更将其重点放到了服务器上[8]。它使客户端得到了统一，服务器上集中了系统功能的最关键部分。

B/S架构的工作模式是浏览器发出请求后服务器进行相应的响应。Internet上文本、图片、动画等信息主要由Web服务器产生，而用户主要是通过浏览器访问这些信息。在Web服务器上下载程序时，如果在下载过程中遇到某些与数据库相关的指令，可以将这些指令交给数据库服务器来解释、进行执行。B/S架构工作流程图如2-1所示：

图2-1 B/S架构工作流程图

2.6 Tomcat简介

Tomcat是Java Servlet，JavaServerPages，Java Expression Language和JavaWebSocket（Java EE）技术的开源实现。因为可以通过HTTP提供HTML页面等静态内容的请求访问，所以是一个WEB服务器。

Tomcat 目录结构作用如表2-1所示

表2-1 tomcat目录结构表

序号	目录名称	作用
1	bin	存放启动和关闭tomcat脚本
2	conf	存放不同的配置文件（server.xml和web.xml）
3	doc	存放Tomcat文档
4	lib	存放Tomcat运行需要的库文件（JARS）
5	logs	存放Tomcat执行时的LOG文件
6	src	存放Tomcat的源代码
7	webapps	Tomcat的主要Web发布目录（包括应用程序示例）
8	work	存放jsp编译后产生的class文件

3系统分析

需求分析是研发人员经过调研和分析后准确理解客户需求，确定系统需要具备的功能。然后对系统进行可行性和功能分析，确保符合网上购物系统的实现价值，对后续的系统创建有显著的帮助。

3.1可行性分析

3.1.1技术可行性分析

基于B/S架构开发的网上购物系统，技术方面应用了目前市面上比较主流的web三大框架，分别是Spring、Hibernate、struts2，数据库采用mysql，tomcat作为服务器，这些技术非常的成熟，在市面上有非常多成熟使用的案例，从技术角度是没有问题的，并且在学校的学习中对于这些技术就会有了一定的掌握，开发过类似的项目。

3.1.2经济可行性分析

网上购物系统大都是区域性的管理，系统中维护的范围不会非常大，因此数据并发量不会非常高，在数据并发量不是很高的情况下，系统的资源配置相对较低，用户所需要的客户端普通的电脑即可胜任。并且网上购物的管理系统还会提高效率减少纸质物品的使用，节约纸质资源。避免很多的人力消耗和资源浪费。从系统的开发角度分析，此次项目的开发软件全部都是开源且免费的。不需要在开发中投入经济成本，只需要专注于开发的内容即可，不会产生相应的开发费用。系统稳定使用后系统不会有过多的运维成本，投入使用后会在实际工作中发挥出重要的作用。

3.1.3法律可行性分析

网上购物系统是自己独立设计的，该系统是本人开发出来做毕业设计之用，并不会侵犯他人、集体和国家的利益。该系统使用正版软件开发，所有参考资料都是正规网站查询分析得出，开发的技术完全是开源免费的工具，百分百遵守国家法律法规。不会出现任何违反国家的政策和法律的。

3.2系统性能分析

系统安全性

网上购物系统中，系统的安全性要有一定的保障，不仅要保证系统数据存储足够安全，还要保障数据传输过程安全，还要保证对用户权限管理是合理的。保证一些意外情况发生，导致系统数据缺损时，会有历史数据备份对数据进行还原。

可维护性和适应性

世界是在不断进步的，互联网也在不断发展，随着行业发展，对网上购物系统可能会产生新的需求，好的系统应该具有可扩展性，无论在现在还是未来，都能够满足用户需求，可以长期使用本网上购物系统。

可靠性

网上购物系统在发展进步，网上购物会越做越大，到时候系统的访问量就会比现在多很多，网上购物系统要足够可靠，能够在并发量高的情况下，依旧保持优越的运行速度、容错能力。

3.3功能需求分析

系统的目标是为管理员、商家和用户搭建一个网上沟通平台，保证双方的安全，并使双方的利益最大化。

3.3.1管理员需求分析

管理员端的功能主要是开放给系统的管理人员使用，能够对用户的进行管理，包括对他们的账号管理、对个人中心、商家管理、用户管理、商品种类管理、商城商品管理、系统管理、订单管理等进行查看，修改和删除等，对系统整体运行情况进行了解。

管理员用例分析图，如图3-1所示。

图3-1管理员用例分析图

3.3.2商家需求分析

商家的功能主要是对个人账号和密码进行更新管理，对系统首页、个人中心、商家管理、商城商品管理、订单管理进行查询、修改或删除等；对商城商品进行查询详情操作。

商家用例分析图，如图3-2所示。

图3-2商家用例分析图

3.3.3用户需求分析

用户的功能主要是对个人账号和密码进行更新管理，对首页、商城商品、商城公告、官方客服、购物车、个人中心情况进行查询、评论或收藏等。

用户用例分析图，如图3-3所示。

图3-3用户用例分析图

3.4系统流程分析

在本系统，非本系统的用户要想进行网上购物系统就要注册本系统，登录时需要填写相应的资料，如有使用者，则会显示使用者名称已经存在，请再次键入使用者名称的提示框，若使用者不存在，则填写密码、确认密码等资料，并由系统判定密码与确认密码相符，确认无误后，填写使用者所填写的资料，即可进行登记。而且，为了保证系统的安全，只有在登录了本系统以后，才能进入系统后台操作。该系统的工作流程见图3-4。

图3-4 程序流程图

4系统设计

4.1功能模块设计

对本系统进行全面的系统功能的分析，可以得出基于Springboot的网上购物系统的功能模块图，如图4-1所示。

图4-1 系统功能模块图

4.2数据库设计

4.2.1数据库设计原则

要学习程序设计，如果你想了解数据库管理系统或根据要求开发的系统接口，你必须创建一个数据库管理系统模型来存储数据。这样，当您在应用程序编程过程中，就不需要将信息加载到操作系统页面，从而提高整个系统的工作效率。信息库管理系统中存储着许多数据，应该说是管理信息系统建设的中心和基础。信息库管理系统还为管理信息系统的建设提供了添加、删除、更改和搜索的操作功能，使管理信息系统建设能够快速查询所需的数据，而不是直接从程序代码中查找。信息库管理系统通过按照特定的方法将信息表的各个组成部分组合起来，准确地组合、分类并构成信息库管理体系。

4.2.2系统E-R图

本毕业设计的E-R图描述了在系统中各个实体之间的联系，以下是对部分主要的关键实体如下：

地址实体属性图如下图4-2所示。

图4-2地址实体属性图

商家实体属性图如下图4-3所示。

图4-3商家实体属性图

商城商品实体属性图如下图4-4所示。

图4-4商城商品实体属性图

商城商品评论实体属性图如下图4-5所示。

图4-5商城商品评论属性图

官方客服实体属性图如下图4-6所示。

图4-6官方客服实体属性图

4.2.3数据库表设计

网上购物系统的数据以一个个数据表的方式存储在数据库中，这一个个数据表示系统调取数据的基础，在进行系统数据库搭建时，会根据这些设计好的数据表进行优化搭建。系统选用MySQL数据库，对各表进行了详细的说明如下：

表4-1：用户表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
username	varchar	100	用户名
password	varchar	100	密码
role	varchar	100	角色		管理员
addtime	timestamp		新增时间		CURRENT_TIMESTAMP

表4-2：关于我们

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
title	varchar	200	标题
subtitle	varchar	200	副标题
content	longtext	4294967295	内容
picture1	longtext	4294967295	图片1
picture2	longtext	4294967295	图片2
picture3	longtext	4294967295	图片3

表4-3：地址

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
userid	bigint		用户id
address	varchar	200	地址
name	varchar	200	收货人
phone	varchar	200	电话
isdefault	varchar	200	是否默认地址[是/否]

表4-4：收藏表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
userid	bigint		用户id
refid	bigint		商品id
tablename	varchar	200	表名
name	varchar	200	名称
picture	longtext	4294967295	图片
type	varchar	200	类型(1:收藏,21:赞,22:踩,31:竞拍参与,41:关注)		1
inteltype	varchar	200	推荐类型
remark	varchar	200	备注

表4-5：关于我们

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
title	varchar	200	标题
subtitle	varchar	200	副标题
content	longtext	4294967295	内容
picture1	longtext	4294967295	图片1
picture2	longtext	4294967295	图片2
picture3	longtext	4294967295	图片3

表4-6：商品种类

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
shangpinzhonglei	varchar	200	商品种类

表4-7：商家

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
shangjiazhanghao	varchar	200	商家账号
mima	varchar	200	密码
dianpuming	varchar	200	店铺名
dianpudizhi	varchar	200	店铺地址
lianxifangshi	varchar	200	联系方式
fengmiantupian	longtext	4294967295	封面图片
lianxiren	varchar	200	联系人
shangjiajieshao	longtext	4294967295	商家介绍
money	float		余额		0

表4-8：商城商品

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
shangpinbianhao	varchar	200	商品编号
shangpinmingcheng	varchar	200	商品名称
shangpinzhonglei	varchar	200	商品种类
shangpintupian	longtext	4294967295	商品图片
shengchanchangjia	varchar	200	生产厂家
pinpai	varchar	200	品牌
shangpinjianjie	longtext	4294967295	商品简介
shangjiazhanghao	varchar	200	商家账号
dianpuming	varchar	200	店铺名
onelimittimes	int		单限
alllimittimes	int		库存
clicktime	datetime		最近点击时间
clicknum	int		点击次数		0
price	float		价格
vipprice	float		会员价		-1

表4-9：订单

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
orderid	varchar	200	订单编号
tablename	varchar	200	商品表名		shangchengshangpin
userid	bigint		用户id
goodid	bigint		商品id
goodname	varchar	200	商品名称
picture	longtext	4294967295	商品图片
buynumber	int		购买数量
price	float		价格		0
discountprice	float		折扣价格		0
total	float		总价格		0
discounttotal	float		折扣总价格		0
type	int		支付类型		1
status	varchar	200	状态
address	varchar	200	地址
tel	varchar	200	电话
consignee	varchar	200	收货人
remark	varchar	200	备注
logistics	longtext	4294967295	物流
shangjiazhanghao	varchar	200	商户名称
goodtype	varchar	200	商品类型

表4-10：商城公告

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
title	varchar	200	标题
introduction	longtext	4294967295	简介
picture	longtext	4294967295	图片
content	longtext	4294967295	内容

表4-11：商城商品评论表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
refid	bigint		关联表id
userid	bigint		用户id
avatarurl	longtext	4294967295	头像
nickname	varchar	200	用户名
content	longtext	4294967295	评论内容
reply	longtext	4294967295	回复内容

表4-12：配置文件

字段名称	类型	长度	字段说明	主键
id	bigint		主键	主键
name	varchar	100	配置参数名称
value	varchar	100	配置参数值

表4-13：官方客服

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
userid	bigint		用户id
adminid	bigint		管理员id
ask	longtext	4294967295	提问
reply	longtext	4294967295	回复
isreply	int		是否回复

表4-14：用户

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
yonghuzhanghao	varchar	200	用户账号
mima	varchar	200	密码
yonghuxingming	varchar	200	用户姓名
xingbie	varchar	200	性别
nianling	varchar	200	年龄
touxiang	longtext	4294967295	头像
money	float		余额		0
vip	varchar	200	是否会员		否

表4-15：token表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
userid	bigint		用户id
username	varchar	100	用户名
tablename	varchar	100	表名
role	varchar	100	角色
token	varchar	200	密码
addtime	timestamp		新增时间		CURRENT_TIMESTAMP
expiratedtime	timestamp		过期时间		CURRENT_TIMESTAMP

表4-16：购物车表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
tablename	varchar	200	商品表名		shangchengshangpin
userid	bigint		用户id
goodid	bigint		商品id
goodname	varchar	200	商品名称
picture	longtext	4294967295	图片
buynumber	int		购买数量
price	float		单价
discountprice	float		会员价
shangjiazhanghao	varchar	200	商户名称
goodtype	varchar	200	商品类型

5系统实现

在网上购物系统的生命周期中，经过了系统分析、系统设计等阶段之后，便开始了系统实施阶段。系统的实现主要对管理员和用户功能的实现，通过实现的过程对代码和逻辑进行相应的修改和完善。该模块也是直接面对使用者的，不仅功能要齐全，而且要做到页面美观。

5.1 系统功能模块

当人们打开系统的网址后，首先看到的就是首页界面。在这里，人们能够看到网上购物系统的导航条和商城商品信息推荐等。系统首页界面如图5-1所示：

图5-1 系统首页界面

在用户注册页面的输入用户注册信息进行注册操作，用户注册页面如图5-2所示：

图5-2用户注册页面

系统登录：在系统登录页面的输入栏中输入用户名和密码进行登录；系统登录页面如图5-3所示：

图5-3系统登录页面

在个人中心页面输入个人信息可以进行更新操作，并在我的订单、我的地址和我的收藏页面对商城商品进行操作；如图5-4所示：

图5-4 个人中心界面

5.2 后台模块实现

后台用户登录，在登录页面选择需要登录的角色，再正确输入用户名和密码后，进入操作系统进行操作；如图5-5所示。

图5-5 后台登录界面

5.2.1管理员模块实现

管理员进入主页面，主要功能包括对系统首页、个人中心、商家管理、用户管理、商品种类管理、商城商品管理、系统管理、订单管理等进行操作。管理员主页面如图5-6所示：

图5-6 管理员主界面

管理员点击商家管理。进入商家页面输入店铺名和店铺地址可以查询，新增或删除商家信息，并进行查看详情，修改和删除等操作。如图5-7所示：

图5-7商家管理界面

管理员点击用户管理。进入用户页面输入用户账号可以查询，新增或删除用户详细信息，并进行查看详情，修改和删除等操作。如图5-8所示：

图5-8用户管理界面

管理员点击商品种类管理。进入商品种类页面输入商品种类可以查询、新增或删除鲜花详细信息，并进行修改或删除操作。如图5-9所示：

图5-9商品种类管理界面

管理员点击商城商品管理。进入商城商品页面输入商品名称、品牌和价格可以查询或删除商城商品详细信息，并进行详情，修改、查看评论或删除操作。如图5-10所示：

图5-10商城商品管理界面

管理员点击系统管理，进入系统管理页面可以对轮播图管理、官方客服、关于我们、系统简介和商城公告进行详情或修改操作，在关于我们页面输入标题可以查询关于我们列表信息，并进行查看详情和修改等操作。如图5-11所示：

图5-11系统管理界面

5.2.2商家后台管理模块实现

商家进入系统后台可以对系统首页、个人中心、商家管理、商城商品管理、订单管理等功能进行操作。商家后台管理页面如图5-12所示：

图5-12 商家后台管理主界面

商家点击商家管理。进入商家页面输入店铺名和店铺地址可以查询商家信息，并进行查看详情和修改等操作。如图5-13所示：

图5-13商家管理界面

商家点击订单管理。进入订单管理页面输入订单编号和商品名称可以查询已支付订单详细信息，并进行查看详情和发货等操作；还可以对已退款订单、未支付订单、已发货订单、已完成订单和已取消订单进行操作。如图5-14所示：

图5-14订单管理界面

YonghuServiceImpl.java

package com.service.impl;import org.springframework.stereotype.Service;
import java.util.Map;
import java.util.List;import com.baomidou.mybatisplus.mapper.Wrapper;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import com.utils.PageUtils;
import com.utils.Query;import com.dao.YonghuDao;
import com.entity.YonghuEntity;
import com.service.YonghuService;
import com.entity.vo.YonghuVO;
import com.entity.view.YonghuView;@Service("yonghuService")
public class YonghuServiceImpl extends ServiceImpl<YonghuDao, YonghuEntity> implements YonghuService {@Overridepublic PageUtils queryPage(Map<String, Object> params) {Page<YonghuEntity> page = this.selectPage(new Query<YonghuEntity>(params).getPage(),new EntityWrapper<YonghuEntity>());return new PageUtils(page);}@Overridepublic PageUtils queryPage(Map<String, Object> params, Wrapper<YonghuEntity> wrapper) {Page<YonghuView> page =new Query<YonghuView>(params).getPage();page.setRecords(baseMapper.selectListView(page,wrapper));PageUtils pageUtil = new PageUtils(page);return pageUtil;}@Overridepublic List<YonghuVO> selectListVO(Wrapper<YonghuEntity> wrapper) {return baseMapper.selectListVO(wrapper);}@Overridepublic YonghuVO selectVO(Wrapper<YonghuEntity> wrapper) {return baseMapper.selectVO(wrapper);}@Overridepublic List<YonghuView> selectListView(Wrapper<YonghuEntity> wrapper) {return baseMapper.selectListView(wrapper);}@Overridepublic YonghuView selectView(Wrapper<YonghuEntity> wrapper) {return baseMapper.selectView(wrapper);}}

FileController.java

package com.controller;import java.io.File;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.util.Arrays;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Random;
import java.util.UUID;import org.apache.commons.io.FileUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.util.ResourceUtils;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;import com.annotation.IgnoreAuth;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.entity.ConfigEntity;
import com.entity.EIException;
import com.service.ConfigService;
import com.utils.R;/*** 上传文件映射表*/
@RestController
@RequestMapping("file")
@SuppressWarnings({"unchecked","rawtypes"})
public class FileController{@Autowiredprivate ConfigService configService;/*** 上传文件*/@RequestMapping("/upload")@IgnoreAuthpublic R upload(@RequestParam("file") MultipartFile file,String type) throws Exception {if (file.isEmpty()) {throw new EIException("上传文件不能为空");}String fileExt = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1);File path = new File(ResourceUtils.getURL("classpath:static").getPath());if(!path.exists()) {path = new File("");}File upload = new File(path.getAbsolutePath(),"/upload/");if(!upload.exists()) {upload.mkdirs();}String fileName = new Date().getTime()+"."+fileExt;File dest = new File(upload.getAbsolutePath()+"/"+fileName);file.transferTo(dest);/*** 如果使用idea或者eclipse重启项目，发现之前上传的图片或者文件丢失，将下面一行代码注释打开* 请将以下的"D:\\springbootq33sd\\src\\main\\resources\\static\\upload"替换成你本地项目的upload路径，* 并且项目路径不能存在中文、空格等特殊字符*/
//		FileUtils.copyFile(dest, new File("D:\\springbootq33sd\\src\\main\\resources\\static\\upload"+"/"+fileName)); /**修改了路径以后请将该行最前面的//注释去掉**/if(StringUtils.isNotBlank(type) && type.equals("1")) {ConfigEntity configEntity = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "faceFile"));if(configEntity==null) {configEntity = new ConfigEntity();configEntity.setName("faceFile");configEntity.setValue(fileName);} else {configEntity.setValue(fileName);}configService.insertOrUpdate(configEntity);}return R.ok().put("file", fileName);}/*** 下载文件*/@IgnoreAuth@RequestMapping("/download")public ResponseEntity<byte[]> download(@RequestParam String fileName) {try {File path = new File(ResourceUtils.getURL("classpath:static").getPath());if(!path.exists()) {path = new File("");}File upload = new File(path.getAbsolutePath(),"/upload/");if(!upload.exists()) {upload.mkdirs();}File file = new File(upload.getAbsolutePath()+"/"+fileName);if(file.exists()){/*if(!fileService.canRead(file, SessionManager.getSessionUser())){getResponse().sendError(403);}*/HttpHeaders headers = new HttpHeaders();headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);    headers.setContentDispositionFormData("attachment", fileName);    return new ResponseEntity<byte[]>(FileUtils.readFileToByteArray(file),headers, HttpStatus.CREATED);}} catch (IOException e) {e.printStackTrace();}return new ResponseEntity<byte[]>(HttpStatus.INTERNAL_SERVER_ERROR);}}

ShangpinzhongleiServiceImpl.java

package com.service.impl;import org.springframework.stereotype.Service;
import java.util.Map;
import java.util.List;import com.baomidou.mybatisplus.mapper.Wrapper;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import com.utils.PageUtils;
import com.utils.Query;import com.dao.ShangpinzhongleiDao;
import com.entity.ShangpinzhongleiEntity;
import com.service.ShangpinzhongleiService;
import com.entity.vo.ShangpinzhongleiVO;
import com.entity.view.ShangpinzhongleiView;@Service("shangpinzhongleiService")
public class ShangpinzhongleiServiceImpl extends ServiceImpl<ShangpinzhongleiDao, ShangpinzhongleiEntity> implements ShangpinzhongleiService {@Overridepublic PageUtils queryPage(Map<String, Object> params) {Page<ShangpinzhongleiEntity> page = this.selectPage(new Query<ShangpinzhongleiEntity>(params).getPage(),new EntityWrapper<ShangpinzhongleiEntity>());return new PageUtils(page);}@Overridepublic PageUtils queryPage(Map<String, Object> params, Wrapper<ShangpinzhongleiEntity> wrapper) {Page<ShangpinzhongleiView> page =new Query<ShangpinzhongleiView>(params).getPage();page.setRecords(baseMapper.selectListView(page,wrapper));PageUtils pageUtil = new PageUtils(page);return pageUtil;}@Overridepublic List<ShangpinzhongleiVO> selectListVO(Wrapper<ShangpinzhongleiEntity> wrapper) {return baseMapper.selectListVO(wrapper);}@Overridepublic ShangpinzhongleiVO selectVO(Wrapper<ShangpinzhongleiEntity> wrapper) {return baseMapper.selectVO(wrapper);}@Overridepublic List<ShangpinzhongleiView> selectListView(Wrapper<ShangpinzhongleiEntity> wrapper) {return baseMapper.selectListView(wrapper);}@Overridepublic ShangpinzhongleiView selectView(Wrapper<ShangpinzhongleiEntity> wrapper) {return baseMapper.selectView(wrapper);}}

404.vue

<template><div class="content"><img class="backgroud" src="@/assets/img/404.png" alt><div class="text main-text">出错了...页面失踪了</div><div><el-button class="text" @click="back()" type="text" icon="el-icon-back">返回</el-button></div></div>
</template><script>
export default {methods: {back() {window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");}}
};
</script><style lang="scss" scoped>
.content {display: flex;align-items: center;flex-direction: column;width: 100%;height: 100%;min-height: 900px;text-align: center;.backgroud {display: inline-block;width: 200px;height: 200px;margin-top: 80px;}.main-text{margin-top: 80px;}.text {font-size: 24px;font-weight: bold;color: #333;}
}
</style>