基于vue的惠家购物商城app的设计与实现

基于vue的惠家购物商城app的设计与实现摘要：21世纪进入了互联网的时代，是信息化的时代，随着互联网技术发展和普及,无处不在的网络时刻影响着我们的生活，为了人们在快节奏的生活中，能够更加方便和快捷进行购物，网上商城随之诞生。由于几乎每个人手中都有一部或几部智能手机，这为我们解决传统购物方式成为了可能。采用MVVM的开发模式，开发一个移动端购物商城app具有非常重要的意义。JavaScript语言将被作为购物商城app的开发语言，开发工具使用的是VSCode；用当前流行的Vue框架来搭建项目，采用基于node.js平台上的express后端框架来搭建简单的服务器，而数据库采用的是分布式文件存储的MongoDB数据库，使用Axios.js技术来实现前后端的数据交互，以及VantUI组件和Swiper组件等来完成项目的设计与开发，实现了用户注册、用户登录、商品展示、商品搜索、购买商品、收藏商品、管理收货地址等功能。基于vue的惠家购物商城项目的实现将会多一个购物商城app，对用户来说，可以不需要踏出门口便能买到自己所需的物品，能够有效的节省用户时间，让用户更好的安排和利用自己的时间；对于商家来说，经营成本能够大幅的节省，经营的规模页不用受到场地的限制，销售范围变广，利益有巨大的提高，对商家的经营带来巨大影响。关键词：商城；网上购物；电子商务

DesignandimplementationofHuijiashoppingmallappbasedonVueAbstract：The21stcenturyhasenteredtheeraoftheInternet,istheeraofinformationtechnology,withthedevelopmentandpopularizationofInternettechnology,theubiquitousnetworkalwaysaffectsourlife,inordertopeopleinthefast-pacedlife,canbemoreconvenientandfastshopping,onlineshoppingmallisborn.Sincealmosteveryonehasoneorseveralsmartphonesintheirhands,itispossibleforustosolvetheproblemoftraditionalshopping.ItisveryimportanttodevelopamobileshoppingmallappwithMVVMdevelopmentmode.JavaScriptlanguagewillbeusedasthedevelopmentlanguageofshoppingmallapp,andvscodeisusedasthedevelopmenttool;thecurrentpopularVueframeworkisusedtobuildtheproject,andtheexpressback-endframeworkbasedonnode.jsplatformisusedtobuildasimpleserver,whilethedatabaseusesmongodbdatabaseofdistributedfilestorage,axios.jstechnologyisusedtorealizethedatainteractionbetweenthefrontandbackends,andVantUIcomponentandSwipercomponentareusedtocompletethedesignanddevelopmentoftheproject,andrealizethefunctionsofuserregistration,userlogin,commoditydisplay,commoditysearch,purchaseofcommodities,collectionofcommodities,managementofreceivingaddress,etc.TherealizationofHuijiashoppingmallprojectbasedonVuewillhaveonemoreshoppingmallapp.Forusers,theycanbuywhattheyneedwithoutsteppingoutofthedoor,whichcaneffectivelysaveusers'timeandmakeusersbetterarrangeandusetheirtime.Forbusinesses,theoperatingcostcanbegreatlysaved,andtheoperatingscalepageisnotlimitedbythesite,thescopeofsaleshasbecomewider,theinterestshavebeengreatlyimproved,andthebusinessoperationhasbeengreatlyaffected.Keywords:ShoppingMall;Onlineshopping;ElectronicCommerce。目录第1章绪论 第1章绪论1.1系统的开发背景及意义简单来说，电子商务就是在\t"/item/%E7%94%B5%E5%AD%90%E5%95%86%E5%8A%A1/_blank"互联网上以\t"/item/%E7%94%B5%E5%AD%90%E5%95%86%E5%8A%A1/_blank"电子交易的方式进行交易活动和相关服务的活动。电子商务时代的到来，让人们能够在网上转账交易，让交易更加方便。无处不在的网络时刻影响着我们的生活，改变了我们的学习方式，生活方式，娱乐方式等方方面面，人们也意识到基于互联网技术的电子商务重要性，它对国家，社会和个人生活等方面都带来了巨大的影响。电子商务是以电脑为主要页面；移动电子商务是通过智能\t"/item/%E7%A7%BB%E5%8A%A8%E7%94%B5%E5%AD%90%E5%95%86%E5%8A%A1/_blank"手机、平板为主要页面，是无线的电子商务。因为用户不可能随时随地带着一台联网的电脑，所以人们平时上网的主要工具是使用智能手机，正是智能手机用户的巨大市场需求量吸引了京东，淘宝等电子商务企业，纷纷进军到移动电子商务的行列中，这样更加促进了移动电子商务的发展。对于智能手机用户来说，人们每天和手机在一起的时间和使用手机的时间超过了平板，电脑等任何设备。智能手机用户比PC端有更大的优势，如手机比电脑小，可以随身携带，可以随时上网查看信息，比PC端更为方便快捷。在信息化的大环境下，手机移动端购物商城的开发非常符合了人们追求便携舒适的购物要求，因此，手机移动端购物商城的开发是非常有必要。手机移动端购物商城的这种网上购物方式，突破了传统的上街购物方式，这对消费者、商家和市场都造成了巨大的影响。对用户来说，可以不用踏出门口便能够选择购买自己喜欢的物品，如喜欢的食品，喜欢的手机，喜欢的电脑等等，有效的节省用户的时间，让用户能更好的利用自己的时间；对于商家来说，经营成本变低了，经营规模也不用受到场地的限制，销售范围广，可以遍布全国，对商家的成本有了大幅的节省，对商家利益也有巨大的提高，为每个商家的经营方式带来非同的影响。1.2国内外研究现状虽然不同国家的政治、经济、文化等方面的基本情况有所不同，但是各个国家的政府机构都很重视并积极地发展移动电子商务，因此移动电子商务得到了充分的发展。跨入到21世纪，由于互联网技术和手机普及率提高，现在几乎每个人都能够拥有一部智能手机，人们能够通过移动互联网进行网上交易。在欧洲、美国、日本等比较发达的国家和地区，在移动电子商务的发展上一直都是处于国际领先地位，在网络上开商店的发展速度迅猛，世界超一流的零售商，如沃尔玛、亚马逊、家乐福、乐购等零售商大佬都纷纷加入网络经商的行列。在国内，网上商城起步相对于发达国家来说比较晚，但是发展速度非常迅速，获得的成果也远超国外。国内著名的网上商城有京东商城、淘宝网、拼多多、当当网、拍拍网、小米之家、华为商城等都加入到移动电子商务，这无疑都证明了移动电子商务拥有非常大发展优势和发展潜能。1.3研究的目的当今社会，随着互联网的普及，互联网已经遍布全国，乃至全球，网上购物已经成为一种常态，网上购物已经成为了普遍的购物方式。基于vue的移动购物商城，用户不需要被限制在电脑端才能登录商城进行购物，用户可以通过智能手机，能够进行登录商城，也能够进行对商品的浏览，查询，购买等功能，同时用户也不需要特意找时间去上网查询商品，用户只需要拥有一台智能手机，就能够随时随地的购买增加所喜爱和所需要的商品，这样不仅节省了用户的时间，更打破了空间的限制，用户可以随时随地使用智能手机或平板来购物。总之，网上购物商城是大势所趋，是根据社会发展应运而生的，随着生活节奏的日益加快，对于用户来说时间就是金钱，网上购物能够为忙碌的人们节省时间。网上购物商城恰好为忙碌的人们节约了去线下商城购物的时间，让人们能够不必去逛大街就可以进行购物，让人们过足不出户就可以买尽天下物，让人们能够不用出去逛街也能够进行购物，同时，用户也能够通过移动端购物商城，在第一时间获取线下商城相关的优惠活动，让有空闲时间的用户可以跟好友出去逛街。网上购物商城使得购物这件事变得更加方便，更加快捷，更加人性化了。1.4系统开发相关技术概述基于vue的惠家购物商城app的设计与实现采用的Javascript编程语言，前端部分是选用当前比较流行的、轻量级的Vue.js框架和Vant和Swiper等前端组件来搭建的，采用的开发模式是MVVM，通过MVVM架构来实现数据与视图的分离,客户端的开发工具采用的是VisualStudioCode，服务端采用基于node.js和express框架来搭建简单的服务器；数据库采用的是MongoDB，前后端的数据交互采用Axios.js技术来实现，开发环境是8GB的win10x64操作系统。以下主要针对其中的几个比较重要的前端开发技术进行详细介绍。1.4.1Vue.js的介绍Vue是基于MVVM模型实现的一套用于构建用户页面框架。一方面，Vue框架让开发人员只需要关注视图层即可，这样方便开发的项目和第三方库或已有的项目进行整合；另一方面，Vue还支持各种类库结合来使用,给相对复杂的单页应用程序提供驱动。Vue.js的显著特性有:轻量级的框架、双向数据绑定、组件化、指令系统。1.4.2MVVM开发模式的介绍MVVM是模型-视图-视图模型的简写，英文翻译为Model-View-ViewModel，主要作用是将其中的视图层和模型层分开。视图(View)是展示给用户观看的内容，它与ViewModel的数据是双向绑定，也就是ViewModel提供的数据能够插入View中；模型(Model)指的是后台传递过来给View的数据，视图模型(ViewModel)是MVVM模式的核心部分，是实现连接View和Model相互通讯的桥梁。MVVM开发模式的核心是数据绑定：当数据发生变化时，ViewModel能够实时监听到数据发生变化，然后告诉与之相对应的视图数据发生了变化，视图就会自动进行更新，当用户操作视图时，ViewModel也能够实时监听到视图发生的变化，然后告诉模型数据发生了变化，模型里的数据就会方式改变，这样就成功实现了数据的双向绑定。1.4.3MongoDB的介绍MongoDB是一个由C++语言编写的开源数据库，是分布式文件存储的数据库。它的出现是为了解决高性能数据存储的问题。MongoDB主要优点有：在程序高负荷运行时，能够为程序添加更多节点来确保服务器保持高性能；支持对数据建立索引；支持强大的查询，能够与关系型数据库一样，实现单表查询的大部分功能；1.4.4Axios的介绍Axios是一个基于promise的易用、简洁且高效的HTTP库。它具备如下优点：同样的API能够流畅运用在浏览器和Node.js中，且能够无压力的在平台之间进行切换；支持ES6语法中Promise来管理异步；能够支持拦截器等多种配置；封装了Ajax技术，写法更加简洁等。

系统需求分析2.1可行性分析2.1.1经济可行性基于vue的惠家购物商城app的设计与实现从整个系统的设计到开发都由本人自己完成，在开发的过程使用的开发工具VSCode是免费的，数据库使用的是免费开源的MongoDB，实现零经费。2.1.2技术可行性本人在校期间已修完所有在校课程，已经具备开发项目的基本技术。开发项目仅需要一台计算机，对计算机的配置要求不高，个人电脑能够满足开发项目的要求。对于软件技术也要求不高，会使用简单的ps技术对图形图像进行制作，有HTML+CSS+JS基础，会运用Node.js，Axios.js,MongoDB等技术即可。2.1.3操作可行性基于vue的惠家购物商城app的设计与实现拥有简明的页面UI、简单操作的方式，只要用户可以使用过网上购物商城或对网上购物商城有所了解，都能够行云流水地操作惠家购物商城。由此可见，操作方式和操作过程不会受到限制。2.2系统的业务需求分析以下是对惠家购物商城app的业务需求分析。用户在打开App之后有三个模块：首页、分类，购物车和我的。初始时选中是首页，首页显示是商品信息，点击商品，跳转到与之相对应的商品详情页面，该页面会显示相对应商品的详细信息，点击添加购物车按钮实现添加商品进购物车操作，点击购物车按钮，跳转到购物车页面，在此页面有加减号用来增加和减少商品数量，有删除按钮可以删除商品，有全选按钮可以全选商品；点击结算时，如果用户已经进行过登录，则能够进行下一步的结算功能操作，否则会先跳转到登录页面，让用户先进行登录操作。点击底部导航栏的分类按钮，进入分类页面，在分类页面中商品按照不同种类划分，如手机数码，家用电器，男装，女装等；点击商品可以进行购物操作。点击底部导航栏的购物车按钮，进入购物车页面，在购物车页面中能够查看添加进购物车的所有商品，用户可以增加或减少商品数量，删除商品，全选商品等操作。点击底部导航栏的我的按钮，进入个人中心页面，用户能够查看收货地址，查看订单信息，查看我的收藏，并且能够管理用户的收货地址等操作。惠家购物商城app的业务流程图如图2.1所示。图2.1惠家购物商城app的业务流程图2.3系统功能的需求分析惠家购物商城主要分为前端和后端两大模块：在前端模块中主要包括：首页，分类，购物车，个人中心；而在后端模块中主要包括：登录注册、商品管理。惠家购物商城功能模块图如图2.2。图2.2惠家购物商城功能模块图首页：是展示商品第一个页面。主要用于商品的展示，商品的介绍，广告的展示，商品的推荐，搜索栏，以及导航栏(首页，分类，购物车，个人中心)，一个简洁，美观的使用能够吸引用户。分类页面：是商品的分类展示部分。用户可以可以根据自己商品的类型来快速寻找商品，能够帮助用户快速定位自己所需的商品。购物车页面：用户可以添加商品到购物车。用户在挑选商品时，对商品的信息进行查看对比，觉得满意后可以添加商品进购物车，主要方便用户对添加进购物车的商品进行整理，如删除商品，添加商品，增加商品数量，减少商品数量，全选商品，以及计算勾选商品的总价格等操作。个人中心：是登录者的详细信息。是用户的用户名，昵称，地址管理，商品收藏，用户积分，优惠券，推荐，设置等重要信息集中地，用户可以查看商品收藏，收货地址等信息，方便用户查看资料，财产余额等信息。搜索页面：用于商品的搜索，用户可以输入框输入商品的名字进行搜索操作。商品详情页：提供给用户详细的商品信息，主要是在用户选择商品时，了解商品。用户通过图文信息，商品介绍，商品价格，用户购买建议等详情介绍来了解商品详情。收藏夹：是用来收藏商品。用来收藏自己心怡的商品，用户能够在个人中心页面中的商品收藏中查看自己收藏的商品。收货地址：是用来管理我的收货地址。用户能够管理收货地址，能够对收货地址进行增删改操作。2.4UML系统建模2.4.1用例图用例模型的基本组成部分有用例、角色（或参与者）和系统。用户业务如图2.3基于vue的惠家购物商城app用例图所示。图2.3基于vue的惠家购物商城app用例图所示2.4.2用例图规约表表2-1登录注册用例规约表用例编号2-1用例名称登录注册功能描述当游客注册或登录之后，身份变为用户。执行者游客前置条件惠家购物商城app正常运行。后置条件如果是游客，游客身份变为用户。涉众利益游客登录注册之后，可以进行下单、管理收货地址和修改个人信息等操作。基本路径游客：1.如果用户未注册，选择注册；2.把注册信息按规则填写；3.注册成功并转为用户身份；4.如果用户已注册，则输入登录信息；5.角色变为用户并成功进入系统。扩展无字段列表用户：1.账号2.密码3.联系电话；业务规则无备注无表2-2下单用例规约表用例编号2-2用例名称下单功能描述在用户进入某店铺，下单之后可以确认订单。执行者用户前置条件登录到惠家购物商城app。后置条件下单成功。涉众利益用户购买商品。基本路径进入某家店铺；把商品加入购物车；确认订单；支付。扩展无字段列表1.商品编号；2.商品名称；3.商品说明；4.收货人；5.联系电话；6.收货地址；7.运费；8.价格。业务规则需要用户身份才能下单。备注无表2-3收货地址管理用例规约表用例编号2-3用例名称收货地址管理功能描述用户可以查看收货地址、新增收货地址、修改收货地址和删除收货地址。执行者用户前置条件登录惠家购物商城app。后置条件能对收货地址进行增删查改操作。涉众利益用户可以对地址进行查看、新增、修改和删除。基本路径查看收货地址删除收货地址2.1选择新增收货地址；2.2把正确的地址信息录入；2.3提交地址信息；修改收货地址；点击某条地址信息的编辑图标；编辑需要修改的地址信息；提交修改；删除收货地址；点击某条地址信息的编辑图标；点击删除图标；确认删除某条地址信息。扩展无字段列表1.用户编号；2.收货人姓名；3.联系电话；4.详细地址;业务规则无备注无表2-4购物车用例规约表用例编号2-4用例名称个人信息管理功能描述用户可以查看添加进购物车的商品、增加商品数量，减少商品数量和删除商品。执行者用户前置条件惠家购物商城app正常运行。后置条件能对购物车里的商品进行增删查操作。涉众利益用户可以对购物车里的商品进行查看、新增、删除。基本路径查看购物车里的商品；增加商品数量；2.1点击数量右边的”+“；减少商品数量;3.1点击数量右边的”-“;删除商品;4.1点击某条商品信息右下角的删除按钮；全选商品；5.1点击左边的勾选按钮；扩展无字段列表1.商品编号;2.商品名称;3.商品说明;4.商品价格;5.商品数量;6店铺名称;业务规则无备注无2.5本章小结本章首先对惠家购物商城app各方面的可行性进行了分析；接下来对惠家购物商城app的业务需求进行分析，并且用业务流程图展示；之后通过功能模块图展示了前端和后端的功能需求，以及对非功能性需求进行简单明了的说明；最后，为了更加直截了当向用户展示惠家购物商城app的功能，给出了用例图并对各个用例用表格进行简单明了的说明。系统设计3.1系统功能设计登录注册功能：在主页面(首页)中有登录组件，点击登录按钮后跳转到登录注册页面，输入有效账号和密码登进行登录，如果账号和密码正确，则进入个人中心页面；如果此前用户从没注册过账号，可以在登录页面中，点击手机号注册按钮，跳转到注册页面，注册使用用户名和密码，如果注册失败，弹出注册失败信息，如果注册成功，则会自动跳转到登录页面。添加商品到购物车功能：用户进入app之后，在首页中便可以浏览商品，点击商品之后，将跳转到与之相对应的商品详情页，此时，用户可以点击添加购物车按钮来选择想购买的物品，点击购物车按钮，跳转到购物车页面并显示已添加进购物车的所有商品，用户可以进行删除商品，增加和减少商品数量，全选商品操作，点击结算按钮，如果用户还未进行登录的话，将会先跳转到登录注册页面，如果用户没有账号，则可以进行注册操作；如果用户已登录，则进入到确认订单页面，点击在线支付按钮，跳转到收银台页面，支付后跳转到我的订单页面。收货地址功能：在我的页面(个人中心页面)中有收货地址，用户点击收货地址管理按钮，跳转到我的收货地址页面。在我的收货地址页面，如果没有收货地址，则显示空，如果有收货地址，则会显示用户所有的收货地址。在收货地址页面的底部有新增地址按钮，用户点击新增地址按钮时，会跳转到新增收货地址页面，此时，用户可以进行增加新的收货地址操作。在我的收货地址页面，每个收货地址列表项的右边有一个编辑按钮，用户点击编辑按钮时，会跳转到修改和删除收货地址页面，点击修改按钮，则进行修改该条收货地址操作，点击删除按钮，则进行删除该条收货地址操作。收藏商品功能：点击商品，会跳转到与之相对应的商品详情页面，在价格右边有一个收藏按钮，点击收藏按钮，可以实现收藏商品的操作，再一次点击收藏按钮时，则会取消收藏商品，用户可以在个人中心的商品收藏中查看自己收藏的商品。查看订单功能：在我的页面中有全部订单按钮，点击按钮，则会进入我的订单页面，如果有订单，则会展示所有订单，如果没有订单，则显示空。3.2系统顺序图1.用户注册顺序图，如图3.1所示。eq\o\ac(○,1)用户点击注册按钮，进入注册页面；eq\o\ac(○,2)显示注册页面给用户；eq\o\ac(○,3)用户在注册界面中填写注册信息；eq\o\ac(○,4)用户点击提交按钮；eq\o\ac(○,5)信息错误，则在注册页面会提示注册失败；eq\o\ac(○,6)重新填写注册信息；eq\o\ac(○,7)信息正确，则在注册页面会提示注册成功；eq\o\ac(○,8)注册成功，进入到登录页面。图3.1注册顺序图用户登录顺序图，如图3.2所示。eq\o\ac(○,1)用户点击登录按钮，进入登录页面；eq\o\ac(○,2)显示登录页面给用户；eq\o\ac(○,3)用户在登录界面中填写登录信息；eq\o\ac(○,4)用户点击提交按钮；eq\o\ac(○,5)如果信息错误，则在登录页面会提示登录失败；eq\o\ac(○,6)重新填写登录信息；eq\o\ac(○,7)如果信息正确，则在登录页面会提示登录成功；eq\o\ac(○,8)登录成功，进入到个人中心页面。图3.2登录顺序图用户购物顺序图，如图3.3所示。eq\o\ac(○,1)用户点击商品，进入商品详情页面；eq\o\ac(○,2)显示商品详情页面给用户；eq\o\ac(○,3)用户点击加入购物车按钮；eq\o\ac(○,4)用户在购物车页面点击结算按钮；eq\o\ac(○,5)判断用户是否登录；eq\o\ac(○,6)如果用户已经登录成功，则结算成功；eq\o\ac(○,7)如果用户未登录，则跳转到登录页面。图3.3购物顺序图用户添加收货地址顺序图，如图3.4所示。eq\o\ac(○,1)用户在个人中心页面点击我的收货地址，进入我的收货地址界面并点击添加地址按钮；eq\o\ac(○,2)用户填写收货地址信息；eq\o\ac(○,3)用户点击提交按钮；eq\o\ac(○,4)如果信息错误，则显示添加失败；eq\o\ac(○,5)重新填写信息提交；eq\o\ac(○,6)如果信息正确，则显示添加成功。图3.4添加地址顺序图用户修改收货地址顺序图，如图3.5所示。eq\o\ac(○,1)用户在个人中心页面点击我的收货地址，进入我的收货地址界面并点击修改地址按钮；eq\o\ac(○,2)用户填写收货地址信息；eq\o\ac(○,3)用户点击提交按钮；eq\o\ac(○,4)如果信息错误，则显示修改失败；eq\o\ac(○,5)重新填写信息提交；eq\o\ac(○,6)如果信息正确，则显示修改成功。图3.5修改地址顺序图用户删除收货地址顺序图，如图3.6所示。eq\o\ac(○,1)用户在个人中心页面点击我的收货地址，进入我的收货地址界面并点击编辑按钮；eq\o\ac(○,2)显示收货地址页面给用户；eq\o\ac(○,3)用户点击删除按钮；eq\o\ac(○,4)删除成功，跳转并显示收货地址页面给用户。图3.6删除地址顺序图用户收藏商品顺序图，如图3.7所示。eq\o\ac(○,1)用户点击商品，进入商品详情页面；eq\o\ac(○,2)显示商品详情页面给用户；eq\o\ac(○,3)用户点击收藏按钮；eq\o\ac(○,4)显示收藏商品成功；eq\o\ac(○,5)用户再一次点击收藏按钮；eq\o\ac(○,6)显示取消收藏商品。 图3.7收藏商品顺序图3.3系统活动图1.收货地址管理活动图用户进入我的收货地址页面，用户点击底部的新增收货地址按钮，跳转到添加收货地址页面，用户填写并提交地址信息实现添加地址功能；点击某条地址信息右边的编辑按钮，进入编辑该条地址信息的页面，用户填写并提交地址信息之后便可以更新地址信息，点击删除按钮，则删除该条地址信息，则如图3.8收货地址管理活动图所示。图3.8收货地址管理活动图2.购物活动图用户进入商品详情页面，点击加入购物车按钮，实现添加商品进购物车功能，点击购物车按钮，跳转到购物车页面，点击结算按钮时，如果用户已经登录了，则结算成功，如果用户还未进行登录，则结算失败，则如图3.9购物活动图所示。图3.9购物活动图3.4数据库设计一个完整的购物商城app必须有一个良好的数据库支持作为数据来源，基于vue的惠家购物商城app所采用的是分布式文件存储的数据库MongoDB，以下是对用户信息表、商品分类表、商品详情表、购物车表、商品为你推荐表、商品秒杀表的设计。users(用户信息表),表的详细数据见下表3-1用户信息表：表3-1用户信息表列名数据类型是否为空主外键描述_idObjectIdNotnull主键用户idusernameStringNotnull用户名passwordvarchar(10)Notnull用户登录密码iphonevarchar(256)Notnull用户头像wntjarr(商品为你推荐表)，表的详细的数据见下表3-2商品为你推荐表：表3-2商品为你推荐表列名数据类型是否为空主外键描述_idObjectIdNotnull主键商品idm1StringNotnull商品名称m2StringNotnull商品价格imgStringNotnull商品图片msarrs（商品秒杀表），表的详细数据见下表3-3商品秒杀表：表3-3商品秒杀表列名数据类型是否为空主外键描述_idObjectIdNotnull主键商品idm1StringNotnull商品名称m2StringNotnull商品价格imgStringNotnull商品图片flarrs（商品分类表），表的详细数据见表3-4商品分类表：表3-4商品分类表列名数据类型是否为空主外键描述_idObjectIdNotnull主键商品idm1StringNotnull商品名称imgStringNotnull商品图片ajaxgoodslists（商品详情表），表的详细数据见下表3-5商品详情表：表3-5商品详情表列名数据类型是否为空主外键描述_idObjectIdNotnull主键商品idtitleStringNotnull商品名称title1StringNotnull商品说明priceInt32Notnull商品价格expressStringNotnull运费remainInt32Notnull商品剩余数量thumbArrayNotnull商品图片shopnameStringNotnull店铺名称goods（购物车表），表达详细数据见下表3-6购物车表：表3-6购物车表列名数据类型是否为空主外键描述_idObjectIdNotnull主键商品idtitleStringNotnull商品名称descStringNotnull商品说明priceInt32Notnull商品价格numStringNotnull商品数量thumbArrayNotnull商品图片shopnameStringNotnull店铺名称3.5本章小结本章首先对惠家购物商城app的前端和后端进行了系统功能的详细设计，然后画出了惠家购物商城app的顺序图、和部分的活动图，更加直观地展示了惠家购物商城app的各个功能；接下来是对惠家购物商城app的数据库进行设计。

