Github項目地址

效果圖

登陸頁

查詢

新增

修改

刪除

詳情頁

技術棧

vue axios vue-router express mongo element iconfont scss

前言

半年前寫過一個express+mongodb+vue的項目，其中大致的給大家展示了從零構建一個前后臺項目所需要的技術點和思路，以及在開發過程中遇到的一些坑。

之后收到一些小伙伴的私信包括github上提出的issue。總結一下就是一下以下兩點。

項目啟動報錯的問題

希望案例可以更加的豐富（分頁、條件查詢）

其中項目報錯404的問題，是因為該項目是一個前后端項目，不僅僅需要通過npm run dev啟動前端，還需要通過終端node app.js啟動后臺。這里大家一定要注意！

本次版本是之前版本的升級版，項目中對部分代碼做了一定的優化，也增加了一些新的模塊和功能點，使得項目更加完善，大致有以下模塊。

新增模塊

• 登陸頁面
• 條件查詢
• 分頁查詢
• 本地緩存
• 圖標使用
• scss使用
• ......

提示

本篇主要是圍繞本次版本新增的一些技術點展開陳述。不會過多的給大家講解實現整個前后端項目的思路。如果你對整個項目的搭建思路還不是很明確的話，建議您先去閱讀上一個版本express+mongodb+vue。

強烈建議去我的github上，將項目下載到本地，啟動項目后，順著本文的思路與我進行靈魂深處的探討，如果有任何問題的話，歡迎私信我！

正文

封裝常用工具類函數

因為在真實的項目中，我們需要頻繁的用到ajax獲取數據，之前的版本，是采用vue-resource完成的，但是由于官方不再維護，所以本次版本中采用官方建議使用的axios。我們可以方便實現自定義axios實例，攔截器，請求添加字段等功能。

在src目錄下面，有個utils文件夾，里面用來存放一些工具類函數，這些工具類函數應該是具有通用性的。也就是在不同的組件頁面中都可以引用。實現一次定義，多次使用的目的。具體的工具類函數分類大致有以下一些點。

• axios實例
• 常用正則校驗函數
• cookie、sessionStorage添加、獲取、刪除方法
• ......

總之從事開發的同學們一定要有簡化業務邏輯的思維，經常用到的模塊，獨立出來。

Tips:文件命名和函數命名盡量標準一點，不要想起啥就是啥，盡量用對應的英文去命名，英文不好的去百度唄，磨刀不誤砍柴工！

登陸頁面的那點事

合理的登陸邏輯應該是以下兩點:

用戶在查詢英雄列表之前，首先需要登錄，否則重定向到登錄頁面

對于已經登錄的用戶，可以直接訪問列表頁

為了實現上述邏輯，我們可以使用vue-router中提供的前置守衛導航beforeEach配合路由重定向實現。具體代碼參考permission.js文件。

Tips:這里要提醒以下大家路由導航中的next使用一定要注意，其中傳參和不傳參是有不同的效果的。我在開發的過程中，就因為這個，遇到了無限循環的坑。

更加豐富的圖標選擇

本項目使用的前端框架element中雖然為我們提供了一些常用的圖標，但是在真實的開發場景中，是無法滿足的。如果你還在用圖片實現icon的話，我只想送你兩個字——牛逼！

阿里巴巴iconfont圖標庫，可以幫助我們解決框架提供圖標不完善的問題，其中使用方法有三種，它們之間的利和弊可自行前往了解。本項目中使用的是unicode方式。

我們在開發一個項目之前，可在阿里巴巴iconfont上新建一個項目，然后去圖標庫中查找對應的圖標，添加到項目中。再下載到本地，引入項目中即可。

項目src目錄下面的assets文件夾中，主要存放一些靜態資源，比如css image icon等。

然后在main.js文件中引入對應圖標的css文件。

#main.jsimport "./assets/icon/iconfont.css" 復制代碼

Tips:其中對于圖標庫的前綴命名和圖標的命名一定要規范，否則后期可能會遇到很大的麻煩。 重要的事說三遍： 命名規范！ 命名規范！ 命名規范！

scss的使用

之前的版本中，關于樣式是用css進行命名的，這樣就會出現以下這種情形...

