vue最简单的入门教程+实战+Vue2+VueRouter2+w

推荐我的vue教程：VUE系列教程目录

前言

通过前面几篇教程，我们已经顺利搭建起来了项目，并且已经组建好路由了，安装了我们需要的sass的模板。本章节，我们需要做一个列表页面，为了方便起见，决定使用获取 http://cnodejs.org/api 的公开API，渲染出来。

nodejs的公开API解读

进入我放置的连接后，看到的如图：

我们决定采用主题首页，其实我们在刚进入这个页面时会有不知道这是什么意思的疑问，比如这里写以下 api 路径均以 https://cnodejs.org/api/v1 为前缀，靠，这是什么？主题---get /topics 主题首页这又是什么意思？

如果你再点开示例：/api/v1/topics:

靠，这又是什么？

其实我在刚刚入VUE时，他们只是告诉我：去自己用nodejs的公开API渲染一个页面，这是nodejs的公开API地址。没人告诉我这个是个什么东西，只是说你自己去看吧！（然后我就傻不拉几的一边呆着去了）看到这个满是疑问。

对于不了解通过数据渲染页面的同学来说，简直不能理解，但是坑总是有人爬出来的，然后告诉你们这里有坑请注意（我是不是很高大上？），在这里讲害怕大家不能理解，我就简单提提，在把准备工作做完我会进行详细的讲解，这里说以下 api 路径均以 https://cnodejs.org/api/v1 为前缀意思是：你请求nodeAPI上的页面时所有的请求地址最前面是https://cnodejs.org/api/v1东西。

假设你要请求主题首页，你看他写的get /topics 主题首页，你就发送get请求，请求的地址是https://cnodejs.org/api/v1/topics，这样你就把有关主题首页的数据就请求过来了。

到这大家应该大概明白了这个页面想表达的意思，如果还不明白，那你就继续往下看，结合后面的内容进行相应的思考。

制作列表页面

对nodejs的公开API进行示例解读后，我们就要开始制作列表页面了，我们打开src/page/index.vue文件，在这里写入下面的代码：

<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:[{
        id:1,
        title:"test title 1"
      },{
        id:2,
        title:"test title 2"
      }]
    }
  }
}
</script>

如上，我们通过自己写的两组数据，很轻松的将页面渲染成功了。通过浏览器，我们可以看到效果。

在这里如果你看不懂没关系，你可以现在去官网了解了解一些简单的东西，比如模板语法，条件渲染，列表渲染等，你先灌灌耳音，这个方便你对后面的代码的理解。当然如果你有足够的耐心，你可以等待到我出对初始项目的解说也可以（但是这就得看我的心情了）

既然出来了，得配合点css

如果你不想看有关css的你可以调到下一个标题，也不会错过什么，只是错过了VUE怎么引用css（随便啦）

这里，我着重强调的不是css如何去写，而是我的组织项目的结构，我感觉我组织得还是很不错的。

新建文件，src/style/scss/_index.scss

代码走起：

.logo {color: red;}
.list {
  line-height: 2;
  li {border-bottom: 1px solid #ddd;}
}

然后在src/style/style.scss中引用新建的，输入

@import "scss/index";

然后，我们就可以在浏览器中，看到带样式的列表了。

我的习惯是，一个文件，一个样式，文件位于src/page/文件夹下面，样式位于src/style/scss下面。文件和样式同名。如果文件位于子目录，如src/page/user/pay.vue，那么，对应的scss文件就是src/style/scss/user/_pay.scss这样。

每一个团队的规范都是不一样的，都是各有所长的，重要的是：条理性。

调用node-api的准备工作

终于到了调用api的准备阶段了，好紧张啊！

安装superagent组件

在VUE中要请求接口，就必须有相对应的组件。如果你使用过jQuery，应该熟悉其中的AJAX方法。当然，在vue中，我们就不考虑使用jquery了。我们使用superagent这个组件。

还记得怎么安装吗？我们首先跳转到项目根目录，然后输入npm install superagent -D进行安装。

编写api.js文件

安装完superagent这个组件后，就该编写api.js了，还记得api.js吗？在我们搭建目录的时候，在src/config/api.js找到它。大家一定会疑问这个文件是来干什么的？

其实这是一个存放我们封装的调用请求的方法，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)
  },
}

目前，我们测试cnodejs.org的接口，我调整得可以使用。实际上在其他的接口项目中，这个是需要调整的，要调整到你的项目合适的代码。主要是根据接口返回的内容进行各种判断和处理，其中主要的框架代码是不用动的。

