基于Vue的娱讯移动端APP前端设计与实现

目录TOC\o"1-3"\h\u摘要 绪论1.1课题背景及目的1.1.1移动端APP发展简介移动端APP的发展与移动互联网是休戚相关的，并随着互联网的发展而发展。更重要的是，移动互联网的应用范围和深度将不断拓展和深化，产业互联网将创造出从生活到生产的移动应用，整个社会发展的移动应用领域将加速和拓展REF_Ref24812\r\h[3]。wifi覆盖面不断扩大，移动APP应用空间的发展也有了更大的平台，这在PC端一直是比较难突破的极限REF_Ref24877\r\h[4]。智能手机是移动领域的重要媒介，适应一定的潮流性。此外，PC端的建设也将更快的推动移动端的进步。1.1.2移动端APP的优势相对于PC端，移动端APP具有的优点可以概括这些：（1）准确性：如果一款APP是用户自愿下载的，说明下载者至少对该品牌感兴趣。同时，APP还可以通过收集手机系统的信息，包括位置信息、行为信息等，来识别用户的兴趣和习惯REF_Ref24946\r\h[5]。（2）互动性：移动端操作非常简洁便利，文字、图片、视频等都可以在APP上进行。此外，APP还打破了分处不同地方之间的沟通障碍，通过在APP内嵌入社交平台，同一APP的用户可以互相交流经验，通过互动和口碑来增加品牌忠诚度。（3）创意性：因为APP是一种新的工具、新的媒介、新的展现方式，它的打造应该是更多的软件思维，更多的用户体验，更多的考虑软件的流程，只有创造出一款真正让用户爱不释手的APP，用户才会点阅REF_Ref25008\r\h[6]。（4）超强的用户黏性：现在人们不管是在哪里手里一定都会握着手机，一有时间就会拿着手机出去玩。而除非用户主动删除，否则这个APP就会一直停留在用户的智能手机上，品牌就有机会给用户留下重复印象。1.2前端开发相关技术1.2.1前端开发工具介绍（1）VisualStudioCode简介VisualStudioCode是一款轻量级但功能非常强大的源代码编辑器，它可以在桌面上运行，可以在Windows、macOS和Linux系统上使用。它内置了对JavaScript、TypeScript和Node.js插件的支持，以及大量的扩展语言插件。VisualStudioCode是一个简单的代码编辑器，支持调试、任务执行和版本控制等开发操作。它只为开发人员提供了快速构建和调试代码所需的工具，将更复杂的工作流程留给功能更完善的IDEREF_Ref25057\r\h[7]。（2）HbuilderX简介HBuilder，H是HTML的缩写，Builder是建设者。它是为前端开发者服务的通用IDE，与vscode、sublime、webstorm类似。它可以开发普通web项目，也可以开发DCloud出品的uni-app等。1.2.2前端开发相关技术介绍（1）JavaScript简介JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器称为JavaScript引擎，被广泛地用作客户端脚本语言为HTML页面添加动态功能REF_Ref25139\r\h[8]。（2）CSS简介CSS样式表是用于表示文件样式的计算机语言，如HTML和XML，而CSS不仅可以静态修饰网页，还可以利用各种脚本语言动态地对网页元素进行格式化REF_Ref25289\r\h[9]。（3）Vue简介是一套用于构建用户界面的渐进式框架，（渐进式就是指可以控制一个页面的一个标签，也可以控制一系列标签，也可以控制整个页面，甚至可以控制整个前台项目），并且可以独立完成前后端分离式web项目的javascript框架REF_Ref25426\r\h[11]。1.3本章小结本章主要描述了本文所实现的项目中用到的开发工具与核心技术，编程工具使用的是VisualStudioCode进行模块化，组件化的开发，项目进行打版的工具使用的是HbuilderX工具，通过打包后进行云端发行，最后打版成pk压缩包。核心技术包括并使用了JavaScript、CSS、HTML，通过Vue框架来整合这三项技术进行开发，本章从工具到技术都有很详细的描述。2系统分析2.1功能需求分析娱讯APP项目拥有用户模块，如果已经注册过账号的用户或者是使用手机号来直接进行登陆操作的用户，可以通过输入注册过的账号和密码或者输入格式正确的手机号用来接收短信验证码来完成登录操作来进入首页，如果是未注册过账号的用户且用户的登录方式选择的不是通过正确格式手机号直接登录的用户需要先根据提示注册正确格式的账户和密码，注册完成后用户进入到账号密码登录页完成登录后跳转首页。用户进入到首页可以通过顶部导航进入首页、电影页、商城页、我的系统页。首页功能包含查看正在热映电影列表标题和缩略图，查看娱乐讯息列表且列表格式根据后台数据改变，用户点击电影列表标题可以进入电影列表页，点击缩略图可以进入电影详情页，点击娱乐讯息列表可以进入娱乐讯息详情页。用户进入到电影页可以查看城市选择按钮与城市显示，电影数据列表，电影切换分类导航，电影名称搜索。用户在所在地页面选择可以进行实时搜索城市地点。用户点击选择的或搜索到的城市后返回到电影页。用户在搜索框中输入关键字点击查询可以进行电影查询，用户点击电影列表数据可以进入电影详情页。进入到电影详情页可以看到电影的评分、标题、类型、时长以及电影简介，演员列表，电影剧照。用户可以通过下拉按钮完成对电影简介的显示和隐藏，用户可以自由滑动查看演员列表与电影剧照，用户点击电影剧照要实现放大镜效果。用户进入到商城页可以看到轮播的banner图、商品分类、联名专区、分类专区。用户可以点击轮播的banner图要实现跳转到所属类别下的商品列表，用户点击商品分类按钮可以跳转到该分类下的商品列表，用户点击联名专区会跳转到该类别下的商品列表，用户可以左右滑动分类专区的缩略图像并实现点击不同图像在固定区域显示不同商品，用户点击商品进入到该商品的详情页。用户进入到商品列表页可以点击商品数据进入到该商品的详情页。用户进入到商品详情页可以查看商品的图片集、商品的价格标题等，用户可以选择商品数量添加到购物车，添加后会在页面顶部的购物车图标中出现商品种类提示，用户可以选择点击收藏按钮将物品添加或删除到收藏列表，点击按钮后按钮应该处于高亮显示或取消显示状态。用户进入到我的系统页可以完成头像上传、用户名显示、编辑购物车、编辑收藏列表、修改用户名、重置密码、退出登录的功能。用户点击登陆头像上传会弹出本地文件让用户选择图片，用户上传后完成头像设置功能返回。用户点击收藏按钮跳转到收藏列表页，可以实现搜索、删除、全选收藏商品功能。用户点击购物车按钮应跳转到购物车页面，用户可以完成商品增减、全选、计算价格、搜索、删除功能。用户点击修改用户名按钮可以弹出修改界面弹出层，根据提示用户完成修改用户名操作返回到系统页。用户点击重置密码按钮可以弹出重置密码界面弹出层，根据提示用户完成重置密码操作返回到系统页。用户点击退出登录按钮将退出登录到首页并清除个人信息。2.2系统工作流程首先用户通过注册账号并使用该账号信息执行登录操作，登录后可以执行浏览首页、电影、商城、系统等各模块信息，在系统模块用户可以完成修改个人信息操作，操作成功后会更新展示用户信息，最后用户可以退出登录。整体流程如图2.1所示。图2.1系统工作流程图2.3本章小结本章主要描述了娱讯移动端APP的需求分析以及项目的整体工作流程，用户需要登录操作才能进行执行操作本项目，用户登录后按照不同的导航提示进入不同页面进行操作，用户可以修改个人信息，最后完成退出登录。3系统设计本项目是一个纯前端构成项目，所用数据均为网上开源数据接口以及本地编写的JSON数据。本项目以vue.js为前端整体框架进行开发，配合Vant、Swiper等前端插件框架进行项目页面的功能实现与页面与页面间的交互以及页面与用户间的交互，通过二次封装后的axios来调用后台接口完成数据对页面的动态渲染，后台数据主要是通过公开的api提供数据REF_Ref25485\r\h[12]。3.1项目整体架构项目整体结构分为用户登录模块、主页信息模块、电影列表模块、电影详情模块、商城模块、系统信息模块，整体架构图如图3.1所示。图3.1整体架构图3.2模块功能设计3.2.1用户登录模块用户使用项目首先出现的是手机号登录页，正确输入手机号点击获取图形验证码，正确输入图形验证码后用户使用的手机号会收到短信，用户输入短信验证码会登录到主页。用户使用账号密码登录需要先注册，点击前往注册按钮前往注册页面，按预定的规则设置账户与密码完成注册，用户完成登录跳转到主页。功能如图3.2所示。图3.2用户登录模块功能设计图3.2.2主页信息展示模块用户登录到主页后顶部为全局导航，可供用户跳转到首页、电影、商城、系统页面。页面导航下是电影导航部分，展示正在热映的缩略图、名称、部、即将上映的部数，用户通过点击缩略图可进入电影详情页，点击模块头部提示可进入正在热映（即将上映）电影列表；页面电影导航部分下方是电影资讯部分，用户可通过点击加载更多完成讯息列表的懒加载，用户点击跳转到电影讯息详情页，功能如图3.3所示。图3.3电影列表模块功能设计图3.2.3电影列表模块用户进入到电影列表页面，页面从上至下依次为地区选择、电影搜索、正在热映/即将上映列表切换、电影列表；用户点击地区选择进入地区页面，用户可以通过搜索栏实时搜索想要的地理位置，完成位置选择后回到电影列表页面并刷新页面，根据选择的地区显示电影列表REF_Ref25547\r\h[13]。用户搜索关键字，点击搜索按钮，刷新页面列表显示搜索结果。用户点击列表的某条电影数据将进入该电影的详情页。功能如图3.4所示。图3.4电影列表模块功能设计图3.2.4电影详情模块用户进入电影详情模块，页面从上到下为电影banner图、返回按钮、电影介绍、演员剧照、电影剧照；用户在电影介绍可以看到电影的评分、标题、类型、时长以及电影简介；用户可以滑动查看演员剧照、电影剧照，用户点击电影剧照会自动跳到该张剧照的放大镜效果图；用户可以通过返回按钮返回操作的上一个页面。功能如图3.5所示。图3.5电影详情模块功能设计图3.2.5商城模块用户进入商城页面，内容自上而下是banner滚动图、商品分类区、联名专区、版面分区；用户可以通过点击banner图的下标按钮切换，也可以等待自动切换，通过点击图片，用户会进入该分类商品列表；用户通过点击分类专区的选项进入该选项下的商品列表，用户可以通过点击全部按钮进入默认商品列表；用户点击联名分区/版面分区的板块或标题栏可进入该板块下的商品列表REF_Ref25602\r\h[14]；用户点击分区的商品可进入该商品的商品详情页；用户进入商品列表页，可以通过搜索框输入关键字搜索，用户点击商品列表里的商品进入该商品详情页，商品详情页有收藏与添加购物车功能，功能如图3.6所示。图3.6商城模块功能设计图3.2.6系统信息模块用户可以通过导航进入系统信息页面，页面功能分为上传头像、购物车编辑、收藏列表编辑、修改用户名、重置密码、退出登陆功能；用户点击默认头像可以从本地文件里选择图片完成图片上传REF_Ref25671\r\h[15]；用户可以进入购物车列表里对数据进行删除、商品增减、计算总价、搜索功能；用户可以进入收藏列表对数据进行搜索、删除操作；点击修改用户名会弹出修改界面，用户输入新用户名点击确定按钮完成修改；用户点击重置密码按钮会弹出修改按钮界面，用户根据提示输入新密码后完成密码重置功能；用户点击退出登陆按钮会返回到登录页。功能如图3.6所示。图3.7系统信息模块功能设计图3.3本章小结本章主要描述了本项目的整体架构，将项目分为模块化开发。，用整体架构图与各模块的功能设计图描述了各模块的功能介绍以及操作和各个功能之间的跳转联系展示出来并进行了详细的描述。4基于Vue的娱讯移动端APP的实现4.1路由配置Vue的页面实现首先需要通过配置路由，然后编写vue文件与js文件实现页面构建与效果交互，通过路由文件导入vue文件来构建整个项目的骨架，每一个路由就是一个页面，且父路由中拥有子路由实现同级路由区域内容切换。首先需要在main.js文件中引入路由，然后在路由文件中导入路由，导入路由配置文件，注册路由，创建路由，实例化根组件并绑定路由REF_Ref25788\r\h[16]。路由的搭建包括短信登录、账号密码登录、首页、电影、商城、商品列表、商品品详情、购物车、我的、地图、新闻内容部件。通过设置默认路由实现用户登录的第一个页面为登录注册页。以下三个是在制作项目的时候在编写配置路由时遇到的几个难点，通过查阅资料以及自己一点一点的实验解决了这几个问题。（1）通过路由跳转页面不是从顶端开始实现此功能代码如下：scrollBehavior(to,from,savedPosition){return{x:0,y:0}}（2）路由的配置中路由的懒加载的使用，只有当路由访问的时候才加载对应的组件。实现此功能代码如下：component:resolve=>require(['./views/index.vue'],resolve)（3）同一父路由下的两个同级子路由之间的跳转不会再次触发父路由的生命周期函数，如果父路由和子路由的path相同，监听也不会触发，需要再app.vue上加监听。实现此功能代码如下：watch:{$route(to,from){console.log(to.path);}}4.2功能实现4.2.1用户登录功能用户登录功能逻辑分为手机短信验证码登录和账号密码登录，手机短信验证码登录的逻辑流程为用户输入正确手机号后点击发送验证码按钮，弹出遮罩层显示图形验证码，用户正确输入图形验证码后会向输入的手机号发送验证码短信，用户正确输入收到的短信验证码后会登陆到软件首页（手机短信验证码登录无需注册）；账号密码登录的逻辑流程为当用户没有注册账号之前需要点击前往注册按钮注册账号，当用户依次输入账号、密码、确认密码且格式通过校验后会提示注册成功，返回账号密码登录页输入账号密码登录到软件首页，否则当用户输入的手机号格式不对、密码与系统提示格式不匹配、确认密码输入不一致会弹出遮罩层提示用户。如图4.1所示。图4.1登录注册页面用户注册登录手机号格式验证、密码格式验证、两次密码输入一致是通过正则实现的，验证码的验证以及账号的验证是通过sessionStorage实现的REF_Ref25851\r\h[17]。代码如下：login_zc(zh_zc,psd_zc,psd_zc_r){varregmobile=/^[0-9]{6}$/;varregPassword=/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,10}$/;if(zh_zc==""){this.$dialog.alert({message:"账号不能为空"});}elseif(zh_zc!=""&&!regmobile.test(zh_zc)){this.$dialog.alert({message:"账号格式不符合要求"});}e}else{this.$dialog.alert({message:"注册成功"});localStorage.setItem(zh_zc,psd_zc);this.show=false;}}4.2.2主页信息展示功能主页信息展示功能的逻辑流程是用户登录后跳到主页，主页头部和底部通过组件的封装，封装成公共组件，通过路由间的跳转与聚焦路由样式来实现当前页面导航的高亮显示，用户可以通过点击导航去往自己想要查看的页面；页面的内容部分是通过axios请求数据接口获取数据，分为电影数据与影视讯息数据。电影信息数据通过swiper插件进行处理实现自由滑动效果；用户通过点击想要查看的电影，通过路由跳转会进入到所选电影的详情页。影视讯息数据通过判断接口返回的状态值，来展现不同样式的影视讯息数据，通过设定存储值为10，当列表数据值大于10时候会触发数据懒加载REF_Ref25903\r\h[18]。影视讯息列表有图片、标题、距离当前时间的时间差的显示。当列表页居顶部距离达到一定高度时，会出现指定按钮，通过指定可视距离实现置顶效果，置顶后按钮消失。由于接口返回用户通过点击不同影视讯息列表进入不同的影视讯息详情页。影视讯息详情页是通过iframe来引入第三方页面展示影视讯息详情，通过路由的$router.back()方法来实现页面的返回。如图4.2所示。图4.2主页信息展示页面电影信息列表swiper组件初始化、影视讯息的时间过滤器、数据的懒加载、置顶功能等实现的核心代码如下：Time(value){if(newDate(value*1000).getDate()==newDate().getDate()){if(newDate(value*1000).getHours()-newDate().getHours()==0){return"刚刚";}else{return(newDate().getHours()-newDate(value*1000).getHours()+"小时前");}}else{if(newDate().getDate()-newDate(value*1000).getDate()==1)return("昨天"+newDate(value*1000).getHours()+":"+newDate(value*1000).getMinutes());else{return(newDate(value*1000).getFullYear()+"-"+(newDate(value*1000).getMonth()+1)+"-"+newDate(value*1000).getDate());}}}4.2.3电影列表展示功能用户通过在主页点击正在热映或即将上映会跳到热映或上映的电影列表页面。热映电影列表页面和即将上映电影列表页面都是电影页面的子路由页面，通过默认子路由的样式权重实现切换列表的导航高亮。两个列表页面的公共部分是头部的地区选择组件与输入搜索组件，用户通过点击地区选择按钮会进入地区选择组件页面，该页面的数据是自己写的json数据，通过vant组件的IndexBar索引栏功能来实现页面的展示，页面头部是搜索框，通过用户的实时输入会实时展现当前搜索结果，该功能通过input事件忽略输入法以及compositionstart方法和compositionend方法以及定时器的共同作用实现。右侧显示索引，索引值为大写英文字母当用户点击某个索引值后会跳到该索引值的第一个地区。如图4.3所示。图4.3电影列表展示页面当用户选择一个地区后，会通过sessionStorage存入该地区的id然后跳转到电影列表页面后重新请求接口数据，如果首次进入未选择会默认选择地区为深圳的电影列表。电影列表页面的搜索功能是通过前端实现，搜索的逻辑为当用户在输入框输入搜索的关键字后，通过indexOf在列表数据数组中查询搜索的关键字将数据的存入新数组然后替换列表数组，当用户输入的值为空时会默认搜索全部数据REF_Ref25952\r\h[19]。用户通过导航按钮切换电影列表，在即将上映列表通过接口返回的数据处理后实现不同月份的电影在不同月份底部出现。用户可以通过点击某一电影进入该电影的详情页面，如图4.4所示。图4.4电影列表展示页面地区列表的分类展示、地区列表的实施搜索功能、电影列表的搜索功能、处理即将上映的电影列表数据功能的核心代码如下：search(name){this.List();if(name){this.state=1;}else{this.state=0;}setTimeout(function(){if(!that.flag){that.new_city_name=[];for(letcinthat.city){if(that.city[c].lname.indexOf(name)!=-1){that.new_city_name.push(that.city[c]);}}}},0);}4.2.4电影详情功能用户通过点击电影列表页某一数据，通过localstorage存储该电影的id，根据id进入电影详情页展示不同电影的数据信息。通过数据接口获取电影banner图、标题、评分、类别、上映时间、电影时长、电影简介、演职人员、剧照等数据。电影类别通过数据接口获取后是一个数组，需要进行过滤器处理然后在页面显示正确格式，电影简介通过vant的Collapse折叠面板实现简介的显示与隐藏，优化详情页的页面布局。电影详情页的演职人员与剧照均使用swiper插件进行滑动处理，所以出现了swiper初始化错乱，添加status状态值来进行swiper初始化。用户点击剧照后会进入遮罩层显示剧照大图页面，如图4.5所示。图4.5电影详情展示页面日期格式处理、swiper初始化、剧照放大镜功能核心代码如下：type(value){letstr="";for(letiinvalue){str=str+value[i]+"/";}returnstr.slice(0,str.length-1);},swiper1(){varswiper1=newSwiper(".swiper-container1",{slidesPerView:"auto",spaceBetween:10,freeMode:true,watchSlidesVisibility:true,watchSlidesProgress:true});varswiper2=newSwiper(".swiper-container2",{pagination:{el:".swiper-pagination",clickable:true},thumbs:{swiper:swiper1}});},4.2.5商城功能用户通过顶部或底部导航进入商城界面，商城顶部是通过swiper实现自动滚动的banner图，用户可以通过点击banner图进入对应的商品列表界面，banner图下面是通过数据接口获取的类别显示，用户可以通过点击不同类别进入不同的商品列表页，类别下面是专区商品页，用户通过点击不同的专区图片进入不同的商品列表页，专区下面是通过热门商品页，用户可以通过滑动热门商品类别的头像并点击，在当前页面切换该商品列表，用户点击更多商品会进入到该类别的商品列表页，点击商品会进入到商品详情页，热门商品下面是商品分区，用户可以查看不同分区的不同商品展示，点击商品会进入商品详情页，点击更多会进入并显示该类别的商品列表页REF_Ref25997\r\h[20]。商品详情页设有返回按钮，会返回上一步操作的页面。由于页面过长所以使用公共组件实现置顶效果。如图4.6、4.7所示。图4.6商城展示页面图4.7商城展示页面用户通过点击不同商品类别使用sessionStorage存储类别id，进入不同商品列表页面，商城列表页头部为搜索列表，通过检索搜索的关键字重新获取数据列表实现，内容部分使用了flex属性进行了流式布局，通过数据接口展示REF_Ref1432\r\h[21]。商品列表通过监听使用了数据懒加载，用户可以通过点击不同商品进入对应的商品详情页面。如图4.8所示。图4.8商城-商品列表展示页面用户通过点击不同商品，使用localstorage存入商品id，展示不同的商品详情页。商品详情页顶部依次为返回列表按钮、导向首页按钮、导向购物车按钮REF_Ref1553\r\h[22]。当商品为告罄时用户不能加入购物车，商品未告罄时点击加入购物车会弹出遮罩层显示加入数量，加入购物车后通过localstorage在进行数据格式转换存入后，会在购物车按钮显示当前购物车商品类别数量REF_Ref1615\r\h[23]。用户点击收藏按钮通过localstorage在进行数据格式转换存入后，会点亮收藏按钮。如图4.9、4.10所示。图4.9商城-商品详情展示页面图4.10商城-商品详情展示页面Swiper自动滚动、不同类别（商品）进入商品列表页（商品详情页）、点击不同类别头像区域显示不同商品、商品列表的搜索、数据懒加载、收藏与取消收藏、进入页面收藏按钮的是否点亮显示加入购物车功能实现核心代码如下：fave(id){if(localStorage.getItem("favlist")&&localStorage.getItem("favlist")!=""){letoldlist=JSON.parse(localStorage.getItem("favlist"));letfavonenew={id:id,title:this.desc.longName,img:this.swiper_list[0],price:this.desc.minSalePrice/100};oldlist.push(favonenew);localStorage.setItem("favlist",JSON.stringify(oldlist));}else{letlist=[];letfavone={id:id,title:this.desc.longName,img:this.swiper_list[0],price:this.desc.minSalePrice/100};list.push(favone);localStorage.setItem("favlist",JSON.stringify(list));}this.fav=true;},4.2.6系统信息功能用户通过顶部导航或者底部导航可以进入我的系统页面，我的系统页面拥有的分支功能有：头像上传功能、显示用户名称、查看与编辑购物车、查看我的收藏、修改用户名称、重置密码、退出登录功能等；用户点首次进入我的系统界面时，用户的头像为空显示带上传的图片，用户的用户名显示为用户注册时的账号或者用户接收短信的手机号REF_Ref1775\r\h[24]。用户点击上传头像按钮后，选中自己喜欢的图片后，上传到系统中，系统通过文件流接收图片，通过localstorage将文件流存储到本地，实现退出登录照片依旧存在的效果。如图4.11所示。图4.11系统-头像（名称）展示页面当用户点击购物车后会进入到购物车页面，用户在商品详情页面通过添加购物车按钮会将用户选择的商品以及商品数量、信息通过JSON.stringify(),将对象转换为JSON字符串格式存入到localstorage（因为localstorage的value值只允许字符串的格式，所以需要进行格式转换）；购物车通过localstorage.getItem读取local中存储的JSON字符串，通过JSON.parse（）方法将local中的JSON字符串转为对象，并读取显示在页面。购物车页面显示的内容有购物车中商品的种类数量、编辑按钮、商品的选择按钮、商品的缩略图、商品标题、商品数量、商品单价、数量的增减按钮、全选按钮、总价计算等；用户可以通过选择商品缩略图前的商品选择按钮选择商品，通过数量增减按钮实现数量的增加与减少，总价会计算选择的商品的单价*数量之和并实时更新，全选按钮可以实现全部选择商品与反选商品，用户点击编辑按钮后会改变页面的样式，每件商品会出现删除按钮，用户选择该商品或多件商品后，点击删除按钮会弹出提示框询问用户是否删除n件商品，取消则取消用户删除选项，确定实现删除用户选择的商品REF_Ref1821\r\h[25]。用户点击完成后返回购物车展示页面，如图4.12所示。图4.12系统-购物车展示页面用户点击返回按钮退回到系统功能页面，用户点击收藏按钮后会跳到商品收藏页面，用户在商品详情页点击收藏按钮将商品的信息通过方法重用，重用加入购物车的存储方法，购物车页面通过重用读取方法，在页面展示搜索按钮、商品标题、商品缩略图、商品价格；用户通过左滑商品栅格，会出现取消收藏按钮，用户点击取消收藏按钮后弹出提示框提示用户是否取消收藏该商品，用户点击确定取消收藏后会返回收藏列表界面，并更新收藏列表；用户点击搜索按钮后会从顶部弹出搜索框，输入搜索关键字后通过前端的数组去重方法实现搜索功能，用户搜索空值，默认搜索全部商品信息，如图4.13、4.14所示。图4.13系统-收藏展示页面图4.14系统-收藏展示页面用户点击退出按钮后返回到系统功能页面，用户点击修改名称按钮会弹出输入框，通过读取localstorage中在用户登录时通过账号密码登录的账号（用户通过手机号登录时的手机号）显示用户当前的用户名，用户通过输入框输入想要修改的用户名点击确认后通过localstorage存储用户输入的新用户名并实时更新用户名显示位置并返回到系统功能页面；如图4.15所示。图4.15系统-修改名称（密码）展示页用户点击重置密码按钮会弹出修改密码的遮罩层，该组件有三部分组成，原密码、新密码、重新输入新密码。首先用户需要满足原密码输入正确，否则会弹出提示用户原密码输入错误，其次用户需要对新密码的格式正确，否则弹出提示用户新密码格式不对，最后需要用户两次密码输入一致，否则会弹出提示两次密码不一致。满足以上条件以后用户完成修改密码操作，弹出提示密码修改成功。以上的修改密码逻辑判断均用正则来完成。最后用户点击退出登录按钮会返回到登录页面，整个项目的功能均完成。如图4.16所示。图4.16系统-修改名称（密码）展示页面上传头像、购物车的编辑、收藏列表的编辑、修改名称、重置密码的核心代码如下：set_ps(){varregPassword=/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,10}$/;varps=localStorage.getItem(localStorage.getItem("user"));if(this.old_ps==""||this.new_ps==""||this.re_new_ps==""){this.$dialog.alert({message:"输入不能为空"});}elseif(this.old_ps!=""&&this.old_ps!=ps){this.$dialog.alert({message:"原密码错误"});}elseif(this.new_ps!=""&&!regPassword.test(this.new_ps)){this.$dialog.alert({message:"新密码格式不符合要求"});}elseif(this.new_ps!=this.re_new_ps){this.$dialog.alert({message:"两次密码不一致"});}else{this.$dialog.alert({message:"密码修改成功"});localStorage.setItem(localStorage.getItem("user"),this.new_ps);this.ps_show=false;}},4.3本章小结本章主要描述了制作项目的时候配置路由遇到的难点以及得到的解决方案，通过依靠编写JavaScript中的方法来实现完成页面之间的交互，其中实现效果通过项目抓图将完成的效果如实的反应出来，通过核心代码，也将项目的核心功能展示出来。5基于Vue的娱讯移动端APP测试5.1测试计划与目的本次测试计划将进行模块化测试，对各个功能模块的功能进行测试。并编写号测试用例，本次测试目的是为了用户体验度的提升，找出潜在的bug，所以项目在交付用户手中需要对软件进行测试，以便达用户得到更好的体验性，也是为了软件在使用过程中防止出现不必要的问题，来进行效率的提高。5.2用户登录测试用户登录测试分为两个阶段。第一阶段先进行注册测试，注册测试分为两个计划，计划一是测试人员输入正确格式的账号密码进行注册操作，测试是否能完成注册并保存注册信息。计划二是测试人员输入格式不正确的账号密码进行注册操作，测试是否能完成注册并保存注册信息。测试用例如表5.1所示。表5.1注册测试用例编号操作输入数据预期结果实际结果5.1-1输入格式正确的账户名和密码后进行登录操作用户名：123456密码：Lsl885184注册成功注册成功并成功保存个人信息5.1-2输入格式正确的账户名和格式不正确的密码后进行登录操作用户名：123456密码：lsl885184注册失败系统提示：密码格式错误5.1-3输入格式不正确的账户名和格式正确的密码后进行登录操作用户名：12345密码：Lsl885184注册失败系统提示：用户名格式错误5.1-4输入格式不正确的账户名和格式不正确的密码后进行登录操作用户名：12345密码：lsl885184注册失败系统提示：用户名格式错误第二阶段进行登录测试，计划一是测试人员输入正确的手机号及验证码或账号密码进行登录操作，测试是否能完成登录到首页。计划二是测试人员输入格式不对的手机号或未经过注册的账号进行登录操作，测试是否能登录进主页。测试用例如表5.2所示。表5.2登录测试用例编号操作输入数据预期结果实际结果5.2-1输入格式正确的手机号并填写正确的验证码进行登录操作手机号证码：UG2A登录成功成功登陆首页5.2-2输入格式不正确的手机号进行登录操作手机号：1234568密码：lsl885184登录失败系统提示：手机号格式错误5.2-3输入格式正确的手机号并填写不正确的验证码进行登录操作手机号证码：1111登录失败系统提示：验证码输入错误5.2-4输入注册过的用户名并输入正确的密码进行登录操作用户名：123456密码：Lsl885184登录成功成功登陆首页5.2-5输入注册过的用户名并输入不正确的密码进行登录操作用户名：123456密码：lsl885184登录失败系统提示：密码输入错误5.2-6输入未注册过的用户名并随意输入密码进行登录操作用户名：123459密码：lsl885184登录失败系统提示：该账号未注册5.3首页功能测试测试计划是测试人员进入首页后点击顶部导航按钮、电影缩略图、影视资讯列表数据、置顶按钮，测试是否能正确跳转到对应页面和以及置顶按钮实现置顶效果。测试用例如表5.3所示。表5.3首页功能测试用例编号操作输入数据预期结果实际结果5.3-1点击顶部导航高亮按钮跳转页面无跳转到对应页面成功跳转到对应页面5.3-2点击电影缩略图跳转到电影详情页面无跳转到电影详情页成功跳转到电影详情5.3-3点击娱乐讯息列表数据无跳转到讯息详情页成功跳转到娱乐讯息详情页5.3-4点击置顶按钮无将页面置于顶部成功将页面置于顶部5.3电影列表页功能测试测试计划是测试人员进入电影列表页后执行点击地区按钮、地区实时搜搜功能、选择地区功能、搜索关键字功能、点击电影列表数据。测试功能是否均能正常执行。测试用例如表5.4所示。表5.4电影列表页功能测试用例编号操作输入数据预期结果实际结果5.4-1点击地区按钮并选择地区无跳转到地区选择页面，选择地区后返回列表页并刷新页面页面跳转成功，选择后成功更新页面5.4-2输入框搜索关键字点击查询按钮“误”列表更新为带有“误”的电影数据成功更新电影列表为带有“误”关键字5.4-3点击电影列表数据无跳转到电影详情页成功跳转到电影详情5.4电影详情页功能测试测试计划是测试人员进入电影详情页后查看数据是否正常显示、执行点击简介按钮、滑动电影剧照、点击电影剧照操作，测试数据是否显示正确，功能是否正常执行。测试用例如表5.5所示。表5.5电影详情页页功能测试用例编号操作输入数据预期结果实际结果5.5-1根据后台接口查看页面显示数据无数据显示正常数据与后台接口数据一致并显示正常5.5-2点击简介按钮无点击按钮实现简介的显示与隐藏成功显示与隐藏简介5.5-3滑动并点击电影剧照无电影剧照可以滑动并且点击后进入放大镜效果成功滑动剧照并正确显示对应的放大镜5.5商城页功能测试测试计划是测试人员进入商城页后执行滑动banner图并点击banner图、点击商品分区按钮、点击联名专区、滑动联名分区头像查看数据、点击指定按钮、进入商城列表页后执行点击列表数据、搜索商品关键字、进入商品详情页执行选择数量加入购物车、购物车按钮消息提示显示、收藏与取消收藏、查看商品详情、商品规格、商品参数切换按钮，滑动商品展示图功能、点击整体返回按钮、点击购物车按钮、点击返回主页按钮，测试数据是否显示正确以及功能是否可以正常执行。测试用例如表5.6所示。表5.6商城页功能测试用例编号操作输入数据预期结果实际结果5.6-1滑动并点击商城页banner图无可以正常滑动并正确进入对应的数据列表滑动并成功显示对应列表5.6-2点击各个商品分区、联名专区按钮无点击按钮进入对应的数据列表成功显示对应列表并数据显示正常5.6-3滑动联名专区头像并点击对应商品无区域内变换商品，点击商品进入该商品的详情页成功在区域内切换商品数据并成功进入商品详情页5.6-4点击商品列表页数据无进入对应商品的详情页成功跳转对应商品详情页且数据显示正确5.6-5搜索框输入商品关键字“男”并点击搜索按钮“男”更新含有“男”关键字的数据列表成功更新含有“男”的商品数据列表5.6-6点击加入购物车按钮并添加商品数量为22将两件该商品加入购物车且详情页购物车按钮的消息提示为1成功将商品加入购物车且按钮的消息提示显示正确5.6-7点击收藏按钮无第一次点击应该进行收藏操作，收藏按钮高亮功能成功实现5.6-8再次点击收藏按钮无第二次点击应该执行取消收藏操作，收藏按钮高亮消失功能成功实现5.6-9查看商品详情页数据显示无商品详情页数据显示正常数据与后台提供的数据一致5.6-10点击购物车按钮、返回主页按钮、整体返回按钮无页面跳转正常成功跳转页面并正常显示数据5.6-11查看并点击商品详情页的购物车按钮无显示购物车内商品种类数量且能进入详情页数据显示正确且功能正常5.6系统信息功能测试测试计划是测试人员进入系统信息页后执行点击头像上传按钮点击购物车、点击收藏、点击修改用户名、点击重置密码、点击退出登录、进入购物车页面执行商品数量增减、计算总价、删除商品数据商品的搜索功能。进入收藏列表页面执行商品的取消收藏、商品的搜索。在修改用户名的弹出层执行修改用户名操作、在重置密码的弹出层里执行修改密码操作。测试页面更新数据是否正确显示测试用例如表5.7所示。表5.7系统信息功能测试用例编号操作输入数据预期结果实际结果5.7-1点击头像上传本地文件中选取一张图片头像上传并显示正确头像成功上传并显示正确5.7-2点击购物车、收藏、修改用户名、重置密码、退出登录无跳转对应页面或弹出对应的弹出层成功跳转页面或弹出层显示正确5.7-3对购物车的商品进行数量的增减、总价的计算、删除与批量删除无完成操作后更新数据列表并显示正确成功执行所有操作且数据显示正确5.7-4购物车数据关键字“车”搜索“车”更新购物车列表成功更新购物车数据列表显示有关键字“车”的商品5.7-5收藏列表的取消收藏与批量取消收藏无完成操作后更新数据列表并显示正确成功执行所有操作且数据显示正确5.7-6修改用户名为321321系统信息页面数据更新显示新用户名成功修改应户名为321并更新到系统信息页面5.7-7输入正确格式新密码Lsl221547密码修改成功成功修改密码5.7-8输入不正确格式新密码lsl221547密码修改失败系统提示：密码格式错误5.7-9点击退出登陆按钮无退出到登录页且个人信息清除成功执行功能5.7-10点击各页面的返回按钮无返回到操作的上一个页面成功执行功能5.7本章小结本章主要描述了项目功能实现后对实现的功能进行测试操作，以测试用例的形式进行展示，测试人员按模块进行测试，分别为登录注册测试、首页功能测试、电影列表功能测试、电影详情功能测试、商城功能测试、系统信息功能测试，经过测试项目达到预期设计要求。结论在本次毕业设计项目的开发与论文的编写过程中，联系到在学校所学的HTML页面布局、CSS样式编写与JavaScript方法的编写与工作中项目所用到的Vue框架与项目开发经验，经历了无数次bug漏洞修改，终于完成了本次毕业设计项目部分的编写，也就是这款基于Vue的娱讯移动端APP。本论文首先分析了影视娱乐讯息APP的开发背景与意义，之后分析了项目所用技术以及搭建项目的流程和介绍整体项目功能与项目功能的实现，最后对项目的测试进行了基本说明。本项目已经用apk形式打包成安装包，可以供人下载安装，源码均以上传到码云开源。本文所设计并实现的移动端APP在实际的工作中充分的考虑了本软件的各项需求，其中包括了可扩展性、可维护性和未来的需求变更等，在性能优化方面，本系统也做出了相应的解决方法，系统中的代码很多地方都用到了提取出来的公共方法，封装公共组件，所以系统的代码重用性很高，系统的伸展性也随之提高。由于APP完成时间不久，有些可能存在的问题还没有暴露出来，所以本项目实际上还存在着一定的不足。在实时性也许会有一点点的偏差性，例如商品列表页的置顶实现效果不佳，没有置于最顶部有一些偏差存在。这将是将来需要更进一步完善的地方，希望在以后的项目中会有更大一个层面的突破性。致谢此次毕业设计课题是基于Vue的娱讯移动端APP前端设计与实现，本次毕业设计研究工作是在各位老师的细心指导下完成的，各位老师科学的教学方法以及严谨的工作态度给予本人极大的鼓励。在作品完成的过程中遇到了一些设计上的瓶颈以及技术上疑难点，指导教师高丽老师与聂菲老师对本人进行了细心的指导与帮助，指导本人完成技术上的不足以及对相关材料的整合，帮助自己及时的按照规定进度完成了毕业设计作品，在最后的大学生涯中完成了此次的设计。同时，在设计思路上，指导教师也无时无刻的不在关心着本人的基本构思。感谢各位老师每次都是在百忙之中对本人进行不懈的指导。使得本人毕业设计与相关材料具有了很强的完整性，感谢各位教师对本人不厌其烦地进行详细的指导与严格的要求，在遇到瓶颈的同时又获得了及时性的帮助，同时也是表现出了教师工作的的辛苦性，感谢每位老师对本人不懈帮助，让自己度过了一个充满温馨的大学四年生涯。最后再次对每位教师工作者致以诚挚的问候，感谢指导老师的悉心教诲，感谢各位老师的耐心指导与无私帮助，感谢机电学院全体教师的帮助与鼓励。参考文献User-centredwebdesign,usabilityandusersatisfaction:ThecaseofonlinebankingwebsitesinIran.[J].DianatIman,AdeliPari,AsgariJafarabadiMohammad,KarimiMohammadAli.Appliedergonomics,2017.01:51-56.邓成,孙书会.MVVM设计模式的前端应用[J].电脑知识与技术,2019,15(29):249-250.张如云.论移动端电商APP的设计与开发[J].办公自动化,2019,(8).:119-130.俞敏.Web前端性能优化的研究与应用[J].计算机产品与流通,2019(12):26.李春鹏,李金友.移动端流体布局的一种布局方法[J].智富时代,2018,(11).:105-130.王玲平.Web前端开发技术和优化措施[J].科技风,2020(03):105.Krill,Paul.ForVue.js,componentspowerinteractiveWebinterfaces[J].InfoW,2015.02:48-51.阮一峰.ES6标准入门[M].北京:电子工业出版社,2017.沈剑翘,陈泽椿.Vue.js在构建系统前端SPA的应用[J].科技创新与应用,2020(03):181-182.潘志宏，罗伟斌，柳青.基于HTML5跨平台移动应用的研究与实践[J].电脑知识与技术，2013.06：3992-3995.张耀春.Vue.js权威指南[M].北京:电子工业出版社,2016.王志任.基于Vue.js的开发平台的设计与实现[D].广东工业大学,2018.王萌,田杨,李宁宁.组件化WEB前端架构设计与实现[J].电脑知识与技术,2018,14(30):77-79.PaulKrill,PaulKrill.Vue.jslead:OurJavaScriptframeworkisfasterthanReact[J].InfoW,2016.06:38-51.Webservicedesigndefectsdetection:Abi-levelmulti-objectiveapproach[J].RebaiSoumaya,KessentiniMarouane,WangHanzhang,MaximBruce.InformationandSoftwareTechnology,2020.03:34-39.王璐,崔保磊,潘红霞,赵莉,田宇.基于Vue.js的在线设计开放平台研究与实现[J].信息技术与信息化,2019(11):168-170.DeterminingthemostrepresentativeimageonaWebpage[J].KrishnaVyas,FlaviusFrasincar.InformationSciences,2017.03:925-983.梁海燕.MVVM架构的移动Web前端展示方案研究[J].信息与电脑(理论版),2019(08):158-159.Claimingafamilybrandidentity:Theroleofwebsitestorytelling[J].BonnieFCanziani,DianneHBWelsh,Léo‐PaulDana,VelandRamadani.CanadianJournalofAdministrativeSciences,2020.01:356-426.NicholasC.Zakas.Javascript高级程序设计(第三版)[M].北京:人民邮电出版社,2017(06):102-106.麦冬，陈涛，梁宗湾.轻量级响应式框架Vue.js应用分析[J].信息与电脑(理论版),2017.07:53.吕英华.渐进式JavaScript框架Vue.js的全家桶应用[J].电子技术与软件工程,2019.22:39-40.肖萌.基于移动端网页界面的设计与实现[D].中南民族大学,2016.陈鲱.Web前端开发技术以及优化方向分析[J].新媒体研究,2015.07：39-40.秦美峰.Web前端编程实践性教学的探索[J].福建电脑,2015.01：117-119.

