Vue框架应用实战项目式教程 课件 任务4 岗位信息异步渲染

1框架技术应用岗位信息异步渲染任务4学习目标【知识目标】掌握生命周期钩子的注册及使用；熟悉不同生命周期钩子的运行顺序；掌握json-server插件的使用方法；熟练掌握Axios的安装及使用；掌握Axios拦截器的注册及使用步骤。【技能目标】能够熟练注册使用生命周期钩子；能够熟练使用json-server模拟服务端接口数据；能够熟练掌握Axios异步请求数据方法。【素质目标】培养认真仔细的工作态度；树立良好的逻辑思维能力。掌握Vue生命周期钩子的注册，使用及生命周期钩子的运行顺序。理解Axios作用，并熟练掌握通过Axios异步请求数据的方法。项目背景本任务负责重构“就业职通车”网站中岗位数据渲染模块。通过学习生命周期与Axios实现在浏览器端打开页面时通过生命周期钩子自动调用Axios获取json-server服务器端数据并渲染至页面。任务规划本任务要求使用生命周期与Axios库，获取json-server服务器端数据。任务4.1Vue生命周期认识【任务陈述】每个Vue实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到DOM，以及在数据改变时更新DOM，我们称之为Vue实例的生命周期。在整个生命周期中，每个节点都会有一个生命周期钩子函数自动运行，我们可以在此特定阶段搭建相应功能。整个生命周期如图4-1所示。图4-1生命周期图示任务4.1Vue生命周期认识【任务分析】本任务要求掌握Vue实例的生命周期钩子运行原理及注册使用步骤。【任务实施】在任务4.2的步骤二中具体实现。【知识链接】4.1.1生命周期钩子生命周期钩子用来描述Vue实例从创建到销毁的整个生命周期，具体如表4-1所示。生命周期钩子组合式API中调用说明beforeCreatesetup()组件实例初始化完成之后立即调用createdsetup()组件实例处理完所有与状态相关的选项后调用beforeMountonBeforeMount()组件被挂载之前被调用mountedonMounted()组件挂载完成后执行beforeUpdateonBeforeUpdate()组件因为响应式状态变更而更新DOM树之前调用updatedonUpdated()组件因为响应式状态变更而更新DOM树之后调用beforeUnmoutedonBeforeUnmount()组件实例被卸载之前调用unmountedonUnmounted()组件实例被卸载之后调用表4-1生命周期钩子任务4.1Vue生命周期认识4.1.2注册生命周期钩子组合式API中的生命周期钩子的注册分为两个步骤：第一步骤：页面导入生命周期钩子函数；第二步骤：设置生命周期钩子函数的参数，参数是一个回调函数，回调函数中书写在本钩子执行的代码。页面挂载【例4-1】页面挂载生命周期钩子案例。代码如下：<template> <divref="el"></div> </template> <scriptsetup> import{ref,onMounted,onBeforeMount}from'vue’constel=ref()onBeforeMount(()=>{console.log(el.value);//undefined})onMounted(()=>{console.log(el.value);//<divdata-v-7a7a37b1></div>})</script>任务4.1Vue生命周期认识4.1.2注册生命周期钩子响应式状态更新【例4-2】响应式状态更新生命周期钩子案例。代码如下：<template><div>数据展示：{{

