Web Vue VIII

使用axios

1.关于axios

● axios是一个易用、简洁且高效的http库，主要用于发起HTTP请求，并获
取响应的结果。
● axios的官方网址是：http://www.axios-js.com/
● axios的主要特点有：
– 从浏览器中创建 XMLHttpRequests – 从 node.js 创建 http 请求
– 支持 Promise API – 拦截请求和响应
– 转换请求数据和响应数据
– 取消请求
– 自动转换 JSON 数据
– 客户端支持防御 XSRF

2.axios基本使用

● 发起GET请求示例:

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

● 发起GET请求示例：

// 上面的请求也可以这样做 
axios.get('/user', {
 params: {
  ID: 12345
   } 
   })
   .then(function (response) {
    console.log(response);
     })
     .catch(function (error) {
      console.log(error); 
      });

● 发起POST请求示例：

axios.post('/user'
, {
firstName: 'Fred'
,
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

● 更多示例请参考axios官方文档：http://www.axios-js.com/zh- cn/docs/

3.安装axios

● 与此前的Element UI的安装方式类似，当需要安装axios时，应该先切换
到Vue CLI工程的文件夹下，然后再运行命令以安装axios，安装命令为：

npm i axios -S

● 或：

npm install --save axios

安装完成后，也需要在main.js中添加配置，配置代码为：

import axios from 'axios'
Vue.prototype.axios = axios

4.使用axios与后端服务器交互

● 【需求】基于此前设计的登录页面，向后端服务器发起登录请求，如果登
录成功，则跳转到主页（页面元素可自行设计），如果登录失败，则使用
某种方式在页面中进行提示
● 为了达到更好的练习效果，将军已经提前准备好了一个后端服务工程，你
可以直接启动这个工程的服务，并向它发起请求，此服务将会向你响应一
些结果
使用axios与后端服务器交互
● 关于这个后端服务工程：
– 你需要找老师获取此工程的jar包文件
– 你至少需要在计算机中安装JDK才可以启动此工程的服务
– 此工程的服务默认占用18080端口，如端口被占用，将无法启动此服务
– 如果端口被占用，你可以通过netstat -ano |findstr 18080找出占用端口的进程的id，
并通过taskkill /f /t /im 进程id来终止进程 – 你可以使用java -jar 工程jar包文件命令启动此服务
– 例如，把工程jar包文件放在D盘，并且当前位置也在D盘，直接执行命令即可：

java -jar vue-project-server-0.0.1.jar

使用axios与后端服务器交互
● 关于这个后端服务工程（续上页）：
– 服务的启动效果为：
在这里插入图片描述
● 关于这个后端服务工程：
– 当成功启动服务后，不要关闭命令提示符窗口
– 当成功启动服务后，你可以通过Ctrl + C停止服务
– 此服务提供的所有数据操作都只是模拟的，并没有真实的使用某数据库存储数据
● 关于这个后端服务工程（续上页）：
– 你可以通过http://localhost:18080/doc.html查看此服务的API文档，如下图所示：
在这里插入图片描述
● 关于这个后端服务工程：

● 关于这个后端服务工程（续上页）：

● 当准备好后端服务后，接下来将开发Vue CLI工程
● 步骤1：由于axios也是常用库，在vue-project-preset中安装axios：

步骤2：在vue-project-preset的main.js中添加导入axios：
在这里插入图片描述
步骤3：基于vue-project-preset复制出新的工程vue-project-04，并在配
置文件中修改必要参数（工程名称等）

步骤4：在App.vue的<template>中，删除<nav>节点，保留<router- view/>节点，使其能显示某个视图组件
在这里插入图片描述
步骤5：默认的工程中有views/HomeView和views/AboutView，其中，HomeView可作为主页的视图组件，而AboutView不是必须的，则将AboutView重命名为LoginView，将作为登录的视图组件：

步骤6：配置router/index.js中的路由配置，目标为：
– HomeView是动态加载的，映射的路径是/home – LoginView是默认即加载的，映射的路径是/login

步骤6：配置后代码如图所示：
在这里插入图片描述
步骤7：将vue-project-03工程中的App.vue的全部代码复制到vue-project- 04工程中的LoginView中，覆盖原所有代码，此时，启动vue-project-04服
务，在浏览器中通过http://localhost:8080/login将可以看到与vue- project-03相同的页面
在这里插入图片描述
步骤8：请注意：如果此时访问服务的根路径，即访问
http://localhost:8080时，页面中将显示一片空白，因为在路由中并没有配置根路径（/）如何处理，此问题可暂时忽略，并不是本次练习的重点
– 如果你认为有必要的话，可以自行添加一个主页，并在路由配置中为其映射到 / 路
步骤9：在HomeView中进行一些简单的设计，表现出它是主页，例如：
在这里插入图片描述
步骤10：将axios发出POST请求的示例代码粘贴到LoginView.vue中原本通
过格式验证弹出警告框的位置，如下图所示：

步骤11：修改请求路径与请求参数，为了便于排查可能的故障，建议将它们
声明为变量，除了在发送请求时使用以外，还应该在控制台输出，并且，需
要注意以下问题：
– 提交的请求参数名称必须与服务器要求的相同，即用户名为username，密码为
password – 可以通过this.ruleForm.username和this.ruleForm.pass获取表单控件中输入的值，
其中ruleForm是与表单绑定的Vue属性
– 需要使用this引用axios

步骤11：代码示例：
在这里插入图片描述
步骤12：请确保后端服务已经启动，打开浏览器，按下F12进入开发者模式，
输入正确的用户名admin及密码888888后，在控制台可以看到响应结果的
正文（data）中包括了state : 200和一个名为data的对象，此data对象中是
用户的信息（id、username、avatarUrl）

步骤12：运行效果示例：
在这里插入图片描述
步骤13：如果使用其它用户名，可以看到响应的结果中的state值为400，并
有名为message的属性，是错误信息的描述文本，如下图所示：

步骤14：如果用户名正确，而密码是错误的，可以看到响应的结果中的
state值为409，且message也有对应的提示：
在这里插入图片描述
步骤15：回到LoginView.vue的代码中，可以看到then()内部的函数中有名
为response的参数，在浏览器的控制台输出的就是这个参数，它的值中包
括一个名为data的对象，这个对象就是服务器端响应的数据

步骤15：代码示例（下图仅框出需要关注的部分，未改动代码）：
在这里插入图片描述
步骤16：所以，通过response.data即可得到服务器端响应的数据，而服务
器端响应的数据格式为：

{
state: 200,
message: "登录失败，用户名不存在！"
,
data: {
id: 9527,
username: "admin"
,
avatarUrl: "https://tedu.cn/zhuzhan/img/logo.png"
}
}

提示：以上只是示例数据，实际上，message和data并不会同时出现。
步骤16：为了更加清晰的看到服务器端响应的结果，可以将响应时的输出进
行细化，例如：
在这里插入图片描述
步骤17：经过调整，再次尝试访问，可以看到控制台中的信息清晰了许多，
如下图所示：

步骤17：当用户名错误时：

步骤17：当密码错误时：
步骤18：可以看到，仅当登录成功时，响应的state值为200，则可以将state作为判断登录成功与否的依赖，例如，当此值不是200时，将响应的message提示到界面中：
在这里插入图片描述
步骤19：在页面中使用错误的用户名或错误的密码尝试登录时，都会弹出错
误提示：

步骤20：当登录成功时，跳转到/home即可，如下图所示：