系统实现4.1惠家购物商城页面实现4.1.1基本页面1.用户第一次进入惠家购物商城app之后向右滑动依次可以看到4张引导页，点击立即体验按钮进入到首页。如图4.1引导页所示。图4.1引导页2.如果用户不是第一次进入惠家购物商城app之后会看到广告页，等待5秒或点击跳过按钮进入首页。如图4.2广告页所示。图4.2广告页3.用户进入惠家购物商城app之后，映入眼帘的是首页，包括了搜索框，轮播图，滑块等。如图4.3首页所示。图4.3首页4.用户点击分类按钮，跳转到分类页面，如图4.4分类页面所示。图4.4分类页面5.用户点击购物车按钮，跳转到购物车页面，如图4.5购物车页面所示。 图4.5购物车页面6.用户点击我的按钮，跳转到用户个人中心页面，如图4.6个人中心页面所示。图4.6个人中心页面4.1.2功能页面1.用户点击登录按钮，跳转到登录注册页面，页面上包含了两个文本框：用户名和密码，用户输入账号和密码后，点击登录按钮进行登陆操作；当用户单击注册按钮后，将跳转到用户注册页面，如图4.7登录注册页面所示。图4.7登录注册页面图4.8是用户注册实现的页面，页面上包含的是用户注册时需要填写的基本信息，如：用户名、密码、确认密码和手机号，点击注册按钮，将进行注册操作；如果用户注册成功，将跳转到登陆注册页面进行登录，如果用户注册失败，则不会跳转页面，同时会提示错误信息。图4.8注册页面点击商品时，会跳转到与之相对应的商品详情页面，点击添加购物车按钮，商品会添加进购物车，点击购物车按钮，跳转到购物车页面；点击数字旁边的加号时，可以增加商品数量，点击减号可以减少商品数量，点击删除按钮可以删除商品，点击全选按钮可以全部勾选商品，如图4.9商品详情页、图4.10全选商品页面和图4.11删除商品页面所示。图4.9商品详情页图4.10全选商品页面 图4.11删除商品页面点击结算按钮的时候，如果用户还未进行过登录，会先跳转到登录注册页面，如果用户已经登录，则会跳转到确认订单页面，点击在线支付按钮，跳转到收银台页面，点击支付完成订单按钮，跳转到我的订单页面。如图4.12确认订单页面，图4.13收银台页面，图4.14我的订单页面所示。图4.12确认订单页面图4.13收银台页面图4.14我的订单页面在已经登录的个人中心页面，如图4.15个人中心页面所示，点击我的收货地址管理，跳转到我的收货地址页面，用户可以对我的收货地址进行增删改操作。如图4.16我的收货地址页面和图4.17新增收货地址页面所示。图4.15个人中心页面图4.16我的收货地址页面图4.17新增收货地址页面点击商品时，会跳转到与之相对应的商品详情页面，点击收藏按钮，可以对商品进行收藏，再一次点击收藏按钮，能够取消对该商品的收藏，在个人中心页面，点击商品收藏，跳转到我的收藏页面，用户可以查看收藏的商品。如图4.18我的收藏所示。图4.18我的收藏页面4.2本章小结本章主要是对惠家购物商城app的设计进行实现，给出各个功能APP页面的截图以展现系统实现的效果，实现的效果图有引导页，广告页，首页，分类页面，购物车页面，个人中心页面，商品详情页，确认订单页面，收货地址页面，商品收藏页面。系统测试5.1系统测试的目的和意义测试的目的就是发现软件的错误或漏洞。如今的软件的质量参差不齐，所以为了检查软件的质量，系统测试是一个不可或缺的阶段。系统测试可以找出系统中难以发现的错误或漏洞，有利于提高惠家购物商城的软件质量，提升用户的体验。5.2测试用例及结果由于系统的测试用例比较多，本小节只给出了系统的部分测试用例以及相应的测试结果来说明系统测试的情况，系统测试的部分用例如下表5-1所示：表5-1系统单元测试的部分用例用例编号用例名称测试目的测试结果1Test1测试用户注册功能能否实现用户能够成功注册2Test2测试用户登录功能能否实现用户能够成功登录3Test3测试是否只有在登录状态下才能结算订单用户只有在登录状态下才能结算订单4Test4测试用户注册成功后是否跳转到正确的页面用户注册成功后跳转到正确的页面5Test5测试用户登录成功后是否跳转到正确的页面用户登录成功后跳转到正确的页面6Test6测试用户能否实现添加收货地址能添加收货地址7Test7测试用户能否实现修改收货地址能修改收货地址8Test8测试用户能否实现删除收货地址能删除收货地址9Test9测试结算时总价格是否正确结算时价格正确10Test10测试在购物车页面未勾选商品时是否计算进总价格未勾选商品不记入总价格，勾选商品才记入总价格11Test11测试使用搜索框功能能否找到数据正常5.3本章小结本章首先阐述了系统测试的目的以及意义，之后给出了测试用例，证明了基于vue的惠家购物商城app的大部分功能是没有问题的。结束语6.1全文总结通过这几个月不懈的努力，基于vue的惠家购物商城app的设计与实现到这里基本结束了。首先阐述了购物商城app中应用的开发背景、意义、目的和相关技术，其次对购物商城app进行了需求分析，然后对购物商城app进行了功能模块设计以及数据库设计，最后在系统的实现部分，重点给出了用户登陆模块、用户注册模块、购物车模块和地址管理模块的实现流程和实现页面。基于vue的惠家购物商城app的设计与实现是对自己综合能力的一次考验，由于时间和自身技术等方面的原因，在设计中有很多不足的地方，各个功能模块的设计也很片面，所以只能将问题进行简单化处理。但是让我从中学到了很多有用知识，尤其是关于前端方面的知识，让我对前端的基础和前端的知识体系进行了整理，让我建立了完整的知识体系，这能够给我以后的工作提供帮助。6.2课题展望基于vue的惠家购物商城app的设计与实现虽然完成了，但是由于时间和自身能力有限，还有很多功能未能实现，例如:第三方支付来实现支付功能，推送功能、弹出式广告等功能。而且由于缺少美术细胞，所以整个网站的页面不尽如人意，实现的页面可能有点简单，后期会优化页面。最后，如果以后有机会将会加上微后台管理平台和订单管理等功能。参考文献：王珊，李盛恩.数据库基础与应用[M].北京:人民邮电出版社,2008.张耀春.Vue.js权威指南[M].电子工业出版社,2016.陈栋.WEB页面的移动终端适配技术研究[D].北京邮电大学,2012.朴灵.深入浅出Node.js[M].人民邮电出版社,2013.张琳.浅析HTML5+CSS3在网页设计中的新特性及优势[J].西安文理学院学报(自然科学版)，2017.阮一峰.ES6标准入门(第三版)[M].电子工业出版社,2017.刘翔宇.基于Vue的数据可视化系统的设计与实现[D].北京邮电大学，2018.朱二华.基于Vue.js的Web前端应用研究[J].科技与创新，2017.彭玲玲,李诗莹,冯爽.基于前端的Web性能优化[J].电子技术与软件工程，2017.(英)奥尔波.Node.js入门经典[M].人民邮电出版,2013.(美)弗兰纳根著.JavaScript权威指南[M].机械工业出版社,2012.ShariLavrencePfleeger.SoftwareEngineering[M].高等教育社,2003.ChristineHofmeister.AppliedSoftwareArchitecture[M].电子工业出版社,2003.

