vue+node全棧移動商城【5】-簡單的篩選搜尋功能

我是老尚發表於2019-02-16

圖片描述

現在我們們來實現一個簡單的搜尋功能。不需要資料庫,更不需要存取資料,只是單純的讓搜尋這個功能執行起來。

先來說一下,在前端的層面上,對於搜尋大家不要想的太過於複雜。搜尋當然可以做的非常複雜,例如百度。

但是搜尋也可以非常簡單。簡單的說,無非就是你傳送一個關鍵詞到後端,後端對已有的資料進行一個篩選,如果有與關鍵詞相同的,就認為找到結果,並將結果返回。

那麼我們們現在就實現一個極簡的搜尋功能,只是用來驗證思路。讓同學們明白,前端+node,怎麼實現一個篩選、搜尋、查詢的功能。

頁面如下:

<div class="wrapDiv">
          <input type=`text` class=`leftDiv` ref=`inputRef` placeholder="請輸入" />
          <div class="rightDiv"> {{txt_data}} </div>
    </div>

    <van-button type="danger" @click="sendBtn">傳送</van-button>
    <van-button type="danger" @click="getBtn">獲取</van-button>

script部分:

sendBtn(){
                let _val = this.$refs.inputRef.value;
                // console.log( _val )

                axios.get(`http://localhost:5678/node_a`,{
                            params:{ v_data : _val }
                      });
          },
          getBtn(){
                axios.get(`http://localhost:5678/node_b`)
                      .then( _d=>{
                            console.log( _d.data );
                            this.txt_data = _d.data[0].name
                      })
          }

可能有同學會說,這不是跟上一篇文章的程式碼一樣嘛?
是的呀,檢視就是那個。但功能是不斷的迭代、增加的。
看,接下來的nodeJs部分:
以下程式碼都寫在nodeJs中介軟體,api_dev.js中


先來準備一些假資料

var _xxObj = {
    arrs:[{
        id:`n1`,
        name:`a_name`,
        vals:`aaa`
    },{
        id:`n2`,
        name:`b_name`,
        vals:`bbb`
    },{
        id:`n3`,
        name:`c_name`,
        vals:`ccc`
    }]
}

再加一個變數,

// 儲存過濾的結果,因為現在沒有db
var _filterResult = null;

然後來一個過濾的函式,在node_a介面中呼叫

function filter( _val ){
    return _xxObj.arrs.filter( _g =>{
        return _g.vals === _val
    })
}
//這裡有一些es6的語法,同學們自己去搞搞懂

// 第一個nodeJs介面,接收

app.get(`/node_a`, function(req, res){
    console.log( req.query.v_data );

    let _result = filter( req.query.v_data );

    _filterResult = _result.length !== 0 ? _result : [{id:`xxx`, name:`沒有結果`}]

    res.end();
});

這個node_a介面只做3件事,
1、把關鍵詞從get方式的requ.query中接收到;
2、傳入過濾方法filter中進行比較;
3、把結果存入公共變數 _filterResult 中;

這裡當然存在全域性變數汙染,但我們不去管它


接下來是第二個介面,node_b

app.get(`/node_b`, function(req, res){
    res.send( _filterResult )
});

這個介面只做一件事,就是當它被請求的時候,把儲存著過濾結果的變數_filterResult,返回到客戶端。
//這裡當然存在著各種操作流程上的問題。例如有沒有值啊、加解密、報錯啊,等等。我們都不去管它。

現在只要一件事,就是能把filter的結果返回,就ok。


為什麼要做這一步呢?
因為後面的使用者名稱已被註冊、使用者名稱不存在、使用者登入、註冊…等功能,其實都是這個思路。

在實際工作環境場景中,會有很多的判斷、加解密、要求等等。

但抓住核心,【對於前端來講,搜尋在很多時候,其實就是比較字串】

相關文章