基于web的购物商城的开发与实现

摘要网上购物的人员越来越多大,各种网上购物系统的浮现,使人们能够足不出户的进行购物.这种现象对于各单位而言,无论是企业与客户之间的交易,还是企业之间的交易,可以通过网上交易的方式,使交易速度得到大幅度提高,并达到节约成本的目的.现阶段,随着信息产业和计算机网络数据库技术的不断发展,网上购物的形式越来越多样.文章主要对基于Web的网上购物系统进行分析,使其能够为人们的日常生活提供更多方便。关键词：网上购物系统WEBvue-clithinkphpJavaScript引言1.1购物商场的设计思想本人基于目前手机对应大家来说几乎是形影不离的情况下，设计一个便捷的移动端网上购物商城系统，让它也有机会与大家息息相关。该购物系统使用前后端分离的设计思想，先设计好前端的每个页面结构，在开始画页面，结合前端代码与前端框架进行开发，代码与图片的相结合完成前端的结构。后端先收集好各种数据，再把后端管理系统的界面设计好，把各类功能整理出来，根据需要的功能做出对应的功能实现模块，在开始做数据的处理。1.2商城开发工具的选用和介绍在当今人人手机不离身的时代下，我将写一个基于移动端的一个购物系统，它的开发主要包括后端数据库的建立，后端管理以及前端页面的Web设计。系统采用了我比较熟悉的VScode,Editplus,Apacheservices,pyCharm,photoshop等开发工具，做出详细的结构分析，前端页面的划分，前端页面的功能，提供给用户的信息做出详细的整合，使用Vue3.0框架对前端做开发；数据的收集使用python进行爬取,大量收集json数据;后端系统使用PHP语言,采用thinnkphp5.0框架对后端数据做主要的处理，通过apache提供服务器接口，完成主要的基本功能。改购物系统主要包括用户管理功能，商品信息，店家信息展示，购物车管理，订单管理4大主要模块。用户管理实现了用户的注册，登陆，退出等主要功能；商品信息展示主要实现了显示商品，商品的详细信息，店家详细信息，商品选购等主要功能；购物车管理实现查看商品，修改数量，删除商品等主要功能；订单管理包括改订单的详细信息，地址的填写等主要功能。该系统简介有效，处于移动端使用，符合当代人生活习惯。2购物商城的概要设计2.1项目背景介绍2.1.1网上商城的背景近年来，随着网络时代的迅速崛起，互联网已经成为了收集和提供信息的重要渠道并已经深入到了传统的流通领域。所谓时势造英雄。各种时代化的流行领域迅速发展起来，尤为大家熟知的电子商务更是如日中天，在很短的时间内就遍布全国，小到5岁，大到65，基本都熟知网购，然后消费者主要接触的就是电子商务的前端商务平台，在其整个流程中有着举足轻重的作用。而购物商场的腾空出现，为新一代的购物方式提供了一种全新的购物平台。我要为大家详细介绍的就是如何建设一个全新的网上购物系统。网上购物是一种具有交互功能的商业信息系统。它向用户展示了大量的信息，包括各种各样的商品信息，买家卖家信息等等等等，这些主要是一些静态信息；当然还有些较为重要的动态信息，商品报价的实时更新，各种节日活动折扣信息等等等等；除此之外还有较为完善的交互功能，能让商家客服和用户做出详细的交流，客服为用户对改商家的商品答疑解问，进一步促进了商品成交的成交率。让网购实现更人性化接近化的感觉。随着网络经济时代的高速发展，互联网已逐步深入人心，大家都热衷与网上购物，网上购物已经基本在12-60岁的人都熟悉的使用，基本实现了人人会网购的情况出现。信息技术的快速发展，让很多的人都开始采用了网上销售和管理等方式。网上购物极大的方便了人们的生活状态，现在很多的工作党常年的工作，基本抽不出时间到外面花大量的时间逛实体店寻找自己要的东西来购买，而网上购物则可以轻松解决这种问题，只要一部手机，正常上网则可以百里挑一，轻松便捷的找到合适自己的东西，而且类型齐全，价格方面甚至都比实体店占据了很大的优势。网上购物对社会的发展有着无比重大的意义，它完全颠覆了以前传统的购物行为与方式，它引领了一个跨时代的进步。2.2模块设计2.2.1前端模块前端模块的设计主要分为页面结构，页面样式，页面功能3大结构。页面结构主要分为首页，分类，购物车，个人首页4大部分；首页有各种商品展示，又分为流行，新款，精选类商品，选中该商品点击即可进入商品详情页面，在商品详情页，可以点击该商品加入购物车；也可以直接进行购买，可以与客服进行交流，可以进店看看，也可以对该商品进行收藏。分类页面主要用于展现更为详细的物品分类，包括全身的帽子，衣服，鞋子等等等等，在每一类中还细分为3大类，包括综合，新品和销量，每一样都类型多多；购物车页面则可以看到加入购物车的物品，也可以在这里把该物品移除购物车，或者添加数量，在购物车页面内也可以取消选中某类商品，在下面有一个全选功能，该全选功能在本来已经全部选中的状态下是全部不选中的作用，其他情况均为全部选中，同行内，还有一个合计价格，右侧还有一个取计算的按钮等功能；个人首页则主要用来展示该用户登陆后的个人信息，有未登陆前的页面本身的信息，有登陆成功后该用户的信息，其中包括他的个人余额，优惠劵，积分等信息，还设计了一些小功能，包括一些积分商城，积分可兑换商品，和会员卡等小功能，这些是主要前端模块的设计思想。2.2.2后端模块后端模块的设计主要分为三大部分，首先第一部分是收集数据；第二部分则是对后端模块的结构页面的设计；第三部分则是对数据的处理，即主要是对数据的增删改查。数据的来源主要是使用python爬取蘑菇街的大量信息，把大量信息存入数据库，利用thinkphp5.0对数据做对应方法的增删改查。收集数据主要采用python对蘑菇街的信息进行爬取，以json的格式进行保存下拉；后端数据库的设计主要是通过下载phpMyadmin，利用它创建数据库，创建对应的数据表做整体数据的存储和管理；数据的处理则是使用TP5框架，利用Sql语句，封装好对应的增删改查方法，对后端数据做出处理。后端中有管理员身份的功能模块，也有数据处理模块，比如有更改商品价格的功能，有更改对商品信息描述的功能等等，这是设计后端模块的思想。

