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

news/2023/12/8 23:56:02

图片描述

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

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

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

那么咱们现在就实现一个极简的搜索功能,只是用来验证思路。让同学们明白,前端+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 …

工作一年了的心得体会

工作至今有一年的时间了&#xff0c;这一年有过开心&#xff0c;也有失落。但是回首看看&#xff0c;似乎更多的是迷茫。 刚来公司的时候&#xff0c;打心底想好好学一学技术&#xff0c;学一点有用的东西。但是进公司之后发现很多和自己想的不太一样。来到了一个做监控平台的组…

Zookeeper学习(一) 概述

0. 前言 前段时间在工作中参与了一个分布式项目的开发&#xff0c;其中一个重要的模块就是Zookeeper。可以说这个项目及其之后的一段学习让我找到了自己的兴趣点&#xff0c;自己最近也学习了一些Zookeeper的知识&#xff0c;在这里也把自己学到的和一些思考写下来~ 1. 分布式协…

[转]React Native 语言基础之ES6

React Native 是基于 React 这个前端框架来构建native app的架构。React Native基于ES6&#xff08;即ECMAScript2015&#xff09;语言进行开发的。 JS的组成 1) 核心&#xff08;ECMAScript&#xff09;&#xff1a;描述了该语言的语法和基本对象。担当的是一个翻译的角色&am…

canvas 实现vue 手势解锁组件

1.手机锁屏九宫格解锁组件 2.代码如下 <template><canvas id"gesture" ref"canvas" :style"style" /></template><script>export default {name: GestureLock,props: {chooseType: {type: Number,default: 3 // 3: 3*3,…

Scala - 快速学习06 - 面向对象

1- 类 1.1- 简介&#xff1a;类、方法及对象 类是用来创建对象的蓝图。Scala文件中包含的多个类之间&#xff0c;都是彼此可见的&#xff0c;不需要声明为public。创建对象定义好类以后&#xff0c;就可以使用new关键字来创建对象。字段默认为public&#xff0c;在类外部和内部…

设计模式-创建型模式-建造者模式

设计模式-创建型模式-建造者模式建造者模式即生成器模式&#xff0c;将一个复杂的构建与它的表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。 代码如下 // 产品类 public class Product{public void doSomething(){// 业务处理} } // 抽象建造者 public abstract …

redis 系列18 事件

一.概述 Redis服务器是一个事件驱动程序&#xff0c;服务器需要处理两类事件&#xff1a;1文件事件&#xff0c;2时间事件。文件事件是关于客户端与服务器之间的通信操作。时间事件是关于服务器内部的一些定时操作。本篇还是参照"Redis设计与实现"书&#xff0c;简要…

ts学设计模式: 第一篇: 单例模式

模式定义 单例模式: 确保一个类只有一个实例, 并且提供一个全局访问的方法, 属于创建型模式。 模式结构图 代码实现 懒汉模式1. 懒汉模式中单例是在需要的时候才去创建的&#xff0c;如果单例已经创建&#xff0c;再次调用获取接口将不会重新创建新的对象&#xff0c;而是直接返…
最新文章