Vue2.0實現簡易豆瓣電影webApp

Change Log

• 2017-3-15：新增 node 服務轉發 api 請求

• 2017-3-17：增長在線訪問地址，node 服務轉發 api 請求部署到 heroku

運行項目

clone項目到本地，進入項目文件夾，安裝依賴

git clone https://github.com/superman66/vue2.x-douban.git
cd vue2.x-douban
npm install

而後運行項目

npm run dev

接着運行 node,啓動服務

cd node-proxy
node index.js

//啓動成功後，將看到輸出
// HTTP Server is running in http://127.0.0.1:8081

最後打開瀏覽器，輸入localhost:8880便可訪問。效果圖以下：

戳我查看 demo

注意：因爲heroku在國外，並且我用的是免費版，當長時間沒有鏈接的話，node服務會被休眠。若是處於休眠狀態下，用戶訪問速度會比較慢，還有可能出現接口請求出現錯誤。遇到這種狀況，刷新重試便可。

路由

應用包括下面4個路由

• /movies 首頁，包含正在上映榜單和即將上映榜單的電影信息，首頁只顯示各個榜單的前8條數據；

• /movie-list 榜單列表頁面，顯示榜單列表信息;

• /movie/subject/:id 電影詳情頁面；

• /movie/search 電影搜索列表頁面。

項目結構

.
├── README.md
├── build // vue-cli 自帶的配置文件
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config  // vue-cli 自帶的配置文件
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── git.sh
├── index.html
├── node-proxy  // node 轉發API請求，解決跨域問題
│   └── index.js
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── list.scss
│   │   ├── logo.png
│   │   ├── search-btn.png
│   │   └── style.scss
│   ├── components
│   │   ├── Hello.vue
│   │   ├── Spinner.vue
│   │   └── header.vue
│   ├── main.js // 入口文件
│   ├── router.js // 路由
│   ├── store
│   │   ├── api.js  // 抽取訪問api的方法
│   │   ├── modules
│   │   │   └── movie.js
│   │   ├── store.js
│   │   └── types.js
│   └── views
│       ├── index.vue
│       ├── movie
│       │   ├── movie-detail.vue
│       │   ├── movie-list.vue
│       │   ├── movies.vue
│       │   └── search-list.vue
│       └── vuex-demo.vue
├── static
└── tree.md

第三方庫

• HTTP庫採用了axios。

• 列表下拉加載更多數據使用了vue-infinite-scroll

豆瓣API

該應用使用了下面4個api：

• /v2/movie/search?q={text} 電影搜索api；

• /v2/movie/in_theaters 正在上映的電影；

• /v2/movie/coming_soon 即將上映的電影；

• /v2/movie/subject/:id 單個電影條目信息。

更多關於豆瓣的api能夠前往豆瓣api官網查看。

須要注意的是，因爲豆瓣api的跨域問題，並不能直接經過ajax請求訪問。不過vue-cli提供了代理的配置。
咱們須要在/config/index.js中配置代理：

dev: {
  env: require('./dev.env'),
  port: 8880,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
    '/api': {
      target: 'http://api.douban.com/v2',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  },
  cssSourceMap: false
}

在proxyTable這個屬性中，配置target屬性爲咱們要代理的目標地址。這裏咱們寫成http://api.douban.com/v2，這樣咱們就能夠在應用中調用/api/movie/in_theaters來訪問http://api.douban.com/v2/movie/in_theaters，從而解決跨域的問題。

關於vue-cli更多關於跨域的設置能夠看官網文檔

Node.js 轉發API請求

因爲有同窗在問，項目執行npm run build打包以後，豆瓣 API 代理配置不起做用，沒法訪問豆瓣API的問題。
因此新增了Node.js http服務，用於轉發API請求，解決跨域問題。
安裝依賴

Node.js轉發用到了 express和superagent. superanget是一個 Node.js HTTP client。

npm i express superagent -S

定義接口
根據前端所需，定義了以下三個接口：

app.get('/movie/:type', function (req, res) {
  var sreq = request.get(HOST + req.originalUrl)
  sreq.pipe(res);
  sreq.on('end', function (error, res) {
    console.log('end');
  });
})

app.get('/movie/subject/:id', function (req, res) {
  var sreq = request.get(HOST + req.originalUrl)
  sreq.pipe(res);
  sreq.on('end', function (error, res) {
    console.log('end');
  });
})

app.get('/movie/search', function (req, res) {
  var sreq = request.get(HOST + req.originalUrl)
  sreq.pipe(res);
  sreq.on('end', function (error, res) {
    console.log('end');
  });
})

CORS設置

跨源資源共享 ( CORS )機制讓Web應用服務器能支持跨站訪問控制，從而使得安全地進行跨站數據傳輸成爲可能。

主要是經過設置Access-Control-Allow-Origin: *

app.all('*', function (req, res, next) {
  if (!req.get('Origin')) return next();
  // use "*" here to accept any origin
  res.set('Access-Control-Allow-Origin', '*');
  res.set('Access-Control-Allow-Methods', 'GET');
  res.set('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type');
  // res.set('Access-Control-Allow-Max-Age', 3600);
  if ('OPTIONS' == req.method) return res.send(200);
  next();
});

端口監聽

app.listen(8081, function () {
  console.log('HTTP Server is running in http://127.0.0.1:8081')
})

啓動

cd node-proxy
node index.js

具體見node-proxy/index.js

更多關於 Node.js 轉發 api 請求，請戳完整項目：node-proxy-api

關於vuex

若是你想了解vuex的用法，能夠切換到vuex分支，在該分支下，全部的state都採用vuex來管理。