使用Vue構建Ionic混合APP系列教程（三）：服務和Http請求

阿新 • • 發佈：2019-02-03

當學習一個新框架的時候，特別是你之前已經使用一個框架很久了，很自然的你會試圖用之前使用的框架來理解一些別的框架的原理。

正如我上一篇文章提到的，Angular是一個結構嚴密的框架，提供了一切開箱即用的東西，不管如何都會有一個正確的方法去解決問題。Vue的結構並不是很嚴密，也不是什麼東西都提供好了，給了你更靈活的選擇去按照你希望的方式組織專案的結構。Angular是設計用來處理你的應用所有方面的事情，Vue基本上只關心如何展示你的應用。

在這篇教程，我們會看看如何在Vue裡建立Services或Providers，通過Http請求獲取一些資料。不過這是一個將Angular的概念投射到Vue上面的例子, 稍後我們將在這裡詳細地討論。在這篇教程裡我們會通過Reddit API

來post請求一些資料。

開始

在前面的教程中我已經介紹了使用Vue建立一個Ionic應用的基礎知識, 所以我們將很快地通過這裡的安裝步驟。如果您不熟悉這些步驟, 我建議您在繼續之前先閱讀前面的兩個教程。

建立一個Vue應用：

vue init webpack service-http-example

執行下面的命令列：

cd service-http-example

npm install

npm run dev

通過修改 index.html 嚮應用程式新增Ionic：

<!DOCTYPE html>
<html>
  <head 
>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no" 
>
    <meta name="msapplication-tap-highlight" content="no">
    <title>service-example</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="https://unpkg.com/@ionic/[email protected]/dist/ionic.js"></script>
  </body>
</html>

Angula服務 vs Vue

在Ionic/Angular裡從一些伺服器獲取資料，我們通常會建立一個服務（service/provider）來為我們做這些工作，我們會用內建的Http API 來獲取資料。然後我們會在需要使用這些資料的元件裡注入這個服務，再使用我們在服務裡建立的方法。

這裡沒有什麼其他需要考慮的東西，不過如果在Ionic/Vue要做同樣的事情，就沒有這麼肯定了。

因為我們是從Angular轉過來的，所以可能我們想在Vue裡建立一個”provider”，然後用Vue版本的“Http”來獲取資料。但是在Vue裡沒有“provider”或“service”或“injectable”這些概念，而且也沒有預設的Http請求庫。這些不是Vue框架自己關心的事情。

所以怎麼辦？你可以想怎麼做就怎麼做，不過當然了，總會有些公認的/最佳實踐的做法。我們會採用“Angular式”的方法，建立類似Angular裡的provider的東西。

在Vue裡建立服務

我們建立一個services資料夾，在裡面我們會手動的建立我們的服務——這個例子裡，我們會建立一個reddit服務。

建立資料夾src/services
在這個資料夾下面建立reddit.js：

import Vue from 'vue';

export default {

    getPosts(){
        // do something
        return [];
    }

}

你可以看到，大致和Angular是相似的，不過沒有使用Angular特別的語法比如@Injectable，我們只是用了ES6語法。通過在這裡匯出方法，我們可以在任何需要使用的地方引入它們。

修改src/components/HelloWorld.vue如下：

import RedditService from '../services/reddit';

export default {
  name: 'HelloWorld',
  data () {
    return {
      posts: []
    }
  },
  created() {
    this.posts = RedditService.getPosts();
  }
}

就像在Angular裡匯入一個服務，我們也在這裡匯入了我們剛剛建立的服務——和Angular不同的是沒有別的多餘的步驟了。一旦我們匯入了服務，我們就可以使用它的方法。在這裡我們在生命週期的created（一旦元件被建立就會執行）階段使用了服務的方法，它會把getPosts()結果的值賦給 this.posts。

Http請求

我們有了自己的服務，不過現在它什麼也沒做。我們修改一下讓它從Reddit為我們獲取一些資料。再說一次，Vue不關心你的應用的輸入和輸出，所以它也沒有提供Vue的Http請求的方式。

