vue.js 配置axios 用来ajax请求数据-白红宇

vue.js 配置axios 用来ajax请求数据

阅读量：5304 次

发布时间：2019-06-14

本文共 4334 字，大约阅读时间需要 14 分钟。

* 用npm 安装 axios

切换到项目的根目录

npm install --save axios vue-axios

* 在vue的入口文件./src/main.js 中引入axios, 添加2行代码

// axiosimport axios from 'axios'Vue.prototype.$http = axios

* ./src/main.js 入口文件如下:

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'// axiosimport axios from 'axios'Vue.prototype.$http = axios Vue.config.productionTip = false /* eslint-disable no-new */new Vue({  el: '#app',  router,  components: { App },  template: '
     '})

* 生成数据文件./assets/data/people.json

{"people":[{"id":1,"name":"Jack","age":30,"gender":"Male"},{"id":2,"name":"Bill","age":26,"gender":"Male"},{"id":3,"name":"Tracy","age":22,"gender":"Female"},{"id":4,"name":"Chris","age":36,"gender":"Male"}]}

为什么不能直接在组件中访问 ../assets/data/people.json?

* php生成数据（需要跨域CORS)


      people.json */header('Content-Type:text/json; charset=utf-8'); header('Access-Control-Allow-Origin:*');header('Access-Control-Allow-Methods:GET');header('Access-Control-Allow-Headers:x-requested-with,content-type'); $data = new \StdClass();$data->people = [    [        "id" => 1,        "name" => "Jack",        "age" => 30,        "gender" => "Male"    ],    [        "id" => 2,        "name" => "Bill",        "age" => 26,        "gender" => "Male"    ],    [        "id" => 3,        "name" => "Tracy",        "age" => 22,        "gender" => "Female"    ],    [        "id" => 4,        "name" => "Chris",        "age" => 36,        "gender" => "Male"    ],    [        "id" => 5,        "name" => "guanmengying",        "age" => 29,        "gender" => "Female"    ]];echo json_encode($data, true);

　* 启动php接口

php -S 0.0.0.0:8081

* 测试这个接口可以用浏览器访问http://localhost:8081/person.php

或者命令行 curl http://localhost:8081/people.php

输出:

* 路由文件 ./src/router/index.js

根据默认的HelloWorld照葫芦画瓢即可

import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import person from '@/components/person' Vue.use(Router) export default new Router({  routes: [    {      path: '/',      name: 'HelloWorld',      component: HelloWorld    },    {      path: '/person',      name: 'person',      component: person    }  ]})

* 模板文件 ./src/components/person.vue

Name	Age	gender	Delete
{ { person.name }}	{ { person.age }}	{ { person.gender }}

　　主要的变更:

created: function() {    var v = this;    // vue instance    v.$http      .get("http://localhost:8081/people.php")  // xhr      .then(function(resp) {        v.people = resp.data.people;  // bind data      })      .catch(function(error) {        document.write(error.toString());      });  },  data() {    return {      // ...      people: []  // empty array. null can cause template compiling error    };  },

　　* 浏览器访问