Vue.js3前端开发基础及项目化应用教案单元7与后端交互——axios_教学设计.docx

《Vue.js3前端开发基础及项目化应用教案单元7与后端交互——axios_教学设计.docx》由会员分享，可在线阅读，更多相关《Vue.js3前端开发基础及项目化应用教案单元7与后端交互——axios_教学设计.docx（9页珍藏版）》请在优知文库上搜索。

1、Vue.js前端开发基础及项目化应用教学设计课程名称：Vuejs前一开发基础及项同化应坦授课年级：授课学期：学年第一学邈一教师发名：2023年09月09日课题名称单元7与后端交互axios计划学时6学时内容分析前端页面的动态数据是需要通过网络请求后端API来获取的。本单元将介绍Vue的重要插件axios的应用。在Vue应用程序中，通常使用axios对HTTP请求提交和结果返回进行处理。借助开放数据接口服务实现“查询旅游城市天气”任务，让学习者体验真实网络平台数据访问的实现过程，更好地理解异步编程相关概念，进一步掌握axios插件的应用方法。教学目标及基本要求1 .掌握axios的安装与配置2

2、.理解Promise和async/await3 .能够利用axios处理GET/POST请求4 .掌握axios拦截器的应用教学重点1 .理解Promise和async/await2 .能够利用axios处理GET/POST请求教学难点理解Promise和async/await教学方式教学采用教师使用PPT讲解和案例示范相结合的方式教学过程第一课时(认识axios,Promise,async/await)一、创设情境，引入异步编程概念1 .教师通过应用场景描述，引出ES6异步编程方案。Web应用前后端交互时，通常是通过HTTP请求实现的。例如用户要查看自己的账户信息，该功能的实现过程是，首先前

3、端将用户名作为参数，通过网络向后端API发出HTTP请求，后端APl程序据此对用户信息表进行查询操作，然后前端通过网络可.获得后端API返回的查询结果并显示。ES6采用Promise代替传统的“回调函数+事件”异步编程方案，来实现上述过程。2 .明确学习目标。 理解异步编程概念 学会使用Promise实现异步处理 学会使用async/await实现异步处理二、进行重点知识的讲解1.Promise异步编程概念？所谓PrOmiSe,可以理解为一个容器,里面包裹着某个事件(异步任务)，这个事件会在将来的某个时刻发生，同时它还会保存事件的结果。2.教师根据课件，介绍PrOmiSe对象相关概念，能使用代

4、码进行演示。（1）教师根据课件，介绍PromiSe对象的状态、参数和方法几个概念，并使用代码进行演示。Promise对象具有3个状态：Pending（等待中）、Resolved（已完成）和Rejected（已失败）；Promise对象有两个参数resolve和reject,它们是Promise构造函数的参数；Promise对象有两个方法then和catch,它们分别接收一个回调函数为参数。（2）教师根据课件，介绍PromiSe实现异步编程的原理。PromlsC构造函数倒理(PemiSe对象、MMII状态：Rgahyd（3）教师根据课件，介绍asyncawai实现异步编程的方法，并使用代码进行演

5、示。async语法规则：aysnc函数名.return返回值。await语法格式：返回值=await表达式。三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要熟悉的知识点，包括异步编程概念、Promise的工作原理和基本用法、async/await实现异步请求处理的方法。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第二课时(axios安装和配置，axios实现HTTP请求)一、回顾上节课内容，继续讲解本课时的知识1 .教师对学

6、生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了异步编程概念，Promise工作原理、Promise实现异步处理、async/await实现异步处理，本节课将介绍axios安装、axiosAPI,以及使用axios实现HTTP请求的方法。3 .明确学习目标。 掌握axios安装与配置 了解axiosAPI 能够使用axiosAPI处理HTTP请求的方法二、进行重点知识的讲解1 .教师根据课件，讲解axios的特点和安装方式，并演示安装过程。(1)特点/从浏览器中创建XMLHttpRequest对象。/从Nodejs创建HTTP请求。/支持Pr

7、omiseAPIo/拦截请求和响应。/转换请求数据和响应数据。,取消请求。/自动转换JSON数据。,客户端支持防御XSRF(Cross-SiteRequestForgery,跨站请求伪造)(2)CDN方式安装data等。3.教师根据课件，通过实例7-5、7-6介绍axiosAPI实现HTTP请求的过程。(1)任何类型请求的处理(2)GET/POST请求的处理三、归纳总结，布置课后作业1 .同顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要了解的axios特点、axios安装步骤、axiosAPl语法规则和各参数含义，以及axiosAPI实现任何类型HTTP请求，GET/P

8、OST请求的具体实现方法。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第三课时(axios请求拦截器，axios响应拦截器)一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了axios安装与配置、axiosAPl语法规则和各参数含义，以及axiosAPl实现任何类型HTTP请求，GET/POST请求的具体实现方法。接下来，本节课将axios拦截器的编写方法和应用。3 .明确学习

9、目标。 掌握axios请求拦截器的应用 掌握axios响应拦截器的应用二、进行重点知识的讲解1 .教师根据课件，讲解axios请求拦截器的实现方法，并使用代码进行演示。(1)创建请求拦截器的语法：axios.interceptors.request.use(function(config).发送请求之前的操作returnconfig;/返回请求配置对象),function(error)./对请求错误的处理returnPromise.reject(error);)；(2)使用案例讲解请求拦截器的具体实现。2 .教师根据课件，讲解axios响应拦截器的实现方法，并使用代码进行演示。(1)创建响应拦

