使用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'
  Vue.prototype.$http = axios
  Vue.prototype.$http.defaults.baseURL = '' // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL

调用接口使用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安装及使用的更多相关文章

  1. vuejs axios安装配置与使用

    1.安装服务 npm install --save axios vue-axios 2.在main.js import axios from 'axios' import VueAxios from ...

  2. vue+axios安装

    Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中. 安装方式: 1.使用cdn <script src="https://unpkg.com/axios ...

  3. 搭建vue脚手架,包含Axios、qs、Element-UI、mock等插件的安装配置

    1.安装node.vue这些最基础最简单的安装的就一一省略过. 1.1 axios 安装 1.2安装 Element-Ui 插件 1.3 安装 qs 1.4  安装 Mock 2.新建一个vue工程, ...

  4. VUE:使用vue-cli脚手架无法安装npm install axios 的巨坑

    使用命令 npm install axios 安装axios可能会报错,无法引用, 这个时候使用淘宝的镜像cnpm安装就可以了 cnpm install axios 如果没有安装cnpm,执行以下命令 ...

  5. vue3.x版本安装element-ui、axios及echarts图表插件

    项目中安装使用element-UI 命令行: vue add element 安装成功后,项目会自动将element-UI引入项目中,刷新项目即可 项目中安装使用axios数据请求 vue add a ...

  6. ThinkPHP6.0 + Vue + ElementUI + axios 的环境安装到实现 CURD 操作!

    官方文档地址: ​ ThinkPHP6.0: https://www.kancloud.cn/manual/thinkphp6_0/1037479 ​ ElemetUI: https://elemen ...

  7. axios基本用法

    vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法. 首先就是引入axios,如果你使用es6,只需要安装axios ...

  8. Axios使用说明

    vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法. 首先就是引入axios,如果你使用es6,只需要安装axios ...

  9. Vue.js 2.x笔记:服务请求axios(8)

    1. axios简介 vue2.0之后,推荐使用axios. axios官方地址:https://github.com/axios/axios 2. axios安装 npm安装: npm instal ...

随机推荐

  1. 利用Python调用pastebin.com API自动创建paste

    在上一篇文章中,已经实现了模拟pastebin.com的账号登录,并且获取了api_dev_key,这一篇文章主要讲一下调用API创建paste 登录之后,进入API页面,发现网站已经提供了几个API ...

  2. Druid连接池使用

    转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/11280540.html 一:DRUID连接池简介 阿里出品的“为监控而生”的数据库连接池,在功能.性能.扩展 ...

  3. 2019 China Collegiate Programming Contest Qinhuangdao Onsite

    传送门 D - Decimal 题意: 询问\(\frac{1}{n}\)是否为有限小数. 思路: 拆质因子,看是不是只包含2和5即可,否则除不尽. Code #include <bits/st ...

  4. V4l2初识(七)-----------浅析app获取虚拟摄像头数据的过程

    继续分析数据的获取过程: 1.请求分配的缓冲区: ioctl(4,VIDIOC_REQBUFS) vidioc_reqbufs 2.查询和映射缓冲区   ioctl(4,VIDIOC_QUERYBUF ...

  5. LVS(二):四种工作模型

    面试的时候必问这个四种工作模式,因为这几乎是企业里面必用的内容,所以一定要将其理解通透. 一.lvs-nat模式 二.LVS-DR模式(默认) 三.LVS-tun模式 四.LVS-fullnat模式 ...

  6. 69.x的平方根 (平)(简单)

    实现 int sqrt(int x) 函数. 计算并返回 x 的平方根,其中 x 是非负整数. 由于返回类型是整数,结果只保留整数的部分,小数部分将被舍去. 示例 1: 输入: 4输出: 2示例 2: ...

  7. Mysql数据库基础命令

    删除一个表: drop table if exists 表名; 在表中插入行: Insert into 表名 values(, , ,) 创建表: Create table 表名( Id int(10 ...

  8. 【oracle】substr函数 字符截取

  9. Spring Data JPA整合REST客户端Feign时: 分页查询的反序列化报错的问题

    Type definition error: [simple type, class org.springframework.data.domain.Page]; nested exception i ...

  10. [POJ1189][BZOJ1867][CODEVS1709]钉子和小球

    题目描述 Description 有一个三角形木板,竖直立放,上面钉着n(n+1)/2颗钉子,还有(n+1)个格子(当n=5时如图1).每颗钉子和周围的钉子的距离都等于d,每个格子的宽度也都等于d,且 ...