马赫.DreamweaverMX2004网页设计经典108例[M]．中国青年出版社，2005.权晓红，杨景涛.基于WEB的实验室设备管理系统的设计与实现[J].甘肃科技，2007.LiknessJ.Model-view-viewmodel(mvvm)explained[J].CodeProject,2010.致谢写到这里，惠家购物商城app的设计与实现已经接近尾声了，一个系统的设计与实现不单单是自己一个人能够完成的，由于经验的匮乏和知识面的不完善，难免有许多考虑不周全和不完善的地方，有很多地方需要他人的帮助，如指导老师、在校时的其他任课老师和同学等，非常感谢他们在我做毕业设计期间给我有形和无形的帮助。最后，感谢广州大学松田学院为我们提供舒适的生活环境和学习的平台。

电脑故障检测卡代码表

1、特殊代码"00"和"ff"及其它起始码有三种情况出现：

①已由一系列其它代码之后再出现："00"或"ff"，则主板ok。

②如果将cmos中设置无错误，则不严重的故障不会影响bios自检的继续，而最终出现"00"或"ff"。

③一开机就出现"00"或"ff"或其它起始代码并且不变化则为主板没有运行起来。

2、本表是按代码值从小到大排序，卡中出码顺序不定。

3、未定义的代码表中未列出。

