Vue+node全栈手机商城【5】——简单的过滤搜索功能

时间：2023-04-03 19:58:25 Node.js

下面来实现一个简单的搜索功能。不需要数据库，更不需要访问数据，只需要让搜索功能运行起来。首先，在前端层面，不要把搜索想的太复杂。搜索当然可以很复杂，比如百度。但搜索也可以非常简单。简单的说，无非就是你给后台发一个关键词，后台对已有的数据进行筛选。如果有相同的关键字，它会考虑找到的结果并返回结果。那么我们现在来实现一个最小的搜索功能，只是为了验证一下思路。让同学们了解前端+节点是如何实现筛选、搜索、查询等功能的。页面如下：}}

发送获取脚本部分：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'}]}添加另一个变量，//保存过滤后的结果，因为现在没有dbvar_filterResult=null;然后来个过滤函数，调用node_a接口中的functionfilter(_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:'Noresult'}]res.end();});这个node_a接口只做了3件事，1.在get方法中从requ.query中接收关键字；2、传入过滤方法filter进行比较；3.将结果存储在public变量_filterResult中；当然这里有全局变量污染，不过我们不用管它接下来是第二个接口，node_bapp.get('/node_b',function(req,res){res.send(_filterResult)});这个接口只做了一件事，就是当它被请求时，将保存过滤结果的变量_filterResult返回给客户端。//当然这里还有各种操作流程问题。比如有没有值，加解密，报错等等。让我们别管它。现在只要有一个东西，返回过滤的结果就可以了。为什么要做这一步？因为用户名已经注册过，用户名不存在，用户登录，注册...等功能其实都是同一个思路。在实际的工作环境场景中，会有很多的判断、加解密、需求等等。但是抓住了核心，【对于前端来说，很多时候查找其实就是比较字符串】