基于vue搭建一个简易版豆瓣-CSDN博客

前言

前段日子业余时看了下vue，想着怎么也得写个实例来加深一下，于是便基于vue构建了一个简易版豆瓣。由于工作中使用的并不是vue框架，对vue的了解也不够深入，这也是本人第一次写技术博文，因此，有纰漏之处还请大家批评指正。

项目概述

项目简介：本项目主要是基于vue，构建一个简易版豆瓣，实现将读书、电影、音乐、同城活动等内容按不同类型显示的功能。

技术栈：vue + vuex + vue-router + axios + webpack + ES6，本项目使用vue-cli搭建，以vue为基础，使用vuex管理数据、vue-router分发路由、axios请求数据。

项目背景：本项目界面参考自豆瓣，选择豆瓣有两个原因：一是本身蛮喜欢豆瓣，无论是豆瓣的内容还是设计；二是豆瓣有较为详细的开发文档，详情可参见：developers.douban.com/wiki/?title…，这也能使得刚上手vue的朋友也可以更加专注于vue前端开发。

开发环境：node v8.1.2，npm 5.0.3，浏览器：Google Chrome 65.0.3325.146/Firefox 58.0.2

运行项目

运行项目前，请确保本机已经正确安装好node环境。

克隆项目到本地，如果没有安装git环境，也可以在 vue-douban 处直接下载压缩包。
```
git clone https://github.com/nh0007/vue-douban.git复制代码
```
在项目根目录下，运行以下语句下载依赖：
```
npm install复制代码
```
下载完成后，运行项目：
```
npm run dev复制代码
```
运行完毕后，根据命令行窗口提示在浏览器输入访问地址即可。

项目截图

本项目主要分为四大模块：读书、电影、音乐、同城活动，以下是各个模块的部分截图：

开发流程

如果你还没有接触过vue，可以先看看vue官方教程，毕竟官方文档才是最好的学习资料。如果你对ES6语法还不是很熟，也可以看看阮一峰老师的ECMAScript 6入门，当然，边做项目时边学习才是最高效的。以下是我自己在本项目的开发流程与思路，仅供参考：

使用vue-cli搭建基于webpack的新项目，修改、删除部分无关的vue组件，比如HelloWorld.vue。当然前提是你已经安装好了vue-cli；
```
vue init webpack vue-douban复制代码
```
规划一下项目页面结构，再根据页面、功能分配路由；因为本项目页面结构并不复杂，所以在项目之初便大致规划好了路由，每个路由又关联到2-3个组件，可以先建立好对应的空组件，以book模块为例，book模块页面大致分为三部分：

因此，一开始，我们先设置好这个页面的路由，再根据页面结构大致建立为三个空的组件，存放在相应位置上，再将路由映射到这些组件上，代码如下。关于路由的具体设置可以参见vue-router官方文档，更多关于路由的设置可以参见源代码。

const BaseHeader = () => import('../components/common/BaseHeader.vue')
const BookTag = () => import('../components/book/BookTag.vue')
const BookTagContent = () => import('../components/book/BookTagContent.vue')

export default new Router({
    routes: [
        {
            path: '/',
            redirect: '/book-tag'
        },
        {
            path: '/book-tag'
            name: 'bookTag',
            components: {
                default: BaseHeader,
                aside: BookTag,
                content: BookTagContent
            }
        }
    ]
})复制代码

规划好某个路由相对应的组件后，我们便可以开始着手写对应的组件。但在写组件时我们很快会发现有些数据是各个组件共用的，vuex可以让更加方便地管理公用数据，因此我们可以通过vuex划分公用数据和各个模块数据。关于vuex的使用可以参照vuex的官方文档,相关设置可以参见源代码。
设置好router和store后，便进入激动人心的编写组件环节了，首先我们将组件代码大致分为五大模块：公用模块、读书模块、电影模块、音乐模块、城市活动模块，每个模块下面再划分相应的组件，具体组件的编写可以参照源代码，这里就不再赘述了，毕竟Talk is cheap,show me the code.如果有啥疑惑或发现啥问题，欢迎讨论。
在开发组件过程中，我们会发现有一些公用的组件、js函数、css，这时我们便可以进行抽取，以便复用。