4、对于不同bios（常用ami、award、phoenix）用同一代码代表的意义不同，因此应弄清您所检测的电脑是属于哪一种类型的bios，您可查阅您的电脑使用手册，或从主板上的bios芯片上直接查看，也可以在启动屏幕时直接看到。

5、有少数主板的pci槽只有一部分代码出现，但isa槽有完整自检代码输出。且目前已发现有极个别原装机主板的isa槽无代码输出，而pci槽则有完整代码输出，故建议您在查看代码不成功时，将本双槽卡换到另一种插槽试一下。另外，同一块主板的不同pci槽，有的槽有完整代码送出，如dell810主板只有靠近cpu的一个pci槽有完整代码显示，一直变化到"00"或"ff"，而其它pci槽走到"38"后则不继续变化。

6、复位信号所需时间isa与pci不一定同步，故有可能isa开始出代码，但pci的复位灯还不熄，故pci代码停要起始代码上。

代码对照表

00.已显示系统的配置；即将控制INI19引导装入。

01处理器测试1，处理器状态核实,如果测试失败，循环是无限的。处理器寄存器的测试即将开始，不可屏蔽中断即将停用。CPU寄存器测试正在进行或者失败。

02确定诊断的类型（正常或者制造）。如果键盘缓冲器含有数据就会失效。停用不可屏蔽中断；通过延迟开始。CMOS写入／读出正在进行或者失灵。

