Vue2.0开发仿豆瓣电影WebApp

摘要：从之前黄轶老师的高仿外卖开始接触过这个滚动库，感觉体验感很好，用起来也比较顺手，所以在后来的项目联系中就一直在使用。

虽然在此之前已经有类似的仿豆瓣电影的webapp,但或是开发的有些简洁功能不太完善，或是体验感觉得可以再完善下，所以自己摸索着对比豆瓣和豆瓣电影两款app做了一下，初步满足了自己的想法，经过几次完善基本不会出现bug，如果发现存在问题请告诉我修改，谢谢！

2017/7/27 一点小更新：发现只有建军大业这部电影的详情无法查看，原因是这部电影豆瓣返回的电影id存在问题，导致服务器返回 movie_not_found，点了这部电影发现报错了整个人都不好了，解决方案就是看豆瓣会不会修复这个问题 :(

使用vue2.0仿豆瓣电影app，根据豆瓣电影api对功能作了适当修改

api来源自豆瓣官方api，详情请戳豆瓣电影api

项目源码：请戳 github

求star，如果对您有帮助，可以在github上点右上角 "Star" 支持一下 谢谢！ ^_^

豆瓣电影webapp

打开浏览器进入开发者模式，选择移动端视口

chrome浏览器下的iphone5/6/6 plus体验效果更佳

打开手机浏览器扫描下方二维码或访问上面的地址，推荐全屏模式下体验

clone项目源码

git clone https://github.com/buptsky/vue-douban-movie.git

安装依赖

cd vue-douban-movie
npm install

运行

npm run dev

打开浏览器进入localhost:8000，在开发者工具的移动端模式下查看效果

node 6+ npm 4+

vue2.0 + vue-router + vuex：vue全家桶

axios：用于ajax请求

vue-lazyload：用于图片懒加载

better-scroll：移动端滚动库，优化移动端滚动效果

webpack： 构建工具

es6: 使用es6语法

stylus: css预处理

使用flex布局进行移动端适配，用eslint进行代码规范检查

使用localStorage存储收藏的电影信息，影人信息，评论点赞信息

webpack + webpack-dev-server + http-proxy-middleware进行本地开发环境http请求转发，实现跨域请求

线上使用express的http-proxy-middleware实现请求转发

获取正在上映的电影信息和即将上映电影的信息

电影信息滚动(底部)加载提高响应速度

获取所有可以从豆瓣api得到的排行榜

查看排行榜详细，在排行榜中查看具体电影详细

支持用户根据关键字搜索

支持用户根据给出标签进行标签搜索(与输入与标签相同的关键字进行搜索不同)

根据搜索结果查看电影详情

查看搜索历史

获取电影所有的基础信息和评分信息

获取电影的短评和长评，可查看该电影所有短评长评

将电影标记为想看/看过

获取影人基本信息

查看影人作品详细

查看收藏的影人

查看想看的电影

查看看过的电影

项目通过vue脚手架vue-cli进行配置，可在"config/index"目录下进行如下配置

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

参数里中的changeOrigin，接收一个布尔值，如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求，这样就不会有跨域问题了
vue-cli的这个设置来自于其使用的插件http-proxy-middleware

服务器端配置

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

const app = express();
app.use("/static", express.static(`${__dirname}/static`));
app.use("/v2", proxy({
  target: "http://api.douban.com",
  changeOrigin: true,
}));

app.get("/*", (req, res) => {
  res.sendFile(`${__dirname}/index.html`);
});
app.listen(8000);

本质上都是通过使用"http-proxy-middleware"中间件实现代理

better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在这里。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。

从之前黄轶老师的高仿elem外卖app开始接触过这个滚动库，感觉体验感很好，用起来也比较顺手，所以在后来的项目联系中就一直在使用。
推荐大家也尝试一下:)

滚动的原理时父容器有固定的高度。父容器的第一个子元素，它的高度会随着内容的大小而撑高。当内容的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是better-scroll 的滚动原理。

可以通过黄轶老师的这篇文章具体了解下:当 better-scroll 遇见 Vue

better-scroll的github地址戳:better-scroll

如果您不想在项目中使用better-scroll，也可以将相关代码进行替换，如取消一些为了实现scroll组件使用的css的绝对/固定定位，页面的滚动的数据获取采用原生方式获取或使用其他库等，重构成本不会很大。

├─build                       // webpack配置文件
├─config                      // 项目开发环境配置相关代码      
├─screenshots                 // 项目截图
├─src                         // 源码目录    
│  ├─api                      // axios请求，获取项目数据
│  ├─base                     // 项目基础组件
│  │  ├─confirm               // 确认框组件
│  │  ├─history-list          // 历史记录列表组件
│  │  ├─loading               // 初始加载过渡组件
│  │  ├─loadmore              // 加载更多组件
│  │  ├─scroll                // 页面滚动组件
│  │  ├─search-box            // 搜索框组件
│  │  ├─star                  // 星级评分组件
│  │  └─switches              // 选项卡组件
│  ├─common                   // 公共资源 
│  │  ├─fonts                 // 图标字体
│  │  ├─image                 // 图片资源
│  │  ├─js                    // 公共方法
│  │  └─stylus                // css样式
│  ├─components               // 业务组件 
│  │  ├─all-discussion        // 全部评论组件
│  │  ├─celebrity-detail      // 影人详情组件
│  │  ├─celebrity-info        // 影人基础信息组件
│  │  ├─celebrity-list        // 影人列表组件
│  │  ├─celebrity-works       // 影人作品组件
│  │  ├─movie-comment         // 电影短评组件
│  │  ├─movie-detail          // 电影详情组件
│  │  ├─movie-info            // 电影基础信息组件
│  │  ├─movie-list            // 电影列表组件
│  │  ├─movie-review          // 电影长评组件
│  │  ├─movie-show            // 主页上映电影组件
│  │  ├─rank                  // 排行组件
│  │  ├─rank-detail           // 排行详情组件
│  │  ├─rank-list             // 排行列表组件
│  │  ├─review-detail         // 电影长评详情组件
│  │  ├─search                // 电影搜索组件
│  │  ├─suggest               // 搜索结果组件
│  │  ├─tab                   // 主页tab栏组件
│  │  └─user-center           // 用户中心组件
│  ├─router                   // vue-router路由管理
│  └─store                    // vuex状态管理 
└─static 

在config文件下的webpack.base.conf.js 里我配置了一些别名方便组件引入

resolve: {
    extensions: [".js", ".vue", ".json"],
    alias: { // 配置别名
      "src": resolve("src"),
      "common": resolve("src/common"),
      "components": resolve("src/components"),
      "base": resolve("src/base")
    }
  }

所以在引入组件的时候没有加相对路径，如不想更改直接使用相对路径找到引用的文件就好了，这里说一下避免出现问题浪费不必要的时间

最后编辑于 2017/7/28 22:52