vue+node全栈移动商城【5】简单的筛选搜索功能

图片描述

现在咱们来实现一个简单的搜索功能。不需要数据库&＃xff0c;更不需要存取数据&＃xff0c;只是单纯的让搜索这个功能运行起来。

先来说一下&＃xff0c;在前端的层面上&＃xff0c;对于搜索大家不要想的太过于复杂。搜索当然可以做的非常复杂&＃xff0c;例如百度。

但是搜索也可以非常简单。简单的说&＃xff0c;无非就是你发送一个关键词到后端&＃xff0c;后端对已有的数据进行一个筛选&＃xff0c;如果有与关键词相同的&＃xff0c;就认为找到结果&＃xff0c;并将结果返回。

那么咱们现在就实现一个极简的搜索功能&＃xff0c;只是用来验证思路。让同学们明白&＃xff0c;前端&＃43;node&＃xff0c;怎么实现一个筛选、搜索、查询的功能。

页面如下&＃xff1a;

{{txt_data}}

发送获取

script部分&＃xff1a;

sendBtn(){let _val &＃61; this.$refs.inputRef.value;// console.log( _val )axios.get(&＃39;http://localhost:5678/node_a&＃39;,{params:{ v_data : _val }});},getBtn(){axios.get(&＃39;http://localhost:5678/node_b&＃39;).then( _d&＃61;>{console.log( _d.data );this.txt_data &＃61; _d.data[0].name})}

可能有同学会说&＃xff0c;这不是跟上一篇文章的代码一样嘛&＃xff1f;
是的呀&＃xff0c;视图就是那个。但功能是不断的迭代、增加的。
看&＃xff0c;接下来的nodeJs部分&＃xff1a;&＃xff0c;
以下代码都写在nodeJs中间件&＃xff0c;api_dev.js中

先来准备一些假数据

var _xxObj &＃61; {arrs:[{id:&＃39;n1&＃39;,name:&＃39;a_name&＃39;,vals:&＃39;aaa&＃39;},{id:&＃39;n2&＃39;,name:&＃39;b_name&＃39;,vals:&＃39;bbb&＃39;},{id:&＃39;n3&＃39;,name:&＃39;c_name&＃39;,vals:&＃39;ccc&＃39;}] }

再加一个变量&＃xff0c;

// 保存过滤的结果&＃xff0c;因为现在没有db var _filterResult &＃61; null;

然后来一个过滤的函数&＃xff0c;在node_a接口中调用

function filter( _val ){return _xxObj.arrs.filter( _g &＃61;>{return _g.vals &＃61;&＃61;&＃61; _val}) } //这里有一些es6的语法&＃xff0c;同学们自己去搞搞懂

// 第一个nodeJs接口&＃xff0c;接收

app.get(&＃39;/node_a&＃39;, function(req, res){console.log( req.query.v_data );let _result &＃61; filter( req.query.v_data );_filterResult &＃61; _result.length !&＃61;&＃61; 0 ? _result : [{id:&＃39;xxx&＃39;, name:&＃39;没有结果&＃39;}]res.end(); });

这个node_a接口只做3件事&＃xff0c;
1、把关键词从get方式的requ.query中接收到&＃xff1b;
2、传入过滤方法filter中进行比较&＃xff1b;
3、把结果存入公共变量 _filterResult 中&＃xff1b;
这里当然存在全局变量污染&＃xff0c;但我们不去管它

接下来是第二个接口&＃xff0c;node_b

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

这个接口只做一件事&＃xff0c;就是当它被请求的时候&＃xff0c;把保存着过滤结果的变量_filterResult&＃xff0c;返回到客户端。
//这里当然存在着各种操作流程上的问题。例如有没有值啊、加解密、报错啊&＃xff0c;等等。我们都不去管它。
现在只要一件事&＃xff0c;就是能把filter的结果返回&＃xff0c;就ok。