Web前端开发实战教程-HTML5+CSS3+JavaScript+Vue.js（微课版）课件 第9章 Axios库和ElementPlus框架

E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3第9章Axios库和ElementPlus框架商城后台登录模块背景知识商城后台登录功能实现步骤本章小结01020304-学习Axios库的安装和使用方法-熟悉Fetch的使用方法理解Axios与Fetch的差异及其各自的优缺点理解Vue的生命周期并了解其各个阶段学习使用Axios访问模拟数据的方法了解并掌握ElementPlus框架的基本使用和特性对比ElementUI与ElementPlus，了解两者的区别和各自的特点。01020304050607E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3商城后台登录模块01需求分析1.1用户登录功能的需求如下：1.商城后台登录模块界面（1）利用ElementPlus框架设计登录界面，登录界面供用户进行身份验证。（2）用户可以输入“用户名”和“密码”，为保障密码安全，输入时应被遮挡。

（3）填写完登陆信息后，点击“登录”按钮，使用Axios获取模拟用户数据。2.登录验证 校验用户名与密码是否正确。如果输入正确，系统将进入商城后台。如果不正确，系统提示登录失败。需求分析1.1用户登录页面运行截图：商品后台登录模块的实现思路1.2商品后台登录模块的实现思路如下：1.构建用户界面为了提升用户体验，采用ElementPlus框架设计和构建登录界面。2.模拟用户数据生成用户模拟数据，包括用户名username和密码password。3.数据验证利用Axios或Fetch工具访问模拟数据，获取用户数据并进行验证。若验证成功，允许用户进入后台管理页面；若验证失败，则将重新返回登录页面，并显示相应的错误提示。为了确保上述步骤的顺利完成，需深入学习Axios和Fetch的使用方法，理解Vue的生命周期，掌握使用Axios读取模拟数据，并熟练运用ElementPlus框架。知识导图1.3本章知识导图，如图1-2所示。图1-2知识导图E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3背景知识02Axios库介绍2.1Axios是一个流行的JavaScript库，它用于在浏览器和Node.js间进行HTTP通信。以下是关于Axios的一些核心概念：基于Promise:Axios是基于Promise的，它可以使用.then()和.catch()或者async/await来处理异步操作。拦截器(Interceptors):Axios允许拦截请求或响应，以便在请求发送之前或在响应返回给用户之前进行处理。转换请求和响应(TransformRequestsandResponses):在请求发送或响应返回到调用代码之前，可以对其进行自定义转换。自动转换为JSON:当发送请求时，Axios会自动将JavaScript对象转换为JSON格式。同样，当收到一个响应时，Axios也会自动将其转换为JavaScript对象。客户端支持:Axios可以在浏览器中运行，使得它成为与RESTfulAPI交互的理想选择。服务器端支持:Axios也可以在Node.js中使用，使其成为全栈开发的理想选择。全局配置:可以为所有的Axios请求设置默认配置，例如默认URL、头部等。Axios库的安装和基本用法2.2在浏览器中使用，可以通过CDN直接在HTML文件中引入axios<scriptsrc="/npm/axios/dist/axios.min.js"></script>或者使用npm安装，这种方法适用于Node.js或前端项目框架如React、Vue等。npminstallaxios安装了axios库后就可以使用它来发送HTTP请求。JSON数据格式2.3为什么要用JSON数据格式表示商品信息？使用JSON数据表示商品数据信息有诸多优势。首先，它结构清晰、简洁，是被广泛接受的标准的数据交换格式。相较于其它格式，如XML，JSON更轻量且解析速度快。其结构允许表达各种数据，从简单的原始类型到复杂的数组和对象。由于其与JavaScript的紧密关系，JSON在前端解析时特别高效，无需额外转换。此外，目前大多数数据库和WebAPI也倾向于使用JSON。不仅如此，它还支持跨平台应用，具有高度的可扩展性。将存储商品数据信息的products.json放在项目中的public中就可以直接被访问到，后续在项目中会介绍。Axios的使用2.4（1）创建vue项目（2）运行vue项目（3）安装axios（4）存放商品图片（5）实现读取商品数据Fetch的使用2.5fetch是一个现代的、原生的JavaScript函数，用于在网络上进行请求和发送数据。它是XMLHttpRequest的替代方案，提供了更现代、更强大且更灵活的API来处理网络请求。Fetch同样可以实现商品列表数据的读取运行结果如下图：同axios方式运行结果相同Axios和Fetch的区别2.6特性AxiosFetchAPI类型基于Promise，提供额外的API如取消请求、监听变化等原生，基于Promise错误处理自动拒绝错误的HTTP状态代码，如404或500仅在网络错误时拒绝Promise，HTTP错误仍视为成功拦截功能支持请求和响应拦截，便于数据处理无内建拦截功能JSON处理自动将响应体转换为JSON(如果内容类型是application/json)需手动调用response.json()转换取消请求提供简单的取消请求API需要使用AbortController实现取消请求推荐使用场合功能丰富、可配置、易于使用的场合轻量级、无额外依赖、接近浏览器原生体验的场合2.7Vue.js的生命周期是指其组件从创建到销毁的各个阶段，开发者可以在这些阶段利用生命周期钩子方法进行相应的操作。以下是Vue3.x版本的生命周期阶段及其钩子函数：Vue的生命周期创建(Creation)挂载(Mounting)更新(Updating)销毁(Destruction)激活&停用(特定于keep-alive组件)2.8ElementUI是一个基于Vue.js的高质量组件库，专为Web应用开发提供了一整套的UI组件和工具。这个框架在Vue社区非常受欢迎，因为它提供了丰富的组件，有助于快速开发大型应用程序。

