ZhihuDaily

1. Installation process and project introduction

Install

According to the reaction of enthusiastic people,

 npm install
npm run serve

introduce

This project is replicated based on the content of the IOS side of Zhihu Daily from April to May 2022. It is for learning reference only and is not used for profit.

2. Page logic

It is divided into two parts: pages and components

2.1 index.vue

This page is the home page, and the address is '/' in the routing component. Contains headContent.vue (top) swipe.vue (news list) newsList.vue (news list)

headContent.vue Click on the avatar to jump to swipe.vue (sidebar)

swipe.vue and newsList.vue jump to newsDetail.vue (news details page)

2.2 swipe.vue

This page is a sidebar, you can enter my favorites collect.vue

2.3 collect.vue

This page is a favorite, which contains several favorite contents. Click to enter newsDetail.vue (News Details Page)

2.4 newsDetail.vue

It can be accessed in various ways, including newsMenu.vue (function bar) and share.vue (share page)

newsMenu.vue contains four functions: likes, collections, comments, and sharing. Comments will jump to comment.vue share and trigger share.vue

2.5 comment.vue

Comment page, including long comments and short comments, click on the bottom to jump to the writeComment.vue page

2.6 writeComment.vue

You can write comments on the writeComment.vue page, click Post and jump back to comment.vue

3. Functional point sorting

3.1 headContent.vue

Display of dates, display of avatars and jump pages, no difficulty

3.2 swipe.vue

Handwritten carousel diagrams realize automatic (switching every 4S) and left and right swipe switching

3.3 newsList.vue

News list, swiping down will show news content from the past few days, using element-ui's infinite scrolling component

3.4 collect.vue

Click the Favorites button on the page, and the corresponding news content will appear on my Favorites page, refresh without losing

3.5 newsMenu.vue

You can click to like, collect and share comments, and don't lose it after refreshing.

3.6 share.vue

After clicking, the sharing page pops up, and the background behind it turns gray. Click on the background or click Cancel and the sharing page disappears.

3.7 comment.vue

Show comments, like comments, refresh and exit without disappearing

3.8 writeComment.vue

1. Don't zoom in after clicking on the mobile phone
2. Only when there is content can you comment and post. When there is comment content, the color of the post button will change.
3. After posting, go back to comment.vue and put long comments and short comments according to the length of comments

4. Implementation

Select some more important implementations for explanation

4.1 newsList.vue

Use v-infinite-scroll in element-ui to pull down to the bottom to trigger the news of past dates to obtain news of past dates Use this.date.setDate(this.date.getDate() - 1) to calculate dates

4.2 newsMenu.vue

...

5. Follow-up thoughts

On the basis of existing projects, add backend functions and do it after you have learned node.js

5.1 Added login function

5.2 Use database to store user likes and collections

5.3 ...