{"id":13536382,"url":"https://github.com/superman66/vue2.x-douban","last_synced_at":"2025-04-04T09:09:35.150Z","repository":{"id":96365581,"uuid":"76215805","full_name":"superman66/vue2.x-douban","owner":"superman66","description":"Vue2.0实现简易豆瓣电影webApp","archived":false,"fork":false,"pushed_at":"2018-05-30T02:24:17.000Z","size":3389,"stargazers_count":798,"open_issues_count":4,"forks_count":292,"subscribers_count":36,"default_branch":"master","last_synced_at":"2025-03-28T08:08:44.915Z","etag":null,"topics":["vue","vue-cli"],"latest_commit_sha":null,"homepage":"http://superman66.github.io/vue2.x-douban/dist/#/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/superman66.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-12-12T02:38:56.000Z","updated_at":"2025-03-20T09:41:41.000Z","dependencies_parsed_at":"2023-03-30T09:04:49.457Z","dependency_job_id":null,"html_url":"https://github.com/superman66/vue2.x-douban","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/superman66%2Fvue2.x-douban","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/superman66%2Fvue2.x-douban/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/superman66%2Fvue2.x-douban/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/superman66%2Fvue2.x-douban/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/superman66","download_url":"https://codeload.github.com/superman66/vue2.x-douban/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247149502,"owners_count":20891954,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["vue","vue-cli"],"created_at":"2024-08-01T09:00:38.257Z","updated_at":"2025-04-04T09:09:35.133Z","avatar_url":"https://github.com/superman66.png","language":"JavaScript","funding_links":[],"categories":["Demo示例","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","awesome-vue [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Resources","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg) ★101652](https://github.com/sindresorhus/awesome)","Examples [🔝](#readme)"],"sub_categories":["Libraries \u0026 Plugins","例子","Examples"],"readme":"# Change Log\n* 2017-3-15：新增 node 服务转发 api 请求\n* 2017-3-17：增加在线[访问地址](http://www.iamsuperman.cn/vue2.x-douban/dist/#/)，node 服务转发 api 请求部署到 heroku\n# 运行项目\nclone项目到本地，进入项目文件夹，安装依赖\n```javascript\ngit clone https://github.com/superman66/vue2.x-douban.git\ncd vue2.x-douban\nnpm install\n```\n然后运行项目\n```javascript\nnpm run dev\n```\n接着运行 node,启动服务， **注意：这一步的 node 转发服务一定要启动，要不然无法正常访问豆瓣 API**\n```javascript\ncd node-proxy\nnode index.js\n\n//启动成功后，将看到输出\n// HTTP Server is running in http://127.0.0.1:8081\n```\n\n最后打开浏览器，输入`localhost:8880`即可访问。效果图如下：\n\n![text](../master/static/vue-douban-shrink.gif)\n\n\n**如果遇到本地运行时，豆瓣的图片部分不可见，请参见该 issue：[为什么图片加载会有问题？](https://github.com/superman66/vue2.x-douban/issues/17)**\n\n**戳我查看 [demo](http://superman66.github.io/vue2.x-douban/dist/#/)**\n\n注意：由于heroku在国外，而且我用的是免费版，当长时间没有连接的话，node服务会被休眠。如果处于休眠状态下，用户访问速度会比较慢，还有可能出现接口请求出现错误。遇到这种情况，刷新重试即可。\n# 路由\n应用包括下面4个路由\n* `/movies` 首页，包含正在上映榜单和即将上映榜单的电影信息，首页只显示各个榜单的前8条数据；\n* `/movie-list` 榜单列表页面，显示榜单列表信息;\n* `/movie/subject/:id` 电影详情页面；\n* `/movie/search` 电影搜索列表页面。\n\n# 项目结构\n```javascript\n.\n├── README.md\n├── build // vue-cli 自带的配置文件\n│   ├── build.js\n│   ├── check-versions.js\n│   ├── dev-client.js\n│   ├── dev-server.js\n│   ├── utils.js\n│   ├── webpack.base.conf.js\n│   ├── webpack.dev.conf.js\n│   └── webpack.prod.conf.js\n├── config  // vue-cli 自带的配置文件\n│   ├── dev.env.js\n│   ├── index.js\n│   └── prod.env.js\n├── git.sh\n├── index.html\n├── node-proxy  // node 转发API请求，解决跨域问题\n│   └── index.js\n├── package.json\n├── src\n│   ├── App.vue\n│   ├── assets\n│   │   ├── list.scss\n│   │   ├── logo.png\n│   │   ├── search-btn.png\n│   │   └── style.scss\n│   ├── components\n│   │   ├── Hello.vue\n│   │   ├── Spinner.vue\n│   │   └── header.vue\n│   ├── main.js // 入口文件\n│   ├── router.js // 路由\n│   ├── store\n│   │   ├── api.js  // 抽取访问api的方法\n│   │   ├── modules\n│   │   │   └── movie.js\n│   │   ├── store.js\n│   │   └── types.js\n│   └── views\n│       ├── index.vue\n│       ├── movie\n│       │   ├── movie-detail.vue\n│       │   ├── movie-list.vue\n│       │   ├── movies.vue\n│       │   └── search-list.vue\n│       └── vuex-demo.vue\n├── static\n└── tree.md\n```\n\n# 第三方库\n* HTTP库采用了[axios](https://github.com/mzabriskie/axios)。\n* 列表下拉加载更多数据使用了[vue-infinite-scroll](https://github.com/ElemeFE/vue-infinite-scroll)\n\n# 豆瓣API\n该应用使用了下面4个api：\n* `/v2/movie/search?q={text}` 电影搜索api；\n* `/v2/movie/in_theaters` 正在上映的电影；\n* `/v2/movie/coming_soon` 即将上映的电影；\n* `/v2/movie/subject/:id` 单个电影条目信息。\n\n\u003e更多关于豆瓣的api可以前往[豆瓣api官网](https://developers.douban.com/wiki/?title=guide)查看。\n\n需要注意的是，由于豆瓣api的跨域问题，并不能直接通过ajax请求访问。不过vue-cli提供了代理的配置。\n我们需要在`/config/index.js`中配置代理：\n```javascript\ndev: {\n  env: require('./dev.env'),\n  port: 8880,\n  assetsSubDirectory: 'static',\n  assetsPublicPath: '/',\n  proxyTable: {\n    '/api': {\n      target: 'http://api.douban.com/v2',\n      changeOrigin: true,\n      pathRewrite: {\n        '^/api': ''\n      }\n    }\n  },\n  cssSourceMap: false\n}\n```\n在`proxyTable`这个属性中，配置target属性为我们要代理的目标地址。这里我们写成`http://api.douban.com/v2`，这样我们就可以在应用中调用`/api/movie/in_theaters`来访问`http://api.douban.com/v2/movie/in_theaters`，从而解决跨域的问题。\n\u003e关于vue-cli更多关于跨域的设置可以看[官网文档](http://vuejs-templates.github.io/webpack/)\n\n\n## Node.js 转发API请求\n由于有同学在问，项目执行`npm run build`打包之后，豆瓣 API 代理配置不起作用，无法访问豆瓣API的问题。\n所以新增了Node.js http服务，用于转发API请求，解决跨域问题。\n**安装依赖**\n\nNode.js转发用到了 `express`和`superagent`. [superanget](https://github.com/visionmedia/superagent)是一个 Node.js HTTP client。\n```\nnpm i express superagent -S\n```\n\n**定义接口**\n根据前端所需，定义了如下三个接口：\n```javascript\napp.get('/movie/:type', function (req, res) {\n  var sreq = request.get(HOST + req.originalUrl)\n  sreq.pipe(res);\n  sreq.on('end', function (error, res) {\n    console.log('end');\n  });\n})\n\napp.get('/movie/subject/:id', function (req, res) {\n  var sreq = request.get(HOST + req.originalUrl)\n  sreq.pipe(res);\n  sreq.on('end', function (error, res) {\n    console.log('end');\n  });\n})\n\napp.get('/movie/search', function (req, res) {\n  var sreq = request.get(HOST + req.originalUrl)\n  sreq.pipe(res);\n  sreq.on('end', function (error, res) {\n    console.log('end');\n  });\n})\n```\n\n**CORS设置**\n\u003e跨源资源共享 ( [CORS](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS) )机制让Web应用服务器能支持跨站访问控制，从而使得安全地进行跨站数据传输成为可能。\n\n主要是通过设置`Access-Control-Allow-Origin: *`\n```javascript\napp.all('*', function (req, res, next) {\n  if (!req.get('Origin')) return next();\n  // use \"*\" here to accept any origin\n  res.set('Access-Control-Allow-Origin', '*');\n  res.set('Access-Control-Allow-Methods', 'GET');\n  res.set('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type');\n  // res.set('Access-Control-Allow-Max-Age', 3600);\n  if ('OPTIONS' == req.method) return res.send(200);\n  next();\n});\n```\n**端口监听**\n```javascript\napp.listen(8081, function () {\n  console.log('HTTP Server is running in http://127.0.0.1:8081')\n})\n```\n**启动**\n\n```\ncd node-proxy\nnode index.js\n```\n具体见`node-proxy/index.js`\n\n**更多关于 Node.js 转发 api 请求，请戳完整项目：[node-proxy-api](https://github.com/superman66/node-proxy-api)**\n# 关于vuex\n如果你想了解vuex的用法，可以切换到`vuex`分支，在该分支下，所有的state都采用vuex来管理。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuperman66%2Fvue2.x-douban","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsuperman66%2Fvue2.x-douban","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuperman66%2Fvue2.x-douban/lists"}