add a page : ajax best practice to me

Author: MagicDev090

package.json

@@ -13,7 +13,9 @@
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
+    "axios": "^0.15.3",
     "element-ui": "^1.1.2",
+    "lodash": "^4.17.4",
     "normalize.css": "^5.0.0",
     "vue": "^2.1.0",
     "vue-router": "^2.1.1"

src/components/common/Container.vue

@@ -2,7 +2,15 @@
   <div id="container">
     <TopBar></TopBar>
     <transition>
-      <router-view></router-view>
+
+      <el-row type="flex" class="row-bg" justify="center">
+        <el-col :span="20"><router-view></router-view></el-col>
+        <!--<el-col :span="6"><router-view></router-view></div></el-col>-->
+      </el-row>
+
+      <!--<el-row>
+        <el-col :span="23"><router-view></router-view></div></el-col>
+      </el-row>-->
     </transition>
   </div>
 </template>

src/components/common/NavMenu.vue

@@ -3,11 +3,12 @@
     <div class="logo">
       <router-link to="/">
         <!--<img src="../../assets/images/logo.svg" />-->
+        <p>星辰</p>
       </router-link>
     </div>
     <el-submenu index="1">
       <template slot="title"><i class="el-icon-menu"></i>导航一</template>
-      <el-menu-item index="1-1"><router-link to="/page1" class="nav-link">二级导航一</router-link></el-menu-item>
+      <el-menu-item index="1-1"><router-link to="/question" class="nav-link">Ajax Demo</router-link></el-menu-item>
       <el-menu-item index="1-2"><router-link to="/page2" class="nav-link">二级导航二</router-link></el-menu-item>
     </el-submenu>
     <el-menu-item index="2"><router-link to="/page3" class="nav-link"><i class="el-icon-message"></i>导航二</router-link></el-menu-item>

src/components/common/style.scss

@@ -148,8 +148,11 @@
     height: 60px;
     text-align: center;
     background-color: #20202A;
-    img {
-      margin-top: 12px;
+    p {
+      margin: 0;
+      padding-top: 20px;
+      font-size: 20px;
+      color: white;
     }
   }
   .nav-link {

src/pages/home/home.vue

@@ -1,6 +1,6 @@
 <template lang="html">
   <div class="home">
-    <h1>这是首页</h1>
+    <!--<h1>这是首页</h1>-->
     <!--<img src="../assets/images/home.jpg" width="100%" />-->
     <p>首页</p>
   </div>

src/pages/question/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <el-form ref="form" :model="yesno" label-width="80px">
+      <el-form-item label="问题:">
+        <el-input v-model="yesno.question"></el-input>
+        <p v-bind:style="{ color: yesno.answerColor }">{{ yesno.answer }}</p>
+        <img :src="yesno.img">
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import axios from 'axios'
+
+export default {
+  props: ['msg'],
+  data: function () {
+    return {
+      yesno: {
+        question: '',
+        answer: '提个对错问题？',
+        answerColor: null,
+        img: ''
+      }
+    }
+  },
+  watch: {
+    'yesno.question': function (newQuestion) {
+      this.yesno.answer = '正在等你停止输入'
+      this.yesno.img = ''
+      this.getAnswer()
+    }
+  },
+  methods: {
+    getAnswer: _.debounce(
+      function () {
+        let vm = this.yesno
+        if (vm.question.indexOf('?') === -1) {
+          vm.answer = '需要一个英文问号结尾. ;-)'
+          return
+        }
+        vm.answer = '正在想...'
+        axios.get('https://yesno.wtf/api/')
+        .then(function (response) {
+          vm.answer = _.capitalize(response.data.answer)
+          vm.img = _.capitalize(response.data.image)
+          vm.answerColor = 'green'
+        })
+        .catch(function (error) {
+          vm.answer = 'Error! Could not reach the API. ' + error
+          vm.answerColor = 'red'
+        })
+      },
+    // 这是我们为用户停止输入等待的毫秒数
+    500
+    )
+  }
+}
+</script>
+<style>
+
+</style>

src/routes.js

@@ -2,5 +2,9 @@ export default [
   {
     path: '/',
     component: resolve => require(['./pages/home/home.vue'], resolve)
+  },
+  {
+    path: '/question',
+    component: resolve => require(['./pages/question'], resolve)
   }
 ]