Vue 3前端框架应用项目教程（微课版）课件 项目9、10Vue网络请求、Vuex状态管理

9.1调用后端接口实现用户管理模块Vue网络请求onetasks

Axios简介目录CONTENTS前后端分离式开发1为什么选择Axios21.前后端分离式开发后端专注于数据的操作，只需要对外开放接口即可；前端专注于页面和性能的实现，相关的数据从后台提供的接口进行获取。前后端分离式开发后端前端发送网络请求返回json数据2.为什么选择Axios基于XMLHttpRequest（XHR）的原生AjaxjQuery封装的AjaxVue1时代，推出的Vue-resourceAxios框架Vue发送网络请求的方法2.为什么选择Axios基于XMLHttpRequest（XHR）的原生Ajax配置和调用方式比较混乱代码编写比较复杂自己封装的网络请求模块不一定完善真实项目中很少使用2.为什么选择AxiosjQuery封装的Ajax相对传统的Ajax非常好用基于Vue框架的开发一般是不需要jQuery框架了Ajax只是jQuery框架中的一小部分jQurey的代码1w+行Vue的代码1w+行没有必要为了网络请求，引入一个与Vue框架一样重量级的框架2.为什么选择AxiosVue1时代，推出的Vue-resource相对于jQuery，Vue-resource的体积要小很多在Vue2推出后，官方已经声明不会再更新对项目开发和维护存在很大的隐患2.为什么选择AxiosAxios框架在Vue2推出后，官方推荐使用Axios框架相对于jQuery，Axios框架的体积也要小很多使用Axios框架来封装网络请求模块比较方便了解什么前后端分离式开发1理解Vue为什么选择Axios框架发送网络请求2总结后端专注于数据的操作，只需要对外开放接口即可；前端专注于页面和性能的实现，相关的数据从后台提供的接口进行获取。在Vue2推出后，官方推荐使用Axios框架相对于jQuery，Axios框架的体积也要小很多使用Axios框架来封装网络请求模块比较方便Axios应用目录CONTENTSAxios的安装1Axios基本使用21.Axios的安装1.设置淘宝镜像npmconfigsetregistryhttps://2.通过cd命令进入脚手架项目根目录3.使用npm命令安装axios插件npmiaxios--save安装完成之后可以在package.json文件中查看到axios插件的相关信息apis/index.js2.

封装Axios导入axios后台的接口地址，比如：http://localhost:8081/member3.

Axios基本使用get请求语法后台的接口地址，比如：http://localhost:8080/member请求失败，打印错误信息向后台接口传递的参数，如果没有，可省略向后台发送get方式的网络请求请求成功后，打印返回的数据掌握安装axios插件的方法1掌握axios插件的基本使用方法2总结npmiaxios--save后端准备目录CONTENTS搭建服务器环境1准备后台数据21.搭建服务器环境Apache+Mysql+PHP建议安装在盘符根目录下安装PHPStudy集成软件下载地址：/解压安装包并安装注意：安装目录不能包含中文和空格1.搭建服务器环境Apache+Mysql+PHP启动Apache服务创建Web网站启动服务启动Mysql服务1.搭建服务器环境Apache+Mysql+PHP创建Web网站启动服务weblaravel为后台项目根目录将后台项目weblaravel拷贝到E:\创建网站：域名：localhost端口：80801.搭建服务器环境Apache+Mysql+PHP创建Web网站启动服务创建网站：域名：localhost端口：8080预览：http://localhost:8080创建db_test数据库，还原member表数据；预览：http://localhost:8080/member步骤：需求：2.准备后台数据从Mysql数据库获取会员表的所有信息，并以json格式返回搭建后台服务器环境：Apache+Mysql+PHP1准备好后台接口：http://localhost:8080/member2总结跨域问题目录CONTENTS什么是跨域问题1解决跨域问题21.什么是跨域问题前端http://localhost:8080同源请求跨域问题后端http://localhost:8080前端http://localhost:8081跨域请求后端http://localhost:80801.什么是跨域问题跨域问题的出现原因因为浏览器的同源策略，所谓同源是指两个页面具有相同的协议、主机和端口号；同源策略是浏览器最核心、最基本的功能，如果没有同源策略，浏览器会变得很不安全，随时受到攻击；跨域的三种情况协议不同：比如http和https域名不同端口不同2.

