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

Vue+Node+vant+mongoDB移动商城实战【1】介绍与开始

Vue+Node+vant+mongoDB移动商城实战【2】-环境搭建、安装

Vue+Node+vant+mongoDB移动商城实战【3】-安装express，实现第一个nodeJs接口

Vue+Node+vant+mongoDB移动商城实战【4】建立get、send接口，接收数据更新视图

Vue+Node+vant+mongoDB移动商城实战【6】node接口配置文件

Vue+Node+vant+mongoDB移动商城实战【7】路由跳转-注册页面

---

如今我们来实现一个简单的搜索功能。不须要数据库，更不须要存取数据，只是单纯的让搜索这个功能运行起来。

先来讲一下，在前端的层面上，对于搜索你们不要想的太过于复杂。搜索固然能够作的很是复杂，例如百度。

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

那么我们如今就实现一个极简的搜索功能，只是用来验证思路。让同窗们明白，前端+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件事， 一、把关键词从get方式的requ.query中接收到； 二、传入过滤方法filter中进行比较； 三、把结果存入公共变量 _filterResult 中；

这里固然存在全局变量污染，但咱们不去管它

---

接下来是第二个接口，node_b

app.get('/node_b', function(req, res){
	res.send( _filterResult )
});
复制代码

这个接口只作一件事，就是当它被请求的时候，把保存着过滤结果的变量_filterResult，返回到客户端。 //这里固然存在着各类操做流程上的问题。例若有没有值啊、加解密、报错啊，等等。咱们都不去管它。

如今只要一件事，就是能把filter的结果返回，就ok。

---

为何要作这一步呢？ 由于后面的用户名已被注册、用户名不存在、用户登陆、注册...等功能，其实都是这个思路。

在实际工做环境场景中，会有不少的判断、加解密、要求等等。

但抓住核心，【对于前端来说，搜索在不少时候，其实就是比较字符串】

---

更快观看 更多教程内容，请扫下方二维码进入前端学习群，让你组团学习，更快进步。