效果圖
登陸頁
查詢
新增
修改
刪除
詳情頁
技術棧
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.js
import "./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即將到來，願所有人牛逼！在這給你們?個早年！
原創不易，且?且珍惜！
☝️☝️☝️☝️☝️
☝️☝️☝️☝️☝️有任何問題，歡迎郵箱私信我！