基于Vue的鞋服商城系统设计与实现
摘要 身处互联网+时代，互联网无形中影响着人们的吃穿住行，人们享受着不出门便可购物的便利，网络购物在当今社会工作生活节奏飞快的今天备受欢迎，让人们购物不再受时间、地点的制约，高效快速。
本次要开发的鞋服商城系统是基于当下互联网+时代而开发的一个专门的网络售卖鞋子衣服的一个平台，让人们在快节奏的生活工作环境下，可以享受不出门便可购买鞋子衣服、坐等送货上门的服务。该项目主要由前台和后台两大部分而构成，这两部分的使用人群是不同的，前台是广大需要购买鞋子衣服的用户所使用的，后台是商家和程序管理员所使用的，用户在前台能够进行浏览商品、注册登录、对意向商品加入购物车、支付购买等一系列活动；商家在后台能够进行商城管理，添加新的鞋子衣服商品和对用户的订单信息进行配送处理；管理员在后台能够进行管理用户、管理商品、管理商品类别、管理前台用户的订单等操作，该项目的应用，可以让商家跟随时代发展的步伐，不被淘汰，增强商家的竞争力。
本次开发项目的设计采用Web网页交互的方法，利用MySQL来作为数据存储库，前端基于Vue框架，后台采用Node.js等技术实现，给用户带来到一种全新的购买鞋子衣服的体验，享受足不出户送货上门的服务。
关键词 Vue；Node.js；鞋服商城；MySQL
Design and Implementation of Vue Based Shoe and Clothing Mall System
Abstract In the era of Internet plus, the Internet has an invisible impact on people's food, clothing, housing and transportation. People enjoy the convenience of shopping without going out. Online shopping is very popular in today's fast pace of work and life, so that people are no longer restricted by time and place to shop efficiently and quickly.
The shoes and clothing mall system developed this time is a special platform for online sales of shoes and clothes based on the current Internet plus era, so that people can enjoy the services of buying shoes and clothes without going out and waiting for delivery to their homes in a fast-paced living and working environment. This project mainly consists of two parts: the front-end and back-end. The target audience for these two parts is different. The front-end is used by a large number of users who need to purchase shoes and clothes, while the back-end is used by merchants and program administrators. Users can browse products, register and log in, add intended products to shopping carts, pay and purchase a series of activities on the front-end; Merchants can manage the mall in the backend, add new shoes and clothing products, and process the delivery of user order information; Administrators can perform operations such as managing users, managing products, managing product categories, and managing orders for front-end users in the backend. The application of this project can enable businesses to keep up with the pace of the times, not be eliminated, and enhance their competitiveness.
The design of this development project adopts the method of web page interaction, using MySQL as the data storage repository. The front-end is based on Vue framework, and the back-end is implemented using technologies such as Node.js, providing users with a brand new experience of buying shoes and clothes, and enjoying door-to-door delivery services without leaving their homes.
Key words Vue; Node.js; Shoe and Clothing Mall; MySQL
目录
1 绪论
1.1 研究背景
自从计算机出现以来，给社会经济方面带来了很大的影响，不仅仅加快了社会经济的发展，而且让整个社会都在悄无声息的发生着变化，尤其是在互联网的诞生、普及以后，更是让人们的衣食住行都和它密不可分，人们越来越享受互联网所带来的便利生活，也越来越离不开它。
互联网+这一商业模式的推出，让传统实体店销售购物的模式备受冲击，虽然目前也存在很多的实体商家固守传统模式，不引入新型销售模式，在当下社会销售量日趋下降，最终被淘汰。这可见互联网+商业模式的强大，也侧面反映出人们对网络购物模式的热衷，现在绝大多数商家，在坚守实体店的基础下，也开始了网络销售体系，甚至很多商家没有实体店面，直接实现网上销售，节约店面费用、人员工资，这样费用降低了，商品则薄利多销，商品的价格可以做到比实体价格更低，这也是人们喜欢、热衷网络购物的原因之一，再者网络购物方式，可以不用考虑时间、地点的问题，人们在忙碌工作了一天之后，不用再托着疲惫的身体到处逛街、选购物品，只要通过网络便可以选购物品，而且还能买到当地没有的东西，非常方便，让人们从选购、支付、收货都无需出门，可以享受专人派送服务，这也充分体现了网络独特的优势，无可替代。
本项目搭建的鞋服商城系统，是针对商家销售鞋子衣服、用户购买鞋子衣服而设计开发的一款专门的鞋服商城，是一个有针对性的电子商务平台，让用户在选购鞋子衣服时更加的方便、快速，也让商家的销量可以增加，提高商家的竞争力。
1.2研究意义
以往人们购买鞋子衣服的时候都是去实体店来选购，实体店营业时间固定，人们需要在营业时间去实体店来选购，有局限性，这种模式伴随着互联网+模式的出现，已经越来越不被大家所喜爱，人们现在更喜欢网络来购买鞋子衣服。
本项目鞋服商城系统便是根据广大用户网络购买鞋子衣服的需求而开发出的一个专业的、专门的B2C模式的鞋子衣服在线交易管理平台，和人们日常所接触的淘宝、拼多多、京东等差不多，人们只需利用网络来打开该程序，便可以一览商品信息，还能够根据商品类别来筛选，可以更快速的定位到自己需要的商品，支付过后，静待几天后便可收到购买的商品，尽情享受送上门的服务。而对于商家来说，商家充分利用电商模式来开辟一个全新的鞋子衣服在线交易途径，来拓展客户群，提高营业额，促进商家发展，提高竞争力。
因此，研究和开发一个高效、安全、用户友好的鞋服商城系统具有重要意义。通过采用Node.js等现代化的开发框架和技术，可以实现系统的快速开发和部署，并提供稳定可靠的功能。同时，结合电子商务的最佳实践和用户需求，设计一个符合用户期望的界面和功能，提高用户的购物体验和满意度。
1.3研究现状
随着信息技术的快速发展，互联网的普及，让人们的生活发生了翻天覆地的变化，其中影响人们最深的便是互联网购物，以前人们购物，都是亲自到商场和超市来选购，在众多商品中一一挑选，挑选结束后到收银台交钱结算，然后再拎着大包小包的商品回家，但是，随着互联网+模式的出现，人们购物不再仅仅依附于去实体店来购买，还可以在家，利用电脑或者手机来进入专门的购物商城来选购自己需要的商品，在购物商城可以通过商品的类别或者商品的名称来快速的筛选出符合自己需求的商品，然后可以在线来支付，支付后只需要在家耐心等待几天，便会由快递员送货上门，不用自己大包小包的领回家，这种网购模式在当下社会工作节奏飞快的今天，已经成为了年轻人购物的首选，备受欢迎。
现在电子商务网购模式已经非常普遍，也支撑着社会经济的发展，电商平台有B2B模式（商家和商家之间的）、B2C模式（商家和用户之间的）、C2C模式（用户和用户之间的），在这三种电商模式中，人们日常生活中使用的最多的便是B2C这一电商模式，在众多B2C模式的电商平台里面，最为常见的有淘宝、京东、拼多多等，而且近几年新出现的抖音平台，从短视频的发布、分享，也渐渐的融入了电商的功能，直播带货现在也非常火热，让人们能够更直观的看到商品，也非常受人们的喜欢，一个个成功电商平台的出现，也正说明了人们对电商平台的需求，电子商务还有很大的发展空间，有待进一步的突破。
1.4论文结构安排
本鞋服商城系统一共分为六个章节进行介绍，章节内容安排如下：
第一章：引言。第一章主要介绍了鞋服商城系统课题研究的背景，鞋服商城系统的现状和本文的研究内容与主要工作。
第二章：系统需求分析。第二章主要从系统的用户、功能等方面进行需求分析。
第三章：系统设计。第三章主要对系统框架、系统功能模块、数据库进行功能设计。
第四章：系统实现。第四章主要介绍了系统框架搭建、系统界面的实现。
第五章：系统测试。第五章主要对系统的部分界面进行测试并对主要功能进行测试
第六章：总结。
2 鞋服商城系统需求分析
系统需求分析是系统开发的一个关键环节，它在系统的设计和实现上起到了一个承上启下的位置。系统需求分析是对所需要做的系统进行一个需求的挖掘，如果分析的准确可以精准的解决现实中碰到的问题。如果分析不到位会影响后期系统的实现。一个系统的优秀程度需求分析也是占据了非常大的比例，如果需求分析不到位，后面的系统设计要实现就是一个偏离导航的设计。
2.1 可行性分析
系统可行行分析是对系统对系统可行性进行一个探讨。在探讨系统的可行性上我们主要从技术上的可行性和经济上的可行性以及操作层面的可行性上进行分析，如果三个层面度通过，我们则认为系统是比较可行的。
2.1.1 技术可行性分析
鞋服商城系统设计与实现是一个基于Web的交易、管理平台，我们在实现这个系统所采用的技术方案是基于Vue，采用的是Node.js框架以及MySQL数据库，在大学的学习中这两门课程都已经学过，而且自己也用这些技术开发过小的项目，在平时的课程设计以及作业也经常用到Node.js和Vue，在技术上实现自己的自主开发是可行的。
2.1.2 经济可行性分析
开发本鞋服商城系统的技术都是可以从网上直接免费下载，不用花一分钱，而且系统的源代码都是自己进行设计开发的，不需要成本，如果后期想要进行运营，只要把配置到服务器上，花费服务器的租赁费用，在使用中可以进行增加广告收益，因此在经济方面是可性的。
2.1.3 操作可行性分析
当下网络新时代，计算机已经得到了普及，多数人对计算机都比较的熟悉，知道如何使用它，当然也存在对计算机比较陌生的这一群体，也需要对其进行考虑。在进行鞋服商城系统页面的设计的时候，考虑到使用人群，可能也存在对计算机比较陌生的人，所以，在页面的设计方面，设计的很是简单、简洁，布局明了，色调明朗，让无论是对计算机陌生还是对计算机熟悉的使用者，都可以使用自如，这也说明了该程序的操作方面非常可行。
2.2需求分析
本鞋服商城系统的设计主要是针对三种用户进行使用，第一种是以游客身份使用，游客在进入系统后可以查看到系统中的所有内容，包括首页、通知公告、新闻资讯、商品信息，如果想要评论或者购买、意见反馈，可以注册登录；第二种是注册之后有账号的用户，登录以后可以收藏、评论、购买、管理收货地址、订单、个人资料等；第三种则是管理员，是系统的管理者，管理员对系统中的系统用户、标签信息管理、系统管理、通知公告管理、资源管理、商品信息、分类列表、订单列表、订单配送进行整体把控。
2.3 功能需求分析
（1）注册登录模块：注册是游客独有的功能，注册后就成了系统的普通用户了，然后普通用户通过前台登录，管理员用户通过后台登录。注册登录模块用例如下图2-1所示。
图2-1 注册登录模块用例图
（2）新闻资讯模块：游客可以查看新闻资讯，用户可以收藏、评论、点赞新闻资讯信息，管理员可以添加、修改、删除新闻资讯，管理评论。新闻资讯模块用例如下图2-2所示。
图2-2 新闻资讯模块用例图
（3）商品信息模块：游客可以查看商品信息，用户可以对商城中的商品收藏、评论、加购、立即购买，管理员可以添加、修改、删除商品，管理商品评论。商品信息模块如下图2-3所示。
图2-3 商品信息模块用例图
（4）用户管理模块：用户管理是后台管理员独有功能，管理员可以对注册的用户进行修改、删除、查询、也可以添加新的用户。用户管理模块用例如下图2-4所示。
图2-4用户管理模块用例图
（5）购物管理模块：购物管理是前台用户独有功能，用户可以选择两种购买方式，一种是把商品加入到购物车，另一种是直接购买，最终实现购物功能，购物管理模块用例如下图2-5所示。
图2-5购物管理模块用例图
（6）订单管理模块：订单管理模块是前台用户和管理员都有的功能，前台用户可以提交订单，管理订单，管理员能够对用户订单进行管控。订单管理模块用例如下图2-6所示。
图2-6订单管理模块用例图
（7）个人中心模块：个人中心模块是用户独有的功能，可以在“我的账户”管理个人资料，密码修改，也可以在“个人中心”对订单配送和收藏的信息进行管理，用例如下图2-7所示。
图2-7个人中心模块用例图
2.4 非功能性需求分析
系统的非功能需求方面主要是从系统的安全性、存储性、可靠性、易学性、稳定性等方面进行分析：
（1）安全性：系统的安全问题是开发者首先要考虑的，如果系统存在安全隐患，可能使得用户个人信息被泄露，给用户带来困扰，造成损失。
（2）储存性：因为用户使用的关于鞋子衣服在线销售的网站，普通用户多，而且登录后要查询各种鞋子衣服信息，那就需要一个强大的数据库来进行数据的存储，对数据库的要求是非常严格的，本系统选用的是MySQL数据库，MySQL的运行速度很快，执行命令的速度也非常快，而且体积小。
（3）可靠性：可靠性指的是用户在进行鞋子衣服信息查询、评论以及购买的时候，能够按照用户的指示进行显示信息，如果用户点击查询鞋子衣服详细信息，显示出来的是不可购买的信息，那就违背用户的初衷。
（4）易学性：系统的开发面向对象学历不尽相同，所有在开发的时候要考虑系统操作应该简单，不需要进行任何学习、培训，只能上网的用户就可以操作。
（5）稳定性：系统在运行方面要很稳定，系统的界面、字体要清楚，没有失真现象，给用户以良好的体验。
（6）可拓展性：本鞋服商城系统的功能还有待完善，因此系统要有很好的拓展性，方便后期功能更新维护。
2.6系统角色用例分析
2.6.1系统前端界面
鞋服商城系统的前端主要是对系统信息的查看、收藏、评论以及对商品的购买，购买的过程中需要对收货地址进行设置，对购物车进行管理，查看自己的订单。前台普通用户用例图如图2-8所示。
图2-8 鞋服商城系统前台普通用户用例图
在系统前台中主要实现的是对鞋服商城系统中信息的浏览，用户对信息收藏、评论以及在商品信息中对商品购买几个功能。
（1）新闻资讯功能，主要实现了是对新闻资讯的查看，用户进行评论、收藏、点赞，用例说明如下表所示：
表2-1 新闻资讯用例说明
| 用例名称 |
新闻资讯 |
| 角色 |
用户 |
| 用例说明 |
对新闻资讯评论 |
| 前置条件 |
用户登录到系统当中 |
| 后置条件 |
用户发表评论 |
| 基本事件流 |
1.进入系统登录界面 2.点击新闻资讯，选择某条新闻资讯查看详情 3.输入评论内容 4.点击提交按钮，发表评论 |
| 扩展流程 |
3a.用户没有登录成功 |
| 异常事件流 |
3a.输入评论内容为空 |
| 其他 |
无 |
（2）鞋子衣服商品购买功能，本功能是系统的主要功能，主要是实现在线购买功能，用例说明如下标所示：
表2-2 商品信息用例说明
| 用例名称 |
商品购买 |
| 角色 |
用户 |
| 用例说明 |
对商品加入购物车购买或者立即购买 |
| 前置条件 |
用户登录到系统当中 |
| 后置条件 |
对商品加入购物车购买或者立即购买 |
| 基本事件流 |
1.进入系统登录界面 2.点击商品信息，选择某条商品信息查看详情 3.加入购物车或者立即购买 4.输入订单信息提交订单 |
| 扩展流程 |
3a.现在支付方式 |
| 异常事件流 |
3a.用户没有登录 |
| 其他 |
无 |
2.6.2系统后端界面
用户不能进入后台，管理员进入以后可以对系统用户、标签信息管理、系统管理、通知公告管理、资源管理、商品信息、分类列表、订单列表、订单配送进行管理。
后台管理员用例图如图2-9所示。
图2-9 鞋服商城系统后台管理员用户用例图
后台管理员主要实现了是对系统用户、标签信息管理、系统管理、通知公告管理、资源管理、商品信息、分类列表、订单列表、订单配送的增删改查操作。后台的用例说明如下表所示：
表2-3 后台管理用例说明
| 用例名称 |
后台管理 |
| 角色 |
管理员 |
| 用例说明 |
对前端显示的信息进行管理 |
| 前置条件 |
管理员登录进入后台管理页面 |
| 后置条件 |
无 |
| 基本事件流 |
1.管理员登录进入后台管理界面 2.点击左侧选择相应功能板块 3.选择所要操作的数据 4.点击选择的内容进行增加/删除/修改/查找 5.点击立即保存按钮 |
| 扩展流程 |
无 |
| 异常事件流 |
无 |
| 其他 |
无 |
2.7 系统流程分析
2.7.1数据流程
鞋服商城系统主要的目的就是实现对鞋子衣服的在线购买交易，图2-11就是系统的数据流图。
图2-11鞋服商城购买操作展开图
2.7.2业务流程
分析完鞋服商城系统的数据流，接下来我们来看系统的业务流程，图2-12就是业务流程图：
图2-12业务流程图
3 鞋服商城系统概要设计
3.1系统功能结构设计
系统在结构上的设计至关重要，要考虑周全，设计全面，一个完善的结构体系，能够满足用户在使用时的各种需求，这样会让提高程序的使用率，保证程序被长久的利用。在设计鞋服商城系统的结构时，也列入重点，采用模块化的方法来进行设计，即首先将大模块确定下来，再慢慢的将大模块进行补充完善，向下分支出小模块，一起共同组成的系统的结构体系，下图是该鞋服商城系统的结构设计图，直观明了的可以看出本项目程序的功能。
鞋服商城系统功能结构图如图3-1所示。
图3-1 鞋服商城系统功能结构图
3.2系统数据库设计
数据库设计一般包括需求分析、概念模型设计、数据库表建立三大过程，其中需求分析前面章节已经阐述，概念模型设计有概念模型和逻辑结构设计两部分。
3.2.1数据库概念结构设计
在数据库概念模型设计的时候，一般都采用E-R实体图进行展示，在实体图中可以展示出数据库表中的所有字段名称。下面是整个基于Vue的鞋服商城系统的设计与实现中主要的数据库表总E-R实体关系图。
图3-2 系统总E-R关系图
3.2.2数据库逻辑结构设计
在数据库表中我们会看到系统的表名、主键、外键等信息，我们通过数据库表的主键、外键把每个表关联起来，然后在界面中展示，本鞋服商城系统的主要的数据库表如下：
| 编号 |
名称 |
数据类型 |
长度 |
小数位 |
允许空值 |
主键 |
默认值 |
说明 |
| 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.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