怎样提高电脑系统运行速度WindowsXP的启动速度比Windows2000要快30%左右，但相对于Windows98仍然要慢了不少，不过，我们可以通过优化设置，来大大提高WindowsXP的启动速度。加快系统启动速度主要有以下方法：尽量减少系统在启动时加载的程序与服务；对磁盘及CPU等硬件进行优化设置；修改默认设置，减少启动等待时间等。这些方法大部分既可减少系统启动的时间，又可以节省系统资源，加快电脑运行速度。1.加快系统启动速度WindowsXP的启动速度比Windows2000要快30%左右，但相对于Windows98仍然要慢了不少，不过，我们可以通过优化设置，来大大提高WindowsXP的启动速度。加快系统启动速度主要有以下方法：尽量减少系统在启动时加载的程序与服务；对磁盘及CPU等硬件进行优化设置；修改默认设置，减少启动等待时间等。这些方法大部分既可减少系统启动的时间，又可以节省系统资源，加快电脑运行速度。(1)MsconfigWindowsXP的启动速度在系统安装初期还比较快，但随着安装的软件不断增多，系统的启动速度会越来越慢，这是由于许多软件把自己加在了启动程序中，这样开机即需运行，大大降低了启动速度，而且也占用了大量的系统资源。对于这样一些程序，我们可以通过系统配置实用程序Msconfig将它们从启动组中排除出去。选择“开始”菜单中的“运行”命令，在“运行”对话框中键入“Msconfig”，回车后会弹出“系统配置实用程序”对话框，选择其中的“启动”选项卡(如图1)，该选项卡中列出了系统启动时加载的项目及来源，仔细查看每个项目是否需要自动加载，否则清除项目前的复选框，加载的项目越少，启动的速度就越快。设置完成后需要重新启动方能生效。(2)BootvisBootvis是微软提供的一个启动优化工具，可提高WindowsXP的启动速度。用BootVis提升WindowsXP的启动速度必须按照正确的顺序进行操作，否则将不会起到提速的效果。其正确的操作方法如下：启动Bootvis，从其主窗口(如图2)中选择“工具”菜单下的“选项”命令，在“符号路径”处键入Bootvis的安装路径，如“C:\ProgramFiles\Bootvis”，单击“保存”退出。从“跟踪”菜单中选择“下次引导”命令，会弹出“重复跟踪”对话框，单击“确定”按钮，BootVis将引导WindowsXP重新启动，默认的重新启动时间是10秒。系统重新启动后，BootVis自动开始运行并记录启动进程，生成启动进程的相关BIN文件，并把这个记录文件自动命名为TRACE_BOOT_1_1。程序记录完启动进程文件后，会重新启动BootVis主界面，在“文件”菜单中选择刚刚生成的启动进程文件“TRACE_BOOT_1_1”。窗口中即会出现“CPU>使用”、“磁盘I/O”、“磁盘使用”、“驱动程序延迟”等几项具体图例供我们分析，不过最好还是让BootVis程序来自动进行分析：从“跟踪”菜单中选择“系统优化”命令，程序会再次重新启动计算机，并分析启动进程文件，从而使计算机启动得更快。(3)禁用多余的服务WindowsXP在启动时会有众多程序或服务被调入到系统的内存中，它们往往用来控制Windows系统的硬件设备、内存、文件管理或者其他重要的系统功能。但这些服务有很多对我们用途不大甚至根本没有用，它们的存在会占用内存和系统资源，所以应该将它们禁用，这样最多可以节省70MB的内存空间，系统速度自然也会有很大的提高。选择“开始”菜单中的“运行”命令，在“运行”对话框键入“services.msc”后回车，即可打开“服务”窗口。窗口的服务列表中列出了系统提供的所有服务的名称、状态及启动类型。要修改某个服务，可从列表双击它，会弹出它的属性对话框(如图3)，你可从“常规”选项卡对服务进行修改，通过单击“启动”、“停止”、“暂停”、“恢复”四个按钮来修改服务的状态，并可从“启动类型”下拉列表中修改启动类型，启动类型有“自动”、“手动”、“已禁用”三种。如果要禁止某个服务在启动自动加载，可将其启动类型改为“已禁用”。WindowsXP提供的所有服务有36个默认是自动启动的，实际上，其中只有8个是必须保留的(见下表)，其他的则可根据自己的需要进行设置，每种服务的作用在软件中有提示。4)修改注册表来减少预读取，减少进度条等待时间WindowsXP在启动过程中会出现一个进度条，我们可以通过修改注册表，让进度条只跑一圈就进入登录画面。选择“开始”菜单中的“运行”命令，在“运行”对话框键入“regedit”命令后回车，即可启动注册表编辑器，在注册表中找HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SessionManager\MemoryManagement\PrefetchParameters，选择其下的EnablePrefetcher键，把它的键值改为“1”即可。(5)减少开机磁盘扫描等待时间当Windows日志中记录有非正常关机、死机引起的重新启动，系统就会自动在启动的时候运行磁盘扫描程序。在默认情况下，扫描每个分区前会等待10秒钟，如果每个分区都要等上10秒才能开始进行扫描，再加上扫描本身需要的时间，会耗费相当长的时间才能完成启动过程。对于这种情况我们可以设置取消磁盘扫描的等待时间，甚至禁止对某个磁盘分区进行扫描。选择“开始→运行”，在运行对话框中键入“chkntfs/t:0”，即可将磁盘扫描等待时间设置为0；如果要在计算机启动时忽略扫描某个分区，比如C盘，可以输入“chkntfs/xc:”命令；如果要恢复对C盘的扫描，可使用“chkntfs/dc:”命令，即可还原所有chkntfs默认设置，除了自动文件检查的倒计时之外。2.提高系统运行速度提升系统运行速度的思路与加快启动的速度类似：尽量优化软硬件设置，减轻系统负担。以下是一些常用的优化手段。(1)设置处理器二级缓存容量WindowsXP无法自动检测处理器的二级缓存容量，需要我们自己在注册表中手动设置，首先打开注册表，找到“HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SessionManager\MemoryManagement\”，选择其下的“SecondLevelDataCache”，根据自己所用的处理器设置即可，例如PIIICoppermine/P4Willamette是“256”，AthlonXP是“384”，P4Northwood是“512”。(2)提升系统缓存同样也是在“HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SessionManager\MemoryManagement\”位置，把其下的“LargeSystemCache”键值从0改为1，WindowsXP就会把除了4M之外的系统内存全部分配到文件系统缓存中，这样XP的内核能够在内存中运行，大大提高系统速度。通常来说，该优化会使系统性能得到相当的提升，但也有可能会使某些应用程序性能降低。需要注意的是必须有256M以上的内存，激活LargeSystemCache才可起到正面的作用，否则不要轻易改动它。(3)改进输入/输出性能这个优化能够提升系统进行大容量文件传输时的性能，不过这只对服务器用户才有实在意义。我们可在中新建一个DWORD(双字节值)键值，命名为IOPageLockLimit。一般情况下把数据设置8~16MB之间性能最好，要记住这个值是用字节来计算的，例如你要分配10MB的话，就是10×?1024×1024，也就是10485760。这里的优化也需要你的机器拥有大于256M的内存。(4)禁用内存页面调度在正常情况下，XP会把内存中的片断写入硬盘，我们可以阻止它这样做，让数据保留在内存中，从而提升系统性能。在注册表中找到“HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SessionManager\MemoryManagement\”下的“DisablePagingExecutive”键，把它的值从0改为1即可禁止内存页面调度了。(5)关闭自动重新启动功能当WindowsXP遇到严重问题时便会突然重新开机，可从注册表将此功能取消。打开注册表编辑器，找到“HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\CrashControl\”将AutoReboot键的Dword值更改为0，重新启动后设置即可生效。(6)改变视觉效果WindowsXP在默认情况下启用了几乎所有的视觉效果，如淡入淡出、在菜单下显示阴影。这些视觉效果虽然漂亮，但对系统性能会有一定的影响，有时甚至造成应用软件在运行时出现停顿。一般情况下建议少用或者取消这些视觉效果。选择桌面上“我的电脑”图标，单击鼠标右键，在弹出的快捷菜单中选择“属性”命令，打开“系统属性”对话框。选择“高级”选项卡，在其中的“性能”栏中单击“设置”按钮，会弹出“性能选项”对话框(如图4)，可选择“调整为最佳性能”单选框来关闭所有的视觉效果，也可选择“自定义”然后选择自己需要的视觉效果。(7)合理设置页面虚拟内存同样也是在“性能选项”对话框中，选择“高级”选项卡，在其中的“虚拟内存”栏中单击“更改”按钮，接下来选择虚拟内存为“自定义大小”，然后设置其数值。一般情况下，把虚拟设为不小于256M，不大于382M比较合适，而且最大值和最小值最好一样。(8)修改外观方案WindowsXP默认的外观方案虽然漂亮，但对系统资源的占用也多，可将其改为经典外观以获得更好的性能。在桌面空白位置单击鼠标右键，从弹出的快捷菜单中选择“属性”命令，会打开“显示属性”对话框，在“主题”选项卡选择主题为“Windows经典”，即可将外观修改为更为经济的Windows经典外观。(9)取消XP对ZIP支持WindowsXP在默认情况下打开了对zip文件支持，这要占用一定的系统资源，可选择“开始→运行”，在“运行”对话框中键入“regsvr32/uzipfldr.dll”，回车确认即可取消XP对ZIP解压缩的支持，从而节省系统资源。(10)关闭Dr.WatsonDr.Watson是WindowsXP的一个崩溃分析工具，它会在应用程序崩溃的时候自动弹出，并且在默认情况下，它会将与出错有关的内存保存为DUMP文件以供程序员分析。不过，记录DUMP文件对普通用户则毫无帮助，反而会带来很大的不便：由于Dr.Watson在应用程序崩溃时会对内存进行DUMP记录，将出现长时间硬盘读写操作，要很长一断时间程序才能关闭，并且DUMP文件还会占用大量磁盘空间。要关闭Dr.Watson可打开注册表编辑器，找到“HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\WindowsNT\CurrentVersion\AeDebug”分支，双击其下的Auto键值名称，将其“数值数据”改为0，最后按F5刷新使设置生效，这样就取消它的运行了。同样，我们可以把所有具备调试功能的选项取消，比如蓝屏时出现的memory.dmp，可在“系统属性”对话框中选择“高级”选项卡，单击“启动和故障恢复”栏中的“设置”按钮，并在弹出的“启动和故障恢复”对话框中选择“写入调试信息”为“无”(如图5)。(11)启动硬盘/光驱DMA模式打开“系统属性”对话框，选择“硬件”选择卡中的“设备管理器”按钮，打开“设备管理器”窗口，在设备列表中选择“IDEATA/ATAPI控制器”，双击“主要IDE通道”或“次要IDE通过”，在其属性对话框的“高级设置”选项卡中检查DMA模式是否已启动，一般来说如果设备支持，系统就会自动打开DMA功能，如果没有打开可将“传输模式”设为“DMA(若可用)”。(12)关掉不用的设备WindowsXP总是尽可能为电脑的所有设备安装驱动程序并进行管理，这不仅会减慢系统启动的速度，同时也造成了系统资源的大量占用。针对这一情况，你可在设备管理器中，将PCMCIA卡、调制解调器、红外线设备、打印机端口(LPT1)或者串口(COM1)等不常用的设备停用，方法是双击要停用的设备，在其属性对话框中的“常规”选项卡中选择“不要使用这个设备(停用)”。在重新启动设置即可生效，当需要使用这些设备时再从设备管理器中启用它们。(13)关闭错误报告当应用程序出错时，会弹出发送错误报告的窗口，其实这样的错误报告对普通用户而言几乎没有任何意义，关闭它是明智的选择。在“系统属性”对话框中选择“高级”选项卡，单击“错误报告”按钮，在弹出的“错误汇报”对话框中，选择“禁用错误汇报”单选项，最后单击“确定”即可。另外我们也可以从组策略中关闭错误报告：从“运行”中键入“gpedit.msc”，运行“组策略编辑器”，展开“计算机配置→管理模板→系统→错误报告功能”，双击右边设置栏中的“报告错误”，在弹出的“属性”对话框中选择“已禁用”单选框即可将“报告错误”禁用。(14)关闭自动更新“自动更新”功能对许多WindowsXP用户而言并不是必需的，可将其关闭以节省系统资源。在“我的电脑”上单击鼠标右键，从快捷菜单中选择“属性”命令，选择“系统属性”对话框中的“自动更新”选项卡，勾选“关闭自动更新，我将手动更新计算机”单选框，单击“确定”按钮即可关闭自动更新功能。如果在“服务”已经将“AutomaticUpdates”服务关闭，“系统属性”对话框中的“自动更新”选项卡就不能进行任何设置了。(15)去掉菜单延迟去掉菜单弹出时的延迟，可以在一定程度上加快XP。要修改的键值位置在“HKEY_CURRENT_USER\ControlPanel\Desktop”。修改其下的“MenuShowDelay”键，把默认的400修改为0，按F5刷新注册表即可生效。(16)清除预读文件WindowsXP的预读设置虽然可以提高系统速度，但是使用一段时间后，预读文件夹里的文件数量会变得相当庞大，导致系统搜索花费的时间变长。而且有些应用程序会产生死链接文件，更加重了系统搜索的负担。所以，应该定期删除这些预读文件。预计文件存放在WindowsXP系统文件夹的Prefetch文件夹中，该文件夹下的所有文件均可删除。(17)关闭自动播放功能在WindowsXP中，当往光驱中放入光盘或将USB硬盘接上电脑时，系统都会自动将光驱或USB硬盘扫描一遍，同时提示你是否播放里面的图片、视频、音乐等文件，如果是拥有多个分区的大容量的USB硬盘，扫描会耗费很长的时间，而且你得多次手动关闭提示窗口，非常麻烦。这种情况下我们可以将WindowsXP的自动播放功能关闭。运行“组策略”程序。在组策略窗口左边栏中，打开“计算机配置”，选择“管理模板”下的“系统”，然后在右边的配置栏中找到“关闭自动播放”并双击它，会弹出“关闭自动播放属性”对话框。在其中“设置”选项卡中选择“已启用”，“关闭自动播放”下拉列表中选择“所有驱动器”(如图6)。这样以后就不用担心WindowsXP的“自动播放”功能带来的麻烦了。如果你只是想禁止系统扫描某个驱动器(如USB硬盘)上的文件，可采用下面的方法。先连上你的USB硬盘，让系统将它识别出来。然后打开“我的电脑”，选择USB硬盘上的某个分区，按鼠标右键，会弹出磁盘属性窗口，选取“自动播放”选项卡，将所有内容的类型都选择为不执行操作。如果USB硬盘有多个分区，对所有分区都进行同样的操作，这样当你将USB驱动器拔掉再重新接上时，系统会将USB硬盘识别出来，而