共计 1749 个字符，预计需要花费 5 分钟才能阅读完成。
现在咱们来实现一个简单的搜索功能。不需要数据库，更不需要存取数据，只是单纯的让搜索这个功能运行起来。
先来说一下，在前端的层面上，对于搜索大家不要想的太过于复杂。搜索当然可以做的非常复杂，例如百度。
但是搜索也可以非常简单。简单的说，无非就是你发送一个关键词到后端，后端对已有的数据进行一个筛选，如果有与关键词相同的，就认为找到结果，并将结果返回。
那么咱们现在就实现一个极简的搜索功能，只是用来验证思路。让同学们明白，前端 +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。
为什么要做这一步呢？因为后面的用户名已被注册、用户名不存在、用户登录、注册 … 等功能，其实都是这个思路。
在实际工作环境场景中，会有很多的判断、加解密、要求等等。
但抓住核心，【对于前端来讲，搜索在很多时候，其实就是比较字符串】