如果你JS基础过硬，一看就懂，如果不行，就慢慢看，慢慢理解吧。这里我提供它的调用方式：

// 请求类型你看代码就知道：GET，POST，PUT，DELETE
vue.[调用api.js的绑定的方法名].[请求类型]('请求的配置API接口地址的后缀', params（参数）, function(r) {
    // 请求完接口后的数据都存放在回调函数的参数中，这里我们以r为回调函数的参数
})

实在看不懂也没有关系，你不需要知道它的内部原理只需要知道怎么调用就可以了。

调用api.js

既然写了api.js，我们是不是需要把它放在全局环境它才能被任何需要请求的VUE模板所调用，这里大家如果有看过官方文档的一定知道，如果没看过你就只需要知道这么做就行了。

记住没人会告诉你使用筷子和手机的原理是什么，但是你还是会用筷子和手机

在VUE中引入全局环境时我们需要把它放在main.js中，所以首先，我们编辑 src/main.js，引用src/config/api.js。如下：

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

插入这两行代码，就引用好了api.js，并且，把它绑定到了全局，然后我们就可以在各种地方使用这个文件了。

可能部分朋友不知道插入到文件的哪里去。我这里放上main.js的全部代码：

// 1.引用 vue 没什么要说的
import Vue from 'vue'
// 3.引用路由
import VueRouter from 'vue-router'
// 光引用不成，还得使用
Vue.use(VueRouter)
// 2.入口文件为 src/App.vue 文件 所以要引用
import App from './App.vue'
// 4.引用路由配置文件
import routes from './config/routes'
// 5.引用API文件
import api from './config/api'
// 6.将API方法绑定到全局
Vue.prototype.$api = api
// 使用配置文件规则
const router = new VueRouter({
  routes
})
// 跑起来吧
new Vue({
  router,
  el: '#app',
  render: (h) => h(App)
})

其实留心的小伙伴会发现，我在上一篇文章时已经把api.js引用了，当时我并没有说明原因，这里讲解后大家的疑问应该就打开了。

渲染列表

调用node-api的准备工作完成后，就该进行node-api的调用和渲染了，再次编辑src/page/index.vue文件，代码如下：

<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不一样，改成了这个样子，这个就是VUE生命周期的创建完成周期
    this.get_data()
  },
  methods: {
    get_data: function(params) {
      if (!params) params = {}
      // 我们这里用全局绑定的 $api 方法来获取数据，方便吧~
      this.$api.get('topics', params, r => {
        this.lists = r.data
      })
    }
  }
}
</script>

这里对于没有理解api.js的同学来说，这段代码：

get_data: function(params) {
      if (!params) params = {}
      // 我们这里用全局绑定的 $api 方法来获取数据，方便吧~
      this.$api.get('topics', params, r => {
            this.lists = r.data
      })
}

调用api.js的方法名我们在全局绑定的是$api方法，我们需要请求node-API的主题首页：使用get方法，https://cnodejs.org/api/v1前缀在api.js中配置了：

// 配置API接口地址
var root = 'https://cnodejs.org/api/v1';

node-API的主题首页需要的topics，也在全局绑定的是$api方法中作为参数传递通过api.js中的export default {}抛出的方法在return中return _api_base('DELETE', root + '/' + url, params, success, failure)的root + '/' + url（即示例是'https://cnodejs.org/api/v1' + '/' + 'topics'）进行请求的拼接。

到这里大家的所有疑问应该得到解答了。

保存后，我们在浏览器中，就可以看到渲染出来的列表了。如下图所示：

小结：

通过本节的学习，我们已经顺利的从接口获取到数据，并且渲染到我们的页面当中了。这其实已经解决了绝大多数的问题了。

1. 如何新建一个js文件，并且把这个文件引用，然后绑定到全局

2. 学习理解superagent插件。
3. 如何在vue模板中调用绑定的方法。
4. 组件渲染完成时，执行函数。即created()，VUE生命周期的创建完成周期

到了这里新手也大都饱满了大致的轮廓，如果有对我所说的上面四项有疑问的还是希望去，官网看看，在官网上产生疑问，再到我这里了解。因为只有配合各种各样的辅助材料你才能彻底的自己明白到底这是怎么弄的，不要妄自听信一家之言，博采众议是一个非常好的习惯。

提示：在最近几天我会慢慢附上VUE系列教程的其他后续篇幅，后面还有精彩敬请期待，请大家关注我的专题：web前端。如有意见可以进行评论，每一条评论我都会认真对待。