count}}<button@click="count++">更新</button></div></template><scriptsetup>import{ref,onBeforeUpdate,onUpdated}from'vue’;任务4.1Vue生命周期认识constcount=ref(0)onBeforeUpdate(()=>{console.log('onBeforeUpdate',count.value); alert('更新中...')})onUpdated(()=>{ console.log('onUpdated',count.value);})</script>任务4.1Vue生命周期认识4.1.2注册生命周期钩子【例4-2】案例执行效果如图4-2所示。图4-2【例4-2】案例执行效果图(onBeforeUpdate阶段)任务4.1Vue生命周期认识4.1.2注册生命周期钩子响应式状态已经变更，但还未重新渲染DOM，因此页面显示的count值仍为0，而控制台输出的响应式状态count值为1。单击“确定”按钮后，此时已重新渲染DOM，因此页面显示count值为1。OnUpdated钩子执行效果如图4-3所示。图4-3【例4-2】案例执行效果图(onUpdated阶段)任务4.1Vue生命周期认识4.1.2注册生命周期钩子实例销毁在实例销毁前的onUnmounted()钩子中可以执行手动清理的功能，例如计时器、DOM事件监听器或者与服务器的连接。【例4-3】实例销毁生命周期钩子案例。代码如下：<!—父组件代码--><template> <button@click="flag=!flag">切换子组合Child</button> <childv-if="flag"></child></template><scriptsetup> importChildfrom'./Child.vue' import{ref}from'vue' constflag=ref(true)</script><!—子组件代码--><template><div>child</div></template><scriptsetup>import{onMounted,onBeforeUnmount,onUnmounted}from'vue'lettimer onMounted(()=>{ timer=setInterval(()=>{ console.log(1); },1000) }) onBeforeUnmount(()=>{ console.log('BeforeUnmount'); }) onUnmounted(()=>{ console.log('onUnmounted'); clearInterval(timer) })</script>任务4.1Vue生命周期认识4.1.2注册生命周期钩子效果如图4-4、4-5、4-6所示。

图4-4【例4-3】案例页面初始效果图图4-5【例4-3】案例单击按钮效果图图4-6【例4-3】案例注释“clearInterval(timer)”代码行后的效果图任务4.2 Axios库的使用【任务陈述】本任务实现在“就业职通车”项目中最新岗位的本地数据改写为mock数据，并通过Axios异步获取数据并渲染至页面中。同时将点赞数据通过Axios上传至服务器端数据接口中并渲染。【任务分析】

分为六步骤完成本任务，如图4-7所示。图4-7任务实施流程图任务4.2 Axios库的使用步骤一.使用json-server搭建模拟服务器接口数据环境。Json-server是一个npm管理包，字面上解释为一个在本地（前端）运行，可以存储json数据的服务器。通俗来说，就是模拟服务端接口数据，一般用于前后端分离开发时，前端可以不依赖后端API接口获取数据，而在本地搭建JSON服务器环境，自行产生测试数据来测试前端开发代码。安装json-server插件。在vscode编辑器中将项目的根目录设为当前目录，并单击鼠标右键选择“在集成终端中打开”，在打开的终端界面中输入以下命令后，将json-server插件安装至本项目的运行依赖。任务4.2 Axios库的使用npminstalljson-server--save创建data.json数据文件。在项目根目录新建data.json文件，并在data.js中建立二级数据，一级数据为messageList、articleList、article，它们对应着服务器端的文件路径名。将App.vue中的本地数据全部剪切放至对应的data.json文件中。注意需要将数据的注释全部删除，并调整成json格式。【任务实施】data.json文件格式如下：{ "messageList":[{…},… ], ”articleList”:[{…},…], "article":[ {…},… ]}任务4.2 Axios库的使用【任务实施】设置mock数据。在终端中输入命令：json-serverdata.json，将data.json数据放在模拟服务器端，地址默认为http://localhost:3000，打开http://localhost:3000/messageList可查看二级数据。当出现如图4-8所示的界面后，恭喜您，已经成功搭建了服务器接口数据环境。图4-8json-server运行界面任务4.2 Axios库的使用【任务实施】设置快速启动json-server。为提高效率，可以对json-server设置快速启动命令，如图4-9所示。打开项目根目录的package.json文件，在“script”处输入如下代码：”buildData”:”json-serverdata.json”，今后启动json-server命令只需要在终端输入命令即可：npmrunbuildData。图4-9快速启动json-server命令执行效果任务4.2 Axios库的使用【任务实施】步骤二.通过Axios完成服务器数据的调用，并渲染到页面。安装Axios与vue-axios。在终端命令行处，输入以下代码，安装Axios与vue-axios至项目的运行依赖。npminstallaxiosvue-axios-–save导入Axios与vue-axios。在main.js文件中中导入axios和vue-axios，并进行注册。import{createApp}from'vue'importAppfrom'./App.vue'//导入Axios和vue-axiosimportaxiosfrom'axios'importVueAxiosfrom'vue-axios'constapp=createApp(App)任务4.2 Axios库的使用【任务实施】//注册Axios和vue-axiosapp.use(VueAxios,Axios)app.mount('#app')//设计vue全局属性app.config.globalProperties.$axios=axios定义获取最新岗位数据方法getComments()。//页面中使用Axios，每个页面都需要设置constcurrentInstance=getCurrentInstance()const{$Axios}=currentInstance.appContext.config.globalProperties//获取最新岗位数据functiongetComments(){ return$Axios.get("http://localhost:3000/messageList")}任务4.2 Axios库的使用【任务实施】调用getComments()方法获取最新岗位数据。在Vue生命周期钩子onBeforeMount()中调用getComments方法请求最新岗位数据。数据是越早获取越方便后续的渲染，因此放在onBeforeMount()生命周期中进行请求。onBeforeMount(()=>{getComments().then(result=>{ if(result.status==200){ messageList.content=result.data }})})刷新浏览器页面，可以看到页面中已经成功请求到接口地址上的mock数据。任务4.2 Axios库的使用【任务实施】步骤三.完成岗位发布功能模块。定义提交最新岗位数据方法postComments()。在App.vue中定义postComments方法，通过Axios的post方法将数据提交至服务器接口。//上传岗位发布数据functionpostComments(data){ return$Axios.post("http://localhost:3000/messageList",data)}定义岗位发布方法submit()。在submit()中定义提交岗位发布的程序逻辑，messageInfo为需要上传的新数据，使用postComments方法将messageInfo上传至接口，再通过getComments方法请求更新后的全部数据，并在页面中渲染。任务4.2 Axios库的使用【任务实施】//提交方法functionsubmit(){if(.trim()==""||message.email.trim()==""||message.content.trim()==""){ alert("信息输入不全，请输入完整信息！")return}//定义数据letmessageInfo={id:Date.now(),email:message.email,name:,content:message.content,scale:message.scale,support:0,//点赞数量has_sup:false,//点赞状态unnamed:message.unnamed//匿名状态}//上传数据postComments(messageInfo).then(postResult=>{if(postResult.status==201){message.id=""message.email=""=""message.content=""message.scale=0message.support=0message.has_sup=falsemessage.unnamed=false//获取mock接口更新的数据getComments().then(getResult=>{if(getResult.status==200){messageList.content=getResult.data}})})任务4.2 Axios库的使用【任务实施】步骤四.完成点赞功能模块。定义上传点赞数据方法postSupportState()。定义postSupportState方法，使用Axios中的put方法修改当前id值的点赞数据。//上传更新的点赞数据functionpostSupportState(newData){return$Axios.put("http://localhost:3000/messageList/"+newData.data.id,newData.data)}定义获取点赞数据方法getSupportState()。使用Axios中的get方法获取更新后的点赞数据。//获取更新的点赞数据functiongetSupportState(id){return$Axios.get("http://localhost:3000/messageList/"+id)}任务4.2 Axios库的使用【任务实施】定义点赞功能模块逻辑方法support()。点赞功能模块的处理，封装成support函数，强化逻辑思维。//点赞方法functionsupport(newData){

//数据传递给接口 postSupportState(newData).then(postResult=>{ if(postResult.status==200){ getSupportState(newData.data.id).then(getResult=>{ if(getResult.status==200){ messageList.content[newData.index]=getResult.data } }) } })}任务4.2 Axios库的使用【任务实施】步骤五.使用拦截器自动添加日期。设置请求拦截器。在main.js文件中使用Axios请求拦截器为新发表的岗位信息自动添加time属性，用于记录该岗位的发布日期。//设置请求拦截器erceptors.request.use(function(config){

//拦截成功 if(config.data){ config.data.time=Date.now() } returnconfig},function(err){

//拦截失败 console.error(err)})app.mount('#app')任务4.2 Axios库的使用<scriptsetup>//解析时间戳functionparserTime(time){if(!time){return}letdate=newDate(time);letY=date.getFullYear()+'年’;letM=(date.getMonth()+1<10?'0'+(date.getMonth()+1):date.getMonth()+1)+'月’;letD=date.getDate()+'日’;returnY+M+D}</script><template><divclass="message_sup">

