使用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. bat延迟执行脚本,利用choice实现定时执行功能

    choice是选择语句,具体语法另外再讲.今天利用它来实现定时执行功能.废话少说直接上代码: 示例一: @echo off for %%a in (我 是 一 个 中 国 人) do ping -n ...

  2. 关于oracle PL/SQL存储过程 PLS-00905 object is invalid,statement ignored问题的解决

    昨天在学习oracle存储过程的时候,写了一个存储过程的demo,语句是这样的: )) AS psssal TESTDELETE.TESTID%TYPE; BEGIN SELECT TESTID IN ...

  3. Android APP之WebView如何校验SSL证书

    Android系统的碎片化很严重,并且手机日期不正确.手机根证书异常.com.google.android.webview BUG等各种原因,都会导致WebViewClient无法访问HTTPS站点. ...

  4. 常用.gitignore

    android开发 关键词:java,android,androidstudio 地址:https://www.gitignore.io/api/java,android,androidstudio ...

  5. 网络流之最大流EK --- poj 1459

    题目链接 本篇博客延续上篇博客(最大流Dinic算法)的内容,此次使用EK算法解决最大流问题. EK算法思想:在图中搜索一条从源点到汇点的扩展路,需要记录这条路径,将这条路径的最大可行流量 liu 增 ...

  6. org.apache.commons.httpclient工具类(封装的HttpUtil)

    import java.io.BufferedInputStream; import java.io.File; import java.io.FileInputStream; import java ...

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

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

  8. HDU1213:How Many Tables(并查集入门)

    -----------刷点水题练习java------------- 题意:给定N点,M边的无向图,问有多少个连通块. 思路:可以搜索;  可以并查集.这里用并查集练习java的数组使用,ans=N, ...

  9. 【转】Spring全家桶

    Spring框架自诞生以来一直备受开发者青睐,有人亲切的称之为:Spring 全家桶.它包括SpringMVC.SpringBoot.Spring Cloud.Spring Cloud Dataflo ...

  10. Graph Embedding:

    https://blog.csdn.net/hy_jz/article/details/78877483 基于meta-path的异质网络Embedding-metapath2vec metapath ...