10、截器的语法如下：axios.interceptors.response.use(function(response)./对响应数据的处理returnresponse;/返回响应对象),function(error)(.对响应错误的处理returnPromise.reject(error);!)；(2)使用案例讲解响应拦截器的具体实现。三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要熟悉的知识点，包括axios拦截器的作用、axios请求拦截器和axios响应拦截器的实现方法。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布

11、置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第四课时（axios在项目中的实际应用）一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了axios拦截器的作用、axios请求拦截器和axios响应拦截器的实现方法。接下来，本节课将通过实际应用项目，使用axios实现对天气预报站点的请求，帮助学习者进一步理解异步编程方案，并掌握axi。SAPl的用法。3 .明确学习目标。 掌握axiosAPl实现HTTP请求的方法 掌握axiosAPI和拦截器

12、综合应用二、进行重点知识的讲解1.教师根据课件，介绍项目6一一会员中心页面的需求描述、实现思路和代码实现。（1）需求描述历史名城游网站的信息栏目中，要求根据用户所选择区域里的城市名称，能查询到该市当天的天气情况，包括温度、风向、空气质量等，为用户出行提供天气资讯。（2）实现思路/将查询处理部分构建成局部组件，作为根组件的子组件。/根组件通过props将所选区域里的城巾列表传递给子组件，并将其作为用户选择城市的依据。/利用axios全局配置，对访问站点、请求或响应失败处理进行统设置。/根据天气查询参数要求，利用axios.get函数发起网络请求，获得天气情况数据。/使用LiveServer插件对

13、程序功能进行测试。（3）功能实现任务7-1构建页面布局任务7-2实现天气预报查询三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要熟悉的知识点，包括axiosAPI与axios拦截器综合应用的具体实现过程，LiveServer插件实现HTTP请求处理功能测试的方法。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第五、六课时（项目实践）项目实践主要针对本单元中需要重点掌握的知识点，通过项目功能实现来加强概念的理解，熟悉并掌握编程知识点的应用，通过项目实践可以考察同学对知识点的掌握情况和应用能力。题目：利用“天气API”气象数据接口和axios.get函数，编写一个天气查询页面，要求该页面中能够根据用户输入的城市，查询该城市四季天气，包括四季平均高温、低温和降水量（单位为mm）指标。要求使用axios全局配置baseURL设置“天气API”气象数据接口访问地址。形式：单独完成要求：利用本单元中的知识点，实现项目需求对应的功能，并且程序能够正常运行。考题和习题见教材单元7配套的习题教学后记