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

news/2024/6/17 12:53:10

图片描述

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

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

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

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

这里当然存在全局变量污染,但我们不去管它


接下来是第二个接口,node_b
app.get('/node_b', function(req, res){
    res.send( _filterResult )
});
这个接口只做一件事,就是当它被请求的时候,把保存着过滤结果的变量_filterResult,返回到客户端。
//这里当然存在着各种操作流程上的问题。例如有没有值啊、加解密、报错啊,等等。我们都不去管它。

现在只要一件事,就是能把filter的结果返回,就ok。


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

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

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


http://www.niftyadmin.cn/n/2606781.html

相关文章

Web前端+移动端全套视频教程

Web前端移动端全套视频教程|12、小程序|01.小程序.rar|11、Vue|05.Vue实战练习.rar|04.Vue UI框架Element-UI.rar|03.Vue路由.rar|02.Vue网络请求.rar|01.Vue基础.rar|10、React|06.React网络请求Fetch.rar|05.React UI框架Antd.rar|04.React路由4.x.rar|03.React路由3.x.rar|0…

element-ui上传下载excel(超详细der)

1. 上传 EXCEL Upload组件 点击跳转到该组件官方文档 用到的upload组件参数参数说明类型可选默认值action 必选参数&#xff0c;上传的地址string------file-list上传的文件列表array---[]accept接受上传的文件类型string------http-request覆盖默认的上传行为function------…

区块链是什么?能干什么?

想知道更多区块链技术知识&#xff0c;请百度【链客区块链技术问答社区】链客&#xff0c;有问必答&#xff01;&#xff01; 一般听到一个新技术&#xff0c;我都会问自己两个最简单的问题&#xff1a;1. 它到底是什么&#xff1f;2. 它能干什么用&#xff1f;下面的内容就按这…

落球问题

这不是一道什么竞赛题目&#xff0c;就是刘汝佳老师在算法竞赛入门经典中给的关于二叉树的例子。自己写了一下&#xff0c;附到博客园上面来供自己回忆&#xff1b; 第一种解法是设了一个ok判断球是往左还是往右&#xff0c;但是要开一个2^20的数组&#xff0c;用来记录每个位置…

FRIDA 实用手册

FRIDA 实用手册本文目的是作为工具类文章&#xff0c;收集整理了一些 FRIDA 的使用技巧和用例&#xff0c;方便同学们在开发使用过程中开袋即食。 frida 的基础教程可以直接参看官网说明。 Python 部分JS 中文支持使用 codecs.open(scriptpath, "r", "utf-8&quo…

hdu2199 二分搜索

这是很简单的二分搜索&#xff1b;需要注意的是精度。一开始我用的是right-left<1e-4,测试样例中100我输出的最后一位为1&#xff0c;不合要求。 后来自己写了个四舍五入的一段&#xff0c;但交上去WA&#xff0c;于是改成1e-6&#xff0c;AC了。 代码题目如下&#xff1a; …

实用的设计模式1——单例模式

在软件工程中&#xff0c;设计模式&#xff08; design pattern &#xff09;是对软件设计中普遍存在&#xff08;反复出现&#xff09;的各种问题&#xff0c;所提出的解决方案。 看维基上对设计模式的定义&#xff0c;你就知道设计模式的重要性&#xff0c;但是往往编程中设计…

一条502报警引发的胡思乱想

安心倒计时 忙完了今天的工作, 终于到了周五,可以好好休息下了。 睡梦惊醒 就在安心养神的时候, 同事转给了我一条nginx 502的报警, 赶紧去线上一顿排查。 首先得先找出哪台机器报出的(同时喊运维看下线上负载情况), 发现01机器的nginx日志在报警时间点的错误信息: *272881176 …