springboot基于SpringBoot+Vue的电商应用系统的设计与实现

摘 要

现代经济快节奏发展以及不断完善升级的信息化技术，让传统数据信息的管理升级为软件存储，归纳，集中处理数据信息的管理方式。本电商应用系统就是在这样的大环境下诞生，其可以帮助管理者在短时间内处理完毕庞大的数据信息，使用这种软件工具可以帮助管理人员提高事务处理效率，达到事半功倍的效果。此电商应用系统使用跨平台的可开发大型商业网站的HTML技术，以及最受欢迎的RDBMS应用软件之一的MySQL数据库进行程序开发，后台采用Java语言的Spring Boot框架，前台采用VUE框架和layui样式，电商应用系统实现页面基本用HTML文件写作方式。电商应用系统有管理员和用户两个角色。管理员功能有个人中心，管理员管理，公告类型管理，商品类型管理，论坛管理，积分记录管理，公告信息管理，商品信息管理，商品评价管理，商品收藏管理，商品订单管理，用户管理，轮播图管理。用户可以注册登录，查看和购买商品，对商品进行评价和收藏，在论坛发消息等操作。电商应用系统的开发根据操作人员需要设计的界面简洁美观，在功能模块布局上跟同类型网站保持一致，程序在实现基本要求功能时，也为数据信息面临的安全问题提供了一些实用的解决方案。可以说该程序在帮助管理者高效率地处理工作事务的同时，也实现了数据信息的整体化，规范化与自动化。

关键词：电商应用系统；HTML技术；MySQL；VUE；Spring Boot

Abstract

The fast-paced development of the modern economy and the continuous improvement and upgrading of information technology have upgraded the management of traditional data information to a management method of software storage, induction, and centralized processing of data information. This e-commerce application system was born in such a large environment. It can help managers to process huge data information in a short time. Using this software tool can help managers improve transaction processing efficiency and achieve twice the result with half the effort. This e-commerce application system uses cross-platform HTML technology that can develop large-scale commercial websites, and MySQL database, one of the most popular RDBMS application software, for program development. The background uses the Spring Boot framework of Java language, and the front desk uses the VUE framework and layui Style, the e-commerce application system realizes the basic way of writing pages with HTML files. The e-commerce application system has two roles: administrator and user. The administrator functions include personal center, administrator management, announcement type management, commodity type management, forum management, point record management, announcement information management, commodity information management, commodity evaluation management, commodity collection management, commodity order management, user management, wheel Play image management. Users can register and log in, view and purchase products, evaluate and favorite products, and send messages in forums. The development of the e-commerce application system is designed according to the needs of the operator. The interface is simple and beautiful, and the layout of the functional modules is consistent with the same type of website. When the program realizes the basic required functions, it also provides some practical solutions for the security problems faced by the data and information. Program. It can be said that this program not only helps managers deal with work affairs efficiently, but also realizes the integration, standardization and automation of data information.

**Key Words：**E-commerce application system; HTML technology; MySQL; VUE; Spring Boot

目 录

目 录 III

1 绪论 1

1.1 研究背景 1

1.2 目的和意义 1

1.3 论文结构安排 2

2 相关技术 3

2.1 HTML技术介绍 3

2.2 B/S结构介绍 4

2.3 MySQL数据库介绍 5

2.4 Java语言介绍 6

2.5 VUE框架介绍 6

2.6 Tomcat 服务器介绍 7

2.7 layui介绍 7

2.8 Spring Boot框架介绍 8

3 系统分析 9

3.1 系统可行性分析 9

3.1.1 技术可行性分析 9

3.1.2 经济可行性分析 9

3.1.3 运行可行性分析 9

3.2 系统性能分析 10

3.2.1 易用性指标 10

3.2.2 可扩展性指标 10

3.2.3 健壮性指标 10

3.2.4 安全性指标 11

3.3 系统流程分析 11

3.3.1 操作流程分析 11

3.3.2 登录流程分析 12

3.3.3 信息添加流程分析 13

3.3.4 信息删除流程分析 14

4 系统设计 15

4.1 系统设计的原则 15

4.2 系统概要设计 16

4.3 系统功能结构设计 16

4.4 数据库设计 17

4.4.1 数据库E-R图设计 17

4.4.2 数据库表结构设计 19

5 系统实现 25

5.1 管理员功能介绍 25

5.1.1 管理员管理 25

5.1.2 公告类型管理 25

5.1.3 论坛管理 26

5.1.4 商品类型管理 26

5.1.5 商品信息管理 27

5.1.6 轮播图管理 27

5.1.7 公告信息管理 28

5.1.8 用户信息管理 28

5.2 用户功能介绍 29

5.2.1 个人中心 29

