Vue全家桶實現還原豆瓣電影wap版

Near_Li 發布于2019-08-20 16:00 / 529人閱讀

摘要：豆瓣電影版用全家桶仿寫豆瓣電影版。原計劃仿寫完所有頁面，礙于豆瓣的接口有限，實現頁面也有限。由于公開的豆瓣接口具有訪問次數限制，克隆到本地體驗效果更加端訪問已設置寬度適配。

douban-movie(豆瓣電影wap版)

用vue全家桶仿寫豆瓣電影wap版。

最近在公司項目中嘗試使用vue，但奈何自己初學水平有限，上了vue沒有上vuex，開發過程特別難受。

于是玩一玩本項目，算是對相關技術更加熟悉了。

原計劃仿寫完所有頁面，礙于豆瓣的接口API有限，實現頁面也有限。

由于公開的豆瓣接口具有訪問次數限制，克隆到本地體驗效果更加！

web端訪問已設置寬度適配。

進入GitHub查看本項目源碼

歡迎issue，pr，star or follow！我將繼續開源更多有趣的項目！

推薦一些之前寫的新手入門項目

wx-audio(微信小程序：音樂播放器)

paintCanvas(vue實現的你畫我猜)

css-grid-flex(關于css的grid布局和flex布局的入門心得)

在線版

點擊進入

部分效果截圖

工具&技能

vue + vuex+ vue-router全家桶

webpack + webpack-dev-server + http-proxy-middleware進行本地開發環境http請求轉發，實現跨域請求

線上使用express的http-proxy-middleware實現請求轉發

iView一款vue的組件庫

vue-lazyload實現圖片懶加載

rem + flex + grid實現移動端適配

http-proxy-middleware 一個http代理的中間件，進行http請求轉發，實現跨域請求

postman 接口測試工具

使用

git clone https://github.com/xingbofeng/douban-movie.git

cd douban-movie

npm install 

npm run dev

實現功能 首頁

[x] 影院熱映、即將上映、top250、北美票房榜

[x] 電影條目可橫向滾動

[x] 預覽電影評分

搜索頁

輸入搜索關鍵詞，回車鍵搜索，或者點擊搜索按鈕。

[x] 搜索功能

[x] 熱門搜索詞條的記錄

查看更多

[x] 預覽電影評分

[x] 滾動動態加載

[x] 數據緩存入vuex

電影詳情

[x] 電影評分

[x] 電影條目

[x] 演員列表

[x] 劇情簡介

[x] 數據緩存入vuex

搜索結果頁

[x] 翻頁功能

[x] 圖片懶加載

[x] 預覽電影條目

[x] 本地緩存瀏覽信息

目錄結構

|
|—— build 
|—— config
|—— server 服務端
| |—— app.js 服務端啟動入口文件
| |—— static 打包后的資源文件
| |__ index.html 網頁入口
|
|——src 資源文件
| |—— assets 組件靜態資源庫
| |—— components 組件庫
| |—— router 路由配置
| |—— store vuex狀態管理
| |—— App.vue douban-movieSPA
| |__ main.js douban-movieSPA入口
|
|__ static 靜態資源目錄

開發心得 如何緩存數據

這個問題在我之前的的項目總結已經總結過。

加入我們有電影條目A、B、C三個電影條目詳情。進入A加載A，進入B加載B。此時也要把A緩存入vuex中。

可以類似于下面的寫法。

{
  [`${A.id}`]: A,
  ...store.state
}

具體代碼可見/src/router/routes下列相關文件

beforeEnter: (to, before, next) => {
  const currentMovieId = to.params.currentMovieId;
  if (store.state.moviedetail.currentMovie[`${currentMovieId}`]) {
    store.commit(types.LOADING_FLAG, false);
    next();
    return;
  }
  store.commit(types.LOADING_FLAG, true);
  currentMovie(currentMovieId).then((currentMovieDetail) => {
    // 成功則commit后臺接口的數據，并把NET_ERROR的數據置空，并把加載中的狀態置為false。
    const id = currentMovieDetail.id;
    store.commit(types.CURRENT_MOVIE, {
      [`${id}`]: currentMovieDetail,
      ...store.state.moviedetail.currentMovie,
    });
    store.commit(types.LOADING_FLAG, false);
    store.commit(types.NET_STATUS, "");
    document.title = `${currentMovieDetail.title} - 電影 - 豆瓣`;
  }).catch((error) => {
    document.title = "出錯啦 Oops… - 豆瓣";
    store.commit(types.NET_STATUS, error);
    store.commit(types.LOADING_FLAG, false);
  });
  next();
}

翻頁加載

其實這個在之前的React項目中也有做過，設置一個currentPage的狀態，然后根據這個狀態來渲染頁面。

具體代碼可見/src/containers/Tag.vue。

computed: {
  ...mapState({
    tagData(state) {
      return state.tag.tagData[`${this.$route.params.currentTagId}`];
    },
  }),

  subjects() {
    return this.tagData.subjects.slice(
      (this.currentPage - 1) * 10,
      this.currentPage * 10,
    );
  },
},

