基于vue的潮品商城APP开发

基于vue的潮品商城APP开发摘要：移动互联网的快速发展使电商平台有了飞速的发展。自从网上购物开创以来越来越多的移动购物APP出现人们眼前。在任何年龄段都或多或少都有使用过移动购物APP。人们在空余时间大多数人都是选择购物APP来购物，而不是通过实体店。主要原因是因为去实体店需要耗费大量的时间和精力。传统的APP开发是通过Android或者IOS的原生开发，对于公司而言开发一个APP需要Android和iOS两个不同岗位的工程师，开销无非是巨大的。HybridAPP是采用web开发的webAPP通过打包程序打包成原生的APP。这种开发模式对于开发人员还是公司收益都是最大的。vue.js作为本项目前端的技术框架，利用其组件化和虚拟dom开发出易维护和高性能的APP。Vant作为UI框架。使用vue-router开发单页面应用。使用vuex作为本应用程序的状态管理模式。使用webpack作为项目的构建工具，编辑器为vscode和Hbuilder。通过HbuilderX将一个web项目打包成一个原生APP。做到一套代码实现Android和iOS双端APP开发。关键词：vue.js；单页面应用；HybridAPP；

目录7288第一章绪论 5179181.1选题的背景与意义 5281661.2与本课题相关的国内外研究状况 5260051.3研究内容 622436第二章关键技术 7164322.1Vue.js 7121802.2Vue-router 7303972.3Vuex 8286622.4Webpack 8112962.4.1什么是webpack 811112.4.2为什么要使用webpack 923022.4.3webpack和grunt以及gulp相比有什么特性 9309302.5Vant 932497第三章需求分析 10161133.1功能性需求分析 10200393.1.1登录注册模块 1079303.1.2个人中兴模块 10109283.1.3购物车模块 11246563.1.4商品模块 11324073.1.5订单支付模块 12189463.1.6客服系统模块 1325443.2非功能性需求分析 13258013.2.1安全性 13165763.2.2性能 13291883.2.3适配性 13119533.2.4可维护性 1326475第四章系统设计 1442034.1项目结构设计 14321504.2系统功能设计 1462794.2.1登录注册模块 1439814.2.2个人中心模块 15177564.2.3购物车模块 17153534.2.4商品模块 1756244.1.5订单支付模块 18319144.1.6客服系统模块 1981834.3api接口设计 2020371第五章系统实现 23217975.1系统开发和运行环境 2393275.1.1开发环境 23325155.1.2运行环境 2373275.2关键技术实现 23265415.2.1移动端适配 23222895.2.2性能优化 2441325.3系统功能实现 26158225.3.1首页 2684025.3.2分类 27212835.3.3搜索页面 28237575.3.4商品详情 28158935.3.5购物车 29216565.3.6个人中心 3088575.3.7支付订单 32145075.3.7客服 3421120第六章系统测试 35220596.1安全监测 35126336.2兼容性测试 358240第七章项目总结 3631162参考文献 3714950致谢 38第一章绪论1.1选题的背景与意义移动互联网的迅速发展，正在逐渐改变人们的生活方式和消费观念[1]。人们把自己的碎片时间放在移动设备上，其中大部分时间就是用来购物。或者查询自己已购的物流状态，以及商品的售后服务。相比传统的实体店购物可以节约出大量的时间，相比PC端购物更加简洁，方便做到随时随地就能购物。这样的购物模式受到了大量的年轻的热爱[2]。现如今在年轻一代的带领下中年人也逐步的加入了移动购物中来。根据调查显示，移动客户端的使用越来越受人们的喜爱[3]。现如今移动设备已经成为了人们生活中不可或缺的一部分，根据这样的趋势，移动电商APP开发市场存在着巨大的用户跟商业价值，再者移动电商APP开发能让消费者享受更简单的选购体验，受到越来越多的用户的青睐[4]。在未来电子商务发展的应用会成为用户选购产品的重要工具，不仅只是对用户来说比较方便，满足了用户的体验，保证了用户的消费权益[5]。在企业方面，电商APP开发能帮助企业更好的管理企业，企业能通过电商APP与用户进行更深入的互动，提升用户粘性与用户长期的保持联系，同时也推广了品牌，电商APP能为用户创造多种形式的互动，在将来能更好的打造成020的商业模式[6]。1.2与本课题相关的国内外研究状况Vue.js作为一款MVVM模式的前端框架它利用组件化的思想去组织代码。Vue的轻量级、简单易学、运行速度快等特点在国内外迅速得到了广大开发者的认可。同时Vue是一套用于构建用户界面的渐进式框架，被设计为可以自底向上逐层的应用，Vue的核心库只关注数据的变化[7]。用户不必太在意界面的展示。另一方面，当与现代化的工具链以及各种支持类库结台使用时，Vue也能够和这类库完美的结合[8]。随着单页面web应用开发技术的不断完善，越来越多的web应用都采用了单页面应用模式[10]。Vue也完全能够为复杂的单页应用提供驱动[9]。单页面应用它是指当用户浏览页面时用户不需要重新开一个窗口去加载一个页面。像所有的应用一样,它旨在帮助用户完成任务,比如“编写文档”或者“管理Web服务器”[11]。可以认为单页应用是一种从Web服务器加载的富客户端[12]。Vue加上HybridAPP的开发模式，这种模式采用web技术开发的webAPP，通过打包程序封装成原生APP，HybridApp综合使用了原生技术与Web技术,既实现了设备功能的调用,又在一定程度上保证了跨平台的特性[13]。因为这些特性受到广大的开发人员的欢迎。Hybrid的优点是:主要采用Web技术(HTML5、CSS、Javascript)开发,开发门槛较低,基本懂得开发网页的程序员都可以参与开发[14]。几乎拥有原生应用的所有特性、具有跨平台特性、开发成本较低,、只需要一次开发、容易维护等，缺点:性能没有原生应用高,用户体验略低于原生应用[15]。1.3研究内容使用vue.js作为前端技术框架通过axios与后端接口交互。利用vue.js的双向数据绑定，组件化和虚拟dom开发出易维护和高性能的APP。通过vue-router搭建单应用webAPP项目。使用vuex作为项目的状态管理模式。通过HbuilderX将webAPP项目打包成原生的Android和IOS的APP。第二章关键技术2.1Vue.jsVue.js与其他库（JQuery）不同的是它是一款MVVM模式的前端框架。jQuery是事件驱动模型，而Vue.js是数据驱动。这样用户在开发的过程只要主动数据的变化而不需要去关心数据渲染的dom时间。这使得Vue.js在使用上方便，灵活。Vue的核心是数据驱动和双向数据绑定。双向数据绑定的原理图如2-1所示。其底层运用观察者模式，将虚拟dom和数据关联起来。当数据改变时虚拟dom迅速将数据渲染到真实的dom上。速度快，避免了dom复杂的选择器操作，在开发上大大了降低了开发人员的投入成本。Vue.js简答易学，只要有JavaScript基础的前端开发人员就可以入手学习vue.js。并且官方有详细的中文文档。更加受到了广大国内开发人员的青睐。图2-12.2Vue-router

