preface

Although there have been similar webApps imitating Douban movies before, some simple functions developed are not perfect, or the experience feeling can be further improved, so I explored and compared douban and Douban movies to make a comparison, which initially satisfied my own idea. After several times of improvement, there are basically no bugs. Please tell me to modify if there is any problem, thank you!

Project introduction

The function was modified appropriately according to douban movie API using Vue2.0 App

API source from douban official API, please stamp douban movie API for details

Project source: please stamp github

Please click “STAR” in the upper right corner of Github if it is helpful to you. Thank you! ^_^

The online experience

PC access

Douban Movie WebApp

Open the browser to enter developer mode and select the mobile viewport

The iPhone 5/6/6 Plus experience is even better in Chrome

Mobile access

Open the mobile browser to scan the QR code at the bottom or access the address above. Full-screen mode is recommended

Project running

Clone Project source code

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

Install dependencies

cd vue-douban-movie
npm installCopy the code

run

npm run devCopy the code

Open a browser, enter localhost:8000, and view the effect in the mobile mode of developer tools

Runtime environment

node 6+ npm 4+

Partial effect demonstration

Release movie information and movie details



Ranking and movie man



Search and save



Project description

Technology stack

  • Vue2.0 + VUE-router + VUex: VUE family bucket

  • Axios: For Ajax requests

  • Vue-lazyload: Used for lazy loading of images

  • Better-scroll: scroll library on the mobile end to optimize the scrolling effect on the mobile end

  • Webpack: Build tool

  • Es6: Uses the ES6 syntax

  • Stylus: CSS preprocessing

Use Flex layout for mobile adaptation and ESLint for code specification checking

Use localStorage to store the collected movie information, movie person information, comment like information

Webpack + webpack-dev-server + HTTP-proxy-Middleware forwards HTTP requests in the local development environment to achieve cross-domain requests

Express uses HTTP-proxy-Middleware to forward requests online

Function implementation

Show the movie section

  • Get information about current and upcoming movies

  • Movie information scrolling (bottom) loading improves response speed

Top part

  • Get all the leaderboards available from the Douban API

  • View the details of the leaderboard, view the details of the specific movie in the leaderboard

Search section

  • Users can search by keyword

  • Supports tag search based on the given tag (as opposed to searching by entering the same keyword as the tag)

  • View movie details based on the search results

  • Viewing search History

Movie Details

  • Get all the basic movie information and rating information

  • To get short and long reviews for a movie, view all short and long reviews for that movie

  • Mark the movie as want to see/see

The information section of film person

  • Get basic information about the filmmakers

  • View the details of the film man’s work

User-centric section

  • Check out the movie man collection

  • Check out movies you want to see

  • Check out movies you’ve seen

About browser cross domain

The development environment

The project is configured through vue scaffolding vuE-CLI, which can be configured as follows in the ‘config/index’ directory

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

The changeOrigin parameter accepts a Boolean value. If set to true, a local server will receive your request and send it on your behalf, so there are no cross-domain problems. Vue-cli uses this setting from the http-proxy-Middleware plugin it uses

The production environment

Server configuration

const express = require('express');
const proxy = require('http-proxy-middleware');

const app = express();
app.use('/static', express.static(`${__dirname}/static`));
app.use('/v2', proxy({
  target: 'http://api.douban.com',
  changeOrigin: true,
}));

app.get('/*', (req, res) => {
  res.sendFile(`${__dirname}/index.html`);
});
app.listen(8000);Copy the code

Both are essentially implemented using http-proxy-middleware middleware

Better Scroll on mobile terminal

Better Scroll is a mobile scrolling solution, which is based on iscroll rewrite, and the main difference between it and IScroll is here. Better Scroll is also very powerful, not only for normal scroll lists, but also for rotations, pickers and so on.

I have been in touch with this scroll library from teacher Huang Yi’s eleM takeout app. I feel it has a good experience and is quite easy to use, so I have been using it in the later project contact. I recommend you try it 🙂

The principle of rolling is that the parent container has a fixed height. The first child of the parent container, whose height increases with the size of the content. When the height of the content does not exceed the height of the parent container, it cannot be scrolled, but once it exceeds the height of the parent container, we can scroll the content area, this is the principle of better-Scroll.

You can learn more about this article by Teacher Huang Yi: When Better-Scroll meets Vue

Better scroll github address :better scroll

Project layout

├─ ├─ SRC // Source directory ├─ API │ ├─ API │ ├─ SRC // Source directory │ ├─ API Access to project data │ ├ ─ base / / project based component │ │ ├ ─ confirm / / confirmation box component │ │ ├ ─ the history - the list / / history list component │ │ ├ ─ loading / / initial load transition component │ │ ├ ─ loadmore / / load more components │ │ ├ ─ scroll / / page scrolling component │ │ ├ ─ the search box / / search box component │ │ ├ ─ star / / star rating component │ │ └ ─ switches / / TAB components │ ├ ─ common / / Public resources │ │ ├ ─ fonts / / icon font │ │ ├ ─ image / / picture resources │ │ ├ ─ js / / public methods │ │ └ ─ stylus / / CSS style │ ├ ─ components / / business component │ │ │ ├─ Heavy Metal Guitar School // │ ├─ Heavy Metal School // │ ├─ Heavy Metal School // │ ├─ Heavy Metal School // │ ├─ Heavy Metal School // │ ├─ ├─ Movie -info // │ ├─ Movie -detail // │ ├─ Movie -info // │ ├─ Movie -info // │ ├─ Movie -info // │ ├─ Movie -info // │ ├─ Movie -info // Film based information component │ │ ├ ─ movie - the list / / movie list component │ │ ├ ─ movie review/long/movie review component │ │ ├ ─ movie - show / / home page release film component │ │ ├ ─ rank / / ranking component │ │ ├ ─ rank - the detail / / list details component │ │ ├ ─ rank list / / ranking list component │ │ ├ ─ review - the detail/long/movie review details component │ │ ├ ─ search / / movie search component │ │ ├ ─ suggest │ │ ├─ ├─ ├─ imp, ├─ ├─ imp, ├─ imp, imp, imp, imp, imp, imp, imp, imp, imp, imp, imp, imp, imp, imp, impCopy the code