基于VUE的饮品外卖APP

系统简介

随着经济全球化的不断发展和5G网络的普遍，我们之前打电话订外卖的效率和实用性越来越低，用户可以选择的商品种类也比较少，之后，出现了携带方便的手机，我们只需要注册和登录APP就可以看到各种各样的饮品，我们不管身在何地只要下单就可以喝到我们想喝的饮品。本设计是一种利用Vue.js、webpack等构建技术的饮品外卖APP，使用HTML5、CSS3和JavaScript来实现的，主要采用Visual Studio Code编译器，使用谷歌浏览器作为调试工具。本设计主要可以实现页面的模块化，把每个模块的功能进行具体的功能实现。实现用户对商品的需求操作和商品到达用户的手中。
关键词：框架；外卖；谷歌浏览器

1 绪 论

1.1研究课题的背景与意义
外卖行业因信息化时代的快速发展和5G网络的普及而活跃起来。手机作为我们的通信媒体，使用频率越来越高。移动通信平台一直是在所有生活领域带来方便和提高效率的重要渠道。对于用户而言，点外卖省去了时间，提高了自己的时间效率，同时还可以根据用户的需要选择其相应的饮品，对于商家而言，手机订购商品有效的解决了传统电话订购商品的麻烦与高成本，还容易出错。本设计的研究意义在于改变了传统的商品交易模式，用户可以直接线上订购商品，进行网上交易,与之前的传统行业相比较，外卖行业的变化不仅满足了消费者的需求，也让人们的生活更加便捷、舒适。
随着技术的不断发展，技术也越来越成熟，并且在如今已经变成了能够进行分离前后台的全新的开发方式，这种有别于传统方式的开发方式，不仅能够使得前端数据不再完全依赖后端数据，增加了开发模式的稳定性和开发速度。并且能够实现服务端功能的前端行业还仍然能够实现对前端网页的开发。更是在满足我们需求的基础上简化了我们实现的过程。现代人的生活节奏越来越快，而我们要尽可能多的节省我们的有效时间来做一些更重要的事情，因此，本设计的意义就是为消费者服务，可以更快、更方便的喝到我们想喝的饮品，尽可能地为客户带来方便和实惠。
1.2国内外研究现状
1.2.1外卖行业的发展现状
从国家的研究情况来看，安全性和信息更新存在一些缺点，现有的系统数据是单独制作的，交换不充分。并且因为主要的关键部分是管理者，管理者的个人认识和个人喜好在很大程度上决定了其对信息类型和数量方面的选择。而这通常所能达到的实际需求和使用者的实际需求不一致。不能够良好地起到留住用户的作用。并且，饮品外卖APP应充分的采用用户商家集中式搜集信息，对外卖进行更加现代化，更加智能化的改革创新，集中管理外卖系统，使其综合性更强。虽然现在国内的外卖行业起步较晚，发展时间较短，但是在国内外卖行业的快速发展过程中，已经实现了对大部分外卖行业起步早的国家的赶超。这其中，我国外卖行业最大的优势就是劳动力众多，可以进行配送工作的劳动力众多，所以可以形成诸如美团、蜂鸟和和饿了么等等的专职配送的APP产品。而国外的劳动力成本过大，劳动力人口不足的问题都使得国外难以形成一套完善的配送服务制度，只有少数几家配送服务极差的外卖配送公司存在。并且与国内不同的特殊消费制度也是限制外卖配送服务在国外快速发展的原因之一。不仅如此，相比之下国外的不仅配送费用比较高，而且背后还不仅仅包括配送的服务。所以，整体上来说，我们的外卖APP正朝着大众化、智能化的方向发展。
1.2.2框架技术的发展状况
由于Web技术的普及，各种各样的框架都不断的涌现而出。关于前端框架，Vue.js、Angularjs和React是业界使用的三个主要框架。
Angularjs是被谷歌产品中广泛使用的大规模企业系统应用的JS框架。另外，React 响应也是一个相对成熟的前端开发框架，因为虚拟DOM可以设计和实现它的框架。并且可以有效地开发的应用。作为一种有别于其他重量级框架的的渐进式框架产品，Vue.js在用户界面的构建方面具有其独到之处。由于其使用的是相对比较特别的增量开发来对用户界面的构建进行设计，由下往上，进行逐步渐进式的构建。同时，作为最关注于视觉层的软件，即使是设计小白在对Vue的核心库的学习中也能进行简单便捷的使用工作。并且在用户联动上也做的不错。同时，作为一款单纯由Vue生态系统进行最基本系统构建的，通过单独文件组件和库开发的的软件开发平台。Vue相比较于其他开发平台，因为使用过于简单，从而在留住使用者的角度上略有不足。其他软件虽然有时有着使用时要进行特定编程语言，使用预言的学习的困难前提，但是这对于那些已经花费大量时间适应软件的人来说，已经形成了巨大的沉没成本，从而对该软件产生了巨大的使用者粘性。而Vue所坚持的使用简便简单的原则，固然在初期能够吸引一大批使用者使用，但是在之后因为使用者粘性低的缘故，有时用户反而没有那些入门门槛高的系统构建设计软件高。但是这也有利有弊，利处更多的体现在对于数据处理的快速和对模板处理的效率上，并且在性能上，系统设计的呈现速度也更加快速。由于采用了简单快速的DOM模板，和JSX语法来进行文件内容的编辑等，Vue.js具备着更强大的，更全面的设计构建性能，所以在多角度的考虑下，只聚焦于层的显示，是数据驱动型的Web，并且对许多其他设计构建软件的缺点进行了总结，所以在较小型的项目设计中我们选用了Vue.js。
1.3系统研发目标与内容
根据上述研究现状，本设计打算通过简单大方的页面布局来实现一个简单的可以点饮品外卖的APP，主要是基于Vue.js框架，利用HTML5、CSS3、JavaScript实现的。其中，让HTML5和CSS3对页面进行详细布局，之后再利用JavaScript进行页面的交互效果显示和webpack打包，最后，利用VUE框架实现其布局，让整个页面的功能实现。本设计的页面内容主要如下：
我的页面：显示用户个人信息以及购物状态。
购物车页面：显示用户自己想要购买商品的各种数量和修改参数。
门店页面：显示商家的信息。
首页页面：进行推出商品和商铺活动。