<!--渲染时间--> <small>{{parserTime(item.time)}}</small> ……</div></template>调用parserTime()方法。保存后在页面中重新增加岗位信息后日期字段才会显示出来，旧有信息通过点赞方式显示日期。【任务实施】定义调整日期格式方法parserTime()。time属性获取到的值是时间戳，需要进行处理后才能正确渲染在模板中。在App.vue组件中编制parserTime方法，用来获取正确的时间格式。任务4.2 Axios库的使用【知识链接】4.2.1mock数据mock数据指的是虚假数据，前端开发人员可以mock假数据来模拟开发，这样的好处在前后端并行开发时，前端人员不用等后端人员开发完API，只要定义好接口文档就可以开始工作，互不影响，只有最后的联调阶段前后端才进行真实数据交互。借助mock数据，不会出现一个团队等待另一个团队的情况，提高开发效率，利于整个产品质量及进度的保证。4.2.2vue-axios插件Vue-axios是将Axios基于Vue.js进行轻度封装，便于在Vue.js中开发使用。4.2.3AxiosAxios是一个基于promise的网络请求库，作用于node.js和浏览器中。在服务器端使用原生node.js的http模块，而在浏览器端则使用XMLHttpRequest。因此Axios本质上是对原生XHR的封闭，只不过它是promise的实现版本，符合最新的ES规范。任务4.2 Axios库的使用【知识链接】Axios特性从浏览器创建

XMLHttpRequests。从node.js创建

http

请求。支持

Promise

API。拦截请求和响应。转换请求和响应数据。取消请求。自动转换JSON数据。客户端支持防御XSRF。Axios基本用法Axios主要的作用是向服务器发起HTTP请求，根据HTTP标准，HTTP请求可以使用多种请求方法。为了方便起见，已经为所有支持的请求方法提供了别名。Axios.request(config)Axios.get(url[,config])Axios.delete(url[,config])Axios.head(url[,config])Axios.options(url[,config])Axios.post(url[,data[,config]])Axios.put(url[,data[,config]])Axios.patch(url[,data[,config]])注意，在使用别名方法时，

url、method、data

这些属性都不必在配置中指定。任务4.2 Axios库的使用【知识链接】发起GET请求发起一个GET请求，从指定的资源请求数据。语法规则如下：//向给定ID的用户发起请求axios.get(url) .then(function(response){

//处理成功情况 console.log(response); }) .catch(function(error){

//处理错误情况 console.log(error); }) .then(function(){

//总是会执行 });任务4.2 Axios库的使用【知识链接】发起POST请求发起一个POST请求，向指定的资源提交数据并处理请求，数据包含在请求体中，语法规则如下：axios.post(url,data) .then(function(response){ console.log(response); }) .catch(function(error){ console.log(error); });发起PUT请求发起一个PUT请求，从客户端向服务器传送的数据取代指定的文档内容，语法规则如下：axios.put(url,data) .then(function(response){ console.log(response); }) .catch(function(error){ console.log(error); });任务4.2 Axios库的使用【知识链接】Axios请求拦截器Axios拦截器的作用是在每次的请求或响应被then或catch处理前拦截它们并自动被触发，分为请求拦截器和响应拦截器。示意图如图4-10所示。图4-10拦截器示意图请求拦截器通过Aerceptors.request.use()配置请求拦截器，语法格式如下：//添加请求拦截器erceptors.request.use(function(config){//在发送请求之前做些什么returnconfig;},function(error){//对请求错误做些什么returnPromise.reject(error);});任务4.2 Axios库的使用【知识链接】请求拦截器通过Aerceptors.request.use()配置请求拦截器，语法格式如下： //添加请求拦截器 erceptors.request.use(function(config){ //在发送请求之前做些什么 returnconfig; },function(error){ //对请求错误做些什么 returnPromise.reject(error); });任务4.2 Axios库的使用【知识链接】【例4-4】请求拦截器案例。给表单提交的数据自动添加birthday字段，代码如下：//请求拦截器$erceptors.request.use(config=>{config.data.birthday='today'returnconfig},err=>console.log(err))$axios.post('http://localhost:3000/messageList',{id:Date.now(),email:"ala@d",效果如图4-11所示。图4-11【例4-4】请求拦截器案例执行效果图任务4.2 Axios库的使用【知识链接】name:"111111",content:"111111111111111111",scale:0,support:0