A simple and beautiful Zhihu Daily (Web)

First, I used vue-CLI to create the project as prompted, and then I installed the dependencies according to my own needs. I chose Materialize, which I think looks good, as the UI framework, and Toastr, a pop-up toast library, and then referred to Gallery and Colorhurt. The style of these two sites, build pages.

npm install materialize-css toastr --saveCopy the code

Then install all required dependencies and delete unwanted files.

For cross-domain reasons, the proxyTable option in the config/index file is set. For the convenience of obtaining data during development, please refer to the documentation for details.

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

Then import the required files in SRC /main

Add a few required components, reserved for later development.

Top navigation bar compoments/ Navbar, the main function is navigation, and display route location;

The footer compoments/footer displays website information.

Home page compoments/ Latest, showing the latest news of Zhihu Daily;

See the articles page compoments/ Story to see the selected articles, and article comments;

Display the theme daily page compoments/ Sunject to view different theme information;

Display the page of your favorite articles, and view the page of your favorite articles.

The next step is to configure the front-end route. Add components to the Router /index file and add a name field for each route to facilitate the call in the component.This is done because both the article page and the topic page have a unique parameter ID, which is used to facilitate the jump and the resource request using the ID after the jump.

<router-link :to="{name: 'name', params: { id: 1234 }}">link</router-link>Copy the code

It will then be placed in app.vue.

<div id="app" class="row">
  <app-navbar></app-navbar>
  <router-view></router-view>
  <app-footer></app-footer>
</div>Copy the code

After configuring the route, use localStorage to develop the feature of bookmarking articles. Localstore.js is used to store the content of an article locally so that it can be viewed when the Internet is off

There are mainly

AddLocalStory, add an article;

RemoveLocalStory, delete an article;

TotalLocalStoryNum, returns the total number of articles collected;

ClearLocalStories, clear all favorites;

With these methods you can manage the collection of articles.

This is where most of the time is spent. It is very difficult to create a nice interface. There are still some unsatisfying changes.

It should be noted that the article page returned by Zhihu Daily’s API is a string containing HTML rendered to the page using V-HTML, but there is no CSS file. The solution is to save the CSS file of Zhihu Daily’s article page (the URL of the CSS file of the article page will be obtained when requesting a single article) into the SRC/Assets directory, and then import it in story.vue

@import ".. /assets/zhihu.daily.css";Copy the code

Another problem is that the images in the article cannot be opened. The solution is to add SRC before each imageImages.weservThe prefix of Vuejs filter is applied.

The page is basically written, the request to the data put up, it is basically completed. However, I found that when I switched the topic daily in the navigation bar, although the route was changed, the topic page was not updated and the Ajax request was not sent. The solution is to use Vuejs watch to listen for route changes and send a new request to get the data once the route value changes, as well as the date value change in the front page.

This is basically done, replacing the URL of the requested data within the component with the real address.

Finally, use WebPack to package the static resource/DIST so that you can run the project with a back-end server.

# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report # After webpack is packaged, use the HTTP-Server backend to quickly start the view project NPM Run StartCopy the code