2 前端相关技术介绍

这个设计主要采用的是目前有一家很受欢迎的轻型vue.js使用框架，编程语言选用最普适化的，相对简单的HTML5，JavaScript等。并且在压缩，封装前端代码时使用项目webpack完成工作。并且利用了Vue.js编写的组件以及Axios等的便捷的构建技术。
2.1开发语言
随着移动端技术的不断发展，以核心技术HTML5、CSS3、JavaScrip等开发基础语言所开发出的的系统功能，已经成为了现代移动端软件系统中不可或缺的一部分。
2.1.1JavaScript技术
在程序编写中采用客户端相对安全的脚本语言进行编写工作针对对象和事件驱动的程序，JavaScript是由网景公司最开始进行开发工作并且研发成功的。类属于原型语言中的弱类型动态语言。可以用来开发客户端Web，并且对交互效在控制页面中的效果进行显示工作。比如响应用户的各种操作。
大体上由ECMAScript， BOM和 DOM组成的javascript的特点有以下几点:
(1)是脚本语言类型中具有解释性执行功能的一类。
具有简便开发过程的JavaScript，在开发过程上没有和传统的其他脚本语言区别开来，其语法与C、C++、Java都特别的相似，差别出入不太大。相比之下，JavaScript不像其他的语言一样是需要提前编译的，而是在每次的执行过程中都被逐行的解释。与其HTML5和CSS3搭配的使用提高了其效率，使使用者的操作得以简化。
(2)是脚本语言类型中基于对象编写的一类。
这种语言能够面向对象。对被创建的对象进行使用。我们对对象的编译方法和具有相互性的根文件很大程度上决定了我们所使用的系统功能的强弱。
(3)是脚本语言类型中的简单弱类型。
一下几点可以反映其简单性：第一点，JavaScript是基于Java的基本描述和控制流程的简洁紧凑的设计。这对于学习Java或其他C编程语言的用户和具有C编程技能的编程人员来说是一个很好的转变。JavaScript非常容易开始。其次，可变的方法是使用弱的类，而不是严格的数据型，在一些情况下可以实现其隐式转换，不需要我们去强制转换才可使用。
(4)是一种相对安全脚本语言。
作为安全性的语言，JavaScript是不能被本地的硬盘访问的，服务器的数据和网络文档的修改和删除也不能被保存，想要进行数据信息的保存和防泄漏只能在在每次浏览信息和交互动态时，我们只能通过浏览器实现我们的信息浏览和动态交互来完成。
(5) 是脚本语言类型中具有驱动功能的一类。
用驱动事件的方式，响应用户的操作， JavaScript能够识别用户所进行的操作动作，从而在我们划击屏幕、双击、单击、按下、抬起、滚动、加载等都被称为“事件”。当我们触发的事件发生的时候，就会引起与之相对应的事件响应，然后执行对应的代码，实现其功能。其中，当我们执行对应的脚本语言的时候，我们把这个动作成为“事件驱动”。
(5)是一种跨平台性脚本语言。
JavaScript主要是依赖浏览器来实现其功能操作的，在浏览器中进行运行，电脑能够正常显示，那就能够正常运行JavaScript，在编译的过程我们只需引用外部链接进行引入，便可以在整个文件夹下正常使用。
所以，Javascript是一种新的描述语言，并且可以和HTML5和CSS3进行高度融合式编写。同时，进行中间数据的传输时能够不依靠网络来对使用者的需求进行响应，同时，数据的传输处理直接在客户端中完成而不再必须经过服务器，这既节约了时间，也提高了数据传输的安全性。
2.1.2 HTML5技术
能够实现标记语言作用的超文本标记语言HTML5在许多领域取得了广泛应用。页面中的图片，音乐等要素都是超文本要素。并且由标题信息构成头部分，HTML中的内容构成主体部分，以此形成一个完整的结构。是我们肉眼可以看得到的内容。是以.html为后缀的文件名，我们可以使用文本、记事本或者写字板打开，当我们只有HTML内容的时候用浏览器打开是可以完全显示的，其中，它在原有的基础上也添加了一些新的特性，可以在标签后面直接加属性或者通过link来链接外部样式表，来显示CSS3和JavaScript中的效果。
2.1.3 CSS3技术
CSS3是在原来的CSS2的版本上的优化和更新，支持的浏览器有浏览器Firefox 、Opera、Chorme、Safari、IE等。当我们编写代码的时候有的浏览器并不兼容，不能正确的显示，因此我们需要加浏览器的前缀来做适配。之前的CSS中很多功能不是太过完善，很多的属性都不支持，但是在CSS3中就添加了比如图片边框、多图片背景、个性化字体等，现在这些属性现在只需要我们短短几行代码就可以实现。并且，因为向后兼容特性在CSS3中的体现，其运作设计就不进行修改，保证设计正常运行即可。同时基于对所有使用者负责的态度，对CSS3以下的版本网络浏览器也将能正常运作。CSS3对本次设计的影响是可以更加便捷简单地使用新型选择器设计出更加适合的设计效果。
2.2 Vue.js开发框架
作为一种有别于其他重量级框架的的渐进式框架产品，Vue.js由于其使用的是相对比较特别的增量开发来对用户界面的构建进行设计，进行逐步渐进式的构建。同时，作为最关注于视觉层的软件，即使是设计小白在对Vue的核心库的学习中也能进行简单便捷的使用工作，和其他项目整合比较简单，对于初学者来说非常易学。用实现最简单的API来实现。Vue.js兼具Angular.js和React.js的优点，并且对他们的缺点进行弥补，并且通过诸多小工具的设置帮助新手构建项目。
2.2.1Vue.js的数据绑定
作为可以实现劫持数据，监听数据的双向绑定类型的Vue.js如图2-1所示，通过进行Observer监听器的设置来实现劫持数据，监听数据的操作，并且时刻关注变化属性的过程，并且及时通知订阅者属性的变化情况，以确定是否需要更新。因为有数量众多的订阅者，所以需要收集订阅者们的意见于设置好的消息订阅器之中，并且进行消息的收集之后以来以Observer和Watcher进行消息的处理工作，并且进行良性管理。同时，再加入能够仔细扫描和对比解析的Compile作为指令解析器。对模板数据和对应函数进行替换和绑定。并且将属性的变化作为触发Watcher订阅者的机制，并且在属性变化后，对函数进行更新并且显示成视图更新的形式。要最终得到双向绑定的数据，就要对下列3个步骤进行完整全面地执行：
（1）设置一个能够对属性进行劫持和监听操作的监听器Observer，在属性发生变动时，立即向订阅者发送数据。
（2）设置一个能够在属性变化时使得函数也发生相应改变的订阅者Watcher并且使得视图更新。
（3）设置一个能够对相关指令在各个节点数据进行仔细扫描，详细解析的操作的解析器Compile。并且能够使得模板数据能够进行初始化操作，并且能够使得订阅器初始化。