以下是ElementUI的一些主要特点：组件化：ElementUI提供了大量预制的UI组件，如按钮、输入框、表格、日期选择器、对话框等，这些都是开箱即用。主题定制：提供了一个在线主题生成工具，使得用户可以自定义应用程序的外观和风格。国际化：ElementUI支持多语言，可以根据需要添加新的语言包。高度灵活：大部分组件都有多种配置选项，可以满足各种需求。良好的文档和社区支持：ElementUI有详细的文档，包括每个组件的API描述、示例和使用方法。此外，还有一个活跃的社区，可以帮助解决问题。ElementUI框架介绍2.9（1）ElementPlus官网：https://element-plus.gitee.io/zh-CN/（2）环境搭建（3）安装ElementPlus（4）项目中引入ElementPlus（5）创建登录组件（6）修改App.vue（7）在控制台输入npmrunserve运行项目ElementPlus框架使用2.10ElementUI和ElementPlus区别特性ElementUIElementPlus目标Vue版本针对Vue2.x设计针对Vue3.x设计发布时间在Vue2.x盛行时期发布，迅速获得大量用户喜爱在Vue3正式发布后不久推出，以适应新特性主要特点提供丰富的组件和工具，加速Vue2.x应用开发继承ElementUI的设计，加入改进和扩展以优化Vue3的适配适用场景适合于使用Vue2.x的项目适合于使用Vue3.x的项目E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3商城后台登录功能实现步骤03

路由跳转3.1（1）安装VueRouter（2）设置路由（3）解决组件命名问题（4）创建Admin和Login组件（5）在main.js中引入和使用路由（6）在App.vue中使用路由视图（7）运行测试路由跳转（测试效果如下图）使用ElementPlus重构登录界面3.2（1）安装并引入ElementPlus（2）引入ElementPlus和样式（3）使用ElementPlus修改Login.vue运行结果：当输入错误的用户名和密码时会返回登录页面，并提示“用户名或密码不正确“，使用Axios完成登陆3.3修改代码使用axios从userinfo.json文件中获取用户名username和密码password后，再进行登陆验证。最终的运行效果如下图：E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3本章小结04

本章小结首先，我们深入学习了Axios和Fetch这两大库，掌握了如何利用它们向后端请求数据。在此基础上，进一步熟悉了使用JSON来创建模拟数据，并通过Axios来访问并获取这些模拟数据，为前端开发提供了强大的支持。接着，开始学习和掌握ElementPlus框架的基本使用方法。该框架为Vue应用提供了丰富的UI组件，更高效地搭建界面。通过设计