前vue-router路由提供了两种模式分别为history和hash。hash模式可以在改变页面的同时不向后端请求数据。Hash,即URL中的#符号，如/#/xyy。虽然请求的路径中带有hash值但是，但是却不会加入到http的请求中，这样就现实了Hash的变化而不照成页面的再次渲染。VueRouter利用了这两种方式实现前端路由跳转。两种模式按需求使用但是history模式需要后端的支持。Vue-router有个强大的功能：路由守卫。这个功能可以控制页面的权限，例如在未登录的状态下，只能指定某些页面提供客户浏览。其他页面需要登录才能浏览。虽然这只是客户端的控制，正真的权限控制还是需要后端的配合一起完成。2.3Vuex对于一个前端应用来说，页面是千变万化的。页面变化的同时离不开数据的，数据是撑起一个应用的重要组成部分。在vue的项目中，开发者只要关心数据的变化而不用关心页面的交互。这就需要数据的中心仓储——vuex。它有一下五个核心观念。State:用于变量的储存。它只提供访问的状态，不提供修改状态。只要是vue实例的组件可以通过api来进行访问。或者借助vuex提供的辅助函数进行访问state中的属性。Getters:state中的计算属性。这个属性只能访问不能修改。子组件可以通过相关的api进行访问或者通过Vuex提供的辅助函数在相应的子组件生成计算属性访问。Mutation:修改state的唯一途径。子组件可以通过this.$mit(‘type’,payloade)进行调用，或者通过mapMutations辅助函数在相应的子组件生成方法进行调用。Action:类似于Mutation。但是它可以异步的调用Mutation并且可以同时操作多个Mutation。可以通过MapAction辅助函数在相应的子组件生成函数进行调用。Module:当一个state存储过多是造成臃肿不易维护。这样就需要分模块的管理，每个模块都是一个state。2.4Webpack2.4.1什么是webpack现如今有很多的第三方库，比如sass,less,stylus和typescript这些第三方库是不能直接被浏览器所识别的，这时候就用运用webpack进来打包，并将它们转换成适合浏览器运行的格式。总的来说他一个模块的打包工具，它的目的是将相关依赖的文件打包成一个静态资源文件中。如图2.4.1-1。图2.4.1-12.4.2为什么要使用webpack随着前端项目的多元化，前端的应用也越来越复杂，往往一个应用中有大量依赖项目和大量的JavaScrip和css的代码。为了使开发更加的简便，webpack提供了一种比较好的解决方案。模块化。顾名思义，就是将一个整体分成小群体。在项目中就是分成多个单独的文件。使其具有更好的可维护性。Webpack可以帮助我们将这些模块打成一个包。在项目中使用TypeScript，能够提升我们的开发效率。但是现如今的浏览器不能识别TypeScript。这局需要webpack的loaders将TypeScript转成浏览器能够识别的JavaScript。Scss，less，stylus。虽然能够提升我们日常开发中的效率，但是这些是不能被当前的浏览器所识别的。这就需要webpack这个工具将这些编译成浏览器可以识别的Css。2.4.3webpack和grunt以及gulp相比有什么特性Webpack和grunt/gulp它们都有各自的优缺点，适合的场景选择适合的工具才能事半功倍。像Gulp/Grunt比较关注前端开发的流程，而Webpack比较注重模块化的开发。在模块化的开发场景中webpack比Gulp/Grunt更胜一筹。这也就是本项目使用webpack的原因。Webpack和grunt/gulp工作方式也有很大的不同点。Grunt和Gulp类似任务驱动，通过配置相关任务来指明gulp所要做的任务。运行之后gulp会按照你配置的任务自动去执行。而webpack的工作方式则是，需要你提供一个入口文件（例如：index.js）,然后通过这个文件webpack把整个项目当做一个整体，webpack在项目中逐步的查找依赖。如果项目中存在相关依赖，webpack会利用已经配置的loaders将这些依赖打包成能够别浏览器所识别的文件（JavaScript文件）。相比之下webpack的处理速度会比Grunt/Gulp快，并且webpack可以处理更多的类型的文件。2.5VantVant是基于vue.js的一套轻量级的移动端vue组件库。拥有丰富的与高质量的组件。改UI框架有95%单元测试股概率，支持TS和SSR，支持国际化和自定义主题。并且VantUI更新速快，社区系统比较完善。拥有很多关于商城的业务组件可以很快的帮助开发者开发出一款商城APP。并且Vant相比其他的UI框架更加简洁。即使一个不懂的UI前端程序员也可以开发一套好看的商城系统。

