当前位置: 首页 > news >正文

Vue开发实例(七)Axios的安装与使用

说明:

  1. 如果只是在前端,axios常常需要结合mockjs使用,如果是前后端分离,就需要调用对应的接口,获取参数,传递参数;
  2. 由于此文章只涉及前端,所以我们需要结合mockjs使用;
  3. 由于为了方便实现效果,在这篇文章里面使用的是一级菜单,对应的代码是:【Vue开发实例(六)实现左侧菜单导航 —>>> 动态实现一级菜单】中的代码
    在这里插入图片描述
  4. 文末附全部代码

axios和mockjs的安装与使用

  • 一、Axios
    • 1、安装axios
    • 2、安装mockjs
  • 二、数据请求
    • 1、get请求
    • 2、post请求
    • 3、添加数据
    • 4、修改
    • 5、删除
    • 6、查询
      • (1)无参查询
      • (2)有参查询

一、Axios

Axios 是一个基于 promise 的 HTTP 库,类似于我们常用的 ajax。
在开发过程中,特别是前后端分离的项目,比如前端用Axios、ajax请求后端数据,后端也许当前只给了接口文档,还没有数据的返回,导致前端无法进行测试、调试,现在可以使用mock.js拦截前端ajax请求,更加方便的构造你需要的数据,大大提高前端的开发效率。

1、安装axios

npm install axios --save

在main.js全局引入axios

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

2、安装mockjs

npm install mockjs --save-dev

在src下创建文件夹mock,并创建index.js文件,输入以下测试内容:

