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件事， 1、把關鍵詞從get方式的requ.query中接收到； 2、傳入過濾方法filter中進行比較； 3、把結果存入公共變數 _filterResult 中；
這裡當然存在全域性變數汙染，但我們不去管它
接下來是第二個介面，node_b
app.get('/node_b', function(req, res){
res.send( _filterResult )
});
複製程式碼這個介面只做一件事，就是當它被請求的時候，把儲存著過濾結果的變數_filterResult，返回到客戶端。 //這裡當然存在著各種操作流程上的問題。例如有沒有值啊、加解密、報錯啊，等等。我們都不去管它。
現在只要一件事，就是能把filter的結果返回，就ok。
為什麼要做這一步呢？ 因為後面的使用者名稱已被註冊、使用者名稱不存在、使用者登入、註冊...等功能，其實都是這個思路。
在實際工作環境場景中，會有很多的判斷、加解密、要求等等。
但抓住核心，【對於前端來講，搜尋在很多時候，其實就是比較字串】
更快觀看 更多教程內容，請掃下方二維碼進入前端學習群，讓你組團學習，更快進步。