第三章需求分析3.1功能性需求分析潮品商城APP主要涉及的功能需求有登录注册模块、个人中心模块、购物车模块、商品模块、订单支付模块、客服系统模块。3.1.1登录注册模块登录是商城系统不可或缺的一部分。浏览商品时不要求用户登录。购买商品和添加购物的操作需要用户登录，用户登录后可以查看个人信息，以及购物车等信息。如图3-1图3-13.1.2个人中兴模块个人中心可以查看用户订单、评价中心、优惠卷、我的收藏、用户收货地址、个人信息、关于我们、投诉与建议。以下详细介绍每个功能的需求分析。查看订单用户可以查看用户相关的所有订单包括：全部、已完成、待发货、待收货、待付款、已取消、已评价。评价中心查看用户未评价和已评价的订单。可以对未评价的商品进行评价，可以查看已经评价的内容。优惠卷用户可以通过主页领取优惠卷，可以查看优惠卷状况包括可使用和未使用。我的收藏可以对自己收藏过的商品进行管理，例如取消收藏或者点击商品进入商品详情。收货地址用户可以管理自己的收货地址每个用户可以拥有多条的收货地址。用户可以添加收获地址、编辑收货地址、删除收货地址。添加修改收货地址时需要填写：姓名，联系方式，收货地址，邮政编码等信息。个人信息用户可以查看自己的:用户头像，会员名，性别，手机号。并且可以修改其相关的信息。关于我们用户可查看关于潮品商城APP相关信息。包含隐私政策和用户协议以及平台联系方式。投诉与建议如果平台有违规情况，用户可以通过这个入口对商家进行投诉。或者为商家提供你宝贵的意见。3.1.3购物车模块用户可以选中购物车中的商品进行删除或者提交订单等操作。在商品详情页用户可以选好商品规格加入购物车。并且在购物车页面可以更改相应的商品数量。3.1.4商品模块(1)商品浏览浏览商品主要有以下几种方式：首页推荐商品，分类商品，搜索结果商品。用户可以通过不同的方式浏览商品，根据自己的喜好调选商品。推荐商品分布在首页，以推荐商品图和轮播图的形式存在，用户可以通过点击相应的图进入商品详情页。分类商品对各个商品做了不同的分类可以让用户更加有目的性的找到自己想要的商品。搜素结果商品则可以直接找到用户想要的相关商品。商品搜索用户可以通过输入商品关键词对商品进行搜索。搜索后用户可以对商品的价格、销量、折扣等属性对商品进行排序。商品收藏用户浏览到自己心仪的商品，可对商品进行收藏或者取消收藏。商品评价用户可以查看购买过商品的用户的评价。其中包括:全部，好评，差评，还不错。商品详情通过点击相应的商品可进入商品详情页。商品详情页展示相应的商品信息，例如价格，商品名称，库存，商品评论等。可以查看其他用户的评论情况并且用户在此页面可以下达订单。3.1.5订单支付模块(1)下订单用户可以通过浏览商品选择好规格后在商品详情页立即下订单，或者通过购物车页面勾选相应的购物车商品来下订单。两种方式均会进入订单详情页面。用户可以填写留言，选择商品优惠卷。系统会展示可用优惠卷和不可用优惠卷，下订单时用户只能选择符合的优惠卷并且只能选择一张优惠卷。订单支付进入支付页面后有两种支付方式提供选择支付分别为：微信支付、支付宝支付。点击支付会按钮会拉起相应的支付页面。支付成功，跳转到待发货页面，支付失败则返回。用户可以点击我的->待支付页面看到自己未支付订单，并且可以取消订单和再次支付。订单状态一个订单有：全部、已完成、已取消、已评价、待发货、待收货、待付款七种相应的状态。在待支付页面可以通过取消订单使订单变为已取消状态，支付成功会为待发货状态，等待卖家发货后，该订单为待收货状态，待发货状态用户可以查看自己的订单的物流信息。等到用户确定收货，订单变为已完成状态，如果用户在评价中心完成了商品的评价。订单的状态则从“未评价”变为“已完成”。订单评价每一个订单用户可以对该商品的实际情况进行评价。如商品是否和描述的相符，物流快慢，客服服务态度进行评价。评价完成后该商品评论区域可以用看到自己的评价内容。用户也可以通过点击我的->我的评价查看用户历史评价记录。订单售后用户对自己不满意的订单可以申请售后申请。可以在待发货，待收货，已完成这三种状态下的订单申请售后。售后可选退货退款或者仅退款，其中可选退货原因和填写买家退货留言。买家可以点击我的->售后来查看自己申请的历史售后。3.1.6客服系统模块用户对自己想购买的商品，或者购买后有什么疑问的可以通过客服系统与客服进行沟通。用户可以通过点击我的->客服来联系客服，或者可以通过商品详情页进入客服页面。通过详情页面进入客服系统默认底部有商品信息，需用户点击发送客服，客服才能收到相关信息。用户可以发送图片，文字，表情给客服。对自己误发送的消息可在两分钟内撤回消息。用户可以点击预览聊天记录里面的图片。3.2非功能性需求分析3.2.1安全性(1)注入攻击:由于APP是HybridAPP所以要确保APP没有存在SQL注入，SSL注入，Ldap注入，Xpath等注入攻击(2)XSS跨站脚本攻击:确保用户输入的地方没有XSS注入攻击，例如评论区域，客服聊天等等。(3)弱口令：确认用户不存在弱口令的密码。3.2.2性能确保APP安装后不会出现卡顿，反应延迟，占用内存高的状况，保证APP在各种机型能够完美运行。使用图片懒加载，减少不必要的http请求，缓存数据提高系统性能。3.2.3适配性确保APP在不同尺寸的手机上能够完美适配，确保不会出现不同尺寸展示出不同效果。3.2.4可维护性由于需求的快速变更，使得APP需要更新。就需要APP能够检查版本的更新。以至于提供更好的需求给用户。系统设计4.1项目结构设计一个好的项目，首先需要一个良好的项目结构这样才能使项目更加的容易维护。图4-1为本项目的项目结构。图4-14.2系统功能设计潮品商城APP主要涉及的功能有登录注册模块、个人中心模块、购物车模块、商品模块、订单支付模块、客服系统模块。4.2.1登录注册模块每个商城APP不必可少的就是，登录与注册。只有登录了才可以进行商品的相关交易。(1)用户登录用户可以通过以下的三种方式登录潮品商城APP。密码登录。用户通过填写账户名和密码进行账号登录。点击登录按钮，会发一个请求到后端来验证用户的合法性。如果用户信息合法就返回一个token，自动跳转到主页。如果用户信息不和法就返回错误信息，并且显示给用户错误信息。手机验证码登录。需用户填写手机的手机号，并且点击发送验证码。等待一会用户会受到一条验证码。填写完毕后，点击登录。提交给后端进行检验。通过验证则返回创建好的token，否则返回相应的错误提示。第三方登录。用户可以选择微信登录或者QQ登录。需用户安装相应的软件才可以进行相应的操作。如果没有安装相应软件则不会显示相应的第三方登录按钮。点相应的第三方登录按钮会拉起第三方授权页面，当用户确定授权后，会和后台进行检验，验证是否有绑定过平台账号，有则直接登录并且设置token，没有则引导用户绑定平台账号。4.2.2个人中心模块个人中心对于用户是个比较重要的模块，有所和用户有关的操作都在这个模块。潮品商城个人中心主要有：用户订单、关于我们、用户收货地址、优惠卷、个人信息、我的收藏、评价中心、投诉与建议。用户订单这个模块用户可以点击查看所有的订单状态，如果一个状态下的信息超过一个屏幕用户可以通过上拉来加载更多的数据。在待付款状态下:用户可以操作“取消订单”和“去支付”两个按钮，点击“取消订单”则会把当前订单状态变为已取消，点击“去支付”则会跳转到支付页面。点击列表中的一项订单，会跳转到订单详情页面。在这个页面可以用户可以查看，用户收货地址，商品信息已经购买的商品数量和待付款金额。已经订单的相关信息如：订单编号，订单窗创建时间。在待发货状态下:用户可以操作“提醒发货”一个按钮。点击提醒发货相应后台会接收到发货提示。点击订单进入商品详情后，除了可以查看收货地址，商品信息，实付金额，商品购买数量，订单相关信息之外。还可以对该订单进行售后申请。在待收货状态下：用户可以操作“确定收货”按钮，并且点击确认收货后，改订单变为已完成订单，同时在评价中心会出现待评价的订单。点击进入商品详情可以查看该订单的物流信息。点击查看物流进入模流信息页面可以查看当前订单商品，是由哪家快递公司进行配送，以及快递单号。并且可以查看单前商品历史配送路线以及相应的时间。在已完成状态下:用户可以对相关订单商品进行评价，可对商品是否与实际相符，快递，客服服务态度三项进行评星，并且可以附上自己对商品的看法与相关图片。评价完成后会在相应的商品下显示自己评价的内容，并且在评价中心该订单变为已评价。在已取消的状态下：用户可以通过删除订单按钮来移除已取消的订单。评价中心所有已完成的商品都在出现在评价中心这个页面，分别为已评价和未评价。在该页面用户查看未评价的所有订单，当订单条数大于页面高度时，用户可以上拉加载更多的相关订单。也可以下拉刷新当前未评价的订单。已评价也有同样的操作，不同是已评价可以点击查看自己评价的具体内容。优惠卷对于一个商城来说优惠卷是必不可少的。对于用户来说，用户可以领取和使用优惠卷。用户可以在商家发布优惠卷后，在APP主页领取优惠卷。领取完成可在我的优惠卷中查看自己的优惠卷，包括可使用和已过期优惠卷。用户可以在下达订单的时候使用优惠卷。当用户申请售后，退款成功后系统会自动返还当前使用的优惠卷。我的收藏用户浏览商品时可以点击商品详情页中的收藏按钮进行商品收藏。没有登录则会引导用户去登录。收藏后，用户可以再次点击取消收藏或者去我的->收藏查看收藏列表，可以批量删除自己收藏的商品。点击收藏列表中的每一项都可以跳到相应的商品详情页面。用户收货地址在登录的情况下，用户可以查看，添加，修改自己的收货地址。用户下订单时可以选用地址列表中的某一条作为收货地址。图4-2收货地址流程图个人信息这个页面包含所有关于用户个人信息资料。包含用户头像头、用户名、性别、手机号。用户可以对除了手机号以外的所有数据进行更改，在该页面也可以修改用户密码，以手机验证码形式更改密码。关于我们用户查看关于潮品商城APP的相关信息。以及平台管理人员的联系方式。以及潮品商城用户协议和隐私协议。投诉与建议用户通过此入口可以向平台提出建议或者进行平台的投诉。4.2.3购物车模块当用户点击添加购物的时候，前端会根据本地是否存在token而进行判断，用户是否登录。如果用户未登录则APP会引导用户登录。如果用户已经登录则会根据购物车是否存在进行相应的添加购物车操作。购物车中存在商品则在原本的基础上增加商品的数量，不存在则添加商品到购车中。用户可以通过点击购物车或者从商品详情页购物车按钮两种方式进入到购物车页面，用户可以编辑购物车，包括:清空购物车，指定商品提交订单，指定删除购物车商品。图4-3购物车模块流程图4.2.4商品模块用户基本所有的操作都跟商品有关。所以商品模块是这个项目中最为核心的模块。跟商品相关的主要模块有：商品搜索，商品评价，商品收藏，商品详情。商品收搜商品收搜的主要入口有分类收搜和关键词收搜，分类收搜可以在主页五个品牌入口进入或者在分类商品页进入。关键词搜索分布在主页和分类页顶部。图4-3商品搜索流程图商品评价用户可对商品评价进行查看。评价包括：全部，好评，差评，还不错。商品收藏用户浏览商品时可以对心仪的商品进行收藏，用户可以通过个人中心模块的商品收藏对用户收藏的商品进行批量操作。图4-4商品收搜流程图商品详情用户可以通过点击商品详情里面的轮播图进行商品图的预览，也可以浏览相关商品信息例如：商品评论，价格，库存，运费，商品规格。在此页面可以点击客服按钮联系客服，加入购物车，立即购买等操作。4.2.5订单支付模块(1)下订单用户可以通过浏览商品选择好规格后直接购买下订单，也可以通过加入购物车下订单。下订单后会跳转到确认订单页面页面，用户可以选择自己的收货地址，填写订单留言，选择优惠卷。点击优惠卷会出现可以用优惠卷和不可用优惠卷，用户可以选择其中一张可以用的优惠卷。点击提交订单跳转到支付页面。图4-5下订单与支付流程图订单状态一个订单每个阶段都有不同的状态有：待付款，待发货，待收货，已完成，已取消，已评价六种相应的状态。每一个状态可以通过不同的操作变为另一种状态。图4-6订单状态变化流程图订单评价对于已完成的订单，用户可以根据订单的实际情况对订单中的物流，商品实际情况，客服服务态度进行评价。图4-7商品评价路程图4.2.6客服系统模块一个商城系统客服模块是必不可少的，客服可以解决客户大部分的问题，客服不仅可以提高用户的购物体验而且还可以提高用户的购买率。用户有任何异议的地方都可以通过客服系统向客服咨询。客户可以发送文字，图片，表情与客服进行沟通，如果客户不小心发送错消息，用户可在两分钟内对该消息进行撤回。在商品详情页进入客服页面，用户可以选择是否发送当前在浏览的商品给客服。

4.3api接口设计在设计接口时，采用restfulapi设计指南。好的接口设计可以让前后端分离的模式的开发人员减少不必要的沟通，有一个好的接口设计能让开发事半功倍。表4-1api接口设计表模块接口路径参数请求类型主页/system/public/banner-get/member/search/pagebrandId,goodsClassIdpost/member/class/list-get分类/member/class/list2-get/member/brand/listByIdsbrandspost购物车/member/cart/list-get/member/cart/addbuyNum,goodsId,storeIdget/member/cart/deletecartIdpost/member/cart/updatelistpost收藏/member/favorite/addgoodsCommonId,memberIdpost/member/favorite/count-get/member/favorite/deletefacoriteGoodsIdspost/member/favorite/list-get搜索/member/search/detailgoodsCommonIdget/member/search/pagequeryConditionpost/member/search/specgoodsCommonIdget/member/search/pagequeryConditionpost订单/order/member/purchase/ordersPopost/order/member/purchase/calculatecalculatePopost/order/member/purchase/cancelOrderidput/order/member/purchase/count-get续表4-1/order/member/purchase/deleteorderIddelete/order/member/purchase/expressorderIdget订单/order/member/purchase/immediatelyorderFastAddDTopost/order/member/purchase/listpageNoget/order/member/purchase/list/statusorderStatus,pageNoget/order/member/purchase/signorderIdput评价/member/commont/addcommentAddDTOpost/member/commont/getNumgoodsCommonIdget/member/commont/list-get/member/commont/pageCurrent,goodsCommonId,goodsIds,size,typeget优惠卷/member/coupon/addmemberCouponAddDTOpost/member/coupon//canReceiveCoupons-get/member/coupon/count-get/member/coupon/getCouponlistpost/member/coupon/getCouponCantUselistpost/member/coupon/listByStatusstatusget/member/coupon/usecouponIdget支付/order/member/pay/alipay/createorderIdspost/order/member/pay/wxpay/createorderIdspost售后/order/member/refund/addrefundRetrunDTOpost/order/member/refund/deletrefundIddelete/order/member/refund/expressrefundReturnExpressDTOput/order/member/refund/express/companyexpressNoget/order/member/refund/getrefundIdget/order/member/refund/listpageNoget/order/member/refund/orderorderIdget/order/member/refund/reason-get/order/member/refund/updategoodsNum,reasonId,refundId,refunTypeput登录注册/member-api/menber/fogetpwdPwdFogetDTOpost/member-api/menber/getcodemobilepost/member-api/menber/getLoginCodemobilepost/member-api/menber/getPwdCodemobilepost/member-api/menber/insertmemberDTOpost/member-api/menber/pwdloginpasswordDTOpost/member-api/menber/smslognsmsLoginDTOpost用户/member-api/menber/selectMember-get/member-api/menber/updateAvatarfilepost/member-api/menber/updateMembermemberUpdateDTOpost/member-api/menber/updatePwdpwdUpdateDTOpost第三方登录/member-api/menber/QQInfoAccessToken,appId,openIdget/member-api/menber/QQloginAccessToken,openIdpost/member-api/menber/weChatInfoAccessToken,openIdget/member-api/menber/weChatLoginAccessToken,openIdpost收货地址/member-api/memberAddress/deleteaddressmemberAddressIdget/member-api/memberAddress/insertaddressmemberAddressDTOpost/member-api/memberAddress/selectaddrByidmemberAddressIdget/member-api/memberAddress/selectaddrList-get/member-api/memberAddress/selectDefault-get/member-api/memberAddress/updateAddressmemberAddressUpdatepost评论/member/comment/addcommentAddDTOpost/member/comment/getNumgoodsCommonIdget/member/comment/list-get/member/comment/pageCurrent,goodsCommonId,goodsIds,typeget客服/uploadfilepost/messagemsgget系统实现5.1系统开发和运行环境5.1.1开发环境(1)硬件环境表5-1开发硬件环境操作系统Windows10处理器Intel(R)Core(TM)i5-6300QH@2.3GHZ内存8GB软件环境表5-2软件开发环境开发语言JavaScript前端框架Vue.js编辑器HbuilderX,Vscode5.1.2运行环境表5-3APP运行环境IOSiPhone5SEAndroid小米85.2关键技术实现5.2.1移动端适配对于一个手机商城APP，要保证APP在每一部手机上都能够完美的运行。移动端常用的适配方法主要有以下几种。@media+rem利用媒体查询，在不同的分辨率下设置不同的字体大小，利用rem进行适配。手机淘宝flexble.jsFlexible.js也是用rem适配，他是将设备分成10份，1rem等于1/10.vm,vhH5中新增的单位，1vh等于1%的设备高度1vw等于1%的设备宽度。但是兼容性不是很好。本项目用到的适配方式是postcss-pxtorem,lib-flexible两款插件对移动端进行适配，两款会将项目中所有用px为单位的转换为rem。相比上面三种方式相比。用插件比较方便，而且兼容性很好。下面介绍具体步骤。首先利用npm下载两款插件。Npminstallpostcss-pxtorem,,lib-flexible--save-dev引入两款插件后在vue.config.js中配置css:

