基于vue搭建一个简易版豆瓣

时间 2019-11-16

标签基于 vue 搭建一个简易豆瓣繁體版

原文原文链接

前言

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

项目概述

项目地址：github.com/nh0007/vue-…css

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

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

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

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

运行项目

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

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

项目截图

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

开发流程

若是你尚未接触过vue，能够先看看vue官方教程，毕竟官方文档才是最好的学习资料。若是你对ES6语法还不是很熟，也能够看看阮一峰老师的ECMAScript 6入门，固然，边作项目时边学习才是最高效的。如下是我本身在本项目的开发流程与思路，仅供参考：ios

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

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

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进行提示的，但以为有点难看就去掉了~）
同城活动模块没有设置缓存，致使每次点击切换城市或者类型都要向豆瓣请求数据。

结语

这是本人第一次写技术博客，仍是有些战战兢兢，写的很差的地方，因此还请你们多批评指正。另外，欢迎向star本项目哦~