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

    移动书包 2个月前 128次点击 来自 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 北京雏森科技有限公司