图2-1
2.2.2 Vue.js组件系统
为了使得在页面布局工作中出现的问题得以解决，我们设置了组件的出现，并且使用了全局和局部两种Vue.js组件对于问题进行解决。系统主要有以下优点：
（1）开发的语言HTML5、CSS和Javascript写在一个文档里，提高了代码的可读性和可维护性。
（2）通过组件系统，开发者可以分离每个组件的功能边界，从而使最终的功能更加完善。
（3）组件之间不会相互影响，当各部分功能出现问题的时候，可以快速地找到问题的所在位置并加以改正。
2.2.3 Vue-router的路由功能
Vue-router指的是Vue.js的基本使用路由，我们主要了解三个基本组件route、 routes和router。
route它是一条单一路由，从字面意思来看只能实现其一条路径。一组路由的表示方式则是Routes，体现的是一个数组的形式，即组合两个单一路由成为一组路由。
用来执行管理路由职能的是router，作为一个管理者，他需要将选中的动态渲染的组件通过合理的符合路由请求的方式分配下去，在我们进行不同操作时，router就去路由中寻找相应的内容然后进行显示。
对Dom 元素进行合理的显示和隐藏的实质就是客户端中的路由，当我们选择我们需要的内容的时候，其余的内容都全部隐藏，不显示在客户端的页面，当我们需要它的时候只要点击就又可以正常显示，其余内容则全部隐藏。
2.2.4Vuex状态管理
作为一个由Vuex开发的状态管理程序，Vuex专门为Vue.js提供使用。公共数据管理是Vuex的实质。并且可以可预测地改变组件状态，对于所有的组件进行集中式处理的操作。并且这种方式避免了单一化的数据传统处理方式中的分隔化弊病，对数据存储进行了统一化的管理。并且在管理过程中对于数据的操作也提出了很多方法。Vuex的主要含有部分如下：
（1）用于进行应用驱动的数据源state，每一个组件里面的data里面的变量我们都称之为State，是我们整个Vue整个核心的概念。
（2）view，以声明方式将 state 映射到视图，当我们需要改变一个状态的时候，就需要调用函数进行累加。
（3）用于用户状态变化时，对view上的数据进行响应的actions，并且可以进行异步操作。
如图2-1所示是其流程的主要部分.

                      图2-1

