ZhihuDaily

1. Proses Instalasi dan Pendahuluan Proyek

Memasang

Menurut reaksi orang yang antusias,

 npm install
npm run serve

memperkenalkan

Proyek ini direplikasi berdasarkan konten sisi iOS Zhihu setiap hari dari April hingga Mei 2022. Ini hanya untuk referensi belajar dan tidak digunakan untuk keuntungan.

2. Logika halaman

Itu dibagi menjadi dua bagian: halaman dan komponen

2.1 index.vue

Halaman ini adalah halaman beranda, dan alamatnya adalah '/' di komponen perutean. Berisi headcontent.vue (atas) swipe.vue (daftar berita) newslist.vue (daftar berita)

headcontent.vue klik pada avatar untuk melompat ke gesek.vue (bilah samping)

swipe.vue dan newslist.vue lompat ke newsdetail.vue (halaman detail berita)

2.2 Swipe.vue

Halaman ini adalah bilah samping, Anda dapat memasukkan favorit saya Collect.vue

2.3 Collect.vue

Halaman ini adalah favorit, yang berisi beberapa konten favorit. Klik untuk memasukkan newsdetail.vue (halaman detail berita)

2.4 newsdetail.vue

Ini dapat diakses dengan berbagai cara, termasuk Newsmenu.vue (Function Bar) dan Share.vue (Halaman Bagikan)

Newsmenu.vue berisi empat fungsi: suka, koleksi, komentar, dan berbagi. Komentar akan melompat ke komentar.vue berbagi dan memicu share.vue

2.5 Komentar.vue

Halaman komentar, termasuk komentar panjang dan komentar singkat, klik bagian bawah untuk melompat ke halaman writeComment.vue

2.6 WriteComment.vue

Anda dapat menulis komentar di halaman writeComment.vue , klik posting dan lompat kembali ke komentar.vue

3. Penyortiran titik fungsional

3.1 HEADCONTENT.VUE

Tampilan tanggal, tampilan avatar dan halaman lompat, tidak ada kesulitan

3.2 Swipe.vue

Diagram korsel tulisan tangan mewujudkan otomatis (beralih setiap 4s) dan switching gesekan kiri dan kanan

3.3 Newslist.vue

Daftar berita, menggesek ke bawah akan menunjukkan konten berita dari beberapa hari terakhir, menggunakan komponen gulir unsur-ui yang tak terbatas

3.4 Collect.vue

Klik tombol favorit pada halaman, dan konten berita yang sesuai akan muncul di halaman favorit saya, menyegarkan tanpa kalah

3.5 Newsmenu.vue

Anda dapat mengklik untuk menyukai, mengumpulkan dan berbagi komentar, dan tidak kehilangannya setelah menyegarkan.

3.6 SHARE.VUE

Setelah mengklik, halaman berbagi muncul, dan latar belakang di belakangnya berubah menjadi abu -abu. Klik latar belakang atau klik Batal dan halaman berbagi menghilang.

3.7 Komentar.vue

Tunjukkan komentar, seperti komentar, menyegarkan dan keluar tanpa menghilang

3.8 WriteComment.vue

1. Jangan memperbesar setelah mengklik ponsel
2. Hanya jika ada konten yang dapat Anda komentar dan posting. Ketika ada konten komentar, warna tombol pos akan berubah.
3. Setelah memposting, kembali ke Comment.vue dan beri komentar panjang dan komentar singkat sesuai dengan panjang komentar

4. Implementasi

Pilih beberapa implementasi yang lebih penting untuk penjelasan

4.1 Newslist.vue

Gunakan V-Infinite-Scroll di Element-UI untuk menarik ke bawah ke bagian bawah untuk memicu berita tentang tanggal-tanggal sebelumnya untuk mendapatkan berita tentang tanggal-tanggal sebelumnya menggunakan this.date.setDate (this.date.getDate ()-1) untuk menghitung tanggal

4.2 Newsmenu.vue

...

5. Pikiran tindak lanjut

Atas dasar proyek yang ada, tambahkan fungsi backend dan lakukan setelah Anda belajar node.js

5.1 Menambahkan Fungsi Login

5.2 Gunakan database untuk menyimpan suka dan koleksi pengguna

5.3 ...