使用Vue构建Ionic混合APP(三):服务和Http请求

移动书包 7个月前 275次点击 来自 Vue

当学习一个新框架的时候,特别是你之前已经使用一个框架很久了,很自然的你会试图用之前使用的框架来理解一些别的框架的原理。

正如我上一篇文章提到的, Angular 是一个结构严密的框架,提供了一切开箱即用的东西,不管如何都会有一个正确的方法去解决问题。Vue的结构并不是很严密,也不是什么东西都提供好了,给了你更灵活的选择去按照你希望的方式组织项目的结构。Angular是设计用来处理你的应用所有方面的事情,Vue基本上只关心如何展示你的应用。

在这篇教程,我们会看看如何在Vue里创建 ServicesProviders ,通过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/core@0.0.2-20/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>

如果你现在打开你的浏览器看一下,应该是这样的:

QQ截图20180313220911.png

总结

当学习Vue的时候有一点很重要,特别是从Angular背景过来的开发者,记住尽管它们很相似,但是它们仍然是使用不同的方式来实现的不同的两个框架,你不能将你知道的Angular的东西直接用在Vue上。

目前暂无回复
关于 广告投放
©2016 - 2018 V4.1.6 Powered by 北京雏森科技有限公司