2.5 Axios技术
由于Vue需要第三方库的帮助来进行ajax的发送，所以这时作为连接桥的axios就显得尤为重要。作为一个用于浏览器的可以发送ajax请求的具有人工智能的客户端，它可以对服务端的请求和响应的方式进行自定义，并且通常包含以下特征：
（1）浏览器和node.js能够对其进行运行
（2）promise能够对其进行运行
（3）能够使得请求被拦截，转换请求和响应数据被响应
（4）能对请求进行取消操作
（5）能够对JSON数据进行自动转换的操作
（6）浏览器能够对CSRF进行防止
简单来说，Axios技术的实现，在项目中让我们感觉更加的简单明了，不容易出现错误，即使出错我们也易于排查。
2.6 Webpack构建工具
作为前端打包工具的Webpack，能够对模块之间的依赖关系进行分析，并且对他们进行处理。最后得到一个由全部文档操作得到的的静态资源。并且安装Node.js是使用Webpack 的前提。
Webpack的两个最核心的原理分别是：
（1）一切皆模块
就像一个打文件夹下我们可以分成很多的子文件夹，如css、image、js或html。可以把这些子文件夹视为一个模块，当我们需要用到子文件夹下的任何一个文件时，我们只需在主文件下链接就可以进行引用。这就意味着我们可以将一个个大文件夹分解成更小的并且易于管理的片段，从而达到所有文件都可以多次引用的目的。
（2）按需加载
传统的打包工具是将我们所有的模块都会编译成一个庞大文件并进行编译，但是，有时我们并不需要加载所有的文件。因此Webpack就把整个文件分割成多个子文件和代码，我们只需按需加载，减少了加载时间，提高了我们的使用效率。
2.7编辑器选择
目前市场上使用的编辑器有很多，我主要在HBuilder X和Visual Studio Code进行了选择。使用轻盈，界面简单的HBuilder X在传统的于浏览器进行的代码观看过程的基础上进行了优化，可以在软件内部通过浏览器视图进行代码效果的观看。还提供小程序，APP等打包和发行。由中国人研发的，当然界面和说明都非常友好。但是HBuilder X不能在界面直接打开后缀名为.js的文件。主要的优点是可以自定义安装很多的小插件，并且占内存小和切换项目方便，是目前使用人数最多的编辑器。同时，在其界面内可以直接打开后缀名为css和js的文件，但是启动速度不快。因此，我在根据自己的情况下选择的是Visual Studio Code编辑器。
2.8本章小结
本章主要是用来对本课题所使用的技术作出详细的介绍。介绍了所使用的三大编程语言JavaScript、HTM5L、CSS3，然后介绍了Vue.js开发框架的使用，最后介绍了Axios技术和Webpack构建工具相关的技术知识，选择了适合本设计的编辑器，对我的课题实现提供了很大的帮助。

