Vue.js でホームページデータを動的に表示する

はじめに

このプロジェクトでは、Vue.js を使ってホームページのデータを動的に表示する方法を学びます。このプロジェクトは、JSON ファイルからデータを取得し、Vue.js コンポーネントでレンダリングするプロセスを理解するのに役立ちます。

👀 プレビュー

Vuejs homepage preview

🎯 タスク

このプロジェクトでは、以下のことを学びます。

Axios を使ってホームページの投稿一覧データを要求し、List.vueコンポーネントにバインドする方法。
ホームページのレイアウトスタイルとエフェクトを実装して、提供されたデザインに合わせる方法。

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

JSON ファイルからデータを取得するために Axios を使う。
取得したデータを Vue.js コンポーネントにバインドし、テンプレートでレンダリングする。
特定のデザインに合わせてコンポーネントをスタイリッシュにする。
さまざまな Vue.js コンポーネントを統合して、完全なホームページを作成する。

プロジェクト構造をセットアップする

このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了しましょう。

プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。

├── public
│   ├── static
│     ├── data
│        ├── list.json
│     ├── images
│   ├── favicon.ico
│   ├── index.html
├── src
│   ├── assets
│   ├── components
│     ├── Header.vue
│     ├── List.vue
│     ├── Recommend.vue
│   ├── router
│   ├── views
│     ├── Home.vue
│   ├── App.vue
│   ├── main.js
└── package-lock.json
└── package.json
└── README.md

その中で：

components/List.vue は、このチャレンジで追加する記事一覧コンポーネントです。
public/static/data/list.json は、記事一覧を取得するデータファイルです。
public/static/images は、記事一覧に使用する画像ファイルです。

次に、ターミナルで npm install コマンドを使用して依存関係をダウンロードし、依存関係のダウンロードが完了したら npm run serve コマンドを使用してプロジェクトを起動します。

プロジェクトが正常に起動したら、「Web 8080」をクリックしてブラウザでプレビューします。ページの実行結果は以下の画像に示されています。

Image Description

一覧表示機能の完成

このステップでは、axios を使ってホームページの投稿一覧データを要求し、List.vueコンポーネントにバインドする方法を学びます。

src/componentsフォルダにあるList.vueファイルを開きます。
<script>の下でaxiosライブラリをインポートします：

// TODO
import axios from "axios";

data()関数の中で、一覧データを格納するdataListプロパティを定義します：

data() {
  return {
    dataList: []
  };
}

created()ライフサイクルフックの中で、一覧データを取得するためのgetList()メソッドを呼び出します：

created() {
  this.getList();
}

getList()メソッドを実装して、public/static/data/list.jsonファイルからデータを取得します：

methods: {
  getList() {
    axios.get("./static/data/list.json").then((res) => {
      this.dataList = res.data.data.listInfo;
    });
  }
}

<script>内の完成したコードは以下の通りです：

<script>
// TODO
import axios from "axios";
export default {
  data() {
    return {
      dataList: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      axios.get("./static/data/list.json").then((res) => {
        this.dataList = res.data.data.listInfo;
      });
    }
  }
};
</script>

テンプレートでは、v-forディレクティブを使って一覧項目をレンダリングします：

<template>
  <div class="list">
    <!-- TODO -->
    <div class="list-item" v-for="item in dataList" :key="item.id">
      <img class="list-pic" :src="item.imgUrl" />
      <div class="list-info">
        <p class="title">{{ item.title }}</p>
        <p class="desc">{{ item.desc }}</p>
      </div>
    </div>
  </div>
</template>

このステップでは、ホームページの投稿一覧データがpublic/static/data/list.jsonファイルから取得され、List.vueコンポーネントにバインドされることが保証されます。

これらの手順に従うことで、public/static/data/list.jsonファイルからデータを取得し、望ましいレイアウトで一覧項目をレンダリングするなど、ホームページデータの動的化を完了しました。

完成した結果は以下の通りです：

Completed Effect

まとめ

おめでとうございます！このプロジェクトを完了しました。実力を向上させるために、LabEx でさらに多くの実験を行って練習してください。