03清除8042键盘控制器，发出TESTKBRD命令（AAH）通电延迟已完成。ROMBIOS检查部件正在进行或失灵。

04使8042键盘控制器复位，核实TESTKBRD。键盘控制器软复位／通电测试。可编程间隔计时器的测试正在进行或失灵。

05如果不断重复制造测试1至5，可获得8042控制状态。已确定软复位／通电；即将启动ROM。DMA初如准备正在进行或者失灵。

06使电路片作初始准备，停用视频、奇偶性、DMA电路片，以及清除DMA电路片，所有页面寄存器和CMOS停机字节。已启动ROM计算ROMBIOS检查总和，以及检查键盘缓冲器是否清除。DMA初始页面寄存器读／写测试正在进行或失灵。

07处理器测试2，核实CPU寄存器的工作。ROMBIOS检查总和正常，键盘缓冲器已清除，向键盘发出BAT（基本保证测试）命令。.

08使CMOS计时器作初始准备，正常的更新计时器的循环。已向键盘发出BAT命令，即将写入BAT命令。RAM更新检验正在进行或失灵。

09EPROM检查总和且必须等于零才通过。核实键盘的基本保证测试，接着核实键盘命令字节。第一个64KRAM测试正在进行。

0A使视频接口作初始准备。发出键盘命令字节代码，即将写入命令字节数据。第一个64KRAM芯片或数据线失灵，移位。

