既然vue-resource停更了,就不讲了,但是效果也是差不多了

今天主要讲一下关于axios的方式来调用API,按照vue-cli的模式,这个当然得先引入一个axios这个模块了。那当然得走一遍终端安装了

terminal >>  npm install axios

//以上运行完毕,那么走一波在项目里引入模块了。当然少不了main.js这个文件了

main.js >> import axios from 'axios'

//这个引入方便是比较方便快捷的,但是如果会涉及到关于axios的可配置性的话,就是加强axios的延展性,那么最好的方便就是将这个独立成一个可配置的模块具体如何操作呢

./ create js file >> axios.config.js

//在根目录里创建axios.config.js这个文件模块,然后把他,忘记具体名词怎么形容了,好像是爆什么出来,反正就是将他 export 到 default 的某个东东。

<file>

import axios from 'axios'

//做成模块化,那么肯定也要引入axios的模块了。这里只是将他做成一个可配置的东东。

const instance = axios.create({

baseURL:'/api'

})

//其实这个很好理解的,声明instance这个东东,然后将axios.create就相当于将axios创建的东东,全部赋给这个叫做instance的东西。当然里面的内容是属于配置的了baseURL很好理解

export default instance

//这个就是曝出去,给大伙使用了。

</file>

--> 关于模块的安装,引用,独立配置,以上大致如此,后续根据自己的需求再做优化与升级

接下来,看一下axios在vue-cli里是如何使用的。其实也很简单,引入,调用。

myblog.vue >>

export default {

data () {

return {

blogs:[],  //咱们要声名个容器,用来装API的数据的,这个blogs就是容器

};

},

created () {

axios.get("http://jsonplaceholder.typicode.com/posts")  //咱们暂时从jsonplaceholder里直接用别人做好的API接口来拉点数据先用用

//这样我们就get到以上这个链接的数据了。当然接下来就是获取他上面的数据了

.then(data=> { return data.data;}) //这里用到的箭头函数,至于具体的箭头函数如何,可以自行BB,至少能少写function......

.then(data=> {

var blogsArray = [];

for (let key in data) {

data[key].id = key;

blogsArray.push(data[key]);

}

this.blogs = blogsArray;

console.log(this.blogs);  //这个只是测试数据是否成功输出,在chrome里就能查看数据是否正常读取

});

}

}

