Vue&Axios Practice

Vue&Axios Practice

  1. Vue Practice

  2. Axios


1. HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    
    <title>The NYT API Demo</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/main.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div id="app" class="container">
        <h3 class="text-center" >Vue News</h3>
            <div class="row">
                <div class="col-md-6">
                    <select id="" name="" v-model="section">
                        <option v-for="section in sections " :value="section" v-text="section"></option>
                    </select>
                </div>
                <div class="col-md-6">
                    <a class="btn btn-primary" @click="getPosts(section)">Chocie Category</a>
                </div>
            </div>

            <news-list :results="results"></news-list>
    </div>

    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
    <script src="../bower_vendor/jquery/jquery.min.js"></script>
    <script src="../bower_vendor/axios/dist/axios.min.js"></script>
    <script src="./js/vue_fetchapi.js"></script>
</body>
</html>

2. Vue Code

var NYTBaseUrl = "https://api.nytimes.com/svc/topstories/v2/";
var ApiKey = "05e9bb2d25d64ff89d0a5680357852d5";

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

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"; // From NYTimes

var vm = new Vue({
    el: "#app",
    data: {
        results: [
            //{title: "the very first post", abstract: "lorem ipsum some test dimpsum"},
            //{title: "then there was the second", abstract: "lorem ipsum some test dimsum"},
            //{title: "third time's a charm", abstract: "lorem ipsum some test dimsum"},
            //{title: "four the last time", abstract: "lorem ipsum some test dimsum"}
        ],
        sections: SECTIONS.split(", "), 
        section: "home",
    },
    mounted() {
        this.getPosts(this.section);
    },
    methods: {
        getPosts(section) {
            var url = buildUrl(section);
            axios.get(url)
                .then((response) => {
                    //console.log(response);
                    //console.log(response.status);
                    this.results = response.data.results;
                })
                .catch(error => { console.log(error); });
        }
    },
    components: {
        "news-list": {
            template: `
                <section>
                <div class="row" v-for="posts in processedPosts">
                    <div class="col-md-3" v-for="post in posts">
                        <div class="thumbnail">
                            <div class="caption">
                                <h4 v-text="post.title"></h4>

                            </div>
                            <a :href="post.url" target="_blank"><img :src="post.image_url" class="img-responsive"></a>
                            <div class="caption" >
                                <p v-text="post.abstract"></p>
                            </div>

                        </div>
                    </div>
                </div>
                </section>
            `,
            props: ["results"],
            computed: {
                processedPosts() {
                  let posts = this.results;

                  // Add image_url attribute
                  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";
                  });

                  // Put Array into Chunks
                  let i, j, chunkedArray = [], chunk = 4;
                  for (i=0, j=0; i < posts.length; i += chunk, j++) {
                    chunkedArray[j] = posts.slice(i,i+chunk);
                  }
                  //console.log(chunkedArray);
                  return chunkedArray;
                }
            },

        }
    }
});


3. Reference

  1. Fetching Data from a Third-Party API with Vue.js and Axios

标签: none

添加新评论