3详细设计3.1前端模块设计3.1.1前端的搭建前端采用vuecli3.0创建项目:首先全局下载node.js,node版本大于8.9,然后开始下载全局的npm依赖，可以在dos里使用命令:npminstall-g@vue/cli,默认下载最新版本,或者在VScode里面的终端里面安装,同样安装完之后可以使用vue-V检测当前安装的版本。有了这些前提条件之后，我们可以在新建文件下开始创建项目，同样在VScode的终端下使用命令:vuecreatemy-project-save-dev,包含开发时依赖，测试依赖；创建项目的过程有各种选项选择，各个选项可以使用空格选择，typescript支持使用typescript书写源码，router支持vue-router,vuex支持vuex;还有各种个人信息可以填写到项目里面,包括作者，邮箱等个人信息，当我们选择好各类选项之后，开始安装直到项目下载完成。于是我们的vue-cli3.0就已经安装完成，我们还可以补充许多开发时经常用到的文件信息，例如，创建一个assests文件，里面存放一些公共css文件和一些图片img，各种小图标logo，包括封装一些常用的js方法，例如时间的格式化等一些常用的方法；在该文件下通常也会封装该项目所需的大部分组件，有依赖该项目的文件可以放到components/content下,若不存在较强的依赖性，可以独立封装到components/common文件下，该文件夹中的组件均可以直接使用到其他项目中去；我们继续可以创建一个network文件用于发送网络请求的文件，里面封装好发送网络请求的方法，便于我们请求接口的数据；可以创建一个store文件用于对要使用到vuex的功能进行封装；创建一个view用于对各个主页进行统一的存放；可以创建一个vue.config.js文件，在该文件内全局导出一个个文件夹目录的别名，方便项目开发的时候剑神对路径的依赖；到此可以进行前端的开发。3.1.2前端中各页面的设计每个页面都使用photoshop把每个页面大致外观描绘出来，通过各种小格局的不断调试，最终完善每个页面的设计。第一步首先做好PSD，根据自己所画的页面，确定哪些位置将有图片来完成，哪些位置是代码能够完成的，一些动态效果需要用到javascript来实现，这样步步为营，先把准备工作完成，在开始前端的开发。3.1.3前端中各页面中的小图标的获取前端页面中涉及很多的小图标，比如首页，分类购物车，分类，我的，和返回按钮等，其中还包括该选项是否处于活跃状态的时候的图标。而我对这些图标的选择则在阿里巴巴矢量官网库里面选择合适的图标采用svg格式下载到本地使用。3.1.4前端中导航栏组件的封装与使用前端的单页面中主要使用组件化的开发思想，为了方便维护，使用地内聚，高耦合的组件化封装，基本实现一个功能一个组件，类似功能则直接导出封装好的组件使用即可。而其中的导航栏则封装为一个MainTabBar的一个独立组件，其中使用了四个插槽为了分别显示首页，分类，购物车，我的，四个主要页面，其中每个页面都有自己对应的小图标，并且小图标都分别有两种不同的颜色，红色代表处于活跃状态的时候，黑色代表处于非活跃状态的时候。在这里先配置好路由，在router文件下的index.js文件中，每一个页面跳转都使用路由懒加载的方式，减轻服务器的压力，用于在这4个页面中跳转，其中每一个跳转对应了其中的子组件，其中包括首页-Home.vue;购物车-Cart.vue;分类-Category.vue;我的-Profile.vue,在配置路由时候，每当点击哪里即可跳转至哪里，其路径的方式为history，在此还定义一个redirect重定向主要作用于默认在首页.。到此为止，主要的4大部分内容即可分好。3.1.5前端中首页的开发首页开始首先是顶部的开发，顶部中间显示的是购物车，也是该项目的主要作用，它是一个组件为NavBar.vue，该组件在头部还分为左中右三部分，三部分均用插槽作用，这里使用插槽的主要原因是为头部封装一个独立的组件，该项目封装的组件均设计有默认的样式，可能在其他页面也会被使用到，到时候在直接调用该组件即可；下面则是轮播图，该轮播图也封装成一个独立的组件，其轮播中的图片在调用接口后返回数据，接收到图片使用封装好的组件Scroll.vue开始轮播，其设计原理主要是采用了定时器，每张图的播放时间为2.5秒，点击到图片时，定时器清除，图片停止播放，放开即继续播放，当把其中的图片向左或向右滚动至1/3位置时，即可滑到下一张图片，当我们直接点击其中的轮播图后，则会跳转至该轮播图所在的详情页信息，对应该轮播图携带的主要信息测展示；接下来是一个图片的组件HomeSwiper.vue，该组件内部的图片展示是调用Swiper.vue组件与他的子组件SwiperItem.vue为该组件做一个展示的结果，在整体图片外面包裹一个<a>标签；接下来同样是接口返回的一张图片，作为一个本周流行内容，调用了RecommendVie.vue组件，在点击这张整体图片后会跳转至一个本周流行的商品展示页面，展示的是本周流行的商品详细信息；下面到了三个小分类数据，这里封装了一个TabControl.vue组件，包括其中的流行，新款，精选三种数据的展示，当点击新款则展示新款数据，其他两类也是如此，其中点击其中的一种展示的样式也是不一样的，展示的样式为红色和下划线，而展示的内容包括图片，标题，价格和收藏量，它们用一个GoodsList.vue组件和其子组件GoodsListItem.vue进行展示，它们均为接口返回数据，当用户一直往下来的时候则，流行，新款，精选，三个选项会有一个吸顶效果，持续下拉该三项会停留在购物街的下面位置，而上拉回来的时候又回消失在该位置，当下拉到一定程度时候，右下角会出现一个回到顶部的小箭头按钮，该小按钮也是一个封装好的BackTop.vue的组件，当点击该按钮时则会在200毫秒的时间回到顶部，其中当用户持续下拉找寻更多商品的时候会触发上拉加载更多的时间，继续回调接口返回更多的数据展示，可谓是任君挑选，这样的流程下来后，首页开发完成。3.1.6前端中BetterScroll的使用首页中的滚动采用的是BetterScroll作为滚动效果，没有采取JavaScript中的原生的滚动，这是一个开发者已经持续开发和维护中的一个比较好用的插件，该插件的使用方法较为简单便捷，直接在终端输入下载命令即可，然后把BetterScroll组件直接引用进来，在Components里面注册，把需要滚动的部分放到该组件内即可，选择该组件还有一个重要的原因，是因为该组件在下拉或上拉到顶的时候有一个回弹的效果，在移动端中比较适用；betterScroll在使用的过程中存在不少的bug，我们在使用这个组件的时候必须给定滚动内容一个指定高度，不能像原生滚动一样，以文本内容支撑高度，而better-scroll在计算可滚动高度时时在该组件挂载完之后，所以在内容较长，图片较多的页面往往会产生一个滚动滚到一定位置不能继续往下滚的bug，为了解决这个bug，我们必须在之前监听该首页的图片加载完成事件，而在我们监听完这个事件后，我们在开启调用该方法，才能保证该滚动效果没出现类似的bug。3.1.7前端中的详情页当点击首页中的某一个商品的时候，它会携带其中的一个iid来到详情页面，根据携带过来的iid显示该商品的详情部分信息在此页面做展示。该页面头部有5个小部分，由一个封装好的DetailNavBar.vue组件，从左到右依次是一个返回按钮，商品，参数，评论，推荐，这5大选项，其中每一个都对应其相对的信息；其中商品详情数据包括大量的穿着效果图片、标题、价格、优惠价格、销量、折扣信息、运险，退货，包邮等等信息；参数信息则包括，胸围、腰围、裤长、衣长、肩宽、腰围、图案、颜色、季节、材质、领型、袖长、风格、尺码、版型等具体参数信息的展示；而评论信息则可以展示买家的评论信息内容，包括该用户的id、图像、评论内容和评论时间、评论图片等内容，同行内还有可以点击显示更多评论内容；而最后的推荐内容展示风格和首页的上拉加载更多展示的风格一致，而在推荐列表中则没有做图片的上拉加载更多，只有固定数量图片的展示。详情页中的滚动同样是采用BetterScroll作为滚动效果，在这里也直接调用回到顶部的组件BackTop.vue，在下拉到一定距离后则会显示一个回到顶部按钮，回到顶部后该按钮消失；其中这里详情页的设计还有一个重点就是顶部四大项的点击，同样点击其中的一项会有红色的样式作为标志，未选中的则为黑色，而当你点击其中的一项时候，该详情页会在200毫秒跳到相应的位置，其中的BackTop.vue组件也会在点击对应选项时滚动到的位置做一个显示；然后我们并未选择点击顶部选项的方式来浏览详情页的相应内容，选择下拉浏览的时候，当你下拉到相应的位置时，上面的选项也会根据你下拉到的位置显示相应位置的红色样式。该详情页的导航栏部分则有5大部分，分别是客服、店铺、收藏、加入购物车、购买功能。其中的客服功能，主要的是卖家于买家的简要沟通，两者可以在此做一些简单的商品方面的询问信息等，该功能由一个Cheap.vue组件完成；店铺信息，就是在同一家店中，找寻该店的其他商品，包括一些类似的商品，这里有GoodsList.vue和其子组件GoodsListItem.vue组件共同完成该功能。这里的收藏功能的话，在你点击收藏按钮的时候，会把该商品收藏到你的收藏夹里面，在收藏夹中展示的信息与购物车展示的方式一样，同样采用CartList.vue和其子组件CartListItem.vue做一个收藏夹的展示。3.1.8前端中的购物车购物车页面的顶部和首页中的顶部使用同一个组件NavBar.vue，购物车页面顶部展示的是购物车和数量，展示购物车的的组件为CartList.vue和其子组件CartListItem.vue，该数量为所有购物车内的种类数量，包括选中和未选中的商品；该页面滚动部分也是使用BetterScroll作为滚动；其中购物车页面展示的是一个图片和部分说明信息，价格和数量，在每一项的左边还有一个选择按钮，当你加在详情页加入购物车后，详情页在中间位置会有一个吐司效果，该效果是一个Toast.vue的组件，如果选择一个新商品添加到购物车，则显示添加购物车成功，如果同一种商品多选，则会显示选择该商品数量+1，均在1.5秒后消失该提示信息；购物车页面在贴住底部导航栏中还有一个全选按钮和一个合计信息和一个去计算的数量信息，由一个CartBottomBar.vue的组件完成，全选则用于对购物车中的商品做一个全部选择作用，如果购物车中的所有商品已经是全部选择状态，则该按钮为全部不选择的作用；合计信息主要是总价格的计算，用每个商品的单价乘与数量产生总价格；去计算按钮则是选中的数量，与顶部的数量不是同一个作用。3.1.9前端中的分类分类页面中的顶部依然是调用和首页顶部相同的组件NavBar.vue，展示的信息是商品分类。而下面开始则分为左右结构，左边显示商品的类别，右侧则显示你选中的类别的商品部分信息的展示。左侧商品的选项为竖着方向的日常的穿着用品名称，包括第一项统一性的正在流行，然后依次是上衣，裤子，裙子，内衣，女鞋，男友，包包，运动，配饰，美妆，个护，家居，百货，母婴，食品等等，其中主要的是女性衣饰品，由一个TabMenu.vue组件展示，当点击其中的任意一项时，该项的样式则发生改变，该选项左侧有左划线，字体颜色为红色，字体大小也有明显的变大；来到右边部分，展示的则是你在左侧选中的选项的对应信息，右侧展示对应的信息时还细分为三大类，包括综合数据，新品数据和销量数据，这些数据的展示则是用TabControl.vue组件，这是前面也已经封装好的组件，而这里和首页传过去的参数不一样，这里传的是综合，新品和销量，这里也体现了复用组件的便捷性，而我们在左侧选择自己想要的类型的时候来到右侧又有三大类型挑选，可谓是内容多多，用户则可以在所需的对应的商品中选择合适自己的进行购买，而在我们点击了心仪的商品之后，会跳转至商品的详情页，该详情页的设计思想与在首页中选中的商品点击跳转的详情页一致都是使用DetailShopInfo.vue等组件一起做一个展示，同样来到了详情页之后可以选择添加至购物车或者直接购买。3.1.10前端中的个人我的商城页面中的顶部信息依然是首页顶部的组件NavBar.vue，展示的信息为我的商城。我的商城下面则是个人信息，包括个人信息的头像和登陆注册功能和绑定手机号作用，其中主要由一个UserInfo.vue组件组成。在下面则展示的信息是我的余额和我的优惠卷，还有我的消费积分，这里的信息则是在当前组件内用DIV+CSS做一个结构布置和页面样式，把内容展示出来。再来到下面则依次是我的消息，积分商城，会员卡，我的购物车，下载购物App等功能，这里的几大功能都是封装好一个ListView.vue组件组成，由该组件进行内容的展示。3.1.11前端中的支付和支付成功我们在详情页面选择好自己心仪的商品后，想对该商品进行购买，或者在购物车点击购买所需的物品，则可以来到购买页面，这里由于支付的接口个人申请不到，则统一为购买后直接跳转至支付成功页面，在支付成功后可以看到该商品的下单事件，花费的价钱，商品的描述信息等，类似于购物车页面的商品信息，这里又一个SurePull.vue组件完成该功能。3.2后端模块设计3.2.1后端的搭建在windows系统上，后端采用thinkphp5.0作为开发框架。首先下载Apache作为服务器，构建虚拟主机，更改vhost和host配置文件，配置一个自己的端口号，方便预览。开始下载TP5框架，把下载好的框架拉到Editplus进行开发。下载phpMyadmin，在phpMyadmin中创建数据库，创建对应的数据表，准备阶段将完成。后端的搭建基本完成。3.2.2后端的数据收集后端大量数据的收集主要来源于蘑菇街，采用python在该系统中爬取相关的数据，在爬取的过程中需要选择高网速的网络，否则将会出现错误，爬取的信息不齐，获取爬取失败，包括大量的图片，图片标题，图片的分类，流行的，精选的，新款的，还有详细分类中的上衣，裤子等尺码，评论，时间等各种描述信息，商品价格，销售量等信息，爬取到的JSON数据存入phpMyadmin中相应的数据库中的数据表内，收集好的数据将作用于项目的主要开发来源。3.2.3后端数据库和表的创建后端采用phpMyadmin创建数据库，创建的数据库库为supermall，在次数据库内创建相对应的表，每一种分类数据对应一张表，在对应的数据表中，创建许多的字段对应相应的内容，比如，前端中的轮播图中的图片使用一个字段，本周流行也对应一个字段，流行，新款，精选等都有相应的字段对应，其中每个图片还有对应的id作为唯一标识，用作于该表的主键。许多的数据表，基于这种结果，在对应的需求中逐渐的添加，逐渐的修改完善。3.2.4后端中的管理页面设计后端中，打开后端管理系统，则需要管理员登陆，在成功登陆后则进入到后端管理系统中，该管理系统采用左右布局的方式，左侧为管理选项，右侧为管理信息，其中包括管理员管理，包括数据的管理，在右侧的管理列表中也相对应数据表中的各个字段做相应的内容展示，便于管理。后端页面设计较为简介，样式和布局的规划简介明了。3.2.5后端系统中的主要功能后端系统中，有登陆功能，有修改密码功能，在需要更改登陆密码的时候可以使用修改密码功能，对管理系统的登陆密码进行修改；在成功登陆进系统之后，在左侧的选项栏中可以看到有管理员模块和数据模块，管理员模块中主要有添加管理员，删除管理员，修改管理员信息等功能；而数据模块中则有许多的功能，分别都是对数据的处理功能，包括各种图片的路径，图片的标题信息，描述信息，商品尺码，买家评论，库存，销量，价格等大量的信息，此功能模块即可对这些信息，做相应的更改，例如，更改某商品的价格，添加商品的库存，添加新款上市衣服等对这戏数据信息处理的功能。3.2.6后端系统中功能的实现后端系统中功能的实现，首先打开Editplus把下载好的thinkphp5.0框架拉到editplus编译器中，开始进行开发，对后端页面陈述的功能的实现。首先找到配置文件database.php文件，在其return中，把数据库名改为在phpMyadmin中创建好的数据库名supermall，把表前缀也改为与创建的数据表的前缀名字一致，其他配置信心基本保持默认，核对有没有不一致的信息，TP5框架基本为我们写好配置信息。在正确连接上数据库后，我们可以开始进行开发。我们可以在common.php中先封装好常用的方法，例如对数据的删除和添加两种，而修改和查询分为两类方法，一个是普通查询，一个是高级查询，修改同样也分普通和高级修改，这样的处理分式，对于数据有着良好的接纳性。针对于管理员功能中，我们要为管理员修改登陆密码，即可用封装好的普通修改密码的方法即可，在后端页面系统中，登陆页面中则有修改密码安妮，当管理员需要修改密码时，则可以使用；管理员系统中，还可以添加管理员，同样点击添加管理员，即在页面输入数据表中对应的字段信息，则将保存到数据库，新的管理员也就诞生了；如是该管理员离职，则需要移除账号是，同样，点击移除该管理员，使用封装好的删除的方法，即可将该数据从数据库中移除掉。一个管理员系统中的管理员功能的基本功能就完成了。我们要对数据模块功能做处理，首先对于图片的包装，我将爬取到的各类数据，进行详细的分类，例如，爬取到的轮播图中的图片，我在数据表中创建了一个字段用于保存，而在用TP5框架处理的时候，则用一个数组用来保存，当有图片要更新或替换的时候，会在后端系统中有更换轮播图的按钮，点击之后，依旧调用common.php中封装好的方法，用于更新轮播图的图片。对于其他的分类，例如流行类，该类图片设计的字段更多，其中包括有该图片的url,title,height,link,keywords,等等很多的信息，我们单独为它创建一个表，创建对应的字段，给予一个主键用于确定它的唯一性，给定一个id，让我们明确的分类好各钟图片，而我的后端系统中，并未对该图片的每一项信息，都做对应的更改功能，选择部分需要常用的功能，例如价格，款式，颜色等，有变更，直接在后端做变更，同样调用封装好的方法，其他的新款，或者精选还有其他的分类信息，均采用该方式，对数据的处理，然后实现后端的功能模块。

