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

痛定思痛。 2022-03-07 13:07 244阅读 0赞

![图片描述][3404678786-5c6286dcb470e_articlex]

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

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

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

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

> **页面如下：**

> **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。

--------------------

> 为什么要做这一步呢？  
> 因为后面的用户名已被注册、用户名不存在、用户登录、注册...等功能，其实都是这个思路。

在实际工作环境场景中，会有很多的判断、加解密、要求等等。

### 但抓住核心，【对于前端来讲，搜索在很多时候，其实就是比较字符串】 ###

[3404678786-5c6286dcb470e_articlex]: /images/20220307/6ccfbbe6836e421eb8191e45665f6185.png