5.2.2 公告类型信息 30

5.2.3 商品信息 30

5.2.4 公告信息管理 31

6 系统测试 32

6.1 系统测试的特点 32

6.2 系统测试方法 32

6.3 系统功能测试 33

6.3.1 登录功能测试 33

6.3.2 修改密码功能测试 34

6.4 测试结果分析 35

结 论 36

致 谢 37

参考文献 38

1 绪论

1.1 研究背景

当前社会各行业领域竞争压力非常大，随着当前时代的信息化，科学化发展，让社会各行业领域都争相使用新的信息技术，对行业内的各种相关数据进行科学化，规范化管理。这样的大环境让那些止步不前，不接受信息改革带来的信息技术的企业随时面临被淘汰，被取代的风险。所以当今，各个行业领域，不管是传统的教育行业，餐饮行业，还是旅游行业，医疗行业等领域都将使用新的信息技术进行信息革命，改变传统的纸质化，需要人手工处理工作事务的办公环境。软件信息技术能够覆盖社会各行业领域是时代的发展要求，各种数据以及文件真正实现电子化是信息社会发展的不可逆转的必然趋势。本电商应用系统也是紧跟科学技术的发展，运用当今一流的软件技术实现软件系统的开发，让电商方面的信息完全通过管理系统实现科学化，规范化，程序化管理。从而帮助信息管理者节省事务处理的时间，降低数据处理的错误率，对于基础数据的管理水平可以起到促进作用，也从一定程度上对随意的业务管理工作进行了避免，同时，电商应用系统的数据库里面存储的各种动态信息，也为上层管理人员作出重大决策提供了大量的事实依据。总之，电商应用系统是一款可以真正提升管理者的办公效率的软件系统。

1.2 目的和意义

信息数据的处理完全依赖人工进行操作，会耗费大量的人工成本，特别是面对大量的数据信息时，传统人工操作不仅不能对数据的出错率进行保证，还容易出现各种信息资源的低利用率与低安全性问题。更有甚者，耽误大量的宝贵时间，尤其是对信息的更新，归纳与统计更是耗财耗力的过程。所以电子化信息管理的出现就能缓解以及改变传统人工方式面临的处境，一方面可以确保信息数据在短时间被高效处理，还能节省人力成本，另一方面可以确保信息数据的安全性，可靠性，并可以实现信息数据的快速检索与修改操作，这些优点是之前的旧操作模式无法比拟的。因此电商应用系统为数据信息的管理模式的升级与改革提供了重要的窗口。

此次电商应用系统的开发，需要用到的知识不仅涉及到界面设计与功能设计方面的知识，还需要涉及到数据库与编程语言上面的知识，这些知识点对于一个即将毕业的学生来说，一是为了巩固在校所学相关专业知识；二是为了让学生学会如何将专业理论知识运用于现实软件的开发过程；三是让学生明白知识是无穷无尽的，要时刻明白活到老学到老的真正含义，让学生要养成时刻学习的习惯，同时也要相信通过此次程序的开发，会让学生对于专业知识的理解与软件开发水平的提高有着极大的帮助。

1.3 论文结构安排

为了帮助用户更好的了解和理解程序的开发流程与相关内容，本文将通过六个章节进行内容阐述。

第一章：描述了程序的开发背景，程序运用于现实生活的目的与意义，以及程序文档的结构安排信息；

第二章：描述了程序的开发环境，包括程序开发涉及到的技术，程序开发使用的数据存储工具等信息；

第三章：描述了程序着手进行开发时，会面临的可行性问题，并对程序功能以及性能要求进行描述；

第四章：描述了程序大功能模块下的功能细分信息，以及存储程序数据的数据库表文件结构的设计信息等；

第五章：描述了程序的功能实现界面的内容，也对程序操作人员操作的部分功能进行了描述；

第六章：描述了程序功能的测试内容，并介绍了系统测试的概念与方法。

2 相关技术

2.1 HTML技术介绍

超文本标记语言，标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

语言概述

在WWW上的一个超媒体文档称之为一个页面（page）。作为一个组织或个人在万维网上开始点的页面称为主页Homepage，或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接）。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Web）。

Web页面也就是通常所说的网页，在这里不作区分。

折叠规范标准

HTML是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

折叠标记语言

HTML之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点------就是一种URL指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。

由此可见，网页的本质就是HTML，通过结合使用其他的Web技术（如：脚本语言、CGI、组件等），可以创造出功能强大的网页。因而，HTML是Web编程的基础，也就是说万维网是建立在超文本基础之上的。

2.2 B/S结构介绍

