Vue 3前端框架应用项目教程（微课版）课件 项目6-11 路由管理- 项目实战：开发个人Vue网络请求

路由的使用目录CONTENTS路由的基本使用1路由的执行过程21、路由的基本使用Vue-router的使用步骤第二步：创建组件第一步：引入vue.js和vue-router.js文件component的属性值，必须是一个组件对象，不能是组件的引用名称。第三步：创建VueRouter对象：设置routes数组，在该数组中设置每条路径的映射关系：

path：对应的路由component：path对应要加载的组件第四步：注册路由

在vue实例中注册VueRouter对象1、路由的基本使用第五步：使用路由

通过<router-link>的to属性，告诉系统，我要使用哪条路径渲染组件：当通过<router-link>找到对应路径后，便将该路径对应的组件加载并渲染，

其中<router-view>相当于组件的占位符，组件加载进来后，直接将该标签替换1、路由的基本使用3.总结路由的基本使用1路由的执行过程2总结使用vue基本路由实现选项卡功能任务实现内容CONTENTS提出任务1分析任务2归纳总结4实施任务3本次课任务使用vue基本路由实现选项卡功能1.提出任务引入vue.js和vue-router.js文件；创建组件；创建VueRouter对象；注册路由；使用路由重定向按钮高亮任务要点：案例效果：2.分析任务实践使用vue基本路由实现选项卡功能3.实施任务4.归纳总结总结模板使用路由待支付模板4.归纳总结总结创建组件对象创建vue-router注册路由5.1使用vue基本路由实现登录和注册的切换5.2使用vue路由实现后台管理系统的导航功能配置Vue路由twotasks路由传参目录CONTENTS动态路由1query方式传参2params方式传参31.动态路由在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径：/user/aaaa或/user/bbbb除了有前面的/user之外，后面还跟上了用户的参数，这种path和component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式：params)。动态路由在来回切换时，由于它们都是指向同一组件，Vue不会销毁再重新创建这个组件，而是复用这个组件。2.query方式传参query方式传参<router-link

to="/path?参数名1=参数值1&参数名2=参数值2"></router-link>query方式，参数会以查询字符串的方式显示在浏览器上，也就是?后面跟key和value对象中使用query的key作为传递方式在页面跳转的时候，可以在地址栏看到请求参数。配置路由格式:/router,也就是普通配置query方式传参传进来的参数，可以通过$route.query进行访问，this可以省略2.query方式传参2.params方式传参

let

routes=[{

//动态路径参数，以冒号开头

path:‘/login/:参数名1/:参数名2',

component:user

}]

在注册路由时，将参数用”/:”分隔，多个参数，也是如此，比如：‘/home/:user/:id’<router-link

to=“path/参数值1/参数值2"></router-link>在router-link中的to属性，应保持和路由path中一致的格式，且to可以被v-bind动态绑定3.params方式传参传进来的参数，可以通过$route.params进行访问params方式传参4.总结query方式传参1params方式传参2总结嵌套路由目录CONTENTS嵌套路由的概念1嵌套路由的使用方法21.嵌套路由的概念什么是嵌套路由实际项目中的应用界面通常是由多层嵌套的组件组合而成，比如在home页面中,我们希望通过/home/news和/home/message访问一些内容。一个路径映射一个组件,访问这两个路径也会分别渲染两个组件。嵌套路由就是在路由里面嵌套它的子路由。2.嵌套路由的使用方法嵌套子路由的关键属性是children；children也是一组路由，可以去配置路由数组，相当于前面讲到的routes；每一个子路由里面可以嵌套多个组件，子组件又有路由导航和路由容器。children属性<router-link

to="/父路由的地址/要去的子路由"></router-link>实现嵌套路由的步骤（1）创建对应的子组件（2）在路由映射中配置对应的子路由（3）在组件内部使用子路由2.嵌套路由的使用方法3.总结嵌套路由的概念1嵌套路由的使用方法2总结命名路由目录CONTENTS命名路由的概念1命名路由的使用21.命名路由的概念vue-router提供了一种隐式的引用路径，即命名路由，可以在创建Router实例的时候，在

routes

中给某个路由设置名称name值。通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候，通过路由的名称取代路径地址直接使用。像这种命名路由的方式，无论path多长、多烦琐，都能直接通过name来引用，十分方便。2.命名路由的使用在创建Router实例时，在

