vue最簡(jiǎn)單的前后端交互示例詳解

更新時(shí)間：2018年10月11日 09:24:50 作者：長(zhǎng)河漸落曉星沉

這篇文章主要介紹了vue最簡(jiǎn)單的前后端交互示例詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

一、學(xué)習(xí) vue 面臨的問(wèn)題

最近想學(xué)一門(mén)前端技術(shù)防身，看到博客園中寫(xiě) vue 的多，那就 vue 吧。都說(shuō) vue 的官方教程寫(xiě)得好，所以我就從官方教程開(kāi)始學(xué)習(xí)。官方教程說(shuō)“Vue (讀音 /vjuː/，類(lèi)似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用?！钡沁@個(gè)概念是個(gè)什么鬼？還是讓人一頭霧水嘛。而且我一開(kāi)始也沒(méi)有搞清楚 vue 的定位，只知道它是一個(gè)前端庫(kù)，但是確實(shí)不知道它的優(yōu)勢(shì)是什么，還以為它是一個(gè)學(xué)會(huì)就能一勞永逸的萬(wàn)能的框架呢。官方教程一開(kāi)始就講怎么綁定頁(yè)面上的元素和 JavaScript 中的數(shù)據(jù)，而且是雙向綁定，自動(dòng)更新，功能確實(shí)很強(qiáng)大。但是遲遲沒(méi)有講怎么和服務(wù)器端進(jìn)行交互，怎么獲取服務(wù)器端的數(shù)據(jù)。（后來(lái)經(jīng)過(guò)反復(fù)閱讀教程，才發(fā)現(xiàn)其實(shí)它一開(kāi)始就說(shuō)了“Vue 的核心庫(kù)只關(guān)注視圖層”，是我自己忽略了。）

二、最簡(jiǎn)單的前后段交互示例

吹再多的口水，也不如一個(gè)能運(yùn)行的示例來(lái)得實(shí)在。這個(gè)例子也是從 vue 的官方教程中抄來(lái)的。首先，先建立一個(gè) index.html 文件，編輯其內(nèi)容，如下：

<!DOCTYPE html>
<html>
<head>
 <title>My first Vue app</title>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
</head>
<body>
 <div id="watch-example">
  <p>
   Ask a yes/no question:
   <input v-model="question">
  </p>
  <p>{{ answer }}</p>
 </div>

 <script>
  var watchExampleVM = new Vue({
   el: '#watch-example',
   data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
   },
   watch: {
    // 如果 question 發(fā)生改變，這個(gè)函數(shù)就會(huì)運(yùn)行
    question: function (newQuestion, oldQuestion) {
     this.answer = 'Waiting for you to stop typing...'
     this.debouncedGetAnswer()
    }
   },
   created: function () {
    // `_.debounce` 是一個(gè)通過(guò) Lodash 限制操作頻率的函數(shù)。
    // 在這個(gè)例子中，我們希望限制訪問(wèn) yesno.wtf/api 的頻率
    // AJAX 請(qǐng)求直到用戶輸入完畢才會(huì)發(fā)出。想要了解更多關(guān)于
    // `_.debounce` 函數(shù) (及其近親 `_.throttle`) 的知識(shí)，
    // 請(qǐng)參考：https://lodash.com/docs#debounce
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
   },
   methods: {
    getAnswer: function () {
     if (this.question.indexOf('?') === -1) {
      this.answer = 'Questions usually contain a question mark. ;-)'
      return
     }
     this.answer = 'Thinking...'
     var vm = this
     axios.get('https://yesno.wtf/api')
      .then(function (response) {
       vm.answer = _.capitalize(response.data.answer)
      })
      .catch(function (error) {
       vm.answer = 'Error! Could not reach the API. ' + error
      })
    }
   }
  })
 </script>
</body>
</html>

然后使用 chromium 瀏覽器打開(kāi)這個(gè)文件。下面是運(yùn)行效果：

這里訪問(wèn)的后端是 https://yesno.wtf/api ，它傳回的數(shù)據(jù)時(shí) json 格式的，如果直接訪問(wèn)它，得到的結(jié)果如下：

https://yesno.wtf 這是一個(gè)神奇的網(wǎng)站，當(dāng)你對(duì)某件事拿不定注意，需要?jiǎng)e人推你一把時(shí)，可以訪問(wèn)它，它會(huì)隨機(jī)返回一個(gè) gif 動(dòng)畫(huà)，點(diǎn)頭表示 yes，搖頭表示 no，幫你做這個(gè)艱難的決定。直接訪問(wèn) https://yesno.wtf ，注意在地址欄中不帶 api 字樣，可以得到這樣的結(jié)果：

三、從這個(gè)示例，我學(xué)到了什么

首先，解答了我前面的疑惑，那就是怎么和后端交互。在這個(gè)示例中，它使用 axios 庫(kù)從 https://yesno.wtf/api 獲取數(shù)據(jù)。同時(shí)，在這個(gè)例子中，它還使用 lodash 限制刷新頻率。

其次，這個(gè)示例只有一個(gè) html 文件，在這個(gè)文件中，使用

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>

引入需要的 vue.js、 axios.js 和 lodash.js，不需要下載安裝一些有的沒(méi)的東西，不需要學(xué)習(xí)在服務(wù)器端運(yùn)行 JavaScript 的任何知識(shí)。本來(lái)嘛，我是準(zhǔn)備學(xué) .netcore 的，再讓我學(xué)個(gè) nodejs 我也覺(jué)得不科學(xué)嘛。

最后，我知道了學(xué)習(xí) vue 不是單純學(xué)習(xí) vue，還要學(xué)習(xí) axios.js 和服務(wù)器交互，真的要寫(xiě)個(gè)產(chǎn)品，還少不了漂亮的 UI 界面啥的，所以還要學(xué)習(xí)和 vue 配套的 UI 框架，看來(lái)學(xué)習(xí)的路還很長(zhǎng)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: