Vuejs-Vue2.x douban: vue2.x-douban Supermanvue2.x-douban A simple of douban movie build with vue2.x,vue-router and axios(豆瓣电影). by Superman

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,启动服务, 注意:这一步的 node 转发服务一定要启动,要不然无法正常访问豆瓣 API

cd node-proxy
node index.js

//启动成功后,将看到输出
// HTTP Server is running in http://127.0.0.1:8081

最后打开浏览器,输入localhost:8880即可访问。效果图如下:

text

如果遇到本地运行时,豆瓣的图片部分不可见,请参见该 issue:为什么图片加载会有问题?

戳我查看 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

第三方库

豆瓣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转发用到了 expresssuperagent. 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来管理。

Comments

  • 大哥 您的node代理出错了  图片加载不出来了
    大哥 您的node代理出错了 图片加载不出来了

    Jun 2, 2017

                                                                                                                                                                                                           
    Reply
  • 运行 npm run dev 报错!求解答
    运行 npm run dev 报错!求解答

    Aug 3, 2017

    ERROR in Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (57) For more information on which environments are supported please see: https://github.com/sass/node-sass/releases/tag/v3.13.1 @ ./~/[email protected]@vue-style-loader!./~/[email protected]@css-loader!./~/[email protected]@vue-loader/lib/style-rewriter.js?id=data-v-55129c6a!./~/[email protected]@sass-loader!./~/[email protected]@vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-316 13:2-17:4 14:20-322

    Reply
  • 该项目支持windows吗?  是否还需要下载superman66/node-proxy-api 这个项目部署到本地?
    该项目支持windows吗? 是否还需要下载superman66/node-proxy-api 这个项目部署到本地?

    Aug 31, 2017

                                                                                                                                                                                                           
    Reply
  • 图片加载
    图片加载

    Dec 25, 2017

    为什么有的图片能加载出来,有的会失败,然后点击进入详情页,图片也加载不出来。没有用您的node代理,路径都是对的,但是加载不了

    Reply
  • npm run dev 报错
    npm run dev 报错

    Feb 15, 2017

    @ ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v -74521568!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/co mponents/Spinner.vue 4:14-264 13:2-17:4 14:20-270 Child html-webpack-plugin for "index.html": Asset Size Chunks Chunk Names index.html 1.47 MB 0 webpack: Failed to compile.

    重新安装npm install node-sass 还是出错

    Reply
  • Error: Cannot find module 'caniuse-db/features-json/transforms2d.json'
    Error: Cannot find module 'caniuse-db/features-json/transforms2d.json'

    Jan 20, 2017

    module.js:327 throw err; ^

    Error: Cannot find module 'caniuse-db/features-json/transforms2d.json' at Function.Module._resolveFilename (module.js:325:15) at Function.Module._load (module.js:276:25) at Module.require (module.js:353:17) at require (internal/module.js:12:17) at Object. (D:\www\vuenew\vue2.x-douban\node_modules\autoprefixer\data\prefixes.js:113:11) at Object. (D:\www\vuenew\vue2.x-douban\node_modules\autoprefixer\data\prefixes.js:655:4) at Module._compile (module.js:409:26) at Object.Module._extensions..js (module.js:416:10) at Module.load (module.js:343:32) at Function.Module._load (module.js:300:12)

    Reply
  • 为什么图片加载有问题
    为什么图片加载有问题

    Apr 13, 2018

    Welcome to the vue2.x-douban wiki!

    为什么我本地跑起来是这么样子,有的图片请求不到,有的图片请求得到!!

    666

    能告诉我什么原因吗???

    Reply
  • 使用proxyTable设置代理无法访问
    使用proxyTable设置代理无法访问

    Aug 3, 2017

    我仿造这个写了一遍,直接访问api跨域,想用proxyTable设置代理可是报了404,换成您这种node代理就成功了,我想问一下是跟头部信息处理之类的有关还是?

    Reply
  • 运行npm run dev报错
    运行npm run dev报错

    Mar 21, 2017

    ERROR in ./~/vue-loader/lib/template-compiler.js?id=data-v-18ded60a!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/header.vue
    
      Vue template syntax error:
    
      text ">" outside root element will be ignored.
    
    Reply
  • #bug
    #bug

    Feb 22, 2017

    项目打包后 豆瓣电影的api 地址就不对了 Uploading image.png… 怎么解决

    Reply