routes

中给某个路由设置名称name值；通过路由的名称取代路径地址直接使用2.命名路由的使用

为何使用命名路由？原因一：变更了router对象中的path，那么还需要去修改<router-link>中的to的属性值；原因二：如果router对象中的path比较长，那么通过命名路由的方式，不论path多长，都可以使用该路由的名称name，因此比较方便；原因三：可以避免我们的参数传递显示在浏览器的url框中（仅在params中有效，query无效）。3.总结命名路由的概念1命名路由的使用2总结命名视图目录CONTENTS什么是命名视图1命名视图的应用21、什么是命名视图使用<router-view>可以为视图进行命名，主要用来负责路由跳转后组件的展示。在<router-view>上定义name属性表示视图的名字，根据不同的name值展示不同的页面，如left、main等。如果<router-view>没有设置名字，那么默认为default。2、命名视图的应用步骤2：创建组件对象步骤3：创建并挂载路由步骤4：使用命名路由步骤1：创建模板3.总结命名视图的概念1命名视图的使用方法2总结编程式路由导航目录CONTENTSrouter.push()1router.go()21.router.push()在Vue实例内部可以通过$router访问路由实例，因此通过this.$router.push即可实现页面的跳转。this.$route：路由对象，指向当前所在的路由映射，即所配置的路由中，哪条处于活跃状态，就指向哪条，可通过this.$route访问当前路由。this.$router：全局路由器对象，指向对应创建的VueRouter对象实例。项目中任何页面都可通过此属性获取到路由器对象；通过调用路由器对象的push，go等方法，跳转到指定页面。应用push()方法定义导航this.$router.push('home')//跳转到字符串表示的路径this.$router.push({path:'home'})//跳转到指定路径this.$router.push({name:'user'})//跳转到指定命名的路由this.$router.push({path:'home',query:{id:'2'}})//跳转到指定路径并带有查询参数this.$router.push({name:'user',params:{userId:'1'}})//跳转到指定命名的路由并带有查询参数1.router.push()query传参通过该方式传参，参数会显示在地址栏中。1.router.push()params传参通过该方式传参，参数不会显示在地址栏中1.router.push()router.go()方法的参数是一个整数，表示在history历史记录中向前或者后退多少步，类似于window.history.go()。this.$router.go(-1)相当于history.back()，表示后退一步。this.$router.go(1)相当于history.forward()，表示前进一步。功能类似于浏览器上的后退和前进按钮，相应的地址栏也会发生改变。2.router.go()$router.go()2.router.go()3.总结router.push()1总结router.go()2使用vue路由实现后台管理系统的导航功能任务实现内容CONTENTS提出任务1分析任务2归纳总结4实施任务3本次课任务使用vue路由实现后台管理系统的导航功能1.提出任务抽离并渲染App根组件；将左侧菜单改造为路由链接创建左侧菜单对应的组件，并在右侧主体区域添加路由占位符使用路由添加子路由规则任务要点：案例效果：2.分析任务实践使用vue路由实现后台管理系统的导航功能3.实施任务4.归纳总结总结抽离并渲染App根组件；将左侧菜单改造为路由链接创建左侧菜单对应的组件，并在右侧主体区域添加路由占位符使用路由添加子路由规则下次课见！Seeyounexttime7使用组合式API实现选项卡功能使用组合式APIonetask01PARTONEVue组合式编程概述Vue组合式编程概述01什么是组合式API？传统选项式API的挑战Vue组合式编程概述01什么是组合式API？Vue组合式编程概述01三大核心响应式APIVue组合式编程概述01组合式API与选项式API对比选项式API依赖于data、methods、computed等选项，代码分散在不同部分，逻辑复用困难。组合式API通过setup函数作为入口，使用reactive、ref等响应式API，代码组织更清晰，逻辑复用更直观。组合式API在使用TypeScript时提供了更好的类型推断和类型检查，使得开发体验更好。对于复杂的组件，组合式API提供了更清晰和直观的方式来组织和管理组件内部的状态和逻辑。02PARTONEsetup函数与响应式APIsetup函数是什么？setup函数是什么？setup参数详解:参数1：propssetup函数是什么？setup参数详解:参数2：contextreactive函数的使用方法reactive核心特性特性1：Proxy代理机制reactive核心特性特性2：深层响应式reactivevsrefcomputed的使用方法computed的使用方法Getter函数（最常用）03PARTONE选项卡切换应用开发响应式APIref与reactive的使用ref用于创建一个响应式的引用对象，可以包裹任意类型的值，包括基本类型和对象。reactive用于创建一个响应式对象，会递归地将对象的所有属性都转换为响应式的。例如，使用ref创建一个计数器变量count，通过count.value来访问和修改其值。使用reactive创建一个包含多个属性的对象state，可以直接通过state属性名来访问和修改其值。computed与watch的使用computed用于创建计算属性，依赖于其他响应式状态，当依赖的状态发生变化时，计算属性会自动重新计算。watch用于监视数据的变化，当监视的数据发生变化时，会执行指定的回调函数。例如，使用computed创建一个doubleCount计算属性，其值为count值的两倍。使用watch监视count的变化，当count的值发生变化时，执行回调函数进行相应的操作。任务需求与分析使用Vue组合式编程编写一个选项卡切换应用，在页面上显示切换卡项，随着切换，下侧图片也发生相应变化。初始状态选中的是第一个选项卡，下方显示对应的图片。该应用需要实现点击不同的选项卡，切换对应的图片显示，并且在选项卡和图片之间建立正确的关联关系。要完成此任务，需要对Vue组合式编程有一定认识，包括理解setup函数、响应式API的使用方法等。可以使用ref来创建响应式的当前选中选项卡索引，使用v-for指令来渲染选项卡列表和图片列表。通过监听选项卡的点击事件，更新当前选中选项卡索引，从而实现选项卡和图片的切换效果。同时，需要使用动态绑定类名的方式，为选中的选项卡和图片添加特定的样式。定义一个响应式对象list，包含一个数组，数组中的每个对象表示一个选项卡的信息，包括id、title和图片路径。定义一个响应式引用currentId，用于存储当前选中的选项卡索引。例如，list对象可以定义为：constlist=reactive({list:[{id:1,title:"apple",path:"img/apple.jpg"},...]})，currentId可以定义为：const