//引入mockjs
import Mock from 'mockjs'//使用mockjs模拟数据
Mock.mock('/test', {"res": 0,"data":{"datatime": "@datetime",//随机生成日期时间"weekday|1-7": 7,//随机生成1-7的数字"name": "@cname",//随机生成中文名字}
});

main.js引入此mock.js就可以进行全局拦截axios和ajax的请求了。

import './mock/index.js';

二、数据请求

1、get请求

在之前的Main1页面上编写代码
创建按钮

 <el-button @click="getTest">get数据</el-button>

创建axios请求方法

<script>
export default {name: "Main1",methods: {getTest() {this.$axios.get("/test").then((res) => {console.log(res.data);});},},
};
</script>

this.$axios.get(“/test”)this.$axios.get 表示使用get请求,“/test” 访问路径,刚好与之前mock.js定义的想吻合;
res 就是取得返回的数据集合,其中res.data就是我们定义好的返回数据。

浏览器中“右键-检查”或“F12”
在这里插入图片描述

2、post请求

添加post请求按钮

 <el-button @click="postTest">post测试1</el-button>

编写js post代码

postTest(){this.$axios.post("/post/test1",{id:1}).then(res=>{console.log(res.data)})
}

mock/index.js其中第2个参数指定为 post,如果我们用get请求则会提示404,只能用post

Mock.mock('/post/test1', 'post', function (param) {console.log('传入的参数为:', param.body)return {res: 1,msg: "success"}
});

效果展示
在这里插入图片描述

3、添加数据

按钮代码

<el-button @click="postAdd">add数据</el-button>

请求方法代码

postAdd(){this.$axios.post("/post/add",{id:1,name:'哈哈'}).then(res=>{console.log(res.data)})
}

Mockjs数据

// 定义userList数组
let userList = [];
Mock.mock('/post/add', 'post', function (param) {let body = JSON.parse(param.body) // 获取请求参数let id = parseInt(body.id)let flag = truefor (let item of userList) {if (item.id === id) flag = false // 判断id是否已经存在}// 如果id不存在if (flag) {userList.push({name: body.name,id})return {userList,res: 0,msg: '添加成功'}} else {return {userList,res: 1,msg: '添加失败'}}
});

效果展示

第一次发送请求,因为里面没有id为1的数据,所以添加成功
第二次发送请求,因为id=1的数据已经添加成功了,所以失败

在这里插入图片描述
重新换一个id就可以添加成功
在这里插入图片描述

4、修改

按钮代码

<el-button @click="postMod">mod数据</el-button>

请求代码

postMod(){this.$axios.post("/post/mod",{name:'哈哈',id:3}).then(res=>{console.log(res.data)})
}

mockjs数据

Mock.mock('/post/mod', 'post', function (param) {let body = JSON.parse(param.body) // 获取请求参数let id = parseInt(body.id)let flag = false, index = 0;for (let i in userList) {if (userList[i].id === id) {flag = true // 判断id是否已经存在,存在返回trueindex = i//对应数组的下标}}// 如果id存在则修改if (flag) {userList[index] = bodyreturn {userList,res: 0,msg: '修改成功'}} else {return {userList,res: 1,msg: '修改失败'}}
});

效果展示

因为第一次修改里面没有数据,所以修改失败
在这里插入图片描述

先点击 添加add,再点击 修改mod
在这里插入图片描述

5、删除

按钮代码

<el-button @click="postDel">del数据</el-button>

请求代码

postDel() {this.$axios.post("/post/del", { id: 1 }).then((res) => {console.log(res.data);});},

mockjs数据

Mock.mock('/post/del', 'post', function (param) {let body = JSON.parse(param.body) // 获取请求参数let id = parseInt(body.id)let flag = false, index = 0;for (let i in userList) {if (userList[i].id === id) {flag = true // 判断id是否已经存在,存在返回trueindex = i//对应数组的下标}}// 如果id存在则删除if (flag) {userList.splice(index, 1);return {userList,res: 0,msg: '删除成功'}} else {return {userList,res: 1,msg: '删除失败'}}
});

效果展示

先添加数据,再删除数据

在这里插入图片描述

6、查询

按钮代码

<el-button @click="postQuery">query无参数据</el-button><br /><br />
<el-button @click="postQuery2">query有参数据</el-button><br /><br />

请求代码,分别是没有参数的查询全部,有id参数的根据id来查询

(1)无参查询

postQuery(){this.$axios.post("/post/query",{}).then(res=>{console.log(res.data)})
}

(2)有参查询

postQuery2(){this.$axios.post("/post/query",{id:1}).then(res=>{console.log(res.data)})
}

mockjs数据

Mock.mock('/post/query', 'post', function (param) {let body = JSON.parse(param.body) // 获取请求参数let id = parseInt(body.id)if (!id) {//如果id不存在,则直接返回全部return {userList,res: 0,msg: '查询成功'}}//idfor (let item of userList) {if (item.id === id) {return {userList: [item],res: 0,msg: '查询成功'}}}// 如果id不存在则返回失败return {userList: [],res: 1,msg: '查询失败'}
});

效果展示

按照图示步骤执行

  1. 首先进行无参查询,查询全部,返回是空
  2. 其次是添加一条数据
  3. 接着带参查询id=1的数据

在这里插入图片描述
到此为止,增删改查,get、post都已测试完成,put等方法自己进行测试

附全部代码,如下:
Main1.vue

<template><div><span>这是Main1</span><br /><br /><el-button @click="getTest">get数据</el-button><br /><br /><el-button @click="postTest">post测试1</el-button><br /><br /><el-button @click="postAdd">add数据</el-button><br /><br /><el-button @click="postMod">mod数据</el-button><br /><br /><el-button @click="postDel">del数据</el-button><br /><br /><el-button @click="postQuery">query无参数据</el-button><br /><br /><el-button @click="postQuery2">query有参数据</el-button><br /><br /></div>
</template><script>
export default {name: "Main1",data() {return {userList: [{ id: 1, name: "张三" }],};},methods: {getTest() {this.$axios.get("/test").then((res) => {console.log(res.data);});},postTest() {this.$axios.post("/post/test1", { id: 1 }).then((res) => {console.log(res.data);});},postAdd() {this.$axios.post("/post/add", { id: 1, name: "牛牛" }).then((res) => {console.log(res.data);});},postMod() {this.$axios.post("/post/mod", { name: "哈哈", id: 3 }).then((res) => {console.log(res.data);});},postDel() {this.$axios.post("/post/del", { id: 3 }).then((res) => {console.log(res.data);});},postQuery() {this.$axios.post("/post/query", {}).then((res) => {console.log(res.data);});},postQuery2() {this.$axios.post("/post/query", { id: 1 }).then((res) => {console.log(res.data);});},},
};
</script><style scoped>
.el-button {height: auto;
}
</style>

mock/index.js

//引入mockjs
import Mock from 'mockjs'//使用mockjs模拟数据
Mock.mock('/test', {"res": 0,"data":{"datatime": "@datetime",//随机生成日期时间"weekday|1-7": 7,//随机生成1-7的数字"name": "@cname",//随机生成中文名字}
});Mock.mock('/post/test1', 'post', function (param) {console.log('传入的参数为:', param.body)return {res: 1,msg: "success"}
});// 定义userList数组
let userList = [];
Mock.mock('/post/add', 'post', function (param) {let body = JSON.parse(param.body) // 获取请求参数let id = parseInt(body.id)let flag = truefor (let item of userList) {if (item.id === id) flag = false // 判断id是否已经存在}// 如果id不存在if (flag) {userList.push({name: body.name,id})return {userList,res: 0,msg: '添加成功'}} else {return {userList,res: 1,msg: '添加失败'}}
});Mock.mock('/post/mod', 'post', function (param) {let body = JSON.parse(param.body) // 获取请求参数let id = parseInt(body.id)let flag = false, index = 0;for (let i in userList) {if (userList[i].id === id) {flag = true // 判断id是否已经存在,存在返回trueindex = i//对应数组的下标}}// 如果id存在则修改if (flag) {userList[index] = bodyreturn {userList,res: 0,msg: '修改成功'}} else {return {userList,res: 1,msg: '修改失败'}}
});Mock.mock('/post/del', 'post', function (param) {let body = JSON.parse(param.body) // 获取请求参数let id = parseInt(body.id)let flag = false, index = 0;for (let i in userList) {if (userList[i].id === id) {flag = true // 判断id是否已经存在,存在返回trueindex = i//对应数组的下标}}// 如果id存在则删除if (flag) {userList.splice(index, 1);return {userList,res: 0,msg: '删除成功'}} else {return {userList,res: 1,msg: '删除失败'}}
});Mock.mock('/post/query', 'post', function (param) {let body = JSON.parse(param.body) // 获取请求参数let id = parseInt(body.id)if (!id) {//如果id不存在,则直接返回全部return {userList,res: 0,msg: '查询成功'}}//idfor (let item of userList) {if (item.id === id) {return {userList: [item],res: 0,msg: '查询成功'}}}// 如果id不存在则返回失败return {userList: [],res: 1,msg: '查询失败'}
});

Aside/index.vue

<template><div style="height: 100%"><el-menubackground-color="#545c64"text-color="#ffffff"active-text-color="#ffd04b"class="el-menu-vertical-demo"router><el-menu-item:index="item.path"v-for="item in menu_data":key="item.name"><i :class="item.icon"></i>{{ item.name }}</el-menu-item></el-menu></div>
</template><script>
export default {name: "Aside",data() {return {menu_data: [{name: "一级菜单1",icon: "el-icon-location",path: "/index/menu1",},{name: "一级菜单2",icon: "el-icon-document",path: "/index/menu2",},{name: "一级菜单3",icon: "el-icon-setting",path: "/index/menu3",},],};},
};
</script><style scoped>
.el-icon-location,
.el-icon-document,
.el-icon-setting {display: inline-flex;align-items: center;justify-content: center;
}
</style>

相关文章:

Vue开发实例(七)Axios的安装与使用

说明&#xff1a; 如果只是在前端&#xff0c;axios常常需要结合mockjs使用&#xff0c;如果是前后端分离&#xff0c;就需要调用对应的接口&#xff0c;获取参数&#xff0c;传递参数&#xff1b;由于此文章只涉及前端&#xff0c;所以我们需要结合mockjs使用&#xff1b;由于…...

2024.3.6

作业1&#xff1a;使用C语言完成数据库的增删改 #include <myhead.h>//定义添加员工信息函数 int Add_worker(sqlite3 *ppDb) {//准备sql语句printf("请输入要添加的员工信息:\n");//从终端获取员工信息char rbuf[128]"";fgets(rbuf,sizeof(rbuf),s…...

抖音视频批量采集软件|视频评论下载工具

在日常工作中&#xff0c;需要频繁下载抖音视频&#xff0c;但逐个复制分享链接下载效率太低&#xff1f;别担心&#xff01;我们推出了一款专业的抖音视频批量采集软件&#xff0c;基于C#开发&#xff0c;满足您的需求&#xff0c;让您通过关键词搜索视频并自动批量抓取&#…...

苹果 Vision Pro零售部件成本价格分析

苹果公司发布的全新头戴式显示器 Apple Vision Pro 虽然售价高达3499美元&#xff0c;但其制造成本同样不菲&#xff0c;根据研究机构 Omdia 的估计&#xff0c;该头显仅零部件成本就超过了1500美元。这款头显的总零部件成本估计为1542美元&#xff0c;这还并不包括研发、包装、…...

Seurat 中的数据可视化方法

本文[1]将使用从 2,700 PBMC 教程计算的 Seurat 对象来演示 Seurat 中的可视化技术。您可以从 SeuratData[2] 下载此数据集。 SeuratData::InstallData("pbmc3k")library(Seurat)library(SeuratData)library(ggplot2)library(patchwork)pbmc3k.final <- LoadData(…...

ImportError: cannot import name ‘InterpolationMode‘

InterpolationMode 在图像处理库中通常用于指定图像缩放时的插值方法。插值是一种数学方法&#xff0c;在图像大小变化时用于估算新像素位置的像素值。不同的插值方法会影响缩放后图像的质量和外观。 在你提供的 image_transform 函数中&#xff0c;InterpolationMode.BICUBIC…...

HSRP和VRRP

VRRP&#xff08;Virtual Router Redundancy Protocol&#xff0c;虚拟路由器冗余协议&#xff09; 是一种网络层的容错协议&#xff0c;主要用于在多台路由器之间提供默认网关冗余。在IP网络中&#xff0c;当一个子网有多个路由器时&#xff0c;VRRP可以确保在主用路由器失效…...

C及C++每日练习(1)

一.选择&#xff1a; 1.以下for循环的执行次数是&#xff08;&#xff09; for(int x 0, y 0; (y 123) && (x < 4); x); A.是无限循环 B.循环次数不定 C.4次 D.3次 对于循环&#xff0c;其组成部分可以四个部分&#xff1a; for(初始化;循环进行条件;调整) …...

Oracle 12c dataguard查看主备库同步情况的新变化

导读 本文介绍Oracle 12c dataguard在维护方面的新变化 前提&#xff1a;主库备库的同步是正常的。 1、主库上查看archive Log list SYScdb1> archive log list; Database log mode Archive Mode Automatic archival Enabled Archive destination…...

时间序列-AR MA ARIMA

一、AR模型(自回归) AR探索趋势和周期性 预测依赖于过去的观测值和模型中的参数。模型的阶数 p pp 决定了需要考虑多少个过去时间点的观测值。 求AR模型的阶数 p和参数 ϕ i \phi_i ϕi​ &#xff0c;常常会使用统计方法如最小二乘法、信息准则&#xff08;如AIC、BIC&#xf…...

Spring Boot(六十六):集成Alibaba Druid 连接池

1 Alibaba Druid介绍 在现代的Java应用中,使用一个高效可靠的数据源是至关重要的。Druid连接池作为一款强大的数据库连接池,提供了丰富的监控和管理功能,成为很多Java项目的首选。本文将详细介绍如何在Spring Boot项目中配置数据源,集成Druid连接池,以实现更高效的数据库…...

leetcode 经典题目42.接雨水

链接&#xff1a;https://leetcode.cn/problems/trapping-rain-water 题目描述 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 思路分析 首先&#xff0c;我们需要遍历数组&#xff0c;对于每个元素&am…...

高防服务器的主要作用有哪些?

高防服务器是属于服务器的一种&#xff0c;主要是为了解决流量攻击而设计的&#xff0c;高防服务器能够维护服务器的稳定性和安全性&#xff0c;具备很高的防御能力和更加优质的网络带宽&#xff0c;能够提供更加可靠的服务保障&#xff0c;那么高防服务器主要都有哪些作用呢&a…...

【30 天 JavaScript 挑战】学习笔记

30 天 JavaScript 挑战 专为 JavaScript 初学者设计 掌握必备 JavaScript 技能 前端人&#xff0c;前端魂&#xff0c;刷完 JS 即入门! 题目地址&#xff1a;https://leetcode.cn/studyplan/30-days-of-javascript/ 个人学习笔记&#xff1a;https://github.com/kaimo313/…...

生成 Linux/ubuntu/Debian 上已安装软件包的列表

你可以在终端中使用以下命令生成已安装软件包的列表&#xff1a; 列出所有已安装的软件包&#xff1a; dpkg --get-selections要将列表保存到文件中&#xff1a; dpkg -l > installed_packages_detailed.txt这将在当前目录中创建一个名为“installed_packages_detailed.txt”…...

精品中国货出海wordpress外贸独立站建站模板

旗袍唐装wordpress外贸网站模板 旗袍、唐装、华服wordpress外贸网站模板&#xff0c;适合做衣服生意的外贸公司官网使用。 https://www.jianzhanpress.com/?p3695 劳动防护wordpress外贸独立站模板 劳动防护wordpress外贸独立站模板&#xff0c;劳动保护、劳动防护用品外贸…...

使用Animated.View实现全屏页面可以向下拖动,松开手指页面返回原处的效果

使用Animated.View实现全屏页面可以向下拖动,松开手指页面返回原处的效果 效果示例图代码示例 效果示例图 代码示例 import React, {useRef, useState} from react; import {View,Text,Animated,Easing,PanResponder,StyleSheet, } from react-native;const TestDragCard () …...

【教程】uni-app iOS打包解决profile文件与私钥证书不匹配问题

摘要 当在uni-app中进行iOS打包时&#xff0c;有时会遇到profile文件与私钥证书不匹配的问题。本文将介绍如何解决这一问题&#xff0c;以及相关的技术细节和操作步骤。 引言 在uni-app开发过程中&#xff0c;iOS打包是一个常见的操作。然而&#xff0c;有时会出现profile文…...

预约自习室

预约自习室 1、技术介绍 自习室预约系统的后端开发语言采用Node&#xff0c;后端开发框架采用Express&#xff0c;数据库采用的Node的最佳搭档MySQL。采用Vue作为前端开发框架&#xff0c;Element-UI作为开发的组件库&#xff0c;微信小程序。期间采用axios实现网页数据获取&a…...

网络安全审计是什么意思?与等保测评有什么区别?

网络安全审计和等保测评在信息安全领域中都是非常重要的环节。但不少人对于这两者是傻傻分不清楚&#xff0c;今天我们就来简单聊聊网络安全审计是什么意思&#xff1f;与等保测评有什么区别&#xff1f; 网络安全审计是什么意思&#xff1f; 网络安全审计是通过对网络系统和网…...

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

(一)单例模式

一、前言 单例模式属于六大创建型模式,即在软件设计过程中,主要关注创建对象的结果,并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计,从而隐藏了类对象的实例是如何被创建的,封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

Python异步编程:深入理解协程的原理与实践指南

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 持续学习&#xff0c;不断…...

中科院1区顶刊|IF14+:多组学MR联合单细胞时空分析,锁定心血管代谢疾病的免疫治疗新靶点

中科院1区顶刊|IF14&#xff1a;多组学MR联合单细胞时空分析&#xff0c;锁定心血管代谢疾病的免疫治疗新靶点 当下&#xff0c;免疫与代谢性疾病的关联研究已成为生命科学领域的前沿热点。随着研究的深入&#xff0c;我们愈发清晰地认识到免疫系统与代谢系统之间存在着极为复…...

SQLSERVER-DB操作记录

在SQL Server中&#xff0c;将查询结果放入一张新表可以通过几种方法实现。 方法1&#xff1a;使用SELECT INTO语句 SELECT INTO 语句可以直接将查询结果作为一个新表创建出来。这个新表的结构&#xff08;包括列名和数据类型&#xff09;将与查询结果匹配。 SELECT * INTO 新…...

机器学习复习3--模型评估

误差与过拟合 我们将学习器对样本的实际预测结果与样本的真实值之间的差异称为&#xff1a;误差&#xff08;error&#xff09;。 误差定义&#xff1a; ①在训练集上的误差称为训练误差&#xff08;training error&#xff09;或经验误差&#xff08;empirical error&#x…...

在MobaXterm 打开图形工具firefox

目录 1.安装 X 服务器软件 2.服务器端配置 3.客户端配置 4.安装并打开 Firefox 1.安装 X 服务器软件 Centos系统 # CentOS/RHEL 7 及之前&#xff08;YUM&#xff09; sudo yum install xorg-x11-server-Xorg xorg-x11-xinit xorg-x11-utils mesa-libEGL mesa-libGL mesa-…...