express+mongodb+vue實現增刪改查-全棧之路2.0

時間 2019-11-17

標籤 express+mongodb+vue express mongodb vue 實現增刪之路 2.0 欄目 MongoDB 简体版

原文原文鏈接

Github項目地址css

效果圖

登錄頁

查詢

新增

修改

刪除

詳情頁

技術棧

vue axios vue-router express mongo element iconfont scsshtml

前言

半年前寫過一個express+mongodb+vue的項目，其中大體的給你們展現了從零構建一個先後臺項目所須要的技術點和思路，以及在開發過程當中遇到的一些坑。前端

以後收到一些小夥伴的私信包括github上提出的issue。總結一下就是一下如下兩點。vue

項目啓動報錯的問題
但願案例能夠更加的豐富（分頁、條件查詢）

其中項目報錯404的問題，是由於該項目是一個先後端項目，不只僅須要經過npm run dev啓動前端，還須要經過終端node app.js啓動後臺。這裏你們必定要注意！node

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

新增模塊

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

提示

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

強烈建議去個人github上，將項目下載到本地，啓動項目後，順着本文的思路與我進行靈魂深處的探討，若是有任何問題的話，歡迎私信我！git

正文

封裝經常使用工具類函數

由於在真實的項目中，咱們須要頻繁的用到ajax獲取數據，以前的版本，是採用vue-resource完成的，可是因爲官方再也不維護，因此本次版本中採用官方建議使用的axios。咱們能夠方便實現自定義axios實例，攔截器，請求添加字段等功能。github

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

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 瀏覽器渲染機制 重排、重繪 函數節流、防抖等須要咱們去學習，這些會鞭策着咱們，不斷地去優化本身的程序。最終寫出更加優質的代碼！