currentId=ref(0)。任务需求描述任务分析与技术选型数据结构设计代码实现与功能测试在HTML文件中，创建一个div元素作为Vue的挂载点，然后使用Vue的API来创建一个新的Vue实例并挂载它。使用ul和li元素来渲染选项卡列表，使用div和img元素来渲染图片。为选项卡和图片添加相应的CSS样式，如设置选项卡的背景颜色、宽度、高度等，设置图片的宽度和高度等。通过动态绑定类名的方式，为选中的选项卡和图片添加特定的样式，如选中的选项卡背景颜色变为橙色，选中的图片显示，未选中的图片隐藏。在JavaScript部分，从Vue中导入reactive和ref等函数。在setup函数中，定义响应式数据和函数。定义change函数用于更新currentId的值，定义getClass和getBoxClass函数用于根据currentId的值判断是否需要为列表项和图片容器添加选中状态的类名。最后，将定义好的数据和方法返回，并将Vue应用实例挂载到挂载点上。例如，constapp=Vue.createApp({setup(){...}});app.mount("#app");。对选项卡切换应用进行功能测试，确保点击不同的选项卡时，对应的图片能够正确切换，并且选项卡和图片的样式能够正确更新。检查是否存在性能问题或兼容性问题，并进行相应的优化。例如，可以使用浏览器的开发者工具来检查应用的性能，优化代码结构以提高性能。同时，测试应用在不同浏览器和设备上的兼容性，确保应用能够正常运行。04PARTONEVue3工程创建与开发环境搭建Vue3工程创建概述2020年9月18日，Vue.js发布了3.0版本。Vue3在性能方面进行了优化，打包大小减少41%，初次渲染快55%，更新渲染快133%，内存减少54%。这些性能提升使得Vue3在大型项目中表现更加出色，能够更快地加载和渲染页面，提高用户体验。Vue3的性能提升Vite是新一代前端构建工具，具有轻量快速的热重载（HMR），能实现极速的服务启动。它对TypeScript、JSX、CSS等支持开箱即用，真正的按需编译，不再等待整个应用编译完成。使用Vite可以大大提高开发效率，减少等待时间，让开发者能够更快地看到代码的运行效果。Vite工具的优势使用Vite创建Vue3工程非常简单，只需要通过命令行工具运行相应的命令即可。Vite会自动生成项目的基本结构，包括src目录、index.html文件等。例如，运行npmcreatevite@latest命令，按照提示选择项目名称和框架类型，即可创建一个新的Vue3工程。使用Vite创建Vue3工程Vue3工程结构与开发流程Vite生成的Vue3项目结构清晰，主要包括src目录、index.html文件、package.json文件等。src目录下包含App.vue组件、main.js入口文件等。index.html是项目的入口文件，加载index.html后，Vite解析<scripttype="module"src="xxx">指向的JavaScript。Vue3中是通过createApp函数创建一个应用实例。项目结构分析在开发过程中，可以使用Vite提供的命令来启动开发服务器、构建项目等。例如，运行npmrundev命令启动开发服务器，运行npmrunbuild命令构建项目。常见问题包括路由配置问题、组件通信问题等。可以通过查阅官方文档、社区资源等方式解决这些问题。例如，在配置路由时，需要正确设置路由规则和组件映射关系，确保页面能够正确跳转。开发流程与常见问题解决020105PARTONEVue3生命周期与组合式编程实践Vue3生命周期钩子生命周期钩子的概念与阶段Vue组件实例在创建时要经历一系列的初始化步骤，在此过程中Vue会在合适的时机，调用特定的函数，从而让开发者有机会在特定阶段运行自己的代码，这些特定的函数统称为生命周期钩子。生命周期整体分为四个阶段，分别是：创建、挂载、更新、销毁，每个阶段都有两个钩子，一前一后。例如，在创建阶段有beforeCreate和created钩子，在挂载阶段有beforeMount和mounted钩子等。生命周期钩子在组合式编程中的使用在组合式编程中，生命周期钩子的使用方式与Vue2类似，但需要通过导入的方式使用。例如，使用onMounted钩子可以在组件挂载完成后执行初始化操作，使用onUnmounted钩子可以在组件销毁时进行清理工作。在setup函数中，可以使用生命周期钩子来管理组件的生命周期，例如在组件挂载时获取数据，在组件销毁时取消订阅等。常用生命周期钩子的使用场景beforeCreate钩子在组件实例创建之前调用，此时组件的data和methods尚未初始化，可以用于进行一些初始化前的准备工作。created钩子在组件实例创建完成后调用，此时可以访问到data和methods，常用于数据初始化和事件绑定。beforeMount钩子在组件挂载之前调用，此时模板已经编译完成，但尚未挂载到DOM上，可以用于进行一些挂载前的操作。mounted钩子在组件挂载完成后调用，此时可以访问到DOM元素，常用于操作DOM或进行异步数据请求。组合式编程实践案例购物车功能实现使用Vue组合式编程实现购物车功能，可以定义一个响应式对象来存储购物车中的商品信息，包括商品名称、数量、价格等。通过定义相应的函数来实现添加商品、删除商品、计算总价等功能。例如，使用reactive创建购物车对象constcart=reactive({items:[]})，定义addProduct函数来添加商品到购物车，定义removeProduct函数来从购物车中删除商品，使用computed计算购物车的总价。在表单验证中，可以使用组合式编程来封装验证逻辑。定义一个组合函数来处理表单验证，包括验证规则的定义、验证结果的存储等。在组件中使用该组合函数，将表单数据和验证规则传递给它，实现表单的自动验证。例如，定义一个useValidation组合函数，它接收表单数据和验证规则作为参数，返回一个包含验证结果和验证方法的对象。在表单组件中使用该组合函数，根据验证结果来显示相应的提示信息。表单验证功能实现对于数据请求功能，可以使用组合式编程来封装请求逻辑。定义一个组合函数来处理数据请求，包括请求的发送、数据的处理等。在组件中使用该组合函数，将请求参数传递给它，实现数据的自动请求和更新。例如，定义一个useRequest组合函数，它接收请求的URL和参数作为参数，返回一个包含请求结果和请求状态的对象。在组件中使用该组合函数，根据请求结果来更新组件的状态和显示内容。数据请求功能实现下次课见！Seeyounexttime8.1使用脚手架构建登录注册切换项目8.2使用Vite实现学生管理系统的导航功能搭建Vue工程twotasks

