使用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. hashlib(hmac)进阶之client跟server交互

    首先我还是要强调不管任何相同的字符串通过hashlib加密之后都会产生相同的32位字符串,这个是日常Web中常用的加密算法如果我的client发送一个请求过来我server接受到后就要对该密码进行判断 ...

  2. [TCP/IP] TCP关闭连接为什么四次挥手

    1.建立连接的时候, 服务器在LISTEN状态下,收到建立连接请求的SYN报文后,把ACK和SYN放在一个报文里发送给客户端. 2.而关闭连接时,服务器收到对方的FIN报文时,仅仅表示对方不再发送数据 ...

  3. 【BZOJ3716】[PA2014]Muzeum(贪心+网络流)

    BZOJ 题意: 在二维网格图中有\(n\)个物品,每个物品有价值:但有\(m\)个警卫看管这些物品,每个警卫面朝\(y\)轴负方向,能看到一定角度(假定能够看到无穷远). 现在每个敬畏有一个贿赂价钱 ...

  4. Python中print用法里面% ,"%s 和 % d" 代表的意思

    Python 编程 里面% . "%s 和 % d" 代表的意思 %s,表示格化式一个对象为字符 %d,整数 "Hello, %s"%"zhang3& ...

  5. 【NodeJS】Vue-d2Admin

    INFO Starting development server... 10% building 2/2 modules 0 active ERROR Error: Watching remote f ...

  6. 17-numpy笔记-莫烦pandas-5

    代码 import pandas as pd import numpy as np left=pd.DataFrame({'key':['K0','K1','K2','K3'], 'A':['A0', ...

  7. Selenium获取页面指定元素个数

    测试需求: 获取页面中下拉框个数,并验证是否与预期个数一致 方法1:因下拉框的tagname属性值为select,可通过获取标签为select的元素来获取下拉框个数   List<WebElem ...

  8. Artificial Intelligence in Finance

    https://sigmoidal.io/real-applications-of-ai-in-finance/ Artificial Intelligence is taking the finan ...

  9. zz详解深度学习中的Normalization,BN/LN/WN

    详解深度学习中的Normalization,BN/LN/WN 讲得是相当之透彻清晰了 深度神经网络模型训练之难众所周知,其中一个重要的现象就是 Internal Covariate Shift. Ba ...

  10. leetcode14最长公共前缀

    class Solution { public: string longestCommonPrefix(vector<string>& strs) { ) return " ...