axios安装及使用
使用npm安装
$ npm install axios
使用 bower安装
$ bower install axios
使用 cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
main.js:导入
import axios from 'axios'
调用接口使用axios:
1: 接口数据读取
querygraphic () {
let _this = this
this.$http.get('https://localhost:44314/api/Values').then(res => {
_this.list = res.data
}) data () {
return {
list: []
} 调用赋值:v-for="queryg in list":key="queryg.id" {{ queryg.version }}
2:按id数据读取
getgrid () { this.$http.get('https://localhost:44314/api/Values/' + this.id).then(res => {
this.gettext = res.data[]
console.log(this.gettext)
}) data () {
return {
id: this.$route.params.id, // 读取路由传过来的id
gettext: {}
}
}, 调用赋值:
{{ gettext.text }}
3:put更新
this.$http({
url: 'https://localhost:44314/api/Gj/' + this.id,
method: 'put',
contentType: 'application/json;charset=UTF-8', data: {
'id': this.newinfo.id,
'method': this.newinfo.method,
'text': this.newinfo.text,
'type': this.newinfo.type
},
dataType: 'json'
}).then(res => {
console.log(res)
if (res.status === ) {
this.open1()
console.log('成功')
} else {
this.open4()
console.log('失败')
}
}).catch(console.error.bind(console)) // 异常
4:delete删除
this.$http.delete('https://localhost:44314/api/Gj/' + row.id).then(res => {
if (res.status === ) {
this.$message({
type: 'success',
message: '删除成功!'
})
this.getgjtype('vue') // 重新加载数据
this.reload() // 刷新页面
// location.reload()// 刷新页面
// this.$router.go(0)
} else {
this.open4()
}
}).catch(console.error.bind(console)) // 异常
axios安装及使用的更多相关文章
- vuejs axios安装配置与使用
1.安装服务 npm install --save axios vue-axios 2.在main.js import axios from 'axios' import VueAxios from ...
- vue+axios安装
Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中. 安装方式: 1.使用cdn <script src="https://unpkg.com/axios ...
- 搭建vue脚手架,包含Axios、qs、Element-UI、mock等插件的安装配置
1.安装node.vue这些最基础最简单的安装的就一一省略过. 1.1 axios 安装 1.2安装 Element-Ui 插件 1.3 安装 qs 1.4 安装 Mock 2.新建一个vue工程, ...
- VUE:使用vue-cli脚手架无法安装npm install axios 的巨坑
使用命令 npm install axios 安装axios可能会报错,无法引用, 这个时候使用淘宝的镜像cnpm安装就可以了 cnpm install axios 如果没有安装cnpm,执行以下命令 ...
- vue3.x版本安装element-ui、axios及echarts图表插件
项目中安装使用element-UI 命令行: vue add element 安装成功后,项目会自动将element-UI引入项目中,刷新项目即可 项目中安装使用axios数据请求 vue add a ...
- ThinkPHP6.0 + Vue + ElementUI + axios 的环境安装到实现 CURD 操作!
官方文档地址: ThinkPHP6.0: https://www.kancloud.cn/manual/thinkphp6_0/1037479 ElemetUI: https://elemen ...
- axios基本用法
vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法. 首先就是引入axios,如果你使用es6,只需要安装axios ...
- Axios使用说明
vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法. 首先就是引入axios,如果你使用es6,只需要安装axios ...
- Vue.js 2.x笔记:服务请求axios(8)
1. axios简介 vue2.0之后,推荐使用axios. axios官方地址:https://github.com/axios/axios 2. axios安装 npm安装: npm instal ...
随机推荐
- 利用Python调用pastebin.com API自动创建paste
在上一篇文章中,已经实现了模拟pastebin.com的账号登录,并且获取了api_dev_key,这一篇文章主要讲一下调用API创建paste 登录之后,进入API页面,发现网站已经提供了几个API ...
- Druid连接池使用
转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/11280540.html 一:DRUID连接池简介 阿里出品的“为监控而生”的数据库连接池,在功能.性能.扩展 ...
- 2019 China Collegiate Programming Contest Qinhuangdao Onsite
传送门 D - Decimal 题意: 询问\(\frac{1}{n}\)是否为有限小数. 思路: 拆质因子,看是不是只包含2和5即可,否则除不尽. Code #include <bits/st ...
- V4l2初识(七)-----------浅析app获取虚拟摄像头数据的过程
继续分析数据的获取过程: 1.请求分配的缓冲区: ioctl(4,VIDIOC_REQBUFS) vidioc_reqbufs 2.查询和映射缓冲区 ioctl(4,VIDIOC_QUERYBUF ...
- LVS(二):四种工作模型
面试的时候必问这个四种工作模式,因为这几乎是企业里面必用的内容,所以一定要将其理解通透. 一.lvs-nat模式 二.LVS-DR模式(默认) 三.LVS-tun模式 四.LVS-fullnat模式 ...
- 69.x的平方根 (平)(简单)
实现 int sqrt(int x) 函数. 计算并返回 x 的平方根,其中 x 是非负整数. 由于返回类型是整数,结果只保留整数的部分,小数部分将被舍去. 示例 1: 输入: 4输出: 2示例 2: ...
- Mysql数据库基础命令
删除一个表: drop table if exists 表名; 在表中插入行: Insert into 表名 values(, , ,) 创建表: Create table 表名( Id int(10 ...
- 【oracle】substr函数 字符截取
- Spring Data JPA整合REST客户端Feign时: 分页查询的反序列化报错的问题
Type definition error: [simple type, class org.springframework.data.domain.Page]; nested exception i ...
- [POJ1189][BZOJ1867][CODEVS1709]钉子和小球
题目描述 Description 有一个三角形木板,竖直立放,上面钉着n(n+1)/2颗钉子,还有(n+1)个格子(当n=5时如图1).每颗钉子和周围的钉子的距离都等于d,每个格子的宽度也都等于d,且 ...