0B测试8254通道0。写入键盘控制器命令字节，即将发出引脚23和24的封锁／解锁命令。第一个64KRAM奇／偶逻辑失灵。

0C测试8254通道1。键盘控制器引脚23、24已封锁／解锁；已发出NOP命令。第一个64KRAN的地址线故障。

0D1、检查CPU速度是否与系统时钟相匹配。2、检查控制芯片已编程值是否符合初设置。3、视频通道测试，如果失败，则鸣喇叭。已处理NOP命令；接着测试CMOS停开寄存器。第一个64KRAM的奇偶性失灵

0E测试CMOS停机字节。CMOS停开寄存器读／写测试；将计算CMOS检查总和。初始化输入／输出端口地址。

0F测试扩展的CMOS。已计算CMOS检查总和写入诊断字节；CMOS开始初始准备。.

10测试DMA通道0。CMOS已作初始准备，CMOS状态寄存器即将为日期和时间作初始准备。第一个64KRAM第0位故障。

11测试DMA通道1。CMOS状态寄存器已作初始准备，即将停用DMA和中断控制器。第一个64DKRAM第1位故障。

12测试DMA页面寄存器。停用DMA控制器1以及中断控制器1和2；即将视频显示器并使端口B作初始准备。第一个64DKRAM第2位故障。

13测试8741键盘控制器接口。视频显示器已停用，端口B已作初始准备；即将开始电路片初始化／存储器自动检测。第一个64DKRAM第3位故障。

14测试存储器更新触发电路。电路片初始化／存储器处自动检测结束；8254计时器测试即将开始。第一个64DKRAM第4位故障。

15测试开头64K的系统存储器。第2通道计时器测试了一半；8254第2通道计时器即将完成测试。第一个64DKRAM第5位故障。

16建立8259所用的中断矢量表。第2通道计时器测试结束；8254第1通道计时器即将完成测试。第一个64DKRAM第6位故障。

17调准视频输入／输出工作，若装有视频BIOS则启用。第1通道计时器测试结束；8254第0通道计时器即将完成测试。第一个64DKRAM第7位故障。

18测试视频存储器，如果安装选用的视频BIOS通过，由可绕过。第0通道计时器测试结束；即将开始更新存储器。第一个64DKRAM第8位故障。

19测试第1通道的中断控制器（8259）屏蔽位。已开始更新存储器，接着将完成存储器的更新。第一个64DKRAM第9位故障。

1A测试第2通道的中断控制器（8259）屏蔽位。正在触发存储器更新线路，即将检查15微秒通／断时间。第一个64DKRAM第10位故障。

1B测试CMOS电池电平。完成存储器更新时间30微秒测试；即将开始基本的64K存储器测试。第一个64DKRAM第11位故障。

1C测试CMOS检查总和。.第一个64DKRAM第12位故障。

1D调定CMOS配置。.第一个64DKRAM第13位故障。

1E测定系统存储器的大小，并且把它和CMOS值比较。.第一个64DKRAM第14位故障。

1F测试64K存储器至最高640K。.第一个64DKRAM第15位故障。

20测量固定的8259中断位。开始基本的64K存储器测试；即将测试地址线。从属DMA寄存器测试正在进行或失灵。

21维持不可屏蔽中断（NMI）位（奇偶性或输入／输出通道的检查）。通过地址线测试；即将触发奇偶性。主DMA寄存器测试正在进行或失灵。

22测试8259的中断功能。结束触发奇偶性；将开始串行数据读／写测试。主中断屏蔽寄存器测试正在进行或失灵。

23测试保护方式8086虚拟方式和8086页面方式。基本的64K串行数据读／写测试正常；即将开始中断矢量初始化之前的任何调节。从属中断屏蔽存器测试正在进行或失灵。

24测定1MB以上的扩展存储器。矢量初始化之前的任何调节完成，即将开始中断矢量的初始准备。设置ES段地址寄存器注册表到内存高端。

25测试除头一个64K之后的所有存储器。完成中断矢量初始准备；将为旋转式断续开始读出8042的输入／输出端口。装入中断矢量正在进行或失灵。

26测试保护方式的例外情况。读出8042的输入／输出端口；即将为旋转式断续开始使全局数据作初始准备。开启A20地址线；使之参入寻址。

27确定超高速缓冲存储器的控制或屏蔽RAM。全1数据初始准备结束；接着将进行中断矢量之后的任何初始准备。键盘控制器测试正在进行或失灵。

28确定超高速缓冲存储器的控制或者特别的8042键盘控制器。完成中断矢量之后的初始准备；即将调定单色方式。CMOS电源故障／检查总和计算正在进行。

29.已调定单色方式，即将调定彩色方式。CMOS配置有效性的检查正在进行。

2A使键盘控制器作初始准备。已调定彩色方式，即将进行ROM测试前的触发奇偶性。置空64K基本内存。

2B使磁碟驱动器和控制器作初始准备。触发奇偶性结束；即将控制任选的视频ROM检查前所需的任何调节。屏幕存储器测试正在进行或失灵。

2C检查串行端口，并使之作初始准备。完成视频ROM控制之前的处理；即将查看任选的视频ROM并加以控制。屏幕初始准备正在进行或失灵。