以上便是我个人在项目的开发流程，当然只是个人经验，实际开发中并不一定要按照这个流程进行。

开发过程中遇到的问题

跨域问题：在开发环境中使用豆瓣api请求数据会产生跨域问题，所幸vue-cli构建的项目中，我们可以通过配置简洁优雅的解决这个问题，打开根目录下config文件夹里的index.js文件，给proxyTable参数添加配置如下：
```
proxyTable: {
'/api': {
      target: 'https://api.douban.com',
      changeOrigin: true,
      pathRewrite: {
           '^/api': '/v2'
      }
}}复制代码
```

通过上述的设置，主要有两个作用，一个是简化url，请求时省略前缀，一个是在本机开启一个服务转发你的请求，以解决跨域问题，详情可参见ProxyTable设置，这样，我们这样发送网络请求：

const actions = {
    getCurrentTagBooks ({commit, state}, {count = 10, start = 0, type}) {
        axios.get('./api/book/search', {
            params: {
                tag: state.currentBookTag,
                count,
                start
            }
        })
            .then(response => {
                commit(types.SET_TAG_BOOKS, {books: response.data.books, type})
                commit(types.SET_CURRENT_TAG_BOOKS, {books: response.data.books, type})
            })
    }
}复制代码

轮播内容实现。本次项目中不少内容需要用到轮播效果，这里直接使用了vue自带的列表过渡功能进行实现，通过判断内容滑动的方向切换transition-group标签的name值，再通过设置相对应CSS值实现轮播效果。具体可以参照官方关于过渡动画的教程和项目源代码。
鼠标移上书本显示详细信息功能的实现。轮播内容的实现其实有赖于容器的定位属性，如图，由于外部容器会剪切子容器的溢出内容，所以显示更多详情的容器不能是外部容器的子容器，而是外部容器，通过鼠标mouseenter事件传递书本信息给外部容器，再通过计算具体位置进行显示，具体代码可以参见BookTagContent.vue组件，若有更好的实现还请多指教。

图片防盗链问题。图书、电影的接口返回的图片不存在防盗链的问题，而音乐接口返回的图片清晰度较低，且设置了防盗链，解决防盗链可以通过设置img标签的referrerpolicy属性来解决，如下：
```
<img :src="music.image" class="music-image" referrerpolicy="no-referrer>复制代码
```

vue使用体验

项目结构更加清晰。协作过前端的朋友应该有体会，如果项目没有统一的规范和约定，前端的协作会是一个混乱的过程，因为不同的人写出的前端代码各式各样，给协作与后期维护增加了很多成本。使用vue组件化使得项目结构更加清晰，且组件内的结构也相当清晰，比如可视化用到的数据存放在data属性中，需要监听的大多数数据存放在computed属性中，组件用到的方法存放在methods属性中。vue为组件设置了一套规定，这样项目合作起来就不至于太混乱。
代码量更少。开发完本项目我掂量了一下，如果使用原生js或者jQuery开发同样的功能，代码量至少翻三倍，毕竟通过后台返回的数据构建元素，插入界面，再为某些元素绑定事件之类的代码就得一大坨。当然，代码量的减少有赖于vue在后台为我们做了许多工作，感谢尤大。

项目不足之处

由于使用vue并不多，且本项目完成也较匆忙，所以项目存在不足之处或者哪些功能有更好的实现还请大家指出，我好学习改正，当然我自己也列举了项目的一些不足：

由于使用的是豆瓣api，频繁请求会出现请求无效问题，但界面上并没有为此设置友好的界面提示；
在通过网络请求数据时，页面在数据未返回时直接空白显示，没有loading提示，用户体验不佳。（其实我一开始是加了loading.gif进行提示的，但觉得有点难看就去掉了~）
同城活动模块没有设置缓存，导致每次点击切换城市或者类型都要向豆瓣请求数据。