This is a Zhihu Daily WebApp developed based on Vue Family bucket. The page style mainly refers to the iOS Version of Zhihu Daily APP.

Personal blog: Chen Yubo’s blog

Project github address: Vue-zhihu-Daily

If you think it is helpful, you can click on the top right corner to give a star to support, thank you very much! If you have any questions, please submit an issue to discuss!

The statement

“Zhihu” is zhihu. A registered trademark of Inc. The software and its code are not created or maintained by Zhihu. The information and content contained in the software are in violation of copyright and Zhihu user agreement. All text, pictures and other manuscript contents of this project are provided by Zhihu. Any acquisition or sharing may violate the rights and interests of Zhihu. If told to stop sharing and using, I will delete the whole project in time. Please understand the relevant information and abide by zhihu Agreement.

preface

Some time ago, I took time to learn Vue and completed the first Vue mini demoVue APP with teacher @ustbhuangyi from MOOC. Through this small demo, I had a preliminary understanding of the development of Vue. However, this demo was based on the code of the teacher’s video, so in order to better learn Vue, I had the idea of writing a complex webApp. Once I had the idea, I started to do it.

Why Zhihu Daily?

  • First of all, Zhihu Daily is a complete online APP, and its functions are relatively complete, but the page is not very complex, which is suitable for beginners to practice.
  • Secondly, as the development is a front-end project, data acquisition is an annoying problem. However, github has already provided zhihu DAILY API analysis, which greatly solves the problem of data acquisition. We only need to pay attention to the front-end, but do not need to pay attention to the background data.

Technology stack

vue2 + vue-router + axios + vuex + vue-cli mint-ui + sass + flex + eslint

The online Demo

Stay tuned for…

function

  • Home page
  • Scroll to the bottom of the home page to load more
  • View news details
  • The news details page goes to the next post
  • Collect the news
  • To view comments
  • The essay expands and contracts
  • Write a comment page (cannot be sent to the background)
  • The sidebar
  • View news on a specific topic
  • View the edit list under the specified topic
  • View personal information about an editor
  • View favorite news

Project screenshots

Home page

News Details page

Review page

Write a comment page

The theme page

Edit list page

Edit personal details page

Collection page

Project running

# # cloning project to local git clone https://github.com/cccyb/vue-zhihu-daily.git in switch to the project folder CD vue zhihu - daily # installation depend on NPM install # NPM run dev # Build NPM run build # Build NPM run buildCopy the code

The directory structure

. | -- -- build / / webpack configuration file | - config / / package path | - dist / / project deployment file, On the server can be normal access | - SRC / / source directory | | - assets / / resources directory | | | - images / / images directory | | | - sass / / sass directory | | | - components / / Component sass directory | | | - sass pages / / page directory | | - components / / component | | | -- LongComment. Vue/long/review components | | | -- NewsList. Vue / / news list component | | | -- NewsMenu. Vue/news/details at the bottom of the menu component | | | -- Share. Vue/Share/news details bounced component | | | -- ShortComment. Vue components / / essay | | | -- Sidebar. Vue / / the sidebar components | | | -- Swipe. Vue / / by chart component | | | - pages / / page | | - Collect. Vue / / collection page | | | -- Comment. Vue / / Comment pages | | | - Editor. Vue / / see the edit personal information page | | | -- EditorList. Vue / / edit list page | | | -- Index. Vue / / homepage | | | -- NewsDetail. Vue/news/details page | | | -- ThemeDetail. Vue / / theme page | | | -- WriteCommnet. Vue / / write comments page | | - the router | | | -- index. Js / / routing configuration | | - store | | | - Index. Js/configuration/vuex | | - App. Vue / / the entry file | | -- main. Js / / program entry documents, Public components | - static loading / / static file directory | | -- - | CSS | | -- the animate. CSS/CSS/animation | | | -- iconfont. CSS/CSS/icon font | | | - Icontont. The vera.ttf / / icon the vera.ttf font | | | -- iconfont. Woff / / icon font woff | | | -- news_qa_auto. CSS/CSS/page details content | | | -- reset. CSS / / Unified browser CSS style. | - babelrc / / ES6 grammar compiler configuration. | - editorconfig/specification/code configuration. | - eslintignore / / ignore eslint check file configuration. | - eslint. Js / / Eslint configuration file. | - gitattributes / / modify project in making display type configuration file. | - gitignore / / git ignore uploading files. | - postcssrc. Js | -- index. HTML / / Entrance to the HTML file | -- package. Json / / project and tool depends on the configuration file | -- README. Md / / README instructions | -- yarn. The lock / / yarn file.Copy the code

Todo

  • Launch welcome page
  • Home news time divider
  • Slide color gradient on the head of the home page
  • Home page drop-down refresh
  • News page
  • Settings page
  • Personal Information page
  • offline
  • Night mode
  • Overall code reconstruction, performance optimization
  • Lazy loading of images
  • Page switching animation
  • Gesture sideslip function
  • Vuex status management file reconstruction optimization
  • Browser compatibility
  • Production environment cross-domain problems
  • Process jump optimization
  • localStorage
  • .

conclusion

1. Cross-domain problem of Zhihu interface

There is a cross-domain problem when calling Zhihu API, but the interface of Zhihu does not seem to support JSONP. Google wave found that it can be solved by using the proxyTable file configuration of vuE-CLI config. The configuration is very simple:

proxyTable: {
 '/news/latest': {
    target: 'http://news-at.zhihu.com/api/4',
    changeOrigin: true,
    pathRewrite: {
      '^/news/latest': '/news/latest'
    }
  }
}Copy the code

This way there are no cross-domain issues, but of course this only applies to the development environment. To solve cross-domain problems in a production environment, you can choose to use the backend server relay API to do the cross-domain, specifically node or Nginx to solve the problem. Since there is no server, the issue itself is still being resolved. 😂

2. Picture anti-theft chain problem

The Images in the data returned by Zhihu API are all URL addresses stored in Zhihu server. Direct request will return 403, so some processing is needed. Here, I adopted the solution that Yatessss completed Zhihu Daily Web edition by using VUE, using images.weserv.nl to cache the Images. And replace the image URL where it is needed.

.

reference

Thanks to izzyleung for organizing zhihu API analysis

Complete zhihu Daily web edition By YatessSS with VUE

License

MIT