认识VueCLI脚手架目录CONTENTS什么是VueCLI1VueCLI前提——Node安装2安装VueCLI31.什么是VueCLI使用Vue.js开发大型应用时，需要考虑代码目录结构、项目结构和部署、第三方插件等事情；如果每个项目都要手动完成这些工作，效率比较低，所以我们通常会使用一些工具来帮助完成这些事情。如果你在开发大型项目,

那么你需要,

且一定需要使用Vue

CLI。CLI是什么意思?CLI是Command-LineInterface,翻译为命令行界面,但是俗称脚手架;Vue

CLI是一个官方发布vue.js项目脚手架工具;使用vue-cli可以快速搭建Vue开发环境下载地址：/2.VueCLI前提——Node安装默认情况下会自动安装npm包管理工具3.安装VueCLI1.设置镜像npmconfigsetregistryhttps://

或npmconfigsetregistry2.查看镜像npmconfiggetregistry3.取消镜像npmconfigdeleteregistry3.安装VueCLI4安装VueCLI安装最新的版本：npminstall-g@vue/cli安装某个版本：npminstall-g@vue/cli@4.5.195.查看版本：vue–V或（vue--version)了解什么是VueCLI脚手架1如何安装Node2如何安装VueCLI脚手架3总结使用VueCLI创建项目目录CONTENTS创建脚手架项目1分析项目结构2图8.7创建VueCLI项目1.创建脚手架项目1.指定目录（项目的保存目录）2.设置镜像npmconfigsetregistry3.创建项目vuecreatevue3_testbabel：ES6->ES5eslint：语法检查图8.9VueCLI项目结构2.分析项目结构最重要的目录，项目的代码都在这个目录安装的包静态资源项目根目录2.分析项目结构组件目录资源目录根组件src目录入口文件掌握创建脚手架项目的方法1熟悉脚手架项目的目录结构2总结单文件组件目录CONTENTS什么是单文件组件1创建Hello单文件组件21.什么是单文件组件单文件组件指的是一个文件定义一个组件，由html，js，css三部分构成html部分js部分css部分1.什么是单文件组件Hello.vue组件单文件组件指的是一个文件定义一个组件，由html，js，css三部分构成定义的组件都放在src/components目录下，扩展名为.vue1.什么是单文件组件3.使用Hello.vue组件单文件组件指的是一个文件定义一个组件，由html，js，css三部分构成定义的组件都放在src/components目录下，扩展名为.vueApp组件管理所有的组件，是所有组件的父组件1.导入Hello.vue组件2.注册Hello.vue组件在src/components目录下新建Hello.vue文件编写Hello.vue组件的html、js和css三部分的代码在App根组件里导入、注册并使用Hello组件步骤：需求：2.创建Hello单文件组件Hello组件显示“HelloVue！”理解什么是单文件组件1如何创建和使用单文件组件2总结单文件组件指的是一个文件定义一个组件，由html，js，css三部分构成在src/components目录下新建扩展名为vue的组件文件编写组件的html、js和css三部分的代码在App根组件里导入、注册并使用组件在脚手架项目中使用路由目录CONTENTSVue-Router在脚手架的使用2安装路由插件Vue-Router11.安装路由Vue-Router2.使用npm命令来安装路由npmivue-router安装完成之后可以在package.json文件中查看到vue-router的相关信息1.通过cd命令进入脚手架项目根目录创建登录组件Login和注册组件Regist创建路由器对象在main.js中导入路由器对象在App.vue中使用路由步骤：需求：2.Vue-Router在脚手架的使用在脚手架中实现登录和注册的切换2.

