🚧 增加评论列表的数据接收（来自自己blog的接口）

Author: bai3

package.json

@@ -14,9 +14,11 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "axios": "^0.17.1",
     "element-ui": "^2.0.7",
     "vue": "^2.5.2",
     "vue-amap": "^0.4.4",
+    "vue-axios": "^2.0.2",
     "vue-lazyload": "^1.1.4",
     "vue-router": "^3.0.1"
   },

src/components/MessageList.vue

@@ -1,41 +1,32 @@
 <template>
  <div>
-    <div class="main" v-for="(todo,index) in comments" v-if="index < 5">
+    <div class="main" v-for="todo in comments">
       <div style="margin-bottom: 15px">
         <div style="display: inline-block">
          <img src="../assets/head.svg" style="width:35px">
         </div>
         <div class="info" style="display: inline-block">
         <span style="font-size: 15px;color: #333;">{{todo.name}}</span><br/>
-        <span style="font-size: 12px;color: #969696;">{{comments.length-index+"楼."}}{{todo.create_time|data}}</span>
+        <span style="font-size: 12px;color: #969696;">{{todo.id+"楼."}}{{todo.create_time|data}}</span>
         </div>
       </div>
       {{todo.content}}
     </div>
-    <div class="block" style="margin-top:30px">
+    <!-- <div class="block" style="margin-top:30px">
       <el-pagination
         layout="prev, pager, next"
         :total="comments.length/.5"
         @current-change="changePage"
         :current-page="current">
-      </el-pagination>
+      </el-pagination> -->
     </div>
  </div>
 </template>
 <script>
 export default {
    /* eslint-disable */
     data() {
-      let comment = {
-            name: "白植熙",
-            content: "测试测试测试测试试测试测试测试测试测试测试测试测试测试测测试测试测试",
-            create_time: 1512997751,
-            id: 1
-      }
-      let comments = new Array;
-      for(let i = 0; i < 12; i++){
-          comments.push(comment)
-      }
+      let comments = [];
       return {
         comments,
         current: 1,
@@ -45,8 +36,16 @@ export default {
       changePage(val){
         console.log(`当前页: ${val}`);
         this.current = val;
+      },
+      getlist(){
+        alert('6666')
       }
     },
+   beforeCreate: function () {
+      this.$http("http://www.bai3.xyz/comment/getlist")
+          .then(response => {console.log(response);this.comments = response.data.reverse()})
+    },
+    
     filters: {
       // 时间戳过滤器
       data: function (input){

src/main.js

@@ -6,11 +6,13 @@ import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import 'element-ui/lib/index.js'
 import router from './router'
+import axios from 'axios'
+import VueAxios from 'vue-axios'
 
 Vue.config.productionTip = false
 
-Vue.use(ElementUI)
-
+Vue.use(ElementUI, axios, VueAxios)
+Vue.prototype.$http = axios
 /* eslint-disable no-new */
 new Vue({
   el: '#app',