感谢语经过这一次的项目开发，我有学到了很多的知识，对vue.js的理解更加深刻，对于项目的需求有了更加的严谨性，充分练习了我的逻辑能力，对于一个人的独立项目，涉及的知识面比较宽广，意识到自己的知识领域相当的狭隘，而且对于许多新的知识也不够了解，让我有了对新知识的迅速学习感。在此除了自我学习外，老师也给予了我很大的技术直到和经验，对于一些不自觉产生的bug老师总能凭着自己丰厚的经验，给我我思路，根据老师提供的思路，总结bug可能产生的原因，根据实际情况解决bug。在此，深深的感谢我的指导老师，在他的指导下顺利完成毕业设计。非常谢谢老师。参考文献[1]在vue.js教科书里面参考许多方法的实现，功能的实现，了解vue.js的生命周期函数。[2]百度寻找疑惑的不解的问题。通过找寻别人的开发经验，参考我的问题所在，做出正确的修改方案。[3]在CSS3的书本里面参考部分新出的样式功能，相对于以前的使用javascript实现的效果来说，css3简单的样式就能实现这些功能，使得代码更加的简洁。

附录资料：不需要的可以自行删除HYPERLINK不用鼠标怎么用键盘操作电脑.有哪些快捷键?快捷键大全F1显示当前程序或者windows的帮助内容。F2当你选中一个文件的话，这意味着“重命名”F3当你在桌面上的时候是打开“查找：所有文件”对话框F10或ALT激活当前程序的菜单栏windows键或CTRL+ESC打开开始菜单CTRL+ALT+DELETE在win9x中打开关闭程序对话框DELETE删除被选择的选择项目，如果是文件，将被放入回收站SHIFT+DELETE删除被选择的选择项目，如果是文件，将被直接删除而不是放入回收站CTRL+N新建一个新的文件CTRL+O打开“打开文件”对话框CTRL+P打开“打印”对话框CTRL+S保存当前*(糙)*作的文件CTRL+X剪切被选择的项目到剪贴板CTRL+INSERT或CTRL+C复制被选择的项目到剪贴板SHIFT+INSERT或CTRL+V粘贴剪贴板中的内容到当前位置ALT+BACKSPACE或CTRL+Z撤销上一步的*(糙)*作ALT+SHIFT+BACKSPACE重做上一步被撤销的*(糙)*作Windows键+M最小化所有被打开的窗口。Windows键+CTRL+M重新将恢复上一项*(糙)*作前窗口的大小和位置Windows键+E打开资源管理器Windows键+F打开“查找：所有文件”对话框Windows键+R打开“运行”对话框Windows键+BREAK打开“系统属性”对话框Windows键+CTRL+F打开“查找：计算机”对话框SHIFT+F10或鼠标右击打开当前活动项目的快捷菜单SHIFT在放入CD的时候按下不放，可以跳过自动播放CD。在打开word的时候按下不放，可以跳过自启动的宏ALT+F4关闭当前应用程序ALT+SPACEBAR打开程序最左上角的菜单ALT+TAB切换当前程序ALT+ESC切换当前程序ALT+ENTER将windows下运行的MSDOS窗口在窗口和全屏幕状态间切换PRINTSCREEN将当前屏幕以图象方式拷贝到剪贴板ALT+PRINTSCREEN将当前活动程序窗口以图象方式拷贝到剪贴板CTRL+F4关闭当前应用程序中的当前文本（如word中）CTRL+F6切换到当前应用程序中的下一个文本（加shift可以跳到前一个窗口）在IE中：ALT+RIGHTARROW显示前一页（前进键）ALT+LEFTARROW显示后一页（后退键）CTRL+TAB在页面上的各框架中切换（加shift反向）F5刷新CTRL+F5强行刷新激活程序中的菜单栏F10执行菜单上相应的命令ALT+菜单上带下划线的字母关闭多文档界面程序中的当前窗口CTRL+F4关闭当前窗口或退出程序ALT+F4复制CTRL+C剪切CTRL+X删除DELETE显示所选对话框项目的帮助F1显示当前窗口的系统菜单ALT+空格键显示所选项目的快捷菜单SHIFT+F10显示“开始”菜单CTRL+ESC显示多文档界面程序的系统菜单ALT+连字号(-)粘贴CTRL+V切换到上次使用的窗口或者按住ALT然后重复按TAB，切换到另一个窗口ALT+TAB撤消CTRL+Z使用“Windows资源管理器”的快捷键如果当前选择展开了,要折叠或者选择父文件夹左箭头折叠所选的文件夹NUMLOCK+负号(-)如果当前选择折叠了，要展开或者选择第一个子文件夹右箭头展开当前选择下的所有文件夹NUMLOCK+*展开所选的文件夹NUMLOCK+加号(+)在左右窗格间切换F6可以使用Microsoft自然键盘或含有Windows徽标键的其他任何兼容键盘的以下快捷键。在任务栏上的按钮间循环WINDOWS+TAB显示“查找：所有文件”WINDOWS+F显示“查找：计算机”CTRL+WINDOWS+F显示“帮助”WINDOWS+F1显示“运行”命令WINDOWS+R显示“开始”菜单WINDOWS显示“系统属性”对话框WINDOWS+BREAK显示“Windows资源管理器”WINDOWS+E最小化或还原所有窗口WINDOWS+D撤消最小化所有窗口SHIFT+WINDOWS+M关闭所选文件夹及其所有父文件夹按住SHIFT键再单击“关闭按钮（仅适用于“我的电脑”）向后移动到上一个视图ALT+左箭头向前移动到上一个视图ALT+右箭头查看上一级文件夹BACKSPACE五、使用对话框中的快捷键目的快捷键取消当前任务ESC如果当前控件是个按钮，要单击该按钮或者如果当前控件是个复选框，要选择或清除该复选框或者如果当前控件是个选项按钮，要单击该选项空格键单击相应的命令ALT+带下划线的字母单击所选按钮ENTER在选项上向后移动SHIFT+TAB在选项卡上向后移动CTRL+SHIFT+TAB在选项上向前移动TAB在选项卡上向前移动CTRL+TAB如果在“另存为”或“打开”对话框中选择了某文件夹，要打开上一级文件夹BACKSPACE在“另存为”或“打开”对话框中打开“保存到”或“查阅”F4刷新“另存为”或“打开”对话框F5选择项目时，可以使用以下快捷键。目的快捷键插入光盘时不用“自动播放”功能按住SHIFT插入CD-ROM复制文件按住CTRL拖动文件创建快捷方式按住CTRL+SHIFT拖动文件立即删除某项目而不将其放入SHIFT+DELETE“回收站”显示“查找：所有文件”F3显示项目的快捷菜单APPLICATION键刷新窗口的内容F5重命名项目F2选择所有项目CTRL+A查看项目的属性ALT+ENTER或ALT+双击可将APPLICATION键用于Microsoft自然键盘或含有APPLICATION键的其他兼容键七、Microsoft放大程序的快捷键这里运用Windows徽标键和其他键的组合。Windows徽标+PRINTSCREEN将屏幕复制到剪贴板（包括鼠标光标）Windows徽标+SCROLLLOCK将屏幕复制到剪贴板（不包括鼠标光标）Windows徽标+PAGEUP切换反色。Windows徽标+PAGEDOWN切换跟随鼠标光标Windows徽标+向上箭头增加放大率Windows徽标+向下箭头减小放大率八、使用辅助选项快捷键目的快捷键切换筛选键开关右SHIFT八秒切换高对比度开关左ALT+左SHIFT+PRINTSCREEN切换鼠标键开关左ALT+左SHIFT+NUMLOCK切换粘滞键开关SHIFT键五次切换切换键开关NUMLOCK五秒用AIT+TAB还有微软微标的个键，方向键。最多的是用到AITF1显示当前程序或者windows的帮助内容。F2当你选中一个文件的话，这意味着“重命名”F3当你在桌面上的时候是打开“查找：所有文件”对话框F10或ALT激活当前程序的菜单栏windows键或CTRL+ESC打开开始菜单CTRL+ALT+DELETE在win9x中打开关闭程序对话框DELETE删除被选择的选择项目，如果是文件，将被放入回收站SHIFT+DELETE删除被选择的选择项目，如果是文件，将被直接删除而不是放入回收站CTRL+N新建一个新的文件CTRL+O打开“打开文件”对话框CTRL+P打开“打印”对话框CTRL+S保存当前*(糙)*作的文件CTRL+X剪切被选择的项目到剪贴板CTRL+INSERT或CTRL+C复制被选择的项目到剪贴板SHIFT+INSERT或CTRL+V粘贴剪贴板中的内容到当前位置ALT+BACKSPACE或CTRL+Z撤销上一步的*(糙)*作ALT+SHIFT+BACKSPACE重做上一步被撤销的*(糙)*作Windows键+M最小化所有被打开的窗口。Windows键+CTRL+M重新将恢复上一项*(糙)*作前窗口的大小和位置Windows键+E打开资源管理器Windows键+F打开“查找：所有文件”对话框Windows键+R打开“运行”对话框Windows键+BREAK打开“系统属性”对话框Windows键+CTRL+F打开“查找：计算机”对话框SHIFT+F10或鼠标右击打开当前活动项目的快捷菜单SHIFT在放入CD的时候按下不放，可以跳过自动播放CD。在打开word的时候按下不放，可以跳过自启动的宏ALT+F4关闭当前应用程序ALT+SPACEBAR打开程序最左上角的菜单ALT+TAB切换当前程序ALT+ESC切换当前程序ALT+ENTER将windows下运行的MSDOS窗口在窗口和全屏幕状态间切换PRINTSCREEN将当前屏幕以图象方式拷贝到剪贴板ALT+PRINTSCREEN将当前活动程序窗口以图象方式拷贝到剪贴板CTRL+F4关闭当前应用程序中的当前文本（如word中）CTRL+F6切换到当前应用程序中的下一个文本（加shift可以跳到前一个窗口）在IE中：ALT+RIGHTARROW显示前一页（前进键）ALT+LEFTARROW显示后一页（后退键）CTRL+TAB在页面上的各框架中切换（加shift反向）F5刷新CTRL+F5强行刷新激活程序中的菜单栏F10执行菜单上相应的命令ALT+菜单上带下划线的字母关闭多文档界面程序中的当前窗口CTRL+F4关闭当前窗口或退出程序ALT+F4复制CTRL+C剪切CTRL+X删除DELETE显示所选对话框项目的