ZhihuDaily

1. 설치 프로세스 및 프로젝트 소개

설치하다

열정적 인 사람들의 반응에 따르면

 npm install
npm run serve

소개하다

이 프로젝트는 2022 년 4 월부터 5 월까지 매일 Zhihu의 iOS 측의 내용에 따라 복제됩니다. 이는 학습 참조 전용이며 이익에 사용되지 않습니다.

2. 페이지 논리

페이지와 구성 요소의 두 부분으로 나뉩니다

2.1 INDEX.VUE

이 페이지는 홈페이지이며 주소는 라우팅 구성 요소의 '/'입니다. HeadContent.vue (상단) Swipe.vue (뉴스 목록) 뉴스리스트 (뉴스 목록) 포함

HeadContent.vue 아바타를 클릭하여 Swipe.Vue (Sidebar)로 점프하십시오.

Swipe.vue 및 Newslist.vue NewsDetail.vue 로 이동 (뉴스 세부 사항 페이지)

2.2 스 와이프. vue

이 페이지는 사이드 바입니다. 내가 좋아하는 collect.vue를 입력 할 수 있습니다.

2.3 Collect.vue

이 페이지는 가장 좋아하는 내용이 포함 된 가장 좋아하는 것입니다. 뉴스 데일 (NewsDetail.vue)을 입력하려면 클릭하십시오 (뉴스 세부 사항 페이지)

2.4 NewsDetail.Vue

NewsMenu.Vue (기능 바) 및 Share.Vue (공유 페이지)를 포함하여 다양한 방식으로 액세스 할 수 있습니다.

NewsMenu.Vue에는 4 가지 기능이 포함되어 있습니다 : 좋아요, 수집, 의견 및 공유. 주석은 댓글 로 이동 합니다

2.5 댓글. vue

댓글 페이지, 긴 댓글과 짧은 댓글을 포함한 댓글 페이지, 하단을 클릭하여 writecomment.vue 페이지로 이동하십시오.

2.6 WriteComment.Vue

writecomment.vue 페이지에 주석을 쓸 수 있고 게시물을 클릭하고 다시 주석 으로 점프하십시오. vue

3. 기능 지점 분류

3.1 HeadContent.Vue

날짜 표시, 아바타 및 점프 페이지 표시, 어려움 없음

3.2 스 와이프. vue

손으로 쓴 회전 목마 다이어그램은 자동 (4 초마다 스위칭) 및 왼쪽 및 오른쪽 스 와이프 스위칭을 실현합니다.

3.3 뉴스리스트. vue

뉴스 목록, 스 와이프 다운

3.4 Collect.vue

페이지에서 즐겨 찾기 버튼을 클릭하면 해당 뉴스 내용이 내 즐겨 찾기 페이지에 나타납니다.

3.5 NewsMenu.Vue

클릭하여 댓글을 좋아하고 수집하고 공유하고 새로 고침 후에는 잃지 않을 수 있습니다.

3.6 share.vue

클릭 한 후 공유 페이지가 나타나고 뒤의 배경이 회색으로 변합니다. 배경을 클릭하거나 취소를 클릭하면 공유 페이지가 사라집니다.

3.7 댓글. vue

댓글, 새로 고침 및 종료와 같은 의견을 보여주십시오

3.8 WriteComment.Vue

1. 휴대폰을 클릭 한 후에는 확대하지 마십시오
2. 내용이있을 때만 댓글을 달고 게시 할 수 있습니다. 주석 내용이 있으면 게시 버튼의 색상이 변경됩니다.
3. 게시 후 댓글 로 돌아가서 댓글의 길이에 따라 긴 의견과 짧은 의견을 넣으십시오.

4. 구현

설명을 위해 더 중요한 구현을 선택하십시오

4.1 뉴스리스트. vue

요소 UI에서 v-infinite-scroll을 사용하여 바닥으로 끌어 당겨 과거 날짜 뉴스를 트리거하여 과거 날짜 뉴스를 얻으십시오 .Date.SetDate (this.date.getDate () -1)를 사용하여 날짜를 계산하십시오.

4.2 NewsMenu.Vue

...

5. 후속 적 생각

기존 프로젝트를 기반으로 백엔드 기능을 추가하고 Node.js를 배운 후에 수행하십시오.

5.1 추가 로그인 기능

5.2 데이터베이스를 사용하여 사용자 좋아요 및 컬렉션을 저장하십시오

5.3 ...