現在咱們來實現一個簡單的搜索功能。不需要數據庫,更不需要存取數據,只是單純的讓搜索這個功能運行起來。
先來說一下,在前端的層面上,對於搜索大家不要想的太過於複雜。搜索當然可以做的非常複雜,例如百度。
但是搜索也可以非常簡單。簡單的說,無非就是你發送一個關鍵詞到後端,後端對已有的數據進行一個篩選,如果有與關鍵詞相同的,就認爲找到結果,並將結果返回。
那麼咱們現在就實現一個極簡的搜索功能,只是用來驗證思路。讓同學們明白,前端+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
})
}
// 第一個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接口只做2件事,
1、把關鍵詞從get方式的requ.query中接收到;
2、傳入過濾方法filter中進行比較;
3、把結果存入公共變量 _filterResult 中;這裏當然存在全局變量污染,但我們不去管它
接下來是第二個接口,node_b
app.get('/node_b', function(req, res){
res.send( _filterResult )
});
這個接口只做一件事,就是當它被請求的時候,把保存着過濾結果的變量_filterResult,返回到客戶端。
//這裏當然存在着各種操作流程上的問題。例如有沒有值啊、加解密、報錯啊,等等。我們都不去管它。現在只要一件事,就是能把filter的結果返回,就ok。
爲什麼要做這一步呢?
因爲後面的用戶名已被註冊、用戶名不存在、用戶登錄、註冊...等功能,其實都是這個思路。
在實際工作環境場景中,會有很多的判斷、加解密、要求等等。