疾速构建一个运用axios的vue应用程序

2019年8月31日 146次阅读 来源: 蒙朦

这篇文章报告了怎样疾速构建一个vue顺序，并运用axios从长途猎取数据。
这是原文章的纵贯门

通常情况下，在构建JavaScript应用顺序时，会从长途猎取数据或运用API。我近来研讨了一些公用API，发现有许多很酷的东西能够用在这些猎取到的数据上。

我将演示怎样构建一个简朴的消息app，它将显现当天的热点消息，还许可用户经由过程感兴趣的种别举行过滤。我们将从纽约时报API猎取数据。能够在这里找到本教程的完全代码。

下面是终究app的效果：
《疾速构建一个运用axios的vue应用程序》

要运用本教程，你将须要相识基础的Vue.js学问。这是一个vue教程直达。教程将运用ES6语法。

项目构造

我们将只用2个文件来坚持项目简约：

./app.js
./index.html

app.js包括全部app的逻辑，index.html包括全部app的界面。

我们从index.html最先：

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset="utf-8">
        <title>最巨大的消息app</title>
    </head>
    <body>
        <div class="container" id="app">
            <h3 class="text-center">Vue消息</h3>
        </div>
    </body>
</html>

然后，在index.html的底部，在</body>标签之前，引入Vue.js和app.js：

<script src="https://unpkg.com/vue"></script>
<script src="app.js"></script>

可选地，能够引入Foundation，以应用一些预制款式，使我们的界面看起来更好一点。 将其包括在<head>标签中：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">

建立一个简朴Vue应用顺序

起首，我们将在元素div#app上建立一个新的Vue实例，并运用一些测试数据来模仿消息API的相应：

// ./app.js
const vm = new Vue({
    el: '#app',
    data: {
        results: [
            {title: '第一条消息', abstract: '我是第一条消息'},
            {title: '接着是第二条', abstract: '我是第二条消息'},
            {title: '然后是第三条', abstract: '我是第三条消息'},
            {title: '我是末了一条了', abstract: '我是第四条消息'}
        ]
    }
});

我们经由过程el参数通知Vue要挂载的元素，并经由过程data参数指定我们的app将运用哪些数据。

要在我们的应用顺序中显现模仿数据，能够在#app元素中写入:

<!-- ./index.html -->
<div class="columns medium-3" v-for="result in results">
    <div class="card">
        <div class="card-divider">
            {{ result.title }}
        </div>
        <div class="card-section">
            <p>{{ result.abstract }}.</p>
        </div>
    </div>
</div>

v-for指令用于衬着我们的列表。我们还运用双花括号来显现每一个result的内容。

我们如今有一个基础的规划构造了：
《疾速构建一个运用axios的vue应用程序》

从API猎取数据

要运用纽约时报API，须要取得一个API密钥。所以假如你没有的话，点击这里，注册以猎取Top Stories API的API密钥（注册时API一栏挑选Top Stories API）。

运用Ajax请乞降处置惩罚相应

Axios是一个基于promise的HTTP客户端，用于发送Ajax要求。它供应了简朴而雄厚的API。它与fetch API异常类似，但不须要为旧版浏览器增加一个polyfill，另有一些其他的纤细的处所。

引入axios：

<!-- ./index.html -->
<script src="https://cdn.bootcss.com/axios/0.16.0/axios.min.js"></script>

如今，一旦我们的Vue应用顺序挂载(mounted)，我们就发送要求猎取top stories的列表：

// ./app.js
const vm = new Vue({
    el: '#app',
    data: {
        results: []
    },
    mounted() {
        axios.get("https://api.nytimes.com/svc/topstories/v2/home.json?api-key=your_api_key")
        .then(response => {
            this.results = response.data.resultes})
    }
});

注重：将your_api_key替换为之前注册取得的API key。