{

sourceMap:

false,

loaderOptions:

{

postcss:

{

plugins:

[

autoprefixer(),

pxtorem({

rootValue:

37.5,

propList:

['*']

})

]

}

}

},这样就能简单又方便的处理好移动端适配问题。5.2.2性能优化一个APP的流畅程度对于用户来说是非常重要的。如果是因为APP的卡顿而造成巨大的客户流失，那将是非常痛苦的。对于一个商城来说用户大多数浏览都是商品的图片。那么这样图片的请求将是非常巨大的。图片的懒加载图片的懒加载用了第三方库vue-lazyload。其原理是通过给img标签给一个src属性链接到一个本地的初始文件，通过自定属性储存图片得真实路径，通过JavaScript脚本监听改图片是否进入到用户的视口，如果是则将自定义属性里面的路径传给src。通过这样的方式就实现图片的懒加载。实现步骤：安装插架①npminstallvue-lazyload--save-dev②index.js引入插件importVueLazyLoadfrom'vue-lazyload'Vue.use(VueLazyLoad,{preLoad:1.3,error:'./static/error.png',loading:'./static/loading.png',attempt:1})③Vue文件中将需要懒加载的图片绑定v-bind:src改为v-lazy本地缓存通过对数据缓存，当再次请求数据之前判断有无缓存，来减少http请求从而达到降低服务器的压力，并且提高用户的体验。本项目历史收搜，用户是否第一次使用过APP，将这些数据以键值对的方式存储到浏览器本地储存中。骨架屏前后端分离的趋势得到越来越多的人的认可，随之也带来一些弊端。当页面请求过多的时候或者用户网卡时，请求回应时间较长这段时间会带来部分的白屏，使得用户体验较差造成用户流失。通过预先写好骨架屏页面，等所有请求完成以后让骨架屏消息，显示原有的页面。图5-1展示了本项目商品详情的骨架屏。图5-1商品详情骨架屏5.3系统功能实现5.3.1首页首页包含顶部的搜索框，首页轮播图，商品分类入口，红包，推荐商品，和推荐品牌商品。用户可以搜索框进入收搜页面，点击首页轮播图进入相应的商品详情或者品牌列表，点击品牌列表分类入口进入相应的品牌列表，点击红包进入优惠卷领取页面。点击推荐商品进入对应的商品详情页面。图5-2首页图5.3.2分类如图所示用户可以通过点击左侧二级分类来选择自己想要购买的品牌点击右侧品牌，进入相应的品牌商品列表。图5-3商品分类图5.3.3搜索页面用户在应用顶部的搜索框内输入自己想要搜索的关键字。搜索自己想要的商品，用户也可以查看热门搜索或者自己的搜索历史。通过点击热门搜索词或者历史搜索词可以快速的搜索相应的商品。系统会匹配与之相关的商品以列表的形式展现出来。用户可以选择自己想要的排序方式，默认，销量，价格，折扣，已经商品展现的形式。用户点击商品可进入对应商品的商品详情页。图5-4商品搜索图5.3.4商品详情商品详情页将一切跟商品有关的信息展示给用户，让用户能在最短的时间了解该商品。商品详情页主要包括：商品轮播图，商品相关信息，商品服务，商品规格，商品评论，商品详情展示。用户点击收藏按钮对商品进行收藏或者取消收藏。用户在浏览图片时，用户可以点击图片进行大图查看。点击查看评论进入商品评论页面。点击最下方的操作栏，可以进行相应的操作：联系客服，跳转到购物车页面，将该商品加入购物车以及商品立即购买。

图5-5商品详情图5.3.5购物车在进入购物车页面之前，客户端后判断本地是否已经存在token，如果不存在则跳到登录页面。存在则会向后端请求检验是否为合法token。如果是则正常进入购物车页面，否则系统会引导用户登录。在存在token的情况下会向服务端，发去请求购物车列表的数据数据请求。后端通过拦截器判断token是否合法，合法则反应该用户的购物车列表并且展示，否则返回401引导用户登录。用户可以对购物车中的商品数量进行修改，也可以点击商品查看商品详情。用户不想要的商品可以勾将勾选的从购物车中移除。图5-6购物车页面图5.3.6个人中心用户个人中心包括：用户订单，用户个人信息，优惠卷，用户收藏，用户收货地址，用户评价，售后，客服等信息。点击用户头像进入账户设置，再次点击进入用户个人信息编辑。点击我的优惠卷进入优惠卷页面，页面分别展示可用和不可用优惠券。我的收藏展示用户所有收藏用的商品。点击收货地址用户可对地址进行增加，修改，删除等操作。图5-7个人中心图 图5-8账户编辑图 图5-9用户资料编辑图图5-10优惠券列表 图5-11我的收藏图 5-12用户地址图图5-13地址编辑图 图5-14评价中心图 图5-15售后服务图5.3.7支付订单用户准备下单时，会让用户确认订单，确认订单页面，用户可以选择收货地址，优惠券，以及对卖家的留言。如果用户有设置默认收货地址，确认订单页面会默认选择用户的默认地址。如果没有则为空。用户可以添加收货地址后提交订单。提交订单后进入支付页面。用户可以选择微信支付或者支付宝进行支付。图5-16确认订单页面图5-17优惠卷选择页面图5-18支付页面图5-19微信支付页面图5-20支付宝支付页面用户在个人中心页面可以查看自己的所有相关订单。点击订单可查看订单详情。包括物流信息，订单相关信息，商品信息和实付金额等等。图5-21订单列表 图5-22订单详情 图5-23物流信息5.3.7客服客服入口有两个一个从商品详情进入，另一个从个人中心客服按钮进入。两个入口的不同点是，从商品详情入口进入会携带商品信息。用户可以向客服发送图片，表情，文字。对于自己误发送的信息，长按消息两分钟内可以撤回。图5-24发送商品数据 图5-25客服消息 图5-26消息撤回图系统测试6.1安全监测表6-1安全监测表检测方安全性描述Anguanjia安全安全360安全安全Tencent安全安全Baidu安全安全6.2兼容性测试表6-2兼容性测试表测试设备操作系统测试结果VivoX20A7.1.1通过VivoY51A5.1.1安装失败PD18319通过V18909A8.1.0通过VivoX75.1.1通过VivoY6660.1通过V18299通过VivoX96.0.1通过VivoNEX8.1.0通过VivoX21A8.1.0通过V1732A8.1.0通过项目总结本项目采用前后端分离的开发模式，这种开发模式能让我专注前端的开发而不用为后端的数据而发愁。从需求分析到技术框架和UI框架的选定，都经过了精心的挑选。Vue作为这几年特别火的前端端架，因为它学习门槛低，轻量级，性能高。mvvm的设计模式让开发人员只要注意数据而不用关心dom的操作，使用起来得心应手。VantUI轻量级的组件库，拥有很多基础组件也有和商城相关的业务组件，是用来做商城的不二之选。通过vue的组件化达到了代码的复用。通过这次毕设，在完成的过程中我学到了很多东西，接触到了类似于企业级的项目。接触了在校生难项目难以接触到的接口，例如第三方的接口，微信授权登录，QQ授权登录，微信支付，支付宝支付。途中也碰到了多让人难以解决的问题，经过自己的反复推敲与琢磨找到了问题所以，这些提高了我对问题的解决能力。本次项目采用Hybrid混合开发，通过HbuilderX将webAPP项目打包成原生的APP，实现了一套代码完成Android和IOS两个客户端。通过适配处理能够完美运行在当前市面上绝大多数手机。通过性能优化能客户们体验到一个流畅的APP这个是至关重要的。目前潮品商城APP已经完成了所有的功能和非功能性需求设计，但是在很多方面还是需要改善的。我希望在后续的工作中能让这个商城成为一个多商家的商城。能让更多想要做电商而没有找到合适平台的人，入驻到此平台。做出一个高质量的购物平台，给客户最好的用户体验。参考文献韩旭东.浅谈APP商城对电子商务的影响[J].现代营销(下旬刊),2018(08):166.彭惠新.掌上生活App焕新升级,商城、积分带来品质生活[J].中国信用卡,2018(10):64-65.李佳琪,刘红岩,何军,王蓓,杜小勇.应用商城中用户年龄的推断及在推荐中的应用[J].计算机科学与探索,2018,12(11):1729-1739.魏青青.京东商城OPM战略下的成效与启示[J].企业科技与发展,2019(10):179-180.邱林,卢华.基于O2O校园农产品商城APP平台的设计与实现[J].广西农学报,2018,33(06):56-59,63.王鹤琴,朱珍元.基于MVVM模式的Web开发研究[J].菏泽学院学报,2019,41(02):7-13.麦冬,陈涛,梁宗湾.轻量级响应式框架Vue.js应用分析[J].信息与电脑(理论版),2017(07):58-59.李广宏.vue.js前端应用技术分析[J].中国新通信,2019,21(20):115.[10]朱二华.基于Vue.js的Web前端应用研究[J].科技与创新,2017(20):119-121.[11]胡建兵.“双11”印证中国的消费能力和市场潜力[N].包头日报,2019-11-14(007).[12]林玮珊.电商企业盈利模式分析——以拼多多为例[J].中国经贸导刊(中),2019(09):88-90.[13]JiandongLi.EnhancedKStoreWiththeUseofDietionaryandTrieforRetailBusinessData.IEEEBeijingSection.Proceedingsof2016IEEEInternationalConferenceonBigDataAnalysis(ICBDA),2016:5.[14]Hsin-YuShih.Thedynamicsoflocalandinteractiveeffectsoninnovationadoption:Thecaseofelectroniccommerce.JournalofEngineeringandTechnologyManagement,2012(3):28-88.[15]吴政宏,连锁超市经营存在的问题——以沃尔玛为例[J].现代营销(信息版).2019(12):149.APPDevelopmentofChaoPinMallbasedonvueRuanShouhuan

2016NetworkEngineeringMajor，

SchoolofInformationEngineering,SanmingUniversityAbstract：WiththerapiddevelopmentofmobileInternet,e-commerceplatformhasdevelopedrapidly.Sincethecreationofonlineshopping,moreandm