Comment utiliser Vue pour implémenter une conception de page similaire à Zhihu Daily ?

Vue.js est un framework front-end basé sur le modèle MVVM. Il découple les données et les pages d'interface utilisateur via la liaison de données et la composantisation, rendant le développement Web plus efficace et plus simple. Zhihu Daily est un client d'actualités avec une belle conception d'interface utilisateur, une interactivité puissante et une diversité de contenu. Dans cet article, nous utiliserons la technologie Vue pour implémenter une conception de page qui imite le Zhihu Daily.

1. Créer l'environnement

Avant de commencer, nous devons installer Node.js et Vue-cli. Après avoir installé Node.js, utilisez l'outil de ligne de commande pour exécuter la commande suivante dans le terminal pour installer Vue-cli :

$ npm install -g vue-cli

Une fois l'installation terminée, utilisez Vue-cli pour créer un projet basé sur le modèle webpack :

$ vue init webpack vue-zhihudaily

À ce stade, nous pouvons voir qu'après la création d'un nouveau projet vous pose plusieurs questions (nom du projet, description, auteur, si les spécifications du code eslint sont requises, etc.), un dossier nommé vue-zhihudaily sera créé dans le répertoire actuel comme le répertoire racine du projet.

2. Mise en page

Dans Zhihu Daily, elle est principalement divisée en trois pages : page d'accueil, page de liste d'articles et page de détails de l'article. Ici, nous prenons la page d'accueil comme exemple. Dans le dossier src, créez un dossier vues pour stocker les fichiers d'interface. Créez le fichier Home.vue avec le code suivant :

<template>
  <div class="home">
    <div class="banner"></div>
    <div class="daily-list"></div>
  </div>
</template>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.banner {
  width: 100%;
  height: 200px;
  background: linear-gradient(to bottom, #ffffff, #f5f5f5);
}
.daily-list {
  width: 100%;
  height: 100%;
}
</style>

Ici, nous utilisons la mise en page flexible pour centrer verticalement la page. Parmi eux, la bannière est utilisée pour afficher des images de carrousel et la liste quotidienne est utilisée pour afficher des listes d'articles.

3. Utilisation de composants

Afin de faciliter la réutilisation et la maintenance, nous utilisons la composantisation Vue pour construire l'interface. Dans le dossier src, créez un dossier de composants pour stocker les fichiers de composants. Dans celui-ci, créez un fichier appelé DailyItem.vue :

<template>
  <div class="daily-item">
    <div class="thumbnail">
      <img :src="item.images[0]" alt="">
    </div>
    <div class="info">
      <div class="title">{{item.title}}</div>
      <div class="date">{{item.date}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['item']
}
</script>

<style scoped>
.daily-item {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  padding: 0 10px;
  box-sizing: border-box;
  background: #ffffff;
}
.daily-item:hover {
  cursor: pointer;
}
.thumbnail {
  width: 80px;
  height: 60px;
  margin-right: 10px;
  overflow: hidden;
}
.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.title {
  font-size: 16px;
  color: #444444;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.date {
  font-size: 12px;
  color: #999999;
}
</style>

DailyItem.vue est utilisé pour afficher les informations de la liste d'articles, y compris les vignettes, les titres et les dates des articles. Ici, nous utilisons l'attribut props pour transmettre les informations de l'article dans le composant. Utilisez le composant DailyItem.vue dans Home.vue et remplacez daily-list par :

<div class="daily-list">
  <daily-item v-for="(item, index) in dailyList" :key="index" :item="item"></daily-item>
</div>

Lorsqu'il y a plusieurs rapports quotidiens, ce composant affichera automatiquement un DailyItem.vue pour chaque rapport quotidien. Dans l'accueil du composant parent, transmettez dailyList au composant enfant DailyItem.vue via les accessoires.

4. Mise en œuvre du graphique carrousel

Le graphique carrousel imitant Zhihu Daily est une partie importante de cette page. Dans le dossier src, créez un composant nommé Banner.vue :

<template>
  <div class="banner">
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="(item, index) in bannerList" :key="index">
        <img :src="item.image" alt="">
        <div class="text">{{item.title}}</div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide, Pagination } from 'swiper/dist/js/swiper.esm.js'
import 'swiper/dist/css/swiper.css'

export default {
  data () {
    return {
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        },
        loop: true,
        autoplay: {
          delay: 3000
        }
      }
    }
  },
  props: ['bannerList'],
  mounted () {
    Swiper.use([Pagination])
    this.$refs.mySwiper.swiper.slideTo(0)
  },
  components: {
    Swiper,
    SwiperSlide,
    Pagination
  }
}
</script>

<style scoped>
.banner {
  width: 100%;
  height: 200px;
  background: linear-gradient(to bottom, #ffffff, #f5f5f5);
}
.swiper-pagination-bullet-active {
  background-color: #ffffff;
}
.text {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 16px;
  color: #ffffff;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

Dans Banner.vue, nous utilisons la bibliothèque tierce Swiper pour créer le graphique carrousel. Appelez swiper.slideTo(0) dans la fonction hook montée pour réaliser que la page initiale est la première image du carrousel.

Utilisez le composant Banner.vue dans Home.vue :

<div class="banner">
  <banner :bannerList="bannerList"></banner>
</div>

Utilisez les accessoires ici pour transmettre la bannièreList dans le composant Banner.vue.

5. Acquisition de données

Dans Zhihu Daily, la page d'accueil doit afficher la liste des articles et l'image du carrousel. Nous utilisons la bibliothèque axios pour lancer une requête GET à l'API Zhihu Daily afin d'obtenir les données du graphique carrousel et de la liste d'articles. Sous le dossier src, créez un dossier nommé api et créez-y un fichier zhihudaily.js :

import axios from 'axios'

// 轮播图 API
const bannerApi = 'https://news-at.zhihu.com/api/4/news/latest'

// 文章列表 API
const articleListApi = 'https://news-at.zhihu.com/api/4/news/before/'

export default {
  // 获取轮播图
  async getBanner () {
    const { data } = await axios.get(bannerApi)
    return data.top_stories
  },

  // 获取文章列表
  async getArticleList (date) {
    const { data } = await axios.get(articleListApi + date)
    return data.stories
  }
}

Appelez la méthode dans l'api dans Home.vue et transmettez les données obtenues dans les accessoires correspondants ：

<script>
import api from '../api/zhihudaily'
import DailyItem from '../components/DailyItem.vue'
import Banner from '../components/Banner.vue'

export default {
  data () {
    return {
      bannerList: [],
      dailyList: []
    }
  },
  components: {
    DailyItem,
    Banner
  },
  async mounted () {
    this.bannerList = await api.getBanner()
    this.dailyList = await api.getArticleList('')
  }
}
</script>

Par async /await, nous pouvons obtenir les données requises de manière asynchrone, rendant la page plus efficace.

6. Conclusion

Dans cet article, nous avons utilisé la technologie Vue pour implémenter une conception de page similaire à Zhihu Daily, impliquant des composants, des graphiques carrousel, l'acquisition de données et d'autres points de connaissances. Le développement basé sur des composants permet aux développeurs de mieux maintenir et développer le code, et utilise des bibliothèques tierces (telles que Swiper, axios) pour implémenter rapidement des fonctions, rendant le développement plus efficace.

Développez continuellement votre base de connaissances, élargissez vos horizons et continuez à explorer, afin d'aller plus loin sur la voie du développement Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!