Build a simple version of Douban based on VUE

preface

Some days ago, I watched VUE in my spare time, thinking that I should write an example to deepen it, so I built a simple version of Douban based on VUE. Since I am not using the VUE framework in my work, and my understanding of VUE is not deep enough, this is my first time to write a technical blog post, so I would like to invite you to criticize and correct any mistakes.

Description of project

Project address: github.com/nh0007/vue-…

Project Introduction: This project mainly builds a simple version of Douban based on VUE, realizing the function of displaying books, movies, music, city activities and other contents according to different types.

Technology stack: VUE + VUex + VUE-Router + AXIOS + Webpack + ES6. This project is built by VUE-CLI. Based on VUE, VUEX is used to manage data, VUE-Router to distribute routes and AXIOS to request data.

Project background: The interface of this project is based on Douban. There are two reasons for choosing Douban. First, I like douban very much, no matter the content or design of Douban. Second, douban has detailed development documentation, details see: developers.douban.com/wiki/?title… This can also make friends who just started vUE can focus more on vUE front-end development.

Development environment: Node V8.1.2, NPM 5.0.3, Browser: Google Chrome 65.0.3325.146/Firefox 58.0.2

Run the project

Before running the project, ensure that the Node environment is properly installed on your machine.

• Clone the project locally, or if you don’t have a Git environment installedvue-doubanDownload the compressed package directly.

  git clone https://github.com/nh0007/vue-douban.gitCopy the code

• In the project root directory, run the following statement to download dependencies:

  npm installCopy the code

• After downloading, run the project:

  npm run devCopy the code

• After the command is executed, enter the address in the browser as prompted.

Project screenshots

This project is mainly divided into four modules: reading, film, music and city activities. The following are some screenshots of each module:

The development process

If you haven’t tried VUE yet, check out the official vUE tutorial. After all, the official documentation is the best learning material. If you are not familiar with ES6 grammar, you can also read Ruan Yifeng’s introduction to ECMAScript 6. Of course, it is most effective to study while working on projects. The following is my own development process and ideas in this project for reference only:

• Use VUE-CLI to build a new project based on WebPack, modify and delete some irrelevant VUE components, such as HelloWorld.vue. Of course, if you have installed vue-CLI;

  vue init webpack vue-doubanCopy the code

• Plan the project page structure, and then allocate routes according to the page and function; Since the page structure of the project is not complex, routes were roughly planned at the beginning of the project, and each route is associated with 2-3 components. Corresponding empty components can be established first. Taking book module as an example, the page of book module is roughly divided into three parts:

Therefore, at first, we set up the route of the page, and then roughly set up three empty components according to the structure of the page, stored in the corresponding location, and then map the route to these components, the code is as follows. For detailed routing Settings, see the vue-Router official documentation. For more routing Settings, see the source code.

const BaseHeader = () => import('.. /components/common/BaseHeader.vue')
const BookTag = () => import('.. /components/book/BookTag.vue')
const BookTagContent = () => import('.. /components/book/BookTagContent.vue')

export default new Router({
    routes: [
        {
            path: '/',
            redirect: '/book-tag'
        },
        {
            path: '/book-tag'
            name: 'bookTag',
            components: {
                default: BaseHeader,
                aside: BookTag,
                content: BookTagContent
            }
        }
    ]
})Copy the code

• Once we have planned the component for a route, we can start writing the component. However, when writing components, we will soon find that some data is common to each component. Vuex makes it easier to manage common data, so we can use Vuex to separate common data from individual module data. You can refer to the official vuex documentation for the use of vuex, and see the source code for Settings.
• After setting up the Router and store, it’s time to write the exciting component. First, we’ll roughly divide the component code into five modules: Public module, reading module, film module, music module, city activity module, each module is divided into corresponding components, the preparation of specific components can refer to the source code, I will not repeat here, after all, Talk is cheap,show me the code. If you have any doubts or found any questions, welcome to discuss.
• During component development, we find common components, JS functions, and CSS that we can extract for reuse.

