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即可，如下图所示：

我是将军；我一直都在，。！

Web Vue VIII相关推荐

Web Vue VI
Web Vue VI 了解Vue CLI工程 1.工程结构 ● [.idea] :使用IntelliJ IDEA打开工程时会产生此文件夹,其中的文件都是IntelliJ IDEA管理此工程时将使用到 ...
Web Vue IV
Web Vue IV 搭建开发环境 1.安装Node.js ● 为了使用npm,首先需要下载Node.js安装包,下载地址可参考: – https://nodejs.org/dist/v16.14.2 ...
Web Vue IX
Web Vue IX Vue CLI的嵌套路由 1.关于嵌套路由 ● 在实际应用开发中,页面的内容呈现可能存在巨大的差异,例如: ● 由于Vue CLI工程是单页面的,为了保证能显示各式各样的页面,则 ...
Web Vue VII
Web Vue VII 使用Element UI 1.关于Element UI ● Element UI是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者.设计师和产品经理准备的基于 ...
Vue + Spring Boot 项目实战（三）：使用IntelliJ IDEA快速生成 Vue.js 项目
文章目录一.使用idea Vue插件生成项目结构 1.1. Create New Project 1.2. 设置项目地址 1.3. 确认项目名称 1.4. 项目描述 1.5. 作者信息 1.6. 编 ...
Vue项目部署遇到的问题及解决方案
写在前面 Vue-Router 有两种模式,默认是 hash 模式,另外一种是 history 模式. hash:也就是地址栏里的 # 符号.比如 http://www.example/#/hello ...
springboot+vue全栈开发_springboot+vue(一)___开发环境以及前后端项目搭建
nodejs安装安装: nodejs官网地址:https://nodejs.org/en/ 安装node.js,安装路径我默认安装在C盘 ,可以改变路径安装配置全局安装路径和缓存现在配置全局模 ...
html2canvas图片的文字偏移,html2canvas在Vue项目踩坑-生成图片偏移不完整
背景最近做一个Vue项目需求是用户长按保存图片,页面的数据是根据不同id动态生成的,页面渲染完生成内容图片让用户长按保存的时候,把整个页面都保存起来. 在项目遇到的坑是图片能生成,可是生成的图片总是 ...
Vue全家桶入门精细讲解
Vue入门精细讲解感谢coderwhy老师的精心讲解,本笔记全部内容源于coderwhy老师的课堂笔记: 一. Hello Vuejs 1.1. 认识Vuejs 为什么学习Vuejs 可能你的公司正 ...

Web Vue VIII

Web Vue VIII

使用axios

1.关于axios

2.axios基本使用

3.安装axios

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

我是将军；我一直都在，。！

Web Vue VIII相关推荐

最新文章

热门文章