Vue-Router在脚手架的使用1.准备好需要的组件创建两个组件：Login和Regist2.

Vue-Router在脚手架的使用1.准备好需要的组件导入函数2.创建路由器对象在src目录下新建router目录在router目录下新建index.js文件，封装路由器对象导入组件创建路由器对象配置路由规则设置高亮2.

Vue-Router在脚手架的使用1.准备好需要的组件1.导入路由插件2.创建路由器对象在src目录下新建router目录在router目录下新建index.js文件，封装路由器对象2..注册路由3.在main.js中导入路由器对象2.

Vue-Router在脚手架的使用1.准备好需要的组件使用路由2.创建路由器对象在src目录下新建router目录在router目录下新建index.js文件，封装路由器对象导入全局样式3.在main.js中导入路由器对象4.在App.vue中使用路由掌握安装路由插件Vue-Router的方法1掌握Vue-Router在脚手架的使用方法2总结npmivue-router创建登录组件Login和注册组件Regist创建路由器对象在main.js中导入路由器对象在App.vue中使用路由8.1使用脚手架构建登录注册切换项目8.2使用Vite实现学生管理系统的导航功能搭建Vue工程twotasks

认识Vite目录CONTENTS认识Vite1使用Vite创建Vue3项目21.认识ViteVite（法语意为“快速的”，发音同“veet”），Vite是一种现代化的前端构建工具，专为提升前端开发效率而设计。Vite以其快速、轻量、高效的特点，成为了现代前端开发不可或缺的工具之一。什么是ViteVite的优势在Vue3出现之前，Vue2一般使用VueCLI来构建项目。VueCLI基于Webpack构建并配置项目，在项目启动时，Webpack需要从入口文件索引整个项目的文件，编译成一个或多个单独的.js文件。虽然Webpack对代码进行了拆分，但仍可能一次生成所有路由下的编译文件，导致服务器启动时间随着项目的复杂度增加而呈指数级的增长。Vite改进了这一点，在项目启动时，Vite会对模块代码按需加载，启动速度大大加快。因此Vue3时代，官网主推Vite来构建Vue项目。使用Vite创建Vue项目，要确保系统上安装的Node.js版本大于18.32.使用Vite创建Vue3项目1.指定目录（项目的保存目录）2.设置镜像npmconfigsetregistry3.创建项目npmcreatevite@latest2.使用Vite创建Vue3项目4.创建项目过程的交互2.使用Vite创建Vue3项目5.启动项目2.分析项目结构最重要的目录，项目的代码都在这个目录区别①：安装的包：初始没有，需要执行npminstall命令下载静态资源项目根目录区别②：单页面区别③：配置文件，VueCLI初始没有2.分析项目结构组件目录资源目录根组件src目录入口文件全局样式文件使用Vite实现学生管理系统的导航功能任务实现内容CONTENTS提出任务1分析任务2归纳总结4实施任务3本次课任务使用Vite实现学生管理系统的导航功能1.提出任务任务要点：案例效果：2.分析任务创建子组件；创建路由器对象，配置路由修改全局样式表style.css在main.js中导入路由对象在App.vue中使用路由实践使用Vite实现学生管理系统的导航功能3.实施任务3.实施任务创建子组件Student.vue3.实施任务(2)创建路由器对象，配置路由3.实施任务(3)修改全局样式表style.css3.实施任务(4)在main.js中导入路由对象3.实施任务(5)在App.vue中使用路由下次课见！Seeyounexttime9.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实战案例购物城车案例需求分析功能需求状态管理需求技术选型需实现商品列表展示、商品添加到购物车、购物车列表展示及总价计算等功能。用户可在商品列表页面选择商品加入购物车，在购物车页面查看和管理购物车商品。使用Vue.js构建前端界面，Vuex管理状态，实现购物车功能。通过组件化开发，将商品列表和购物车拆分为独立组件，提高代码复用性。需管理商品列表状态、购物车商品状态及总价状态，确保状态在组件间共享和更新。例如，添加商品到购物车时，需更新购物车状态和总价状态。购物车案例实现步骤03040201创建项目与安装依赖使用VueCLI或Vite创建项目，安装Vue和Vuex依赖，搭建项目基础架构。初始化项目后，安装vue和vuex，为状态管理做准备。配置VuexStore在项目中配置VuexStore，定义State、Getters、Mutations、Actions和Modules，管理购物车状态。定义商品列表状态、购物车状态及总价状态，通过Mutations和Actions实现状态更新。开发商品列表组件创建商品列表组件，展示商品信息，绑定点击事件将商品添加到购物车。使用v-for循环渲染商品列表，通过this.$store.dispatch调用Actions添加商品。开发购物车组件创建购物车组件，展示购物车商品列表及总价，绑定点击事件删除购物车商品。使用v-for循环渲染购物车商品列表，通过this.$mit调用Mutations更新购物车状态。购物车案例代码实现商品列表组件代码示例：通过c