1. System screenshots (you can chat privately if you need a demonstration video)
With the development of network technology and computer technology, it has a profound theoretical foundation and has been fully used in reality. In particular, software based on computer operation has attracted attention from all walks of life. In addition, people have now entered the information age, so the promotion and management of information is very critical. Therefore, it is necessary to computerize and systematize the management of shopping mall shopping information. Designing and developing an e-mall based on Vue will not only save manpower and management costs, but also safely store a huge amount of data. It does not take a lot of time to maintain and retrieve shopping information in the mall, which is very convenient.
The Vue-based e-mall creates a data table in MySQL to save information, and is written using the Vue framework and Java language. And design and implement according to the software design and development process. The system is user-friendly and fully functional. After the administrator logs in to his backend, he manages products and users, performs inbound and outbound operations on products, and manages orders in different statuses. Users view product information, collect products, comment on products, purchase products, and view orders with different statuses.
The Vue-based e-mall not only standardizes shopping information in the mall, it can also detect erroneous data in a timely manner through the validity rules of data input, so that the data entry can achieve the purpose of accuracy, thereby improving the data provided by the Vue-based e-mall. Reliability, minimizing the error rate of system data.
Keywords: Vue-based electronic mall; MySQL; Vue framework
目录
1.2 Purpose and significance of the research
1.3 Overview at home and abroad
1.4 Organizational structure of the paper
2system development technology
3.2 System performance analysis
4.2 Functional structure design
4.3.2 Database table structure
5.1 Administrator function implementation
5.1.1 Product information management
5.1.3 Product warehousing management
5.1.4 Goods shipment management
5.2 User function implementation
1 Introduction
1.1Question background
2020 is the 12th year of "Double Eleven". Affected by the previous epidemic, consumption habits have changed significantly and the rapid development of live streaming e-commerce has made people's consumption enthusiasm for Double Eleven this year unprecedentedly high. Data shows that as of 1 p.m. today, the sales of the entire network on "Double Eleven" in 2020 have reached 267.365 billion yuan. Among them, 81,923 brands participated in the Double 11 promotion, and 31,463,842 SKUs participated in the Double 11 promotion. New products released during the Double 11 promotion accounted for 6.41%. The current situation of online shopping has become one of the main shopping methods in the current society. People who are busy with work and have no time to go shopping in malls have turned to online shopping. Nowadays, online shopping technology generally separates the front and back ends. The front-end technology uses the VUE framework, and the back-end uses the SSM framework for development.
1.2 The purpose and significance of the research
The practical application of the Vue-based e-mall also helps improve the overall quality of administrators. Because Vue-based e-malls not only reduce the workload of mall shopping information managers, but also allow them to use the saved time to enrich themselves and improve their personal abilities, so that they can give full play to the advantages provided by Vue-based e-malls. Services allow Vue-based e-malls to display data information while also quickly completing data processing to improve service levels. Moreover, the development cost of e-mall based on Vue is relatively low, but in the later application, it will produce a lot of benefits. Especially when the e-mall based on Vue is operating under high load, it can also ensure the quality of data processing and data security. Optimizing the process of processing work can save the manpower and money required to invest in the traditional model, thereby reducing the cost of information management. In addition, while the Vue-based e-mall standardizes the shopping information of the mall, it can also promptly detect erroneous data through the validity rules of data input, so that the data entry can achieve the purpose of accuracy, thereby improving the service provided by the Vue-based e-mall. The reliability of data minimizes the error rate of system data.
1.3 Overview at home and abroad
At present, there are countless shopping websites at home and abroad. The main models are: B2C and C2C. Foreign shopping websites such as eBay, Amazon, etc. are all excellent shopping websites, providing convenience for people's shopping; in recent years, with the With the strong rise of a large number of domestic Internet companies, they are already in a leading position in the world in many aspects. Domestic shopping websites include well-known shopping websites such as Taobao and JD.com, which provide a good reference for the subsequent development of e-malls.
1.4 Organizational structure of the paper
To describe the system according to the common process of designing and developing a system, the system can be divided into analysis stage, design stage, implementation stage and testing stage. Therefore, when writing system documentation, describe the content of the system according to the stage the system is in.
Introduction: This is an introduction to the background and significance of the topic.
System development technology: This is an introduction to the technology that will be used in the system, including the tools used, programming languages, etc.
System analysis: This is an analysis of the system, including the necessary feasibility analysis in the early stage of investment, including an introduction to the needs obtained through user research, including the performance of the system operation, etc.
System design: This is an introduction to the design of the system, including the system functional structure designed using drawing tools, including the designed storage structure of the data table to be created in the database.
System implementation: This is the coding implementation of the system. Including the introduction of the operating effects of each module of the implemented system.
System testing: This is testing of the compiled system. Including functional testing and other content are introduced.
2system development technology
This part mainly introduces the technology used in this system, including the tools used, programming languages, etc.
2.1 Java language
The Java language has been around for more than 25 years since 1995 and still has a large market share in software development. When Sun invented Java, it was to develop a cross-platform high-level programming language, allowing program developers to focus on the program development process without paying attention to which platform the server belongs to. Because the cross-platform feature allows the language to develop very quickly. The development of Java has absorbed the advantages of languages such as C++, because new things generally solve some of the pain points of old things. Although Java also has many shortcomings, it is at least a development direction. Learning Java does not require too many concepts such as pointers, nor does it need to learn too complex data structure theory, such as stack concepts. Unless some special industries have very strict requirements on these, generally you do not need to consider various aspects when developing programs in Java. various data structures. Because Java is a strongly typed language, various corresponding types have been defined for various data. Java divides data type definitions into two categories, one is the basic type, which contains 8 basic attributes, and the other is the packaging class. There is a clear distinction between basic classes and package classes in terms of fundamental definitions, and there will be clear differences in computer operation. If used incorrectly, compilation errors will occur and the running effect will be affected. The various advantages of Java only need to be followed step by step. Just learn and use it.
2.2 SSM framework
本课题开发的应用程序主要采用的框架技术是SSM，是Java语言的一种框架集合的简称，目前在Java语言方面，主要有两大分支，一个是主攻Java语言，学习了Java基础之后，会有很多Java进阶框架进行学习，主要是针对应用程序后台进行开发设计，另一方面是转行去学习安卓语言，主要是做安卓的前端设计方面，虽然也是Java语言，但是主要去学习安卓平台的各种架构和框架了。但是不管前端应用如何，SSM框架主要是针对服务端方面进行开发的一个主流框架集合。针对于传统的SSH框架的臃肿，配置繁琐，不管是开发还是二次开发都会造成时间上大量的浪费，并且学习上面也不能有效衔接，需要去适应框架的各种设计，而框架设计比较死板，容易出错。SSM框架是当前最流行的，告别了繁琐的配置，让配置更加灵活，让数据操作更加方便，选择SSM框架进行开发感觉是很合适的。
2.3 MYSQL数据库
关系型数据库设计，对于数据库字段类型的设计以及字段长度的设计，都无时无刻的影响着后续程序开发后大量数据操作的运行效率。关系型数据库对不同的字段类型都有解释，本着课题所需的应用程序开发，寻找最适合的关系型数据库，基本上都有考虑。关系型数据库发展至今也有几十年了，优胜劣汰导致到现在还依然存在的关系型数据库其实并不多，基本上也都能满足应用程序的功能所需，所以要从其他方面来进行考虑数据库的选择。从安装维护上面考虑，SQL Server数据库有好几个G的安装包，并且安装过程中会安装很多不需要的功能，非常占用资源。Oracle数据库不比SQL Server安装包小，并且安装也会出现很多问题，对于课题所需来讲，没必要这么麻烦，并且安装还需要各种激活，只有MySQL数据库完全适合，几十兆大小的安装包，运行起来压力不大，毕竟开发电脑上还有很多其他有用的东西，而且完全免费，所以选择了MySQL数据库作为首选数据库。
2.4 Vue框架
Vue就是Vue.js框架，是用来构建用户在浏览器访问界面的一种渐进式框架。在学习Vue框架之前需要先学习网页构建的基本知识，那就是HTML以及CSS和JavaScript这些语言的规则。Vue就是在这个基础之上，只关注视图层次，采用从底层到上层的增量开发设计。Vue的目标就是让相应的数据绑定与视图组件结合在一起，尽情的通过API来实现，而不需要内容与动态显示内容写到一起，使用Vue使程序开发人员彻底的从网页设计和后台开发进行了彻底分离，使得程序开发人员更加专注于自己专业领域的开发，不管是从可读性还是写作性上面，都会让开发效率获得提升。使用Vue需要注意的是不支持IE8浏览器以及IE8以下的所有版本的浏览器，只支持IE8以上比较新的浏览器版本。
3 系统分析
这部分内容虽然在开发流程中处于最开始的环节，但是它对接下来的设计和实现起着重要的作用，因为系统分析结果的好坏，将直接影响后面环节的开展。
3.1可行性研究
影响系统开发的因素有很多，比如开发成本高就不适合开展，或者是开发时间超过了预期，也不适合开展等等。所以，在正式作出开发决策前，研究系统可行性问题，从经济，时间，操作等角度论证系统是否可以开展。
3.1.1经济可行性
基于Vue的电子商城可以简化工作流程，提供信息处理功能，并可以长期保存数据，在后期的数据查询与编辑中耗时少，提升信息管理效率，其带来的收益比较可观。对于本系统开发，无论是开发需要使用的计算机，还是开发工具等投入的成本很低，计算机是机房的电脑，开发工具是从网上下载安装的，并没有收取费用。
3.1.2时间可行性
基于Vue的电子商城是作为本人毕设项目的一个作品，学院也充分预留了制作时间，并且在每个时间段，都安排了相应的任务，所以根据这个时间安排开展工作，是可以对本系统进行设计完成的。
3.1.3操作可行性
随着电脑的普及，已经有很多人可以独立操作电脑了。而本系统就是在配置了运行环境的电脑上运行，其功能简单，省去了很多繁琐的操作逻辑，使用者通过页面导航可以直接进入功能操作区，所以稍微懂点电脑的人，都可以轻松完成系统的使用。
综上所述，本系统可以开展接下来的工作了。
3.2系统性能分析
为了降低本系统在实际使用中的出错率，就需要分析系统具备的性能。常见的可以评估系统的性能的指标有安全性，易用性，健壮性等。
3.2.1系统易用性
系统提供的信息和服务都有特定的用户群，所以，一个容易操作的系统相比一个不方便使用的系统来讲，用户还是更加青睐于使用方便的系统。所以系统具备易用性就显得非常重要。
3.2.2系统健壮性
系统在与用户进行交互过程中，面对用户的误操作行为，系统应该有相应的处理这种问题的反馈机制，而不是进入系统崩溃状态。系统中设置了很多的功能，在应对系统中某个功能出现异常情况时，系统的其它功能还是可以让用户使用。这就是系统健壮性的体现。
3.2.3系统安全性
保存在系统里面的数据，都是比较重要的系统资源，一旦这些资源泄露，不仅会有财产损失，还会丧失很多客户。所以，系统里面的数据要随时都处于安全的环境中，因此就需要采取措施保证数据安全，比如设置登录功能，使用安全验证技术引导条件用户进入指定页面，而让非条件用户停留在登录页面，不能访问系统。
3.3 系统流程分析
软件开发设计的思想始终贯穿本系统，其开发流程见下图。前期需要进行功能分析，功能设计，还有对系统后台支持数据库的设计，利用编码技术对设计的系统进行实现，然后检测和完善。
图3.1系统开发流程图
访问者之所以可以访问基于Vue的电子商城，主要是其数据库有该访问者的记录信息，这个记录是通过注册进行写入的数据。注册流程见下图。每当访问者进行基于Vue的电子商城注册时，其登记的每条记录都会在系统后台进行逐个判断。这个判断规则是提前设置的。一旦该访问者的登记信息在数据库中保存，即代表该访问者成为基于Vue的电子商城中的一份子。
图3.2 注册流程图
访问者操作系统，前提是需要验证身份，而登录功能的设置就是把本系统的用户引导进入后台操作区，把不是本系统的用户拒之门外。其流程见下图。
图3.3 登录流程图
3.4系统功能分析
在明确系统的用途，以及系统的目标用户群后，可以对本系统的功能进行设置，可以获取调研用户对功能的要求，也可以对市场上同类系统进行分析和总结，得出本系统的功能。
基于Vue的电子商城设置了管理员权限，其用例图见下图。管理员登录进入本人后台之后，管理商品和用户，对商品进行出入库操作，管理不同状态的订单。
图3.4 管理员用例图
基于Vue的电子商城设置了用户权限，其用例图见下图。用户查看商品资讯，收藏商品，评论商品，购买商品，查看不同状态的订单。
图3.5 用户用例图
4 系统设计
Currently, there are many types of systems. Judging from the content presented by the system, the types of systems include social, business, government, news, etc. Then, among the many system types, the first task of system design is to first clarify the type of system to be designed, and then on this basis, clarify the user group, functions, etc. of the system, and design a system with unique experience and vision based on this information. . Only in this way can the system be more distinctive and leave a deep impression on users among many similar systems.
4.1System title
The function formulation of this system strictly refers to the user's requirements, but when designing this system, it must also meet the design requirements of easy operation and convenient use. Therefore, to design a system that is standardized and meets user needs, the following system goals must be achieved.
The first system goal: The operation mode between the user and the system is based on human-computer dialogue. The design of the visual interface is not only beautiful but also friendly. The various types of information provided by the visual interface meet the requirements of accuracy and reliability, and can be easily viewed by users flexibly.
The second system goal: the data generated by the interaction between users and the system must be stored in the database in a strict and standardized manner. Whether it is searched and managed by later managers, data security must be ensured.
The third system goal: realize the functions required by users. Based on the functional requirements derived from the user survey, complete the design and implementation of the Vue-based electronic mall.
The fourth system goal: In necessary links, check the data registered by users, including checking the data length, data input type, etc., provide timely feedback when errors are found, and guide users to standardize registration data. Common data verification includes password modification, registration and login, filling in user information and other aspects.
The fifth system goal: The design and development of this system requires the greatest efforts. In addition to the easy operation of the system, it is also required that the system be easy to maintain during later use, so that the system can be easy to maintain.
The sixth system goal: When this system is delivered to users, it can achieve the goal of stable operation. In addition, the system is safe and meets the conditions of reliability, so users can use it with confidence.
4.2functional structuredesign
The functional analysis done above is only a general function of this system. This part requires detailed design of each module on this basis.
The detailed functions of the designed administrator are shown in the figure below. After the administrator logs in and enters his backend, he can manage products and users, perform inbound and outbound operations on products, and manage orders in different statuses.
Figure 4.1 Administrator function structure diagram
The detailed functions of the designed user are shown in the figure below. Users can view product information, collect products, comment on products, purchase products, and view orders with different statuses.
Figure 4.2 User function structure diagram
4.3Number setting design
Compared with non-relational databases, the most commonly used and easy-to-maintain databases on the market today are relational databases. This database is mainly based on the relational model to organize data information. That is the common two-dimensional table model. It can be said that the relationship between two-dimensional tables and two-dimensional tables constitutes a relational database.
4.3.1 number installationE-R 图
In order to better save the data generated by the Vue-based electronic mall, it is necessary to establish the E-R model during the design phase of the database and complete the creation of the table structure in the database. The main reasons why it is necessary to complete the database design separately are as follows:
The first point: prevent code redundancy;
Second point: Prevent occupying too much memory;
The third point: Improve the overall performance of the database to facilitate program development and data updates;
Point 4: Ensure data integrity;
This part of the content is mainly about establishing the E-R model of this system. It is necessary to collect data first, and then analyze the user needs according to the idea of database implementation. During this period, entities, attributes, and relationships need to be identified to prepare for drawing the E-R model. So well prepared. At the same time, when drawing, you should also pay attention to the drawing specifications and the correct use of each symbol.
Figure 4.8 E-R diagram of the relationship between entities
4.3.2 Number of tablesTableConclusion< /span>
In order to design a database with reasonable structure and excellent performance, three major paradigms need to be followed when designing the database:
First normal form: ensure that the field values represented by each column in the data table cannot be decomposed any longer;
Second normal form: On the basis of satisfying the first normal form, let each column in the data table be related to the primary key;
Third normal form: On the basis of satisfying the second normal form, ensure that each column of data is directly related to the primary key, not indirectly related.
As can be seen from the above description, these three paradigms are still differentiated in terms of levels. The lowest level is the first paradigm, the highest level is the third paradigm, and the one in the middle is the second paradigm. In short, database design according to these three paradigms can simplify the design process, reduce data redundancy, and improve data retrieval efficiency.
Table 4.1 Address information table
| Field |
type |
null |
default |
Comment |
| id (primary key) |
bigint(20) |
no |
primary key |
|
| addtime |
timestamp |
no |
CURRENT_TIMESTAMP |
creation time |
| userid |
bigint(20) |
no |
user id |
|
| address |
varchar(200) |
no |
address |
|
| name |
varchar(200) |
no |
Receiver |
|
| phone |
varchar(200) |
no |
Telephone |
|
| isdefault |
varchar(200) |
no |
Whether to default address [yes/no] |
Table 4.2 Shopping cart information table
| Field |
type |
null |
default |
Comment |
| id (primary key) |
bigint(20) |
no |
primary key |
|
| addtime |
timestamp |
no |
CURRENT_TIMESTAMP |
creation time |
| tablename |
varchar(200) |
yes |
shangpinxinxi |
Product table name |
| userid |
bigint(20) |
no |
user id |
|
| goodid |
bigint(20) |
no |
Product id |
|
| goodname |
varchar(200) |
yes |
NULL |
product name |
| picture |
varchar(200) |
yes |
NULL |
picture |
| buynumber |
int(11) |
no |
Purchase quantity |
|
| price |
float |
yes |
NULL |
unit price |
| discountprice |
float |
yes |
NULL |
member price |
Table 4.3 Customer service chat information table
| Field |
type |
null |
default |
Comment |
| id (primary key) |
bigint(20) |
no |
primary key |
|
| addtime |
timestamp |
no |
CURRENT_TIMESTAMP |
creation time |
| userid |
bigint(20) |
no |
user id |
|
| adminid |
bigint(20) |
yes |
NULL |
Administrator id |
| ask |
longtext |
yes |
NULL |
Ask a question |
| reply |
longtext |
yes |
NULL |
reply |
| isreply |
int(11) |
yes |
NULL |
Reply or not |
Table 4.4 Product review information table
| Field |
type |
null |
default |
Comment |
| id (primary key) |
bigint(20) |
no |
primary key |
|
| addtime |
timestamp |
no |
CURRENT_TIMESTAMP |
creation time |
| refid |
bigint(20) |
no |
Association table id |
|
| userid |
bigint(20) |
no |
user id |
|
| content |
longtext |
no |
comments |
|
| reply |
longtext |
yes |
NULL |
Reply content |
Table 4.5 Product information information table
| Field |
type |
null |
default |
Comment |
| id (primary key) |
bigint(20) |
no |
primary key |
|
| addtime |
timestamp |
no |
CURRENT_TIMESTAMP |
creation time |
| title |
varchar(200) |
no |
title |
|
| introduction |
longtext |
yes |
NULL |
Introduction |
| picture |
varchar(200) |
no |
picture |
|
| content |
longtext |
no |
content |
Table 4.6 Order information table
| Field |
type |
null |
default |
Comment |
| id (primary key) |
bigint(20) |
no |
primary key |
|
| addtime |
timestamp |
no |
CURRENT_TIMESTAMP |
creation time |
| warrants |
varchar(200) |
no |
order number |
|
| tablename |
varchar(200) |
yes |
shangpinxinxi |
Product table name |
| userid |
bigint(20) |
no |
user id |
|
| goodid |
bigint(20) |
no |
Product id |
|
| goodname |
varchar(200) |
yes |
NULL |
product name |
| picture |
varchar(200) |
yes |
NULL |
product picture |
| buynumber |
int(11) |
no |
Purchase quantity |
|
| price |
float |
no |
0 |
Price/Points |
| discountprice |
float |
yes |
0 |
discount price |
| total |
float |
no |
0 |
Total price/total points |
| discounttotal |
float |
yes |
0 |
Discounted total price |
| type |
int(11) |
yes |
1 |
Payment Types |
| status |
varchar(200) |
yes |
NULL |
state |
| address |
varchar(200) |
yes |
NULL |
address |
Table 4.7 Product shipment information table
| Field |
type |
null |
default |
Comment |
| id (primary key) |
bigint(20) |
no |
primary key |
|
| addtime |
timestamp |
no |
CURRENT_TIMESTAMP |
creation time |
| shangpinmingcheng |
varchar(200) |
yes |
NULL |
product name |
| shangpinfenlei |
varchar(200) |
yes |
NULL |
Categories |
| shuliang |
int(11) |
yes |
NULL |
quantity |
| dengjishijian |
date |
yes |
NULL |
check-in time |
| beizhu |
varchar(200) |
yes |
NULL |
Remark |
Table 4.8 Product classification information table
| Field |
type |
null |
default |
Comment |
| id (primary key) |
bigint(20) |
no |
primary key |
|
| addtime |
timestamp |
no |
CURRENT_TIMESTAMP |
creation time |
| shangpinfenlei |
varchar(200) |
no |
Categories |
Table 4.9 Product storage information table
| Field |
type |
null |
default |
Comment |
| id (primary key) |
bigint(20) |
no |
primary key |
|
| addtime |
timestamp |
no |
CURRENT_TIMESTAMP |
creation time |
| shangpinmingcheng |
varchar(200) |
yes |
NULL |
product name |
| shangpinfenlei |
varchar(200) |
yes |
NULL |
Categories |
| shuliang |
int(11) |
yes |
NULL |
quantity |
| dengjishijian |
date |
yes |
NULL |
check-in time |
| beizhu |
varchar(200) |
yes |
NULL |
Remark |
Table 4.10 Product information table
| Field |
type |
null |
default |
Comment |
| id (primary key) |
bigint(20) |
no |
primary key |
|
| addtime |
timestamp |
no |
CURRENT_TIMESTAMP |
creation time |
| shangpinmingcheng |
varchar(200) |
no |
product name |
|
| shangpinfenlei |
varchar(200) |
no |
Categories |
|
| tupian |
varchar(200) |
yes |
NULL |
picture |
| chima |
varchar(200) |
yes |
NULL |
Specification |
| yanshe |
varchar(200) |
yes |
NULL |
color |
| shangpinyongtu |
varchar(200) |
yes |
NULL |
Product use |
| zengsongduixiang |
varchar(200) |
yes |
NULL |
Gift object |
| shuliang |
int(11) |
yes |
NULL |
quantity |
| shangpinxiangqing |
longtext |
yes |
NULL |
product details |
| clicktime |
datetime |
yes |
NULL |
Last click time |
| clicknum |
int(11) |
yes |
0 |
The number of clicks |
| price |
float |
no |
price |
Table 4.11 Collection information table
| Field |
type |
null |
default |
Comment |
| id (primary key) |
bigint(20) |
no |
primary key |
|
| addtime |
timestamp |
no |
CURRENT_TIMESTAMP |
creation time |
| userid |
bigint(20) |
no |
user id |
|
| refid |
bigint(20) |
yes |
NULL |
Collection id |
| tablename |
varchar(200) |
yes |
NULL |
Table Name |
| name |
varchar(200) |
no |
collection name |
|
| picture |
varchar(200) |
no |
Collection pictures |
Table 4.12 Administrator information table
| Field |
type |
null |
default |
Comment |
| id (primary key) |
bigint(20) |
no |
primary key |
|
| username |
varchar(100) |
no |
username |
|
| password |
varchar(100) |
no |
password |
|
| role |
varchar(100) |
yes |
administrator |
Role |
| addtime |
timestamp |
no |
CURRENT_TIMESTAMP |
Add time |
Table 4.13 User information table
| Field |
type |
null |
default |
Comment |
| id (primary key) |
bigint(20) |
no |
primary key |
|
| addtime |
timestamp |
no |
CURRENT_TIMESTAMP |
creation time |
| yonghuming |
varchar(200) |
no |
username |
|
| mima |
varchar(200) |
no |
password |
|
| xingming |
varchar(200) |
yes |
NULL |
Name |
| xingbie |
varchar(200) |
yes |
NULL |
gender |
| touxiang |
varchar(200) |
yes |
NULL |
avatar |
| lianxidianhua |
varchar(200) |
yes |
NULL |
contact number |
| dizhi |
varchar(200) |
yes |
NULL |
address |
| money |
float |
yes |
0 |
balance |
5 system implementation
In this part, the final results of the previous design are mainly displayed through the operation renderings of the system functions. System implementation has high requirements on the technical ability of programmers, because they need to use programming to implement system design solutions.
5.1 Administrator function implementation
5.1.1 Product information management
The operating effect of product information management in administrator rights is shown in the figure below. The administrator can add, delete, modify and check product information on the current page, and can store or remove products from the warehouse. At the same time, the administrator can also view the comment information corresponding to each product.
Figure 5.1 Product information management page
5.1.2 Fleet management
The operation effect of user management in administrator rights is shown in the figure below. The administrator is responsible for adding, deleting, modifying, and checking user information in the background.
Figure 5.2 User management page
5.1.3 Product receipt management
管理员权限中的商品入库管理，其运行效果见下图。管理员对商品进行入库之后，其信息会显示在本页面，管理员就能修改，删除商品的入库信息。
图5.3 商品入库管理页面
5.1.4 商品出库管理
管理员权限中的商品出库管理，其运行效果见下图。管理员对商品的出库信息进行修改，删除，查询等操作。
图5.4 商品出库管理页面
5.1.5 已支付订单
管理员权限中的已支付订单管理，其运行效果见下图。用户购买并支付商品之后，管理员需要在当前页面对订单商品进行发货。
5.2 用户功能实现
5.2.1 商品信息
用户权限中的商品信息，其运行效果见下图。用户在本页面可以操作的功能比较多，可以收藏，评论本页面显示的商品，可以直接购买，也能暂时加入购物车保存商品。
图5.6 商品信息页面
5.2.2 购物车
用户权限中的购物车，其运行效果见下图。购物车帮助用户暂时保存购买的商品，方便用户一次性下单购买多种商品。
图5.7 购物车页面
5.2.3 提交订单
用户权限中的提交订单，其运行效果见下图。用户下单支付前，收货地址和购买的商品需要再次核对清楚，最后支付订单。
图5.8 提交订单页面
5.2.4 已支付订单
用户权限中的已支付订单，其运行效果见下图。用户对订单明细进行查看，可以选择对某些误购买的商品进行退款。
图5.9 已支付订单页面
5.2.5 联系客服
用户权限中的联系客服，其运行效果见下图。用户在操作基于Vue的电子商城过程中，遇到任何问题可以咨询客服，客服就负责回答用户咨询的问题。
图5.10 联系客服页面
6系统测试
这部分内容主要是把前期编码完成的系统，当成是计算机系统的一部分，并结合一些数据，计算机硬件和支持的软件进行集成测试和确认测试。之所以要进行最后的测试步骤，原因在于检查制作的系统与需求说明书的比较中，存在的差异问题。进一步确认制作的系统在功能与性能上跟需求说明书当中的要求相符。
6.1 系统测试的类型
检测系统是否合格，需要用到很多的测试类型。接下来就对这部分内容进行描述。
功能测试：这是系统测试中，首先进行的测试内容，其属于黑盒测试。主要检验制作的系统与需求说明文档的相符程度，还有它们之间存在的差异问题。
性能测试：主要测试制作的系统，在同时面对很多的用户请求时，该系统的应对能力。同时也是检查制作的系统跟事先预定的系统性能存在的差距问题。这样的方法通常在实时系统中，或者是嵌入式系统中运用得比较多。
容量测试：这种方法针对数据。检查正常运行的系统对数据处理的容量值。
安全性测试：这种方法常用于检验系统中设置的安全保护机制对来自非法用户的攻击时是否有效。而检测系统中的信息保护机制就需要使用常见安全测试中的保护测试来验证。
健壮性测试：这种测试还有一个别称是容错测试，通常运用故障插入法来检测系统的容错能力，看系统是否可以忽略故障保持继续运行，或者是检测系统应对故障时的自动恢复能力。
兼容性测试：面对计算机的各种软硬件环境，检测本系统是否可以兼容。
易用性测试：这种方法主要是面向用户，检测用户是否很容易理解和使用系统。
6.2 功能测试
基于Vue的电子商城在经历最后的测试环节，需要检验本系统的功能安全性，功能适用性等内容，最终得出测试结论。
表6.1 功能测试数据表
| 测试结果 |
|
| 符合要求 |
|
| 符合要求 |
|
| 符合要求 |
|
| 符合要求 |
|
| 符合要求 |
6.3 可用性测试
通常来说，一个布局合理，显示的内容无错别字，并具备合理正常的操作逻辑的系统往往很受欢迎，而且可以提升访问者的使用时间以及访问率。
表6.2 可用性测试数据表
| 测试内容 |
测试结果 |
| 合理 |
|
| 合理 |
|
| 能 |
|
| 无 |
|
| 检查系统功能有无友好性 |
有 |
| 能 |
|
| 无 |
|
| 检查系统有无提供帮助信息 |
有 |
6.4 测试结果分析
基于Vue的电子商城经过了编码阶段的单元测试，和最后的系统整体测试等测试后，对于用户要求的功能，本系统都进行了实现，各个模块都运行正常。在面对一些故障性问题时，本系统也有相应的应对办法，并且本系统可以保持24小时正常运转。因此，基于Vue的电子商城可以交付用户使用。
结 论
基于Vue的电子商城的开发设计并不是一件轻松事，因为毕设制作都是依照一定流程进行的。最开始是选择题目，然后通过各种方式查阅资料，以及对使用用户的需求进行调研，确定本系统的功能，为了降低系统编码的出错率，在设计阶段也需要下功夫，认真设计功能模块，使用大学所学的数据库知识，设计数据库。这样一来，对系统编码时，就会根据设计方案进行。编码完成，进行测试就能对合格的系统进行验收了。
借助身边同学还有导师提供的帮助，本人也顺利完成本系统的制作工作。对基于Vue的电子商城的分析与总结，发现基于Vue的电子商城具有如下特点：
（1）基于Vue的电子商城有着详细的功能设计，所以编码时，基本依照设计的功能进行开发，因此具备较完善的功能；
（2）基于Vue的电子商城在界面设计与布局时，参考了很多系统的界面设计风格，也从图书馆查阅了关于系统界面设计方面的资料，并把对本系统有用的知识做好笔记，有了这些知识积累，所以我在开发系统时，注重页面文字的排版，以及精确定位各页面元素，合理使用颜色搭配技巧，让本系统在不影响浏览效果的同时，让访问者产生一种简洁干净的视觉效果；
（3）基于Vue的电子商城为了让用户易于使用，在能够直观表达系统内容的同时，也把页面的导航放在了页面中最关键的位置，这个位置也是充分考虑了用户的浏览习惯。所以用户操作系统，可以在短时间内找到需要的内容。
由于本人并不是专门从事开发工作的技术人员，目前在校学习的开发类知识处于初级阶段，只是对开发类技术有着简单了解和使用，加上日常完成的作业，也只是局限在某个系统的某个功能模块上，因此，完成一个功能完善的整个系统，对于我来说，还是有一定的压力。所以这也确定了我开发的系统具有缺陷。
（1）对于基于Vue的电子商城的编码并没有完全依照编码规范，整个系统存在代码冗余的缺陷；
（2）基于Vue的电子商城在数据输入上，对数据有效性检测还不够严格；
（3）对基于Vue的电子商城的误操作提示，只是对部分功能进行了设计，还有很多功能都没有设计报错提示。
综上所述，本人仍需花费时间去学习编程知识，在后期，我将会学习代码模块化，将一些通用的函数，变量等进行单独设置，然后直接在需要的页面上进行调用，这样可以降低代码冗余率，同时也会多学习针对程序易出错地方的解决方案等知识。学习这些知识除了完善本系统之外，也是弥补自身编程能力不足的缺陷。
参考文献
[1]陈猛.基于Java的购物网站设计与开发[J].农家参谋,2020(08):200.
[2]焦灵.基于Web的购物网站系统设计[J].电脑编程技巧与维护,2018(12):131-133+139.
[3]袁馨,段华琼.购物网站的设计与实现[J].福建电脑,2018,34(10):148-149.
[4]王子虎,胡丽珍.基于计算机软件安全开发的Java编程语言研究[J].数字技术与应用,2019,37(12):133-134.
[5]谢懿.计算机软件Java编程特点及其技术分析[J].农家参谋,2020(01):166.
[6]欧阳桂秀.Java语言存取文本文件的研究[J].科技传播,2019,11(24):128-129+162.
[7]左兆丰.Java嵌入式数据库程序的开发[J].电脑编程技巧与维护,2020(01):101-103.
[8]黄守涛.基于Java语言的异常处理探讨分析[J].自动化技术与应用,2020,39(02):30-32+107.
[9]邹红霆.基于SSM框架的Web系统研究与应用[J].湖南理工学院学报(自然科学版),2017,30(01):39-43.
[10]汪维,胡帅.MySQL数据库有关数据的备份方法分析[J].信息技术与信息化,2020(07):36-37.
[11]丁佳.基于JSP+MySQL的用户登录系统SQL注入实例及防范[J].网络安全技术与应用,2020(09):49-51.
[12]廖家莉,曹俊.web前端主流框架分析与对比[J].科技视界,2020(28):121-122.
[13]蔡泽铭,王文华.基于Vue.js的信息管理系统前端架构[J].电子技术与软件工程,2020(18):142-144.
[14]耿庆阳. 基于Spring Boot与Vue的电子商城设计与实现[D].西安石油大学,2020.
[15]曾志明.网站开发技术的比较研究[J].电脑知识与技术,2015,6(05):1075-1078.
[16]卫红春.信息系统分析与设计[M].北京：清华大学出版社,2015.
[17]Oscar Rodriguez-Prieto,Francisco Ortin,Donna O’Shea. Efficient runtime aspect weaving for Java applications[J]. Information and Software Technology,2018,100.
[18]Raffi Khatchadourian. Automated refactoring of legacy Java software to enumerated types[J]. Automated Software Engineering,2017,24(4).
致 谢
伴随着毕设项目的制作完成，也就意味着我们即将离开校园。回想几年的大学时光，不由得想起身边常伴的同学，授课的老师，还有毕设指导的老师们。
大学这几年，身边的同学为我提供了很多的帮助，不管是生活上，还是学习上，每次遇到问题，这些同学们都会耐心解答，有时为了避免我再次犯错，他们也会时不时提醒我。本次毕设制作期间，这些老同学也是互相分享开发经验，还有文档编写的技巧，从开题报告，还有任务书以及最后的论文等文档上，大家都是互相提出建议，互相参考一些编写经验和技巧。如此，我们才会进展得比较顺利。此刻，真心感谢这些老同学！
唯一不能忘记的是导师，平均每个导师都带了很多个毕业生，所以能够想象他们非常忙，因为一到毕业季，他们需要指导学生们毕业，还需要正常授课。作为本届毕业生，我也能够体会导师的辛苦和不容易。毕设制作的环节有很多，但是我的导师在进行的每个环节都严格要求我认真努力对待本项目，也对我编程技术上提出了很多至关重要的建议，还对一些比较细微但是也比较关键的部分向我进行了多次强调，让我少走弯路，可以如期实现本系统。此刻，真心感谢导师！
校园里的授课老师不仅有本专业的老师，也有其他专业的老师们，他们都教过我们课程，向我们传授知识，有了这些知识积累，我在本次毕设制作中，才知道有些问题该如何运用知识处理，此刻，感谢那些授课老师。
最后时刻，我要感谢校园，祝愿校园更加强大！