methods: {
  ...mapActions(["getMoreTagData"]),
  changePage(flag) {
    const currentTagId = this.$route.params.currentTagId;
    const { start, count } = this.tagData;
    // 第一頁不能往前翻頁，最后一頁不能往后翻頁。
    if ((this.currentPage === 1 && flag === "reduce") ||
      (this.currentPage === Math.ceil(this.tagData.total / 10) && flag === "add")
    ) {
      return;
    }
    if (flag === "add") {
      this.currentPage = this.currentPage + 1;
      // 每次請求十條數據
      this.getMoreTagData({
        tag: currentTagId,
        count: 10,
        start: count + start,
      });
      // 需要使用localStorge保存當前的頁碼信息，再次進入可以有這個頁碼信息。
      const doubanMovieCurrentPage = JSON.parse(window.localStorage.doubanMovieCurrentPage);
      window.localStorage.doubanMovieCurrentPage = JSON.stringify({
        ...doubanMovieCurrentPage,
        [`${currentTagId}`]: this.currentPage,
      });
    } else {
      this.currentPage = this.currentPage - 1;
    }
    window.scrollTo(0, 0);
  },

滾動加載

類似于瀑布流布局的實現方式，當用戶滾動到距離頁面底部一定范圍的時候去請求后端接口。

具體代碼可見src/containers/More.vue。

handleScroll() {
  // 函數的作用是滾動加載電影詳情信息
  // 判斷是否為請求后臺中的狀態，如果是則返回
  const { start, count, total } = this.currentSeeMore;
  if (!this.requestFlag) {
    return;
  }
  // 不同瀏覽器top展現會不一致
  let top = window.document.documentElement.scrollTop;
  if (top === 0) {
    top = document.body.scrollTop;
  }
  const clientHeight = document.getElementById("app").clientHeight;
  const innerHeight = window.innerHeight;
  const proportion = top / (clientHeight - innerHeight);
  // 但如果已把所有數據加載完畢了，則不請求
  if (proportion > 0.6 && (start + count) < total) {
    this.getMoreData({
      count,
      start: start + count,
      title: this.$route.params.title,
    });
    this.requestFlag = false;
  }
}

滾動節流

滾動節流主要作用是控制滾動事件的頻率，設置一個flag。未超過頻率則直接在函數中返回。

具體代碼可見src/containers/More.vue

scrolling() {
  // scrolling函數用于作函數節流
  if (this.scrollFlag) {
    return;
  }
  this.scrollFlag = true;
  setTimeout(() => {
    this.handleScroll();
    this.scrollFlag = false;
  }, 20);
}

404與加載頁面的實現

這里主要是在vuex中設定兩個狀態。根據這兩個狀態返回不同的頁面。

具體代碼可見src/App.vue

在路由鉤子函數中改變狀態

之前在公司做React項目的時候運用了universal-router，當時我們可以在進入路由的時候dispatch一個action改變狀態，并且使用async/await函數實現異步。

貼一段之前的React代碼：

async action({ store, params }) {
  // 判斷store里的id和當前id是否一致，若一致，則不請求后臺
  console.log("chapter")
  const chapterInfos = store.getState().home.chapterInfos;
  if (Object.keys(chapterInfos).length === 0 ||
    chapterInfos.subject.id !== parseInt(params.chapter, 10)) {
    await store.dispatch(chapter(params.chapter));
  }
}

類似的，在vue中我們也可以這么做！

具體代碼可見/src/router/routes下的相關代碼

beforeEnter: (to, before, next) => {
  document.title = "電影 - 豆瓣";
  if (Object.keys(store.state.home.homeData).length !== 0) {
    store.commit(types.LOADING_FLAG, false);
    next();
    return;
  }
  store.commit(types.LOADING_FLAG, true);
  Promise.all([
    hotMovie(8, 0),
    commingSoon(8, 0),
    top250(8, 0),
    usBox(8, 0),
  ]).then((homeData) => {
    // 成功則commit后臺接口的數據，并把NET_ERROR的數據置空，并把加載中的狀態置為false。
    store.commit(types.HOME_DATA, homeData);
    store.commit(types.LOADING_FLAG, false);
    store.commit(types.NET_STATUS, "");
  }).catch((error) => {
    document.title = "出錯啦 Oops… - 豆瓣";
    store.commit(types.NET_STATUS, error);
    store.commit(types.LOADING_FLAG, false);
  });
  next();
}

Ajax的封裝

其實我就是不想用Ajax操作的相關庫罷了……

import serverConfig from "./serverConfig";

const Ajax = url => new Promise((resolve, reject) => {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.send(null);
  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        resolve(JSON.parse(xhr.responseText));
      } else {
        reject(`錯誤: ${xhr.status}`);
      }
    }
  };
});

// 影院熱映
export const hotMovie = (count, start) =>
  Ajax(`${serverConfig}/v2/movie/in_theaters?count=${count}&start=${start}`);
// 即將上映
export const commingSoon = (count, start) =>
  Ajax(`${serverConfig}/v2/movie/coming_soon?count=${count}&start=${start}`);