[每天一课] 今天就讲一讲关于vue-cli 脚手架里 如何调用API的更多相关文章

  1. 32位汇编第四讲,干货分享,汇编注入的实现,以及快速定位调用API的数量(OD查看)

    32位汇编第四讲,干货分享,汇编注入的实现,以及快速定位调用API的数量(OD查看) 昨天,大家可能都看了代码了,不知道昨天有没有在汇编代码的基础上,实现注入计算器. 如果没有,今天则会讲解,不过建议 ...

  2. 经典面试题|讲一讲JVM的组成

    JVM(Java 虚拟机)算是面试必问的问题的了,而但凡问 JVM 一定会问的第一个问题就是:讲一讲 JVM 的组成?那本文就注重讲一下 JVM 的组成. 首先来说 JVM 的组成分为,整体组成部分和 ...

  3. JAVA经典面试题:讲一讲JVM的组成

    JVM(Java 虚拟机)算是面试必问的问题的了,而但凡问 JVM 一定会问的第一个问题就是:讲一讲 JVM 的组成?那本文就注重讲一下 JVM 的组成. 首先来说 JVM 的组成分为,整体组成部分和 ...

  4. 关于RNA-Seq数据去接头(Adapter)这事需要讲一讲

    关于RNA-Seq数据去接头(Adapter)这事需要讲一讲 RNA-Seq adapter barcode cutadapt 首先来了解一下三个概念: 1.adapter是一段短的序列已知的核酸链, ...

  5. 关于Android模块化我有一些话不知当讲不当讲

    关于Android模块化我有一些话不知当讲不当讲 最近公司一个项目使用了模块化设计,本人参与其中的一个小模块开发,但是整体的设计并不是我架构设计的,开发半年有余,在此记录下来我的想法. 关于Andro ...

  6. 极客时间 Mysql实战45讲 07讲行锁功过:怎么减少行锁对性能的影响笔记 极客时间

    极客时间 Mysql实战45讲 07讲行锁功过:怎么减少行锁对性能的影响笔记 极客时间极客时间 Mysql实战45讲 07讲行锁功过:怎么减少行锁对性能的影响笔记 极客时间 笔记体会: 方案一,事务相 ...

  7. Mysql实战45讲 05讲深入浅出索引(下)极客时间 读书笔记

    极客时间 Mysql实战45讲 04讲深入浅出索引(下)极客时间 笔记体会: 回表:回到主键索引树搜索的过程,称为回表覆盖索引:某索引已经覆盖了查询需求,称为覆盖索引,例如:select ID fro ...

  8. Mysql实战45讲 04讲深入浅出索引(上)读书笔记 极客时间

    极客时间 Mysql实战45讲 04讲深入浅出索引 极客时间(上)读书笔记  笔记体悟 1.索引的作用:提高数据查询效率2.常见索引模型:哈希表.有序数组.搜索树3.哈希表:键 - 值(key - v ...

  9. 面试必杀技,讲一讲Spring中的循环依赖

    本系列文章: 听说你还没学Spring就被源码编译劝退了?30+张图带你玩转Spring编译 读源码,我们可以从第一行读起 你知道Spring是怎么解析配置类的吗? 配置类为什么要添加@Configu ...

随机推荐

  1. 问题:关于2.3 jmu-Java-02基本语法-03-身份证排序 (9 分)

    输出未能排序     import java.util.Scanner;     import java.util.Arrays;     public class Main {         pu ...

  2. Codeforces Round #606 Div. 2 比赛总结

    比赛情况 bq. A题 Wrong Answer on test 2 , E题sb题没切.bqbqbq. 比赛总结 bq. 那就直接上题解吧!^-^ A 数位dp,分类讨论,注意细节. Talk is ...

  3. Spring mvc 搭建Mybatis

    本文建立在spring mvc已经搭建起来的基础上. 首先看要引入的jar包,其中高亮的是为了mybatis新引入的. <properties>       <spring.webm ...

  4. for循环与内置方法详解

    ''' for循环与内置方法详解 ''' # 循环:重复(按照某种规律的)做一件事情 # lt = [1, 2, 3, 4] # # ind = 0 # # while True: # print(l ...

  5. Python 3标准库课件第二章

    整理第一章我又觉得烦,我就看第二章了,灰头土脸的,第二章一.如列表(list).元组(tuple).字典(dict).集合(set)二.2.1 enum:枚举类型 enum模块定义了一个提供迭代和比较 ...

  6. UML中共有5种静态图

    用例图,类图,对象图,组件图和配置图.

  7. Dw 表单制作 与 dedecms 结合实现提交效果

    Dw 表单制作 与 dedecms 结合实现提交效果 自定义表单的用处 1.教育类网站的学员报名 2.企业网站的在线订单 3.普通网页上的一些和用户交互的小功能 实现原理:首先添加表单:核心-频道模型 ...

  8. BZOJ 4773: 负环 倍增Floyd

    现在看来这道题就非常好理解了. 可以将问题转化为求两点间经过 $k$ 个点的路径最小值,然后枚举剩余的那一个点即可. #include <cstdio> #include <cstr ...

  9. Elastic-Job快速入门

    1 Elastic-Job快速入门1.1 环境搭建1.1.1.版本要求JDK要求1.7及以上版本Maven要求3.0.4及以上版本zookeeper要求采用3.4.6及以上版本1.1.2.Zookee ...

  10. 双重Iterator 报错!!!!

    List list = new ArrayList(); list.add(new String[]{"0","s1","0038",&qu ...