Vue2+VueRouter2+webpack 构建项目实战（四）：接通api，渲染列表

前端开发作者： 2024-08-20 20:50:02

通过前面几篇教程，我们已经顺利搭建起来了，并且已经组建好路由了。本章节，我们需要做一个列表页面，然后利用获取 http://cnodejs.org/api 的公开API，渲染出来。我们打开src/p

<template>
  div>
    h1 class="logo">cnodejs Api Test</h1ul ="list">
      li v-for="item in lists" v-text="item.title"></liul>
script>
export default {
  data() {
    return {
      lists:[{
        id:1,title:"test title 1
      },{
        id:2test title 2
      }]
    }
  }
}
>

@import "scss/index";

import api from './config/api'
Vue.prototype.$api = api

import Vue from 'vue'
import App from './App'
import router from './config/routes.js'

Vue.config.productionTip = false

import api from './config/api.js'
Vue.prototype.$api = api

new Vue({
  el: '#app'

// 配置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()
}
 参数过滤函数
 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) {
         o[key]
      }
    }
  }
  return o
}
/*
  接口处理函数
  这个函数每个项目都是不一样的，我现在调整的是适用于
  https://cnodejs.org/api/v1 的接口，如果是其他接口
  需要根据接口的参数进行调整。参考说明文档地址：
  https://cnodejs.org/topic/5378720ed6e2d16149fa16bd
*/
 _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((err,res) {
     (err) {
      alert('api error,HTTP CODE: ' + res.status);
      ;
    };
    if (res.body.success == true (success) {
        success(res.body);
      }
    } else {
       (failure) {
        failure(res.body);
      }  {
        alert('error: ' + JSON.stringify(res.body));
      }
    }
  });
};
 返回在vue模板中的调用接口
export default {
  get: (url,failure) {
    return _api_base('GET',root + '/' + url,failure)
  },post: return _api_base('POST',put: return _api_base('PUT',delete: return _api_base('DELETE',}

 {
      lists:[]
    }
  },created () {
    // 组件创建完后获取数据，这里和1.0不一样，改成了这个样子
    this.get_data()
  },methods: {
    get_data: function(params) {
      var v = this
      if (!params) params = {}
       我们这里用全局绑定的 $api 方法来获取数据，方便吧~
      v.$api.get('topics(r) {
        v.lists  r.data
      })
    },},}
>