Bagaimana untuk menggunakan Vue untuk melaksanakan reka bentuk halaman yang serupa dengan Zhihu Daily?

Vue.js ialah rangka kerja bahagian hadapan berdasarkan corak MVVM Ia memisahkan data dan halaman UI melalui pengikatan data dan komponen, menjadikan pembangunan web lebih cekap dan mudah. Zhihu Daily ialah pelanggan berita dengan reka bentuk UI yang cantik, interaktiviti yang berkuasa dan kepelbagaian kandungan. Dalam artikel ini, kami akan menggunakan teknologi Vue untuk melaksanakan reka bentuk halaman yang meniru Zhihu Daily.

1. Bina persekitaran

Sebelum kita mula, kita perlu memasang Node.js dan Vue-cli. Selepas memasang Node.js, gunakan alat baris arahan untuk menjalankan arahan berikut dalam terminal untuk memasang Vue-cli:

$ npm install -g vue-cli

Selepas pemasangan selesai, gunakan Vue-cli untuk mencipta projek berdasarkan templat webpack:

$ vue init webpack vue-zhihudaily

Pada ketika ini, kita dapat melihat Selepas mencipta projek baharu bertanya kepada anda beberapa soalan (nama projek, penerangan, pengarang, sama ada spesifikasi kod eslint diperlukan, dll.), folder bernama vue-zhihudaily akan dibuat dalam direktori semasa sebagai direktori akar projek.

2. Susun atur halaman

Dalam Zhihu Daily, ia terbahagi terutamanya kepada tiga halaman: halaman utama, halaman senarai artikel dan halaman butiran artikel Di sini kami mengambil halaman utama sebagai contoh. Dalam folder src, cipta folder pandangan untuk menyimpan fail antara muka. Cipta fail Home.vue dengan kod berikut:

<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>

Di sini, kami menggunakan reka letak fleksibel untuk memusatkan halaman secara menegak. Antaranya, sepanduk digunakan untuk memaparkan imej karusel, dan senarai harian digunakan untuk memaparkan senarai artikel.

3. Menggunakan komponen

Untuk memudahkan penggunaan semula dan penyelenggaraan, kami menggunakan komponenisasi Vue untuk membina antara muka. Dalam folder src, cipta folder komponen untuk menyimpan fail komponen. Di dalamnya, buat fail yang dipanggil 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 digunakan untuk memaparkan maklumat daripada senarai artikel, termasuk lakaran kenit artikel, tajuk dan tarikh. Di sini, kami menggunakan atribut props untuk menghantar maklumat artikel ke dalam komponen. Gunakan komponen DailyItem.vue dalam Home.vue dan gantikan senarai harian dengan:

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

Apabila terdapat berbilang laporan harian, komponen ini secara automatik akan memaparkan DailyItem.vue untuk setiap laporan harian. Dalam rumah komponen induk, hantar dailyList kepada komponen anak DailyItem.vue melalui props.

4. Pelaksanaan carta karusel

Carta karusel yang meniru Zhihu Daily ialah bahagian penting halaman ini. Dalam folder src, cipta komponen bernama 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>

Dalam Banner.vue, kami menggunakan perpustakaan pihak ketiga Swiper untuk membina carta karusel. Panggil swiper.slideTo(0) dalam fungsi cangkuk yang dipasang untuk menyedari bahawa halaman awal ialah imej karusel pertama.

Gunakan komponen Banner.vue dalam Home.vue:

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

Gunakan prop di sini untuk menghantar bannerList ke dalam komponen Banner.vue.

5. Pemerolehan Data

Dalam Zhihu Daily, halaman utama perlu memaparkan senarai artikel dan imej karusel. Kami menggunakan perpustakaan axios untuk memulakan permintaan GET kepada Zhihu Daily API untuk mendapatkan data carta karusel dan senarai artikel. Di bawah folder src, cipta folder bernama api dan buat fail zhihudaily.js di dalamnya:

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
  }
}

Panggil kaedah dalam api dalam Home.vue, dan hantar data yang diperoleh ke prop yang sepadan ：

<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>

Melalui async /menunggu sintaks, kami boleh mendapatkan data yang diperlukan secara tidak segerak, menjadikan halaman lebih cekap.

6. Kesimpulan

Dalam artikel ini, kami menggunakan teknologi Vue untuk melaksanakan reka bentuk halaman yang serupa dengan Zhihu Daily, yang melibatkan komponen, carta karusel, pemerolehan data dan mata pengetahuan lain. Pembangunan berasaskan komponen membolehkan pembangun menyelenggara dan mengembangkan kod dengan lebih baik, dan menggunakan perpustakaan pihak ketiga (seperti Swiper, axios) untuk melaksanakan fungsi dengan cepat, menjadikan pembangunan lebih cekap.

Perluas pangkalan pengetahuan anda secara berterusan, luaskan ufuk anda dan teruskan penerokaan, supaya anda boleh pergi lebih jauh ke arah pembangunan web.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Vue untuk melaksanakan reka bentuk halaman yang serupa dengan Zhihu Daily?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!