解决跨域问题在Vue中解决跨域问题的方法很多，我们介绍最常用的一种方法——设置代理服务器前端http://localhost:8081后端http://localhost:8080代理服务器http://localhost:8080Vue通过设置代理（将代理服务器设置为跟后台服务器同源），让代理去访问后台，就不会被同源策略拦截2.

解决跨域问题proxy选项：设置代理服务器地址在vue里设置代理服务器1.在项目根目录，打开配置文件vite.config.js2.在apis/index.js文件中，将axios的默认服务器地址设置为与前端同源什么是跨域问题1在Vue里，如果解决跨域问题2总结前端和后端不是同源的情况下，发送网络请求，会出现跨域问题设置代理服务器调用后端接口实现用户管理模块任务实现内容CONTENTS提出任务1分析任务2归纳总结4实施任务3本次课任务调用后端接口实现用户管理模块1.提出任务任务要点：案例效果：2.分析任务准备工作；获取所有用户数据，渲染用户列表实现查询用户功能实现添加用户功能实现删除用户功能实现修改用户功能实践调用后端接口实现用户管理模块3.实施任务3.实施任务准备工作（1）在vite-project项目的src\components目录下创建3个Vue文件，分别是添加用户组件Add.vue、用户管理组件Members.vue和修改用户组件Modify.vue。（2）封装Axios对象。（3）在vite-project项目的src\router目录下创建文件index.js，封装路由对象。（4）修改main.js文件（5）修改App.vue（6）在配置文件vite.config.js中设置代理服务器3.实施任务(2)获取所有用户数据，渲染用户列表3.实施任务(3)实现查询用户功能3.实施任务(4)实现添加用户功能3.实施任务(5)实现删除用户功能3.实施任务(6)实现修改用户功能下次课见！Seeyounexttime10使用状态管理实现购物车使用状态管理onetask01PARTONEVuex概述为什么需要状态管理?01Vuex定义与功能Vuex是Vue.js的官方状态管理库，集中式存储管理应用所有组件状态，确保状态在组件间共享时的可维护性。它遵循单一状态树原则，将状态存储在单一对象中，通过严格规则保证状态更新的可预测性。组件通信的挑战Vuex是什么？01Vuex定义与功能Vuex是Vue.js的官方状态管理库，集中式存储管理应用所有组件状态，确保状态在组件间共享时的可维护性。它遵循单一状态树原则，将状态存储在单一对象中，通过严格规则保证状态更新的可预测性。Vuex安装与基础配置01Vuex定义与功能Vuex是Vue.js的官方状态管理库，集中式存储管理应用所有组件状态，确保状态在组件间共享时的可维护性。它遵循单一状态树原则，将状态存储在单一对象中，通过严格规则保证状态更新的可预测性。Vuex架构01Vuex定义与功能Vuex是Vue.js的官方状态管理库，集中式存储管理应用所有组件状态，确保状态在组件间共享时的可维护性。它遵循单一状态树原则，将状态存储在单一对象中，通过严格规则保证状态更新的可预测性。核心概念关系：State使用方法01Vuex定义与功能Vuex是Vue.js的官方状态管理库，集中式存储管理应用所有组件状态，确保状态在组件间共享时的可维护性。它遵循单一状态树原则，将状态存储在单一对象中，通过严格规则保证状态更新的可预测性。Getter使用方法01Vuex定义与功能Vuex是Vue.js的官方状态管理库，集中式存储管理应用所有组件状态，确保状态在组件间共享时的可维护性。它遵循单一状态树原则，将状态存储在单一对象中，通过严格规则保证状态更新的可预测性。Getter使用方法01Vuex定义与功能Vuex是Vue.js的官方状态管理库，集中式存储管理应用所有组件状态，确保状态在组件间共享时的可维护性。它遵循单一状态树原则，将状态存储在单一对象中，通过严格规则保证状态更新的可预测性。Vuex核心概念01StateState是Vuex中存储应用状态的地方，所有组件共享的全局状态都存储在这里，类似组件的data。通过this.$store.state访问，如this.$store.state.count获取全局计数器状态，实现跨组件状态共享。GettersGetters用于从State派生出新状态，类似Vue组件的计算属性，可根据State动态计算新值。例如，从用户列表State中派生出已激活用户数量的Getter，便于组件按需获取特定状态。MutationsMutations是同步修改State的唯一方式，每个Mutation都有一个类型和一个处理函数，确保状态更新的可预测性。提交Mutation时，需明确指定类型，如this.$mit('increment')，保证状态修改的明确性。02PARTONEVuex核心功能讲解state的使用与管理在创建Vuex实例时，通过state选项初始化全局状态，如state:{count:0}，为应用提供初始状态。初始化状态后，所有组件可通过this.$store.state访问，实现状态的全局共享。初始化State状态更新必须通过提交Mutation完成，直接修改State会导致不可预测的错误，如this.$mit('increment')。遵循此原则，可确保状态更新的同步性和可追踪性。状态更新原则为防止页面刷新导致状态丢失，可通过插件或手动方式将State存储到本地存储，如localStorage，实现状态持久化。例如，将用户登录状态存储到localStorage，刷新页面后仍能保持登录状态。状态持久化getters的实现与应用01.02.03.在Vuex实例中通过getters选项定义Getter，如getters:{doubleCount:state=>state.count*2}。Getter接收State作为参数，返回派生状态，方便组件按需获取。定义Getters组件通过cre.getters访问Getter，如this.$store.getters.doubleCount获取派生状态。Getter支持参数传递，可实现更灵活的状态派生。访问GettersGetter具有缓存机制，当依赖的State未变化时，返回缓存结果，提高性能。例如，计算复杂数据的Getter，只有在State变化时才会重新计算。Getter的缓存机制Mutations的提交与规则通过this.$mit提交Mutation，需指定Mutation类型，如this.$mit('increment')。提交时可携带参数，如this.$mit('increment',payload)，为Mutation提供额外数据。提交MutationMutation必须是同步函数，不能包含异步操作，确保状态更新的可预测性。例如，不能在Mutation中使用setTimeout或Promise，需通过Actions处理异步逻辑。Mutation规则Mutation类型建议使用大驼峰命名，如INCREMENT_COUNT，便于区分和理解。良好的命名规范有助于团队协作和代码维护。Mutation的命名规范Actions的处理与提交定义Actions在Vuex实例中通过actions选项定义Actions，如actions:{incrementAsync({commit}){setTimeout(()=>{commit('increment')},1000)}}。Actions可以包含异步操作，并通过commit提交Mutation。分发Actions通过this.$store.dispatch分发Actions，如cthis.$store.dispatch('incrementAsync')。分发时可携带参数，为Actions提供额外数据。Actions的异步处理Actions是处理异步逻辑的场所，可实现如API请求等异步操作，完成后提交Mutationc更新状态。例如，在获取用户数据后，提交Mutation更新用户状态。Moudules的使用与优势定义Modules在Vuex实例中通过modules选项定义模块，如modules:{a:{state:()=>({count:0}),mutations:{increment(state){state.count++}}}}。每个模块包含独立的State、Getters、Mutations和Actions。模块化优势模块化可将复杂状态分割成多个模块，便于管理和维护，提高代码可读性和可维护性。例如，将用户模块和购物车模块分开，各模块独立管理状态。模块命名空间模块默认不开启命名空间，可通过namespaced:true开启，避免命名冲突。开启命名空间后，需通过模块名访问状态和提交Mutation、分发Actions。03PARTONEVuex实战案例购物城车案例需求分析功能需求状态管理需求技术选型需实现商品列表展示、商品添加到购物车、购物车列表展示及总价计算等功能。用户可在商品列表页面选择商品加入购物车，在购物车页面查看和管理