论文总字数：30431字

摘 要

随着我国经济的不断发展，互联网新技术的普及，人们已习惯在网上购买所需的商品。与此同时，人们对自身健康也开始重视起来，与运动相关的商品消费规模随之增长，市场前景非常好。

本文重点阐述基于Vue技术的运动商城的系统的设计与实现,该系统基于B/S架构，前端使用Vue框架，包括Vue-cli4脚手架，Element-UI框架，Vue-Router路由，axios等一系列最新技术，后台采用MySQL数据库。本系统分为两个部分，一部分是后台管理系统，包括用户管理模块，权限管理模块，商品管理模块，订单管理模块以及拓展的数据统计模块，另一部分是移动端的商城系统，主要由首页，商品分类，商品详情，购物车等功能组成。本运动商城系统功能操作简单，用户界面友好，运行效果稳定，满足了用户在网上购买运动商品的需求。

关键词：运动商城；Vue；Web应用；Element-UI框架；Vue-cli4

Abstract

With the continuous development of China's economy and the explosive popularization of Internet technology, we have entered the Internet era, and people have become accustomed to buying the goods they need online. At the same time, people start to pay attention to their own health, the consumption of sports-related commodities has increased, and the market prospect is very good.

This article focuses on the design and implementation of a sports mall system based on Vue technology. The system is based on the B / S architecture, the front end uses the Vue framework, including Vue-cli4 scaffolding, Element-UI framework, Vue-Router routing, Axios and other latest technologies and the background uses the MySQL database. The system is divided into two parts. One part is the background management system, including user management module, authority management module, commodity management module, order management module and expanded data statistics module. The other part is the mobile terminal mall system, which is mainly composed of the homepage, commodity classification, Commodity details, shopping cart and other functions. The sports mall system features simple operation, friendly user interface, and stable running effect, which meets the needs of users to purchase sports goods online.

Key Words：Sports Mall; Vue; Web Application; Element-UI Framework;Vue-cli4

目 录

第1章 绪论 1

1.1 项目开发背景及意义 1

1.2 国内外研究现状分析 1

1.3 研究内容及相关技术介绍 2

1.3.1 研究的基本内容 2

1.3.2 系统关键技术介绍 2

1.4 本文组织结构安排 4

1.5 本章小结 5

第2章 系统需求分析 6

2.1 业务需求分析 6

2.2 功能性需求分析 6

2.2.1 用户管理 7

2.2.2 权限管理 7

2.2.3 商品管理 8

2.2.4 订单管理 9

2.3 非功能性需求分析 9

2.3.1 可靠性 9

2.3.2 安全性 9

2.3.3 易用性 10

2.3.4 可维护性 10

2.4 本章小结 10

第3章 系统总体设计 11

3.1 系统架构设计 11

3.2 功能模块设计 11

3.2.1 用户管理模块 12

3.2.2 权限管理模块 12

3.2.3 商品管理模块 13

3.2.4 订单管理模块 13

3.3 数据库设计 14

3.4 本章小结 18

第4章 系统详细设计与实现 19

4.1 登录模块 19

4.2 用户管理模块 21

4.3 权限管理模块 24

4.4 商品管理模块 27

4.5 订单管理模块 35

4.6 数据统计模块 36

4.7 商城分类模块 37

4.8 详情页模块 38

4.9 购物车模块 39

4.10 本章小结 40

第5章 系统测试 41

5.1 设计测试用例 41

5.2 本章小结 44

第6章 总结与反思 45

6.1 总结 45

6.2 反思 45

参考文献 46

致 谢 47

第1章 绪论

1.1 项目开发背景及意义

