基於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本項目哦~

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。