fig vue 調整 proto title turn cas roo tps

第一步 安裝ajax組件

npm install superagent --save-dev

第二步:寫api.js

// 配置API接口地址
var root = ‘https://cnodejs.org/api/v1‘;
// 引用superagent
var request = require(‘superagent‘);
// 自定義判斷元素類型JS
function toType(obj) {
  return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
}
// 參數過濾函數
function filter_null(o) {
  
 
for (var key in o) {
    if (o[key] == null) {
      delete o[key]
    }
    if (toType(o[key]) == ‘string‘) {
      o[key] = o[key].trim()
      if (o[key].length == 0) {
        delete o[key]
      }
    }
  }
  return o
}
/*
 接口處理函數
 這個函數每個項目都是不一樣的，我現在調整的是適用於
 https://cnodejs.org/api/v1 的接口，如果是其他接口
 需要根據接口的參數進行調整。參考說明文檔地址：
 https://cnodejs.org/topic/5378720ed6e2d16149fa16bd
 
 
*/
function _api_base(method, url, params, success, failure) {
  var r = request(method, url).type(‘text/plain‘)
  if (params) {
    params = filter_null(params);
    if (method === ‘POST‘ || method === ‘PUT‘) {
      if (toType(params) == ‘object‘) {
        params = JSON.stringify(params);
      }
      r 
 
= r.send(params)
    } else if (method == ‘GET‘ || method === ‘DELETE‘) {
      r = r.query(params)
    }
  }
  r.end(function(err, res) {
    if (err) {
      alert(‘api error, HTTP CODE: ‘ + res.status);
      return;
    };
    if (res.body.success == true) {
      if (success) {
        success(res.body);
      }
    } else {
      if (failure) {
        failure(res.body);
      } else {
        alert(‘error: ‘ + JSON.stringify(res.body));
      }
    }
  });
};
// 返回在vue模板中的調用接口
export default {
  get: function(url, params, success, failure) {
    return _api_base(‘GET‘, root + ‘/‘ + url, params, success, failure)
  },
  post: function(url, params, success, failure) {
    return _api_base(‘POST‘, root + ‘/‘ + url, params, success, failure)
  },
  put: function(url, params, success, failure) {
    return _api_base(‘PUT‘, root + ‘/‘ + url, params, success, failure)
  },
  delete: function(url, params, success, failure) {
    return _api_base(‘DELETE‘, root + ‘/‘ + url, params, success, failure)
  },
}

第三步 編寫main.js

import api from ‘./config/api‘;

Vue.prototype.$api = api;

第四步:編寫模板

<template>
  <div>
    <h1 class="logo">cnodejs Api Test</h1>
    <ul class="list">
      <li v-for="item in lists" v-text="item.title"></li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      lists:[]
    }
  },
  created () {
    // 組件創建完後獲取數據，這裏和1.0不一樣，改成了這個樣子
    this.get_data()
  },
  methods: {
    get_data: function(params) {
      var v = this
      if (!params) params = {}
      // 我們這裏用全局綁定的 $api 方法來獲取數據，方便吧~
      v.$api.get(‘topics‘, params, function(r) {
        v.lists = r.data
      })
    },
  },
}
</script>

vue的ajax