通过体育锻炼不仅可以提高自身免疫力，还能调节我们的心里健康，而合理的运动则需要体育器材和健康的饮食来支持。改革开放以来，人们的生活水平和质量随着经济的快速发展逐渐提高，但是由于忙于工作和学习，我们的身体素质却越来越差，人们也逐渐将目光放到了自身健康上面。自从2008年北京奥运会以来，我国就掀起了群众性体育锻炼的热潮，极大的刺激了体育运动器材行业的发展^[1]。随着越来越多的国内外知名运动品牌涌入运动商品市场，行业内部竞争压力越来越大，使得人们对运动商品的需求也随之增大，同时，这也反过来促进了体育用品市场的壮大。近几年来，电子商务的迅速发展带动了各行各业的转型，发展互联网业务。随着淘宝、京东、唯品会等购物商城的兴起以及迅速壮大，各式各样的商品被放在网上售卖，快递行业随之壮大，网上购物不仅种类非常丰富，而且通过铺向全国的快递网络，商品能够非常快速的到达用户的手上。因此人们逐渐习惯在网上购买商品。但是随着各种商城的发展与壮大，在售卖商品越来越丰富的同时，也带来了非常多的商品质量问题，用户常常因喜爱某个品牌的商品而在商城里购买，却因为无良商贩而买到假货，对用户造成了经济损失和情感损失。同时，我国人口基数大，互联网用户越来越多，这给予了专一性网站发展的机会。因此建立一个有质量保证，专业性强，商品种类齐全的网上运动商城是非常具有前景的，它不仅迎合了人们的健身需求，同时符合时代发展的潮流^[2]。

1.2 国内外研究现状分析

国外最出名的电子商务平台是亚马逊。亚马逊公司是全美最大的一家经营电子商务的公司，它在1995年创立，是全球最早开始经营电子商务的公司之一。它最开始只经营与书籍相关的业务，随着规模的扩大他的业务范围越来越大，种类逐渐非常丰富，有数百万种商品。亚马逊已成为全球贩卖商品品种最多的电子商务平台。

国内最出名的当属淘宝和京东了。淘宝网由阿里巴巴集团在2003年5月成立，目前，淘宝已经成为世界范围的电子商务交易平台之一。淘宝最开始是以C2C模式起家的，随着淘宝网规模的扩大以及使用淘宝的用户数量的增加，淘宝也从单一的C2C网络集市变成了包括C2C、团购、分销、拍卖等多种电子商务模式在内的综合性商圈^[3]。近些年，淘宝也开始打造B2C模式的天猫商城，并通过双十一、双十二的活动促进了商品的交易，吸引了大量商家以及消费者，成交额节节攀升。京东这个电子商务平台是典型的B2C模式，它刚成立的初期主要靠售卖数码产品为主，随着时间的发展，京东已经成为了一个综合性的电子商务平台，与淘宝分庭抗礼。

运动用品是购物商城里面非常重要的一类商品，但是以亚马逊、京东、淘宝为代表的大型电子商务平台仅仅将运动用品作为一个分支放在各自的平台上，一方面不利于运动好者快速找到自己需要的商品，另一方面没有专业的运动用品网站，消费者搜到的商品质量往往良莠不齐，买到假货的概率非常大，既损失了经济，又加深了用户对网站正品商品的不信任，对平台的发展非常不利。同时，我国人口基数大，互联网用户也在不断的增长，给予专一性网站发展的机会，同时，喜欢正版商品的体育爱好者也在不断的积累。因此建立一个专门针对运动用品的电子商务平台是非常具有发展前景的。

1.3 研究内容及相关技术介绍

1.3.1 研究的基本内容

深入研究了有关Vue相关的知识，认真学习了MVVM（即Model-View-ViewModel）架构的设计模式，他本质是MVC架构的改进版，可以帮助我们将视图UI和业务逻辑分开。

设计并实现了运动商城系统，本运动商城系统以JavaScript语言为开发基础，基于目前最流行的前端开发框架之一的Vue来设计整个系统的体系结构。通过对运动商城进行需求分析来思考怎么建立一个信息化、规范化，具有良好的适应性和推广性的平台。本系统采用了B/S架构，运用了Vue，MySQL，axios，element-ui，Vue-cli4等最新的互联网技术。

请支付后下载全文，论文总字数：30431字