Vue.js前端开发案例教程项目七 网络请求与状态管理.pptx

Vue.js前端开发案例教程

项目1Vue.js入门项目2Vue.js开发基础项目3Vue.js指令项目4Vue.js组件全书目录项目5过渡动画项目8综合案例——开发图书销售网站项目7网络请求与状态管理项目6路由管理

网络请求与状态管理项目七

能够使用Axios实现网络请求能够使用Vuex进行状态管理技能目标02加强时间规划意识，提高学习效率培养持续学习的能力，能够及时掌握新技术和新工具，并将其应用到实际项目中素养目标03掌握网络请求库Axios的使用方法掌握状态管理插件Vuex的使用方法知识目标01项目目标

0102项目描述小刘是一名软件开发工程师，主要负责订餐系统项目的前端开发。

0102项目描述为了能够实现订餐系统的登录功能，并能够在其他组件中获取登录信息，小刘决定使用Axios实现订餐系统的登录功能，并使用Vuex管理登录状态。

安装?Axios、Vuex?和vuex-persistedstate插件√使用?Axios?提供的方法进行网络请求实现登录功能√使用?Vuex?提供的方法和属性管理登录状态√使用?vuex-persistedstate?持久化存储登录状态查看页面效果实现订餐系统的登录功能并管理登录状态项目分析

1.什么是网络请求？2.什么是状态管理？问题项目准备全班学生以3～5人为一组进行分组，各组选出组长。组长组织组员扫码观看“认识网络请求与状态管理”视频，讨论并回答下列问题。认识网络请求与状态管理

01网络请求项目实施项目评价项目总态管理项目实训项目考核0406项目导航

简介网络请求在?Vue.js?中，网络请求通常用于从服务器获取数据或向服务器发送数据。Vue.js?本身并不直接提供网络请求功能，但开发人员可以使用许多流行的?JavaScript?库（如?Axios、Fetch?API?等）实现网络请求。

Axios的安装Axios?是一个基于?Promise?的网络请求库。它既可以在浏览器中发送?XMLHttpRequest请求，也可以在Node.js中发送HTTP请求，还可以拦截请求和响应。在Vues.js项目中，可以使用包管理工具在项目的根目录下安装Axios，命令如下。//使用npminstall命令安装Axiosnpminstallaxios@1.6.2//使用yarnadd命令安装Axiosyarnaddaxios@1.6.2网络请求

//使用import语句导入Axiosimportaxiosfromaxiosaxios(config).then(responce={//请求成功之后执行的操作}).catch(error={//请求失败之后执行的操作})Axios的使用Axios?向服务器发送请求的方式：向Axios传递相关配置项发送请求的语法格式如下。网络请求是一个配置对象，包含请求的各种配置项，如?url、method?等。then()方法用于处理请求成功后要执行的相应操作。参数response?是一个对象，这个对象是接收到的从服务器返回的响应信息。catch()方法用于处理请求失败后要执行的相应操作。参数?error?是一个包含错误信息的对象。

配置项描述示例url（必须存在）请求地址，可以是相对地址或绝对地址url:‘/user’或url:http://localhost:8080/usermethod创建请求时使用的请求方式，基本的请求方式有5种，默认的请求方式是getget（常用）：获取数据method:getpost（常用）：提交数据put：更新数据（适合数据量比较少的更新）patch：更新数据（适合数据量比较多的更新）delete：删除数据params与请求一起发送的参数，拼接在配置项url的后面params:{id:1}data作为请求体被发送的数据，仅适用于post、put、patch和delete这4种请求方式data:{id:1}headers自定义请求头headers:{X-Requested-With:XMLHttpRequest}timeout请求的超时时间，单位为毫秒，若值为0，则永不超时timeout:1000baseURL请求地址的前缀，配置项?url?为相对地址时，自动加载到url的前面baseURL:http://localhost:8080responseType服务器返回的响应数据类型responseType:jsonAxios的使用网络请求配置项的详细信息

网络请求response对象的属性Axios的使用属性描述属性描述data服务器返回的响应数据headers服务器响应的消息报头status服务器响应的HTTP状态码config使用Axios