3.软件的具体实现

3.1系统开发环境
硬件环境：5900v+i7+12GB
软件环境： 操作系统：Window10
浏览器：Google Chrome
编译环境：Visual Studio Code
3.1.1 系统软件开发环境
作为版本管理控制工具git，不仅能够在开发框架使用过程中起到管理作用，而且代码的版本控件与发送的集成，删除、上传等都可以十分方便的在Visual Studio Code中进行操作。作为前端框架，Vue.js通常需要与webpack项目构建工具组合以创建Vue项目，而webpack依赖于node.js环境来执行打包压缩。所以安装node.js是Vue项目开发的前提，在之后cnpm也要进行安装操作。在这过程中安装速度较慢的原因是npm包大多被安装在国外。因此，此设计引用淘宝的镜像服务器在这个项目中使用。然后，再安装一个全局的vue-cli的脚手架，主要把项目做成一个个的模块框架，便于我们管理。最后开发人员就可以开始项目的创建了。
3.1.2项目框架搭建
对于node.js进行Windows 10系统开发环境下的安装以及npm。npm采用淘宝的镜像服务器，之后安装vue.js的脚手架，安装vue-cil的执行命令如下：
npm install-g vue-cil
之后对项目进行创建项目，右键运行git bash here于开发平台项目目录下，然后执行如下命令于git bash环境下：
vue init webpack-simple myapp
回车后生成myapp项目文件夹
然后，项目需要下载安装依赖关系。奶茶店项目文件夹中的package.json是项目的完全依赖关系声明。执行以下的命令，就可以进入安装项目的文件夹，下载安装依赖关系。安装完成以后，进行node_module文件夹于项目文件夹中的创建工作。这个文件夹包含以前下载的依存关系。

