Javascript - Vue - webpack中的axios

导入axios

import Vue from "vue";
import axios from "axios";
import { get } from "http";
Vue.prototype.$ajax = axios; //将axios绑定到vue的原型上

调用axios

在vue对象内部的metho中调用

this.$ajax.get("http://localhost:3000/src/json/bannerBoxImg.json") .then(function (response) {
        self.dataList = response.data;
});

两种json文件的读取方法

第一种

[
      {
            "name":"ajax", //json文件中属性必须用双引号包含起来，不能用单引号
            "header":"/src/img/h3.png",
            "email":"@29384_shlm",
            "content":"xxx"
      },
      {
            "name":"relex",
            "header":"/src/img/h2.png",
            "email":"@gukola",
            "content":"xxx"
      },
      {
            "name":"saxphone",
            "header":"/src/img/h1.png",
            "email":"@mogwai",
            "content":"xxx"
      },
      {
            "name":"jazz",
            "header":"/src/img/h4.png",
            "email":"@wxports",
            "content":"xxx"
      }
]

读取

this.$ajax.get("http://localhost:3000/src/json/news.json",{}).then(function (response) {
      self.newsList=response.data
})

第二种

{
      "newsList": [
            {
                  "name": "ajax",
                  "header": "/src/img/h3.png",
                  "email": "@29384_shlm",
                  "content": "xxx"
            },
            {
                  "name": "relex",
                  "header": "/src/img/h2.png",
                  "email": "@gukola",
                  "content": "xxx"
            },
            {
                  "name": "saxphone",
                  "header": "/src/img/h1.png",
                  "email": "@mogwai",
                  "content": "xxx"
            },
            {
                  "name": "jazz",
                  "header": "/src/img/h4.png",
                  "email": "@wxports",
                  "content": "xxx"
            }
      ]
}

读取

this.$ajax.get("http://localhost:3000/src/json/news.json",{}).then(function (response) {
      self.newsList=JSON.parse(JSON.stringify(response.data))['newsList']
})

　

Javascript - 学习总目录