如今我们能够在我们的主页上看到消息列表。不要忧郁不雅观的界面，我们会在背面处置惩罚：
《疾速构建一个运用axios的vue应用程序》

经由过程Vue Devtools来看看API的相应：
《疾速构建一个运用axios的vue应用程序》

为了使我们的项目越发整齐，可复用，我们将做一些小的重构，并引见一个协助函数来构建我们的URL。 我们还将注册getPosts作为我们应用顺序的一个要领((将其增加到vue对象的method参数中)：

// ./app.js
const NYTBaseUrl = "https://api.nytimes.com/svc/topstories/v2/";
const Apikey = "your_api_key";

function buildUrl(url) {
    return NYTBaseUrl + url + ".json?api-key=" + Apikey;
}

const vm = new Vue ({
    el: '#app',
    data: {
        results: []
    },
    mounted () {
        this.getPosts('home');
    },
    methods: {
        getPosts(section) {
            let url = buildUrl(section);
            axios.get(url).then((response) => {
                this.results = response.data.results;
            }).catch(error => {
                console.log(error);
            });
        }
    }
});

我们能够经由过程引入盘算属性(computed property)对API取得的原始效果举行一些修正，从而对我们的视图的表面举行一些变动。

const vm = new Vue ({
    el: '#app',
    data: {
        results: []
    },
    mounted () {
        this.getPosts('home');
    },
    methods: {
        getPosts(section) {
            let url = buildUrl(section);
            axios.get(url).then((response) => {
                this.results = response.data.results;
            }).catch(error => {
                console.log(error);
            });
        }
    },
    computed: {
        processedPosts() {
            let posts = this.results;
            
            //增加image_url属性
            posts.map(post => {
                let imgObj = post.multimedia.find(media => media.format === "superJumbo");
                post.image_url = imgObj ? imgObj.url : "http://placehold.it/300x200?text=N/A";
            });
            
            //将数据分组
            let i, j, chunkedArray = [], chunk = 4;
            for (i = 0, j = 0; i < posts.length; i += chunk, j++) {
                chunkedArray[j] = posts.slice(i, i + chunk);
            }
            return chunkedArray;
        }
    }
});

在上述代码中，在盘算属性processedPosts中，我们附加一个image_url属性给每一个消息对象：
我们经由过程轮回遍历API的results，并经由过程在multimedia数组中对单个元素搜刮来查找所需花样的媒体，然后将该媒体的URL赋值给image_url属性。在媒体不可用的情况下，我们将默许图片地点设置为来自Placehold.it的图象。

我们还写了一个轮回来将我们的results数组分为四个一组，这将会处置惩罚我们前面看到的不雅观界面。

Note: 你也能够运用像Lodash如许的库举行分块。

盘算属性异常合适支配数据。每当我们须要将results数组分组时，我们能够将它定义为一个盘算属性，根据我们的志愿运用它，由于Vue会在results修改时自动更新processedPosts。

盘算属性也基于它们的依靠关联举行缓存，因而只需results不转变，processedPosts属性将返回本身的缓存值。这将有助于机能，特别是在举行庞杂的数据操纵时。

接下来，我们在index.html中修正我们的html标签，以显现我们的盘算效果：

<!-- ./index.html -->
<div class="row" v-for="posts in processedPosts">
    <div class="columns large-3 medium-6" v-for="post in posts">
        <div class="card">
            <div class="card-divider">
                {{ post.title }}
            </div>
            <a :href="post.url" target="_blank">
                <img :src="post.image_url">
            </a>
            <div class="card-section">
                <p>{{ post.abstract }}</p>
            </div>
        </div>
    </div>
</div>

如今我们的app看起来雅观一些了：
《疾速构建一个运用axios的vue应用程序》

消息列表组件

组件用于将应用顺序模块化。“消息列表”能够重构为一个组件，比方，假如我们的app生长起来，而且决议在别的处所也运用消息列表，组件将会使这变得很轻易。

// ./app.js
Vue.component('news-list', {
    props: ['results'],
    template: `
        <section>
            <div class="row" v-for="posts in processedPosts">
                <div class="columns large-3 medium-6" v-for="post in posts">
                    <div class="card">
                        <div class="card-divider">
                        {{ post.title }}
                        </div>
                        <a :href="post.url" target="_blank"><img :src="post.image_url"></a>
                        <div class="card-section">
                            <p>{{ post.abstract }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    `,
    computed: {
        processedPosts() {
            //...
        }
    }
});

在上面的代码中，我们注册了一个全局组件：
Vue.component(tagName，options)。发起在定义tagName时运用连字符，如许它们不会与规范HTML标签发生冲突。

我们来简朴看一下其他几个参数：

  • props：这是一个我们愿望从父作用域通报给组件的数组。 我们通报了results，由于我们从主应用顺序实例加载组件。

  • template：在这里我们定义消息列表的html。注重，我们将列表包装在<section>标签中。这是由于组件须要有一个零丁的根元素，而不是多个元素。

调解我们的html代码以运用我们的消息列表组件，并通报results数据：

<!-- ./index.html -->
<div class="container" id="app">
    <h3 class="text-center">Vue消息</h3>
    <news-list :results="results"></news-list>
</div>

注重：组件也能够建立为单个文件（.vue文件），然后由构建东西（如webpack）剖析。虽然这超出了本教程的局限，但发起用于更大或更庞杂的应用顺序。

完成种别过滤

为了使我们的应用顺序越发雄厚，我们如今能够引入种别过滤器，以许可用户仅显现某些种别的消息。

起首，我们注册如今应用顺序里展现的以及行将会展现的种别列表：

const SECTIONS = "home, arts, automobiles, books, business, fashion, food, health, insider, magazine, movies, national, nyregion, obituaries, opinion, politics, realestate, science, sports, sundayreview, technology, theater, tmagazine, travel, upshot, world";

const vm = new Vue({
    el: '#app',
    data: {
        results: [],
        //设置展现的种别数组
        sections: SECTIONS.split(', '),
        //设置默许的展现种别
        section: 'home',
    },
    mounted () {
        this.getPosts(this.section);
    },
    //...
});

接下来，我们在div#app容器中增加：

<!-- ./index.html -->
<section class="callout secondary">
    <h5 class="text-center">分类</h5>
    <form>
        <div class="row">
            <div class="large-6 columns">
                <select v-model="section">
                    <option v-for="section in sections" :value="section">
                        {{ section }}
                    </option>
                </select>
            </div>
            <div class="medium-6 columns">
                <a @click="getPosts(section)" class="button expanded">我要看消息</a>
            </div>
        </div>
    </form>
</section>

当单击“我要看消息”按钮时，触发所选分类的getPosts要领。

终究demo

我决议增加一些小的（可选的）交互，使应用顺序体验更好一些，如引入加载图象。

能够看看以下效果：
https://codepen.io/mengmengpr…

也能够在此处检察及时版本。

末端

在本教程中，我们已学会了怎样从头最先建立一个Vue.js项目，怎样运用axios从API猎取数据，以及怎样运用组件和盘算属性去处置惩罚数据。

如今我们有一个功用完全的基于API效劳构建的Vue.js 2.0应用顺序。经由过程引入其他API能够举行大批的革新。比方，我们能够：

  • 运用Buffer API从分类中自动分列交际媒体。

  • 运用Pocket API标记文章稍后浏览。

  • 等等

该项目标全部代码也托管在Github上，因而你能够克隆，运转并举行革新。

这篇文章关于vue初学者是一个不错的教程，它报告了怎样疾速的搭建起一个vue应用顺序，其他细致的vue特征，能够去官网进修以后基于本项目举行革新。

    原文作者：蒙朦
    原文地址: https://segmentfault.com/a/1190000009192118
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