cd 奶茶店
npm install
文件目录如图3-1所示
检验终端能否在译环境中正常运行，检验方式如下所示：
npm run dev
并且输入localhost:8080于Chrome浏览器中则可呈现如图3-1所示的界面。

图3-1
3.2开发平台前端项目结构
在我们完成了开发环境的搭建工作之后，我们就需要完成开发平台的前端工程，主要的目录结构表如表3-1所示。

3.3 APP功能模块的实现
本设计的页面和所有功能的成品是APP中的功能模块，主要分为四大模块，我的模块、购物车模块、门店模块和首页模块，其中我的模块又分为登录前和登录后模块，登录前又有注册模块和登录模块。
3.3.1注册模块的实现
如果我们需要使用此APP，则用户注册和登录是必须的，当我们使用手机号、自定义密码和确认密码即可完成注册。显示页面如图3-2所示。

图3-2

图3-3
3.3.2 登录模块的实现
用户登陆的页面如图3-3所示，用户只需输入正确的手机号和密码即可登录，即使用户忘记了密码，只需点击右下角忘记密码就可以对账户密码进行重新设置的操作。
3.3.3我的模块的实现
如图3-4所示是我的页面设计情况，该模块主要有用户账户、购买商品的状态、自己的商品信息、个人账户信息和退出登录组成。
头部显示用户账户，主要显示用户的登录号码和显示的会员状态。
购买商品的状态主要包括待付款、待发货、待收货、待评价和售后的几个模块。进入待付款页面可以显示自己想要买的饮品的名字、单价和数量的显示状态，用户也可以选择自己的商品进行支付和取消订单，当用户没有在此进行操作的时候，页面会一直显示购买过的需要待处理的商品。当我们点击进去任意一个模块的时候，在上边可以进行任意的切换，并不需要用户退出来才可以看到其他的状态。待发货、待收货和待评价都可以显示具体用户购买过的商品的状态，用户可以根据需求进行自主选择。售后由于目前并没有具体的去实现此功能，如果后续需要也可以进行添加。
自己的商品信息主要包括的有收货地址、购物车、足迹、收藏几个模块。收货地址可以进行编辑，包括姓名、电话、地区、详细地址、邮政编码和设置为默认收货地址，并且地址可以下拉菜单进行选择，可以设置储存多个地址。点击购物车会自行调转到购物车的模块，在后面进行具体的功能阐述。足迹和收藏则会根据用户曾经点击的商品进行相应的保存记录。
个人账户信息模块主要包括会员卡、优惠券、积分和关于我们。这些模块主要是用户根据消费累加的个人优惠和商家做些活动分发给个人的优惠卷的各种状态所得的一些优惠卷和积分，点击进去后可以显示积分的明细和剩余积分等状态，显示的页面如图所示，用户可以在下次购买商品的时候进行抵扣。
退出登录主要就是方便用户想用其他的账号进行登录，当点击退出登陆后，我们再输入其他的账号和密码就可以进行登录。

       图3-4   

        图3-5