在早期，一些使用HTML语言编写的文件，再集合一些其它资源文件就可以组成一个最简单的Web程序，了解了Web程序也需要了解Web站点，它们之间的关系就是一个或者多个Web程序可以放在Internet上的一个Web站点（Web服务器）中进行使用。可以说Web应用程序的开发也带动了B/S这种网络结构模式的兴起。B是Brower（浏览器）的首字母，S是Server（服务器）的首字母，两个首字母进行组合就成了网络结构模式的简称B/S。由于这种结构模式通过安装在客户端的浏览器进行服务器的访问，可以把程序的核心功能安排在服务器中进行处理，给程序的开发，后期使用和维护省去了许多工作。

（1）浏览器

它主要安装于用户客户端，可以把操作指令传达给服务器，也可以接收服务器返回的操作指令的操作结果，并把Web信息显示于浏览器的界面让用户阅读和浏览，前提是程序是用B/S方式进行开发的。

（2）服务器

服务器这个名称有时也运用于对计算机硬件设备进行称呼，有时也运用于计算机服务端的软件进行称呼，这二者的区别还需要从语境的方式进行区分。硬件意义的服务器是一个性能突出的计算机，是网络的灵魂，作为网络节点对于网络上的数据信息进行存储并处理。软件意义的服务器也要区分Web服务器和应用程序服务器，Web服务器常用的软件就有IIS服务器和Apache，通过Internet的连接处理Web浏览器提交的请求。应用程序服务器常见的软件有Java服务器，用于.NET程序开发的.NET服务器以及PHP服务器等。

对浏览器和服务器进行了简要说明，也就明白其工作原理了，用户先要在客户端安装浏览器，服务器上需要安装数据库，比如MySQL或者SQL Server等数据库都可以，浏览器与数据库的交互主要就是通过Web Server进行实现。

2.3 MySQL数据库介绍

开发的程序面向用户的只是程序的功能界面，让用户操作程序界面的各个功能，那么很多人就会问，用户使用程序功能生成的数据信息放在哪里的？这个就需要涉及到数据库的知识了，一般来说，程序开发通常就会对常用数据存储工具的特点进行分析比对，比如MySQL数据库的特点与优势，Access数据库的特点与优势，Sqlserver数据库的特点与优势等，最终看哪个数据库与需要开发的程序比较匹配，也符合程序功能运行需要的数据存储要求，比如，需要开发商业级别的程序，存储的数据对数据库要求较高，可以选用Oracle，如果只是比较简单的程序，对数据存储没有过多要求，可以选用微软旗下的Access，当开发程序要求数据库占用空间小，并能满足程序数据存储要求时，就可以考虑Oracle公司从瑞典MySQL AB公司在很早之前就收购过一个关系型数据库，它是现在的MySQL数据库。在数据库工具里面它是最受认可的其中一个应用软件。需要说明的信息就是，本程序的开发就运用到了此数据库。它将程序数据通过使用不同的数据表格进行保存，在增加了程序数据的存储速度的时候，也提高了数据库的灵活性。

为了更容易理解MySQL数据库，接下来就对其具备的主要特征进行描述。

（1）首选MySQL数据库也是为了节省开发资金，因为网络上对MySQL的源码都已进行了公开展示，开发者根据程序开发需要可以进行下载，并做一些改动就可以使用在程序中，可以推动开发者开发此程序的开发进度。

（2）SQL数据语言在MySQL里面也同样适用

（3）MySQL不仅可以支持多种编程语言，比如在校期间学到的C语言，Java语言，以及课后接触的PHP语言，C++语言等编程语言，它都能很好的支持，而且MySQL的安装与使用还不挑剔使用平台。

（4）MySQL可以支持具有千万条数据记录的数据库，电脑操作系统在进行首次安装或者是重装时，可以根据需要选择安装32位或64位操作系统，这两种操作系统对表文件的支持力度不一样，32位的操作系统最多可以存放4GB的表文件，64位操作系统最多可以存放8TB的表文件。

（5）MySQL数据库可以通过GPL协议进行个性化定制，需要开发者自己对数据库的源代码进行修改，以此开发出属于自己的MySQL。

2.4 Java语言介绍

程序开发语言有很多，但是截至目前，Java语言在IT领域内，仍然是最被认可，以及被广泛运用的编写语言之一，因此在选择此程序的编写语言上，果断选择这门编程语言进行程序开发。可以说经过了这么多年的发展，Java语言不仅在Web开发领域有了突出性贡献，而且在大数据开发领域以及Android开发领域都得到了广泛运用。由于Java语言拥有较强的扩展性能，并且表现出的稳定性能，让其成为大型后端系统开发语言首选，现如今，Java语言也成为了一种常用的互联网平台的解决方案。

作为一种源码在网络上开源的面向对象的程序开发Java语言，由它开发完成的程序是不可能