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

Vue+Node+vant+mongoDB移動商城實戰【1】介紹與開始

Vue+Node+vant+mongoDB移動商城實戰【2】-環境搭建、安裝

Vue+Node+vant+mongoDB移動商城實戰【3】-安裝express，實現第一個nodeJs接口

Vue+Node+vant+mongoDB移動商城實戰【4】建立get、send接口，接收數據更新視圖

Vue+Node+vant+mongoDB移動商城實戰【6】node接口配置文件

Vue+Node+vant+mongoDB移動商城實戰【7】路由跳轉-註冊頁面

---

如今我們來實現一個簡單的搜索功能。不須要數據庫，更不須要存取數據，只是單純的讓搜索這個功能運行起來。

先來講一下，在前端的層面上，對於搜索你們不要想的太過於複雜。搜索固然能夠作的很是複雜，例如百度。

可是搜索也能夠很是簡單。簡單的說，無非就是你發送一個關鍵詞到後端，後端對已有的數據進行一個篩選，若是有與關鍵詞相同的，就認爲找到結果，並將結果返回。

那麼我們如今就實現一個極簡的搜索功能，只是用來驗證思路。讓同窗們明白，前端+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件事， 一、把關鍵詞從get方式的requ.query中接收到； 二、傳入過濾方法filter中進行比較； 三、把結果存入公共變量 _filterResult 中；

這裏固然存在全局變量污染，但咱們不去管它

---

接下來是第二個接口，node_b

app.get('/node_b', function(req, res){
	res.send( _filterResult )
});
複製代碼

這個接口只作一件事，就是當它被請求的時候，把保存着過濾結果的變量_filterResult，返回到客戶端。 //這裏固然存在着各類操做流程上的問題。例若有沒有值啊、加解密、報錯啊，等等。咱們都不去管它。

如今只要一件事，就是能把filter的結果返回，就ok。

---

爲何要作這一步呢？ 由於後面的用戶名已被註冊、用戶名不存在、用戶登陸、註冊...等功能，其實都是這個思路。

在實際工做環境場景中，會有不少的判斷、加解密、要求等等。

但抓住核心，【對於前端來說，搜索在不少時候，其實就是比較字符串】

---

更快觀看 更多教程內容，請掃下方二維碼進入前端學習羣，讓你組團學習，更快進步。