我們可以使用庫來幫助我們做網路請求（如果你喜歡，你也可以只用javascript原生請求）。兩個流行的庫是 vue-resource（幾乎是預設的）和 axios。如果你想用其他的你只需要把他們新增到你的Vue專案——我們會使用vue-resource。

安裝vue-resource：

npm install vue-resource --save

修改src/main.js 如下：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import VueResource from 'vue-resource'

Vue.config.productionTip = false

Vue.config.ignoredElements = [
    'ion-app',
    'ion-header',
    'ion-navbar',
    'ion-title',
    'ion-content',
    'ion-button',
    'ion-list',
    'ion-item'
];

Vue.use(VueResource);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

安裝vue-resource之後我們在 main.js 引入了它，然後我們設定應用使用它：

Vue.use(VueResource);

請注意, 我們還添加了 ignoredElements陣列以便我們使用Ionic元件不會造成任何問題。現在，我們有了一種方式來做HTTP 請求。

修改src/services/reddit.js 如下：

import Vue from 'vue';

export default {

    getPosts(){
        return Vue.http.get('https://www.reddit.com/r/gifs/top/.json?limit=20&sort=hot');
    }

}

修改src/components/HelloWorld.vue如下：

import RedditService from '../services/reddit';

export default {
  name: 'HelloWorld',
  data () {
    return {
      posts: []
    }
  },
  created() {
    RedditService.getPosts().then(response => {
      this.posts = response.body.data.children;
    });
  }
}

我們的服務現在可以獲取資料了，當created生命週期被觸發，它會將請求結果賦給成員變數posts。現在我們可以修改我們的模板來展示我們獲取的資料。

修改src/components/HelloWorld.vue如下：

<template>
  <ion-app>
    <ion-header>

        <ion-navbar>
            <ion-title>REDDIT!</ion-title>
        </ion-navbar>

    </ion-header>

    <ion-content>

      <ion-list>
        <ion-item v-for="post in posts" v-bind:key="post.data.id">
          {{post.data.title}}
        </ion-item>
      </ion-list>

    </ion-content>
  </ion-app>
</template>

如果你現在開啟你的瀏覽器看一下，應該是這樣的：
這裡寫圖片描述

總結

當學習Vue的時候有一點很重要，特別是從Angular背景過來的開發者，記住儘管它們很相似，但是它們仍然是使用不同的方式來實現的不同的兩個框架，你不能將你知道的Angular的東西直接用在Vue上。

使用Vue構建Ionic混合APP系列教程（三）：服務和Http請求

開始

Angula服務 vs Vue

在Vue裡建立服務

Http請求

總結

使用Vue構建Ionic混合APP系列教程（三）：服務和Http請求

使用Vue構建Ionic混合APP系列教程（四）：資料儲存

使用Vue構建Ionic混合APP系列教程（二）：導航

VSphere系列教程（三）：ESXI 主機設定開機自動啟動虛擬機器

API 系列教程（三）：使用 API Resource 來建立自定義 JSON 格式的 API

webpack4系列教程（三）：自動生成專案中的HTML檔案

pyspider 爬蟲教程（2）：AJAX 和 HTTP

API 系列教程（二）：結合 Laravel 5.5 和 Vue SPA 基於 jwt-auth 實現 API 認證

API 系列教程（一）：基於 Laravel 5.5 構建和測試 RESTful API

vue移動音樂app開發學習（三）：輪播圖組件的開發

建站系列教程（三）--如何提高網站搜尋排名？

Keil（MDK-ARM）系列教程（三）_工程目標選項配置（Ⅰ）

JDBC系列教程（三）---語句

Vue.js教程（三）：v-if條件判斷

Java NIO系列教程（三） Buffer

OAuth 2.0系列教程（三）角色

系列教程（1）：學習如何用C#編寫一個軟渲染引擎

webpack4系列教程（四）：處理專案中的資原始檔（一）

webpack4系列教程（二）：建立專案，打包第一個JS檔案

webpack4系列教程（一）：初識webpack

使用Vue構建Ionic混合APP系列教程（三）：服務和Http請求

開始

Angula服務 vs Vue

在Vue裡建立服務

Http請求

總結

相關推薦