基于Vue的在线购物系统的设计与实现(论文+源码)

这篇具有很好参考价值的文章主要介绍了基于Vue的在线购物系统的设计与实现(论文+源码)_kaic。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目录
摘要
一、绪论
（一）选题背景意义
（二）国内外研究现状
1.国内研究现状
2.国外研究现状
（三）研究内容
二、系统相关技术
（一）Vue.js框架
（二）Mysql数据库
（三）JavaScript技术
三、系统分析与设计
（一）系统性能分析
1.可靠性
2.易用性
3.安全性
（二）系统功能设计
1.登录注册
2.商品模块
3.订单支付模块
4.购物车模块
5.个人中心模块
（三）数据库设计
四、系统功能实现
（一）首页界面
（二）商品详情
（三）购物车
（四）订单支付
（五）个人中心
五、系统测试
（一）测试方法
（二）功能测试用例
（三）安全测试
（四）可用性测试
（五）测试结论
六、总结与展望
（一）总结
（二）展望
参考文献
摘要

近年来，随着网络购物的兴起和普及，针对该市场需求开发一款在线购物系统是大势所趋。和实体店对比，在线购物系统商品种类齐全，价格优惠、还能够送货上门等优势。在此类系统中，用户能够在网上购物，可以随意挑选挑选物美价廉的商品不仅方便而且快捷，并保证线上线下共同受益，促进了经济市场的蓬勃发展。
首先，对系统可靠性、易用性以及安全性进行了分析，接着对5个功能模块流程进行详细的分析；其次，对系统功能实现内容和开发过程仔细介绍，随后，详细阐述了数据库设计内容。系统采用了Vue.js作为前端主流开发技术，JavaScript语言，数据库为MySQL，完成了登录注册模块、商品详情模块设计、订单支付模块设计、个人中心模块设计以及购物车模块，并将每个模块的页面详细设计组件和调用的函数、方法加以阐述。
本系统主要完成了购物系统前台基本功能登录、注册、加购物车、支付、个人中心等基本功能，作为购物网站还存在一些不足之处，如个性化推荐在本系统中没有实现，以及后台管理功能模块尚未实现，在未来将会继续完善。

关键词：购物系统；Vue.js；MySql数据库

一、绪论
（一）选题背景意义
随着互联网技术的不断发展，人们生活水平的不断提高，在此背景下，人们消费水平不断提高，我国零售业得到了快速发展，线下商场存在门面的租赁费，导致商品价格高，商品过多，人们购买商品需要消耗大量的时间去购买，再者商品性价比不高，且种类不够丰富。再加上互联网的兴趣，传统零售业已经无法满足人们的需要，进而开发一个在线购物系统，解决这些问题。据统计，截止2019年，中国网民达到了7.65个亿，淘宝、唯品会、京东以及拼多多均在抢占市场，其营业额是有目共睹的。在线购物方便了人们，节省了时间，再加上商品琳琅满目，通过在线购买还能够免费退换货，物流速度的提升，使得线上商品当日达，给我人们生活带来了极大的便利，通过2019年双十一的活动来看，淘宝作为在线购物APP是取得了成功。由此充分说明了，线下购物和互联网相互结合，进一步发挥了电子商务的功能。
本文通过观察分析淘宝、京东、唯品会以及拼多多等多个平台，采用Vue.js技术和Mysql数据库以及JavaScript技术开发一款在线购物系统，为人们的生活购物服务，进一步促进我国电子商务的发展，从开发的过程中，掌握软件工程的思想，并能够根据开发经验，提出有意义的建议。
（二）国内外研究现状
1.国内研究现状
阿里巴巴在我国的零售业中属于佼佼者，平台商品种类多，商品齐全，相继发展了天猫超市，并选择了不同方位的布局，不断探索着行业的发展道路。苏宁在我国也是一个具有代表性的零售企业，最近几年，苏宁易购的发展处于高速增长阶段；京东也是我国电商的一个重要组成模块，其最大的优势在于专门的物流，消费者通过京东购物，可以享受到服务到家的购物体验。
关于购物网站的前端技术研究中，最早时期运用的技术有ASP技术和JSP技术、JavaScript技术。随着技术的不断发展，先利用Ajax实现异步通信的功能，随后jQuery技术的出现解决了浏览器兼容问题。Javascript技术的广泛应用，促使前端技术和后端技术分离，利用Restful技术实现了数据交互。前端技术的不断发展，出现了分层架构；现阶段深受开发人员喜爱的前端技术有Vuejs、Reactjs 和Angularjs，天猫超市则放弃了PHP语言，利用Nodejs技术作为前端设计主要技术，京东使用React作为前端架构。
2.国外研究现状
美国的零售业发展时间长，起源在1995年，亚马逊开始了零售业的发展。美国零售业的发展手段新颖多变，从移动端购物和虚拟试衣间一路推广，不断促进了零售业的经济发展。沃尔玛购物方式主要是客户从网上购买商品，货物配送从线下调用发送给消费者，实体店商品根据用户的需要而配送。梅西百货利用移动端服务用户，让用户从线上预定商品，随后送货到客户家里。自2010年，线上线下和移动资源得到了整合，实现了商品存货的最优安排。
亚马逊占据美国市场份额最高的零售业，在美国零售业行业地位不可撼动，和网上零售业相比，国外的零售行业市场竞争也很激烈。关于零售网站的前台技术采用PHP语言和perl语言，后台使用的是Java语言、Go语言以及Python语言。
（三）研究内容
本文介绍了在线购物系统的设计与开发过程，系统前端采用Vuejs框架，服务器使用Nodejs平台，文章内容主要有系统可靠性、易用性以及安全性的分析，五个功能模块的设计计、数据库设计以及实现应用的类的描述等。具体的论文章节结构如表1所示：
表1.1 论文结构
章节号章节名章节内容
第一章绪论
第二章系统相关技术介绍了在线购物系统开发应用的技术。
第三章系统分析与设计系统的部分功能需求分析过程、功能图设计过程和数据库设计过程。
第四章系统功能实现主要介绍了系统首页界面设计、商品详情、购物车设计、订单支付模块、个人中心模块。
第五章系统测试本章主要从测试的方法以及测试用例、安全测试、可用性测试几个方面展开了详细的阐述。
第六章总结与展望总结论文写作和系统开发中遇到的问题，并对系统未来发展方向进行展望。

二、系统相关技术
（一）Vue.js框架
Vue.js框架近年来收到极为广泛的应用，其表示了整体设计和构件两者之间的联系，明确了系统的体系结构以及系统执行流程。这是一个可以被复用或者设计的框架。框架设计中最重要的部分就是之间的交互方式以及控制流模式。Vue.js框架的基础就是MVVM设计模式在建立用户界面时的一种网络架构。开发模式遵循自下向上的方式，其核心依然围绕着数据驱动和组件化。数据响应和绑定依赖于API，并十分依赖数据绑定系统。Vue.js框架优点在于比较灵活和轻便，广受开发人员的喜爱。
（二）Mysql数据库
MySql数据库其功能齐全，且运行简单，能够联系行连接到各种数据库，完成数据库的对接。从DTS开发工具来看，增加了开发软件人员和数据库管理员管理的灵活性和便捷程度，使用非常方便；而数据库里的报表服务能够对数据进行安全管理，增强了数据分析和挖掘的能力。
小型网站一般选择MySql数据库，其具有极佳的扩展性，以及良好的性能；MySql数据库运作特点是多线程，一般情况下，网站调用资源时利用数据库可以直接、快捷的将这些资源调用出来，尤其是，数据处理的速度十分快捷，连接数据库的方式有多种类型，包括TCP/IP、ODBC和JDBC三种方式；由此可见，MySql数据库广泛的被小型系统选择采用，数据量小的系统。因此，本系统开发选择Mysql数据库。
（三）JavaScript技术
引擎V8和Node.js框架的不断发展，JavaScript在服务器程序的开发中应用十分广泛，其具有5个特性，简单介绍如下。
（1）脚本语言。JavaScript作为脚本语言，能够解释，在运行中，被解释，这方面优于C、C++等编程语言。
（2）面向对象。JavaScript能够应用和创建对象。
（3）简单。JavaScript语言中语法的变量类型属于是弱类型,数据类型的要求宽松，其是以Java基本语句和控制的脚本语言为基础,语法简单易掌握。
（4）动态性。JavaScript利用事件驱动的语言，对用户的操作能够快速直接的作出响应，对一个网页进行访问时，通过点击鼠标即可对事件作出响应。
（5）跨平台性。JavaScript脚本语言主要在浏览器上运行的，对于操作系统没有要求,仅需要浏只要浏览器支持Javascript脚本语言，就可以被任意使用。
三、系统分析与设计
（一）系统性能分析
1.可靠性
系统可靠性原则重点是系统的操作稳定，不会出现卡顿、黑白屏现象，用户点击数量过多时，响应速度仍能处于正常的状态，代码编程规范，保证功能具备严密的逻辑性，不会出现较大的bug。
2.易用性
购物系统的对象是用户，那么易用性原则站在用户角度上，更加重视用户的使用感。网站系统体验良好可以给企业创造极大的价值。本系统的易用性原则体现在视觉效果和性能两个方面。
第一，视觉设计
系统界面的设计色彩要协调，观感舒适，布局清晰简洁，充分考量用户的使用习惯，页面重点有所突出，引领用户消费。
第二，高性能
除了在视觉方面满足用户，系统在操作过程中的性能表现也是一个重要的部分。系统的性能是影响用户体验感的一个重要因素，点击页面后响应的速度以及请求次数等对用户体验感十分重要。
3.安全性
购物系统安全性，主要包括系统中注册用户信息安全性、支付安全性以及交易性详情信息的安全性，其中，购物系统一个重要模块就是支付，这一块涉及到用户的财产安全，因此，系统安全性是十分重要的。再者，系统中涉及用户的手机号、姓名等私密信息，要充分保证这些信息重要性，防止用户的这些信息都是和泄漏。最后，保证交易的安全性，包括交易数据的安全性和完整，以及系统出现卡顿后，数据能够得到备份，不丢失。
（二）系统功能设计
通过对系统的分析和划分，本文系统功能模块图主要包括四大模块，系统结构图如图1所示。
（1）登录注册：注册部分是对用户一个授权，通过注册信息获得账号密码，即可登录系统，保证用户名不重复，尚未注册的用户即可注册，且登录和密码是两个模块的验证，只有均被验证通过，才可进入系统。
（2）商品模块：用户可以浏览商品、搜索商品、收藏商品、评价商品，能够查看商品的所有信息。
（3）订单支付模块：用户在订单支付模块，能够查询和删除个人订单，也可以根据关键词搜索订单信息，并有支付和取消订单两个部分。
（4）购物车模块：用户可以添加商品购物车，在购物车能够删除、修改商品，并能够选中商品进行结算。
（5）个人中心模块：用户还能分别查看“所有订单”、“待付款”、“待发货”、“待收货”和“待评价”五个类别中的订单，对未付款的订单进行支付，对未收货的订单进行“确认收货”处理。