3.3.4购物车模块
顾客加购想要商品的功能通过购物车模块来进行满足，显示的页面如图3-5所示，可以显示想要购买的商品，商品的价格、数量、进行数量的加减和结算金额并进行提交订单，当用户加购多个商品的时候也可以进行全选进行付款。
3.3.5门店模块
门店模块的主要页面如图3-6所示，主要用来显示门店的信息，主要是店铺的Logo，店名、电话、营业时间、可以提供的服务等功能，这个模块主要是给用户展示店铺详细信息，并没有太多的具体功能，只是方便用户选择和了解店铺。
3.3.6首页模块
首页模块是我们商品的主要展示页面，显示的页面如图3-7所示，主要包括轮播的banner图、店内买单和外卖速达、和店铺活动和今日热销等内容。
当我们点击店内买单或者外卖速达的时候我们可以进去店铺选择饮品，页面显示如图所示，左侧是四个商品选择模块，包括全部、热销、新品和推荐，点击不同的选项出现不同的商品，右侧是店铺的所有商品，用户可以根据喜好自行进行选择，当我们点击选规格的时候，显示的是中杯或者大杯进行加入购物车，当我们点击商品的时候会进入商品的详情页，主要功能在今日热销进行阐述。
今日热销是显示的两栏的商品块，当我们点击进入的时候，显示的是商品的图片、名称、产品详情、购物车、收藏、客服和加入购物车的具体功能。选择购物车功会自行跳到购物车，可以进行商品的收藏和加入购物车，当我们想和其他人分享商品的时候，可以进行商品的图片保存，分享给其他人。具体的页面功能如图3-7所示。

图3-6

  图3-7

3.4 APP的使用介绍
打开珍珠港APP
进入首页查看商品，店内买单或者外卖速达，内部分类，选规格，搜索，分享，应有尽有
搜索需要的商品，或者直接选择店内买单与外卖速达
选择需要的商品加入购物车
结算购物车，选择优惠券和积分抵扣，并付款
前往订单查看信息，坐等商品送货上门
3.5本章小结
本章主要是实现APP的开发环境、项目搭建和具体实现四大模块的基础性功能，四大模块主要包块我的模块、购物车模块、门店模块和首页模块进行了详细的阐述。最后，对APP的使用流程做了一个介绍。

附　录
附录1：Footer.vue程序代码
<template>
  <footer class="footer">
    <ul>
      <router-link to="/home" tag="li">
        <span class="iconfont icon-shouye"></span>
        <p>首页</p>
      </router-link>
      <router-link to="/store" tag="li">
        <span class="iconfont icon-dianpu"></span>
        <p>门店</p>
      </router-link>
      <router-link to="/cart" tag="li">
        <span class="iconfont icon-ai-cart"></span>
        <p>购物车</p>
      </router-link>
      <router-link to="/user" tag="li">
        <span class="iconfont icon-my"></span>
        <p>我的</p>
      </router-link>
    </ul>
  </footer>
</template>

4 .结论

本设计是在Visual Studio Code编辑器上完成，主要采用HTML5，CS3S和JavaScript这三个开发工具进行程序的编写以及功能的实现，利用VUE进行框架的链接。其功能包括：注册账号、浏览商品、修改密码、收藏商品、加购物车商品、用户登录、购买商品等等。

4.1主要特色与优点介绍
基于VUE框架实现的设计，使得管理更加高效，订单处理更有效率，并且进行技术和服务器优化后，尽力使得响应时间更短，增加设计的稳定性。同时应用简单，不需要用户去应用商店下载，减少了手机的负担，用户只要具备简单的可以联网的手机，顾客就可以很方便的进行订单操作。本设计设计时充分考虑顾客的使用习惯，因此，该设计对于大多数人是操作简单、方便和灵活。
4.2设计的不足与改进方案
本设计在订购商品方面获得了一定的成果，同时仓促的开发时间使得我们没有完成部分框架模板和功能，比如客服和售后，在一些细微的功能用户不能够方便、流畅的使用。因此在一些模块还需再进行功能的完善。