方案简介

这是一个以豆瓣为原型的开源 Web 应用 DEMO，基于 Vue2.x 生态构建：Vue + vue-router + vuex + Superagent 协同工作，实现了电影、图书、音乐、同城活动的浏览、搜索以及注册登录等完整功能。项目可作为学习 Vue2 工程化实践的完整案例：使用 vue-cli webpack 模板搭建，单文件组件组织视图，Vuex 将 store 划分为 activities、book、movie、search、user 等模块管理状态，API 请求独立封装。数据来源为真实的豆瓣 API V2 和一个 Mock 的豆瓣后端（负责用户注册登录，基于 JSON Web Tokens 认证）。适合想系统学习 Vue2 + Vuex 模块化、路由控制、JWT 登录流程、无限滚动列表等前端工程实践的开发者。

亮点与能力

• Vue + vue-router + vuex + Superagent 协同工作
• Vuex 将 store 划分为多个模块
• 使用 ES6 现代语法
• vue-cli webpack 模板
• 单文件 Vue 组件
• API 请求独立分离
• 真实远程 API 与部分 Mock 数据
• eslint 集成
• 开发环境热更新
• 使用 Sass 编写 CSS，无第三方 CSS 框架
• 复杂多样的视图逻辑
• 无限滚动加载列表
• 完整的搜索逻辑
• 自定义组件如 List、Rating、Tags 等
• 基于 JSON Web Tokens 的认证
• 完整的注册登录逻辑

组成与分工

• Vue：核心前端框架，以单文件组件组织视图
• Vuex：集中式状态管理，store 按 movie/book/search/user 等模块划分
• Vue-router：Vue 官方路由，负责页面导航与视图切换
• Superagent：HTTP 客户端，负责分离的 API 请求（替代早期的 vue-resource）
• vue-infinite-loading：Vue 的无限滚动插件，实现列表无限加载
• vue-scroll-behavior：自定义路由导航时的滚动行为
• normalize.css：HTML 元素与属性样式归一化
• Douban Api V2：真实数据源，提供电影/图书/音乐/同城活动接口
• Mock Douban Backend（douban-backend）：模拟后端，提供注册/登录接口与 JWT 认证

前置要求

需要 Node.js 与 npm 环境（vue-cli webpack 模板工程）。安装依赖：

bash

install dependencies

npm install

开发调试基于 webpack dev-server，支持热更新，可参考 vuejs-templates/webpack 指南与 vue-loader 文档。

使用与配置要点

跑通后可验证以下功能：电影（正在热映 /muse/in_theaters、即将上映、Top250）、图书搜索与详情、音乐搜索、同城活动列表；搜索页覆盖 book/movie/music 三类。注册登录使用 Mock 后端：注册 POST /user，登录 GET /user/:id，基础地址为 https://douban.herokuapp.com/user/，认证基于 JSON Web Tokens。API 基础地址为 https://api.douban.com/V2/。开发期可通过 config 目录下 dev.env.js / prod.env.js 配置环境变量。

优缺点

• ✓ 完整可运行的真实 API 示例
• ✓ 单文件组件+模块化 Vuex 结构清晰
• ✕ 豆瓣 API V2 已停服，示例接口可能
• ✕ 依赖 2017 年生态，Vue2 已非主

出处

本方案挖掘自开源项目 jeneser/douban，方案内容与实施命令均来自其 README 原文。