.container{width:...margin:... }.container header{padding:...border-radius:...box-shadow:... } .container header .title{background:...color:...font-size:... } 復制代碼

這種方式雖然沒有問題，但是書寫起來及其蛋疼，而且一旦形如這種的代碼多了，代碼看起來也會很不美觀。

為了使性能更加好，逼格更加高，代碼更加美觀，所以我去學了下如何使用scss，大致分為以下三步驟：

第一步：cmd終端或者**vscode**終端輸入： npm install sass-loader --save-dev npm install node-sass --sava-dev第二步：在build文件夾下的webpack.base.conf.js的rules里面添加配置 {test: /\.scss$/,loaders: ['style', 'css', 'sass'] }第三步： 使用scss時候在所在的style樣式標簽上添加lang=”scss”即可應用對應的語法，否則報錯 復制代碼

再用scss語法去書寫上面的css規則，則變成以下這種格式:

.container{width:...margin:...header:{padding:...border-radius:...box-shadow:....title{background:...color:...font-size:...}} } 復制代碼

兩種風格的區別和優劣，我相信不用多說，你也應該明白了。

Tips:css的預處理器有less、sass、scss等，它們之間有各自的特點和風格，但是萬變不離其宗，你要做的就是打好css基本功。

sessionStorage實現本地緩存

就拿本案例的實際場景來說吧，當用戶從列表頁跳轉到詳情頁面時，再返回列表頁面時，列表頁面的查詢條件和查詢結果應該還存在那里。而不是需要用戶再次輸入查詢條件進行二次查詢，這樣做的好處主要有以下兩點：

更加符合實際使用場景，減少用戶使用成本

畢竟前端工程師是要用自己最大的技術能力讓用戶體驗更佳卓越！

這里我的思路是：

1.用戶輸入查詢條件后，進行列表查詢2.用戶點擊某條數據的相信按鈕，跳轉到詳情頁面（這時我們要去保存用戶的查詢條件和當前的頁數）3.用戶從詳情頁返回列表頁（在mounted鉤子函數中，判斷緩存中是否存在緩存數據，如果存在的話，則用緩存數據去進行查詢）注意用戶每次進行查詢后，我們需要將緩存給刪除，否則用戶可能刷新頁面后緩存仍然存在，這里我們將添加緩存的時機選在（用戶點擊詳情按鈕的那一刻） 復制代碼

大致代碼:

#List.vue組件中#點擊詳情按鈕函數 toDetail(id){var queryParmas = {.........};//在本地緩存中存儲查詢條件sessionStorage.queryParmas = JSON.stringify(queryParmas);}#查詢函數 search(){.........//每次查詢數據后，刪除緩存sessionStorage.removeItem("queryParmas"); }#mounted鉤子函數 mounted(){//進入頁面判斷是否存在緩存，如果有緩存，直接查詢var sessionObj = sessionStorage.getItem("queryParmas");if(sessionObj){//取出緩存數據，包括上次查詢條件和上次查詢頁數，進行查詢} } 復制代碼

Tips:element中分頁的使用中會存在一些坑，當使用上述緩存數據進行查詢時，可能會出現頁碼的一些bug。這里我也沒有細找原因，但是通過使用vue中的$nextTick方法控制分頁的顯隱，可以解決這個bug。具體的有興趣可以了解下。

##總結

本篇文章主要是圍繞一些功能點和方案實現進行展開，同時也提出了一些個人建議。細心的你一定會發現，其實我提煉出的很多點，都可以圍繞前端性能優化進行展開。其中里面還有很多好玩的，包括http 瀏覽器渲染機制 重排、重繪 函數節流、防抖等需要我們去學習，這些會鞭策著我們，不斷地去優化自己的程序。最終寫出更加優質的代碼！

最后的祝福

天青色等煙雨，而我在等你！動動你們的????，點個贊再走！

2019即將到來，愿所有人牛逼！在這給你們?個早年！

原創不易，且?且珍惜！

Github傳送門

??????????

ruiwei88888@163.com

??????????有任何問題，歡迎郵箱私信我！

總結

以上是生活随笔為你收集整理的express+mongodb+vue实现增删改查-全栈之路2.0的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。