2D检测并行端口，并使之作初始准备。已完成任选的视频ROM控制，即将进行视频ROM回复控制之后任何其他处理的控制。屏幕回扫测试正在进行或失灵。

2E使硬磁盘驱动器和控制器作初始准备。从视频ROM控制之后的处理复原；如果没有发现EGA／VGA就要进行显示器存储器读／写测试。检测视频ROM正在进行。

2F检测数学协处理器，并使之作初始准备。没发现EGA／VGA；即将开始显示器存储器读／写测试。.

30建立基本内存和扩展内存。通过显示器存储器读／写测试；即将进行扫描检查。认为屏幕是可以工作的。

31检测从C800：0至EFFF：0的选用ROM，并使之作初始准备。显示器存储器读／写测试或扫描检查失败，即将进行另一种显示器存储器读／写测试。单色监视器是可以工作的。

32对主板上COM／LTP／FDD／声音设备等I／O芯片编程使之适合设置值。通过另一种显示器存储器读／写测试；却将进行另一种显示器扫描检查。彩色监视器（40列）是可以工作的。

33.视频显示器检查结束；将开始利用调节开关和实际插卡检验显示器的关型。彩色监视器（80列）是可以工作的。

34.已检验显示器适配器；接着将调定显示方式。计时器滴答声中断测试正在进行或失灵。35.完成调定显示方式；即将检查BIOSROM的数据区。停机测试正在进行或失灵。

36.已检查BIOSROM数据区；即将调定通电信息的游标。门电路中A－20失灵。

37.识别通电信息的游标调定已完成；即将显示通电信息。保护方式中的意外中断。

38.完成显示通电信息；即将读出新的游标位置。RAM测试正在进行或者地址故障＞FFFFH。

39.已读出保存游标位置，即将显示引用信息串。.

3A.引用信息串显示结束；即将显示发现信息。间隔计时器通道2测试或失灵。

3B用OPTI电路片（只是486）使辅助超高速缓冲存储器作初始准备。已显示发现＜ESC＞信息；虚拟方式，存储器测试即将开始。按日计算的日历时钟测试正在进行或失灵。

3C建立允许进入CMOS设置的标志。.串行端口测试正在进行或失灵。

3D初始化键盘／PS2鼠标／PNP设备及总内存节点。.并行端口测试正在进行或失灵。

3E尝试打开L2高速缓存。.数学协处理器测试正在进行或失灵。

40.已开始准备虚拟方式的测试；即将从视频存储器来检验。调整CPU速度，使之与外围时钟精确匹配。

41中断已打开，将初始化数据以便于0：0检测内存变换（中断控制器或内存不良）从视频存储器检验之后复原；即将准备描述符表。系统插件板选择失灵。

42显示窗口进入SETUP。描述符表已准备好；即将进行虚拟方式作存储器测试。扩展CMOSRAM故障。

43若是即插即用BIOS，则串口、并口初始化。进入虚拟方式；即将为诊断方式实现中断。.44.已实现中断（如已接通诊断开关；即将使数据作初始准备以检查存储器在0：0返转。）BIOS中断进行初始化。

45初始化数学协处理器。数据已作初始准备；即将检查存储器在0：0返转以及找出系统存储器的规模。.

46.测试存储器已返回；存储器大小计算完毕，即将写入页面来测试存储器。检查只读存储器ROM版本。

47.即将在扩展的存储器试写页面；即将基本640K存储器写入页面。

48.已将基本存储器写入页面；即将确定1MB以上的存储器。视频检查，CMOS重新配置。

49.找出1BM以下的存储器并检验；即将确定1MB以上的存储器。.

4A.找出1MB以上的存储器并检验；即将检查BIOSROM数据区。进行视频的初始化。

4B.BIOSROM数据区的检验结束，即将检查＜ESC＞和为软复位清除1MB以上的存储器。.4C.清除1MB以上的存储器(软复位)即将清除1MB以上的存储器.屏蔽视频BIOSROM。.4D。已清除1MB以上的存储器（软复位）；将保存存储器的大小。.

4E若检测到有错误；在显示器上显示错误信息，并等待客户按＜F1＞键继续。开始存储器的测试：（无软复位）；即将显示第一个64K存储器的测试。显示版权信息。

4F读写软、硬盘数据，进行DOS引导。开始显示存储器的大小，正在测试存储器将使之更新；将进行串行和随机的存储器测试。.

50将当前BIOS监时区内的CMOS值存到CMOS中。完成1MB以下的存储器测试；即将高速存储器的大小以便再定位和掩蔽。将CPU类型和速度送到屏幕。

51.测试1MB以上的存储器。.

52所有ISA只读存储器ROM进行初始化，最终给PCI分配IRQ号等初始化工作。已完成1MB以上的存储器测试；即将准备回到实址方式。进入键盘检测。

53如果不是即插即用BIOS，则初始化串口、并口和设置时种值。保存CPU寄存器和存储器的大小，将进入实址方式。.

54.成功地开启实址方式；即将复原准备停机时保存的寄存器。扫描“打击键”

55.寄存器已复原，将停用门电路A－20的地址线。.

56.成功地停用A－20的地址线；即将检查BIOSROM数据区。键盘测试结束。

57.BIOSROM数据区检查了一半；继续进行。.

58.BIOSROM的数据区检查结束；将清除发现＜ESC＞信息。非设置中断测试。

59.已清除＜ESC＞信息；信息已显示；即将开始DMA和中断控制器的测试。.

5A..显示按“F2”键进行设置。

5B..测试基本内存地址。

5C..测试640K基本内存。

60设置硬盘引导扇区病毒保护功能。通过DMA页面寄存器的测试；即将检验视频存储器。测试扩展内存。

61显示系统配置表。视频存储器检验结束；即将进行DMA＃1基本寄存器的测试。.

62开始用中断19H进行系统引导。通过DMA＃1基本寄存器的测试；即将进行DMA＃2寄存器的测试。测试扩展内存地址线。

63.通过DMA＃2基本寄存器的测试；即将检查BIOSROM数据区。.

64.BIOSROM数据区检查了一半，继续进行。.

65.BIOSROM数据区检查结束；将把DMA装置1和2编程。.

66.DMA装置1和2编程结束；即将使用59号中断控制器作初始准备。Cache注册表进行优化配置。

67.8259初始准备已结束；即将开始键盘测试。