博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue+node全栈移动商城【5】-简单的筛选搜索功能
阅读量:7094 次
发布时间:2019-06-28

本文共 2075 字,大约阅读时间需要 6 分钟。

图片描述

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

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

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

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

页面如下:
{
{txt_data}}
发送
获取
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'    }]}
再加一个变量,
// 保存过滤的结果,因为现在没有dbvar _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。


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

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

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

转载地址:http://tiaql.baihongyu.com/

你可能感兴趣的文章
【leetcode】Maximum Product of Word Lengths
查看>>
C 工具库 GLib --- 提供多种高级的数据结构,如内存块、双向和单向链表、哈希表、动态字符串等...
查看>>
SQL中format()函数对应的格式
查看>>
svn command
查看>>
职业插画之路
查看>>
Java入门篇(五)——字符串/String类
查看>>
python 的StringIO
查看>>
第三个阶段事后诸葛亮
查看>>
java中的sql语句中如果有like怎么写
查看>>
【原创】驱动加载之StartService
查看>>
1751: [Usaco2005 qua]Lake Counting
查看>>
【BZOJ】4753: [Jsoi2016]最佳团体 01分数规划+树上背包
查看>>
iOS 获取设备信息之UIDevice的使用,Swift 基于 API
查看>>
IntelliJ cannot log in to GitHub上传github报错解决
查看>>
PlayWithHeyCoder
查看>>
Kotlin入门(27)文件读写操作
查看>>
设计模式-单例模式
查看>>
[开源]KJFramework.Message 智能二进制消息框架 -- 对于数组的极致性优化
查看>>
利用宏定义令iOS项目当中的NSLog不执行
查看>>
flutter版蒲公英
查看>>