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来管理。