The above is my personal development process in the project, of course, only personal experience, the actual development does not have to follow this process.

Problems encountered during development

• Cross-domain problem: Using douban API to request data in the development environment will cause cross-domain problem. However, in vue-CLI construction project, we can solve this problem simply and easily by configuring the index.js file in the config folder under the root directory and adding the following configuration to proxyTable parameter:

  proxyTable: {
  '/api': {
        target: 'https://api.douban.com',
        changeOrigin: true,
        pathRewrite: {
             '^/api': '/v2'}}}Copy the code

Through the above Settings, there are two main functions, one is to simplify the URL, omit the prefix when the request, one is to enable a service on the host to forward your request, to solve the cross-domain problem, details can be seen in the ProxyTable Settings, so we send network requests like this:

const actions = {
    getCurrentTagBooks ({commit, state}, {count = 10, start = 0, type}) {
        axios.get('./api/book/search', {
            params: {
                tag: state.currentBookTag,
                count,
                start
            }
        })
            .then(response= > {
                commit(types.SET_TAG_BOOKS, {books: response.data.books, type})
                commit(types.SET_CURRENT_TAG_BOOKS, {books: response.data.books, type})
            })
    }
}Copy the code

• Round broadcast content implementation. A lot of contents in this project need to use the rotation effect. Here, vUE’s own list transition function is directly used to achieve the rotation effect by judging the direction of content sliding transition-group label name value, and then by setting the corresponding CSS value. See the official transition animation tutorial and project source code for details.
• Mouse over the book to show the implementation of the details function. By the realization of the content actually depends on the container positioning properties, as shown in figure, due to the external container will shear of the spill-over container, so can’t show more details of container is external container vessel, but the external container, pass through the mouse mouseenter event book information to external container, again by calculating location for display, See the booktagContent.vue component for more details. If you have a better implementation, please contact us.

• Picture anti-theft chain problem. The images returned by the interface of books and movies do not have the problem of anti-theft link, while the images returned by the interface of music have low definition and anti-theft link is set. The anti-theft link can be solved by setting the IMG label referrerPolicy attribute, as follows:
  
  

  <img :src="music.image" class="music-image" referrerpolicy="no-referrer>Copy the code

Vue usage experience

• The project structure is clearer. Friends who have cooperated with the front end should know that if there is no unified specification and agreement for the project, the front end cooperation will be a chaotic process, because different people write various front-end codes, which increases a lot of costs for collaboration and later maintenance. Using VUE componentization makes the project structure clearer, and the structure within the component is also quite clear. For example, the data used for visualization is stored in the Data attribute, most of the data that needs to be monitored is stored in the computed attribute, and the methods used by the component are stored in the Methods attribute. Vue sets a set of rules for components so that projects can work together without too much confusion.
• Less code. After developing this project, I considered that if I use native JS or jQuery to develop the same function, the amount of code would be at least three times, after all, it would be a big pile of code to build elements through the data returned from the background, insert the interface, and bind events for some elements. Of course, the reduction in code volume depends on vue doing a lot of work for us in the background, thanks to Utah.

Deficiencies of the project

Since VUE is not used much and the project is completed in a hurry, please point out the deficiencies of the project or which functions can be better realized so that I can learn and correct. Of course, I have also listed some deficiencies of the project:

• Due to the use of Douban API, frequent requests will be invalid, but there is no friendly interface prompt for this.
• When data is requested over the network, the page is displayed blank when data is not returned without loading prompt, resulting in poor user experience. (IN fact, I added loading. GIF as a reminder at the beginning, but I removed it because IT was a little ugly.)
• The in-city activity module does not set cache, so every time you click to switch city or type, you need to request data from Douban.

conclusion

This is my first time to write technical blog, or some fear, write bad place, so please also criticize more. In addition, welcome to the star project