// top250
export const top250 = (count, start) =>
  Ajax(`${serverConfig}/v2/movie/top250?count=${count}&start=${start}`);
// 北美票房榜
export const usBox = (count, start) =>
  Ajax(`${serverConfig}/v2/movie/us_box?count=${count}&start=${start}`);
// 當前電影詳情信息
export const currentMovie = currentMovieId =>
  Ajax(`${serverConfig}/v2/movie/subject/${currentMovieId}`);
// 當前標簽詳情信息
export const getTagData = (tag, count, start) =>
  Ajax(`${serverConfig}/v2/movie/search?tag=${tag}&count=${count}&start=${start}`);

代理的配置

為了解決瀏覽器跨域問題，需要在本地服務端配合實現請求轉發。

proxyTable: {
  "/v2": {
    target: "http://api.douban.com",
    changeOrigin: true,
    pathRewrite: {
      "^/v2": "/v2"
    }
  }
},

實際環境中，服務器端配置

var express = require("express");
var proxy = require("http-proxy-middleware");

var app = express();
app.use("/static", express.static("static"));
app.use("/v2", proxy({
  target: "http://api.douban.com", 
  changeOrigin: true, 
  headers: {
    Referer: "http://api.douban.com"
  }
}
));

app.get("/", function (req, res) {
  res.sendFile(__dirname + "/index.html");
});
app.listen(3000);

移動端的適配

我們使用rem作單位，本項目中標準為1rem = 100px，適配750px設備。

瀏覽器執行下列代碼，改變根元素的font-size，做到移動端的適配。

(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
    recalc = function () {
      var clientWidth = docEl.clientWidth > 750 ? 360 : docEl.clientWidth ;
      if (!clientWidth) return;
      docEl.style.fontSize = clientWidth / 750 * 100 + "px";
    };
  if (!doc.addEventListener) return;
  doc.addEventListener("DOMContentLoaded", recalc, false);
  if (docEl.clientWidth > 750) return;
  win.addEventListener(resizeEvt, recalc, false);
})(document, window);

文檔借鑒自我的同學ShanaMaid。

支持

BUG提交請發送郵箱: me@xingbofeng.com

歡迎issue，pr，star or follow！我將繼續開源更多有趣的項目!

你的支持將有助于項目維護以及提高用戶體驗，感謝各位的支持！

云服務器 GPU云服務器豆瓣電影 python豆瓣電影豆瓣電影api接口豆瓣電影數據分析可視化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/82652.html

前端--通用知識 - 收藏集 - 掘金

摘要：閉包有多重前端知識點大百科全書前端掘金，，技巧使你的更加專業前端掘金一個幫你提升技巧的收藏集。 Vue全家桶實現還原豆瓣電影wap版 - 掘金用vue全家桶仿寫豆瓣電影wap版。最近在公司項目中嘗試使用vue，但奈何自己初學水平有限，上了vue沒有上vuex，開發過程特別難受。于是玩一玩本項目，算是對相關技術更加熟悉了。原計劃仿寫完所有頁面，礙于豆瓣的接口API有限，實現頁面也有...

王笑朝 2019-08-20 16:57 評論0 收藏0
Vue.js全家桶高還原網易云音樂(Windows PC版)

摘要：項目地址由于網易云的限制，部分功能可能會失效，如有需要可以項目下來在本地運行，如果炸了，麻煩在評論中告知一下我因為做的是端所以請在電腦端訪問源碼地址項目預覽評論和歌單詳情都封了我的暫時無法使用這兩個功能了項目描述前端部分實現了滑塊彈出層歌詞項目地址由于網易云的api限制，部分功能可能會失效，如有需要可以clone項目下來在本地運行，如果api炸了，麻煩在評論中告知一下我因為做的...

sf_wangchong 2019-08-20 16:19 評論0 收藏0
Vue2.0開發仿豆瓣電影WebApp

摘要：從之前黃軼老師的高仿外賣開始接觸過這個滾動庫，感覺體驗感很好，用起來也比較順手，所以在后來的項目聯系中就一直在使用。前言雖然在此之前已經有類似的仿豆瓣電影的webapp,但或是開發的有些簡潔功能不太完善，或是體驗感覺得可以再完善下，所以自己摸索著對比豆瓣和豆瓣電影兩款app做了一下，初步滿足了自己的想法，經過幾次完善基本不會出現bug，如果發現存在問題請告訴我修改，謝謝！ 2017...

gplane 2019-08-20 18:14 評論0 收藏0
用vue開發一個貓眼電影web app

摘要：前言之前一直在學習原生的，但是無奈功力太淺，學了很長時候也只能寫一些簡單的小，知道遇見了，一切都變了，他的雙向綁定和組件化思想讓我迅速的愛上了他，可是光學不練是沒有什么成就感的，想著豆瓣提供了免費的接口，不如就利用這個接口做一個電影網站，想前言：之前一直在學習原生的javascript，但是無奈功力太淺，學了很長時候也只能寫一些簡單的小demo，知道遇見了vue，一切都變了，他的雙向...

habren 2019-08-21 11:32 評論0 收藏0