您的位置：首页 > 编程技术 > js  >  Node实现搜索框进行模糊查询

Node实现搜索框进行模糊查询

 更新时间：2021年6月28日 15:00  点击：3058

本文实例为大家分享了Node实现搜索框进行模糊查询的具体代码，供大家参考，具体内容如下

一、需求

点击导航栏中的搜索图，出现搜索框，从而进行文章的模糊查询

二、建表

1.blog表

添加外键：

2.nav表

3.type表

4.user表

三、页面及样式

like.ejs：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查询</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css" >
    <link rel="stylesheet" href="/css/index.css" >
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <%-include('detachPart/nav.ejs')%>
    <%-include('detachPart/search.ejs')%>
    <div class="container">
        <div class="row">
            <div class="col-lg-9">
                <%-include('bigPart/ownblog.ejs')%>
            </div>  
            <div class="col-lg-3">
                <%-include('smallPart/recommend.ejs')%>
                <%-include('smallPart/rank.ejs')%>
                <%-include('smallPart/rightimg_1.ejs')%>
                <%-include('smallPart/information.ejs')%>
                <%-include('smallPart/mylink.ejs')%>
            </div>
        </div>
    </div>
    <%-include('detachPart/footer.ejs')%>
</body>
</html>

search.ejs：

<div class="container searchclose">
    <form action="/like" method="GET">
        <input name="link" type="text" placeholder="请输入关键字词">
        <input type="submit" value="搜索">
        <img class="closebtn" src="image/icon/close.png" alt="">
    </form>
</div>

index.css：

.searchclose{
    display: none;
    position: relative;
    margin: 0.5rem auto;
    padding: 1rem 0;
    text-align: center;
    background-color: white;
}
.searchclose input:nth-child(1){
    width: 25rem;
    height: 2.2rem;
    outline: none;
    font-size: 0.9rem;
    padding-left: 0.5rem;
    border: 1px solid silver;
    box-sizing: border-box;
    vertical-align: middle;
}
.searchclose input:nth-child(2){
    display: inline-block;
    width: 10rem;
    height: 2.2rem;
    line-height: 2.2rem;
    background-color: rgb(41, 41, 41);;
    color: white;
    vertical-align: middle;
    border: 1px solid rgb(41, 41, 41);
    border-style: none;
    margin-left: -1rem;
}
.searchclose img{
    position: absolute;
    top: 0;
    right: 0;
}

index.js：

$(function(){
    $(".searchbtn").click(function(){
        $(".searchclose").show();
    });
    $(".closebtn").click(function(){
        $(".searchclose").hide();
    });
});

四、MySQL数据

connection.js：

var mysql=require("mysql");
var setting=require("./setting");
var connection;
var connectionmysql=function(){
    connection=mysql.createConnection({
        host:setting.host,
        port:setting.port,
        user:setting.user,
        password:setting.pwd,
        database:setting.base
    });
}
connectionmysql(); 
exports.select=function(str,callback){
    connectionmysql();  
    connection.query(str,function(err,res){
        if(err) throw err;
        callback(res);
        connection.end();  
    });
}   
exports.find=function(str,params,callback){
    connectionmysql();  
    connection.query(str,params,function(err,res){
        if(err) throw err;
        callback(res);
        connection.end();  
    });
}

sql.js：

module.exports={
    findTitle:"select * from nav",
    clickRank:"select id,title from blog order by num desc limit 7",
    recommendInfo:"select id,title,logo,recommend from blog where recommend=1 limit 8",
    likeBlog:"select blog.id,title,intro,logo,time,type.typeinfo,user.face from blog,type,user where blog.type=type.id and blog.face=user.id and title like ? order by time desc"
}

promise.js：

var mysql=require("../MySQL/connection");
var sql=require("../MySQL/sql");
module.exports={
    findTitle:function(){
        return new Promise(function(resolve){
            mysql.select(sql.findTitle,function(result){
                resolve(JSON.parse(JSON.stringify(result)));
            });
        })
    },
    clickRank:function(){
        return new Promise(function(resolve){
            mysql.select(sql.clickRank,function(result){
                resolve(JSON.parse(JSON.stringify(result)));
            });
        });
    },
    recommendInfo:function(){
        return new Promise(function(resolve){
            mysql.select(sql.recommendInfo,function(result){
                resolve(JSON.parse(JSON.stringify(result)));
            });
        });
    },
    likeBlog:function(msg){
        return new Promise(function(resolve){
            mysql.find(sql.likeBlog,msg,function(result){
                resolve(JSON.parse(JSON.stringify(result)));
            });
        });
    }
}

router.js：

var promise=require("../MySQL/promise");
var url=require("url");
module.exports=function(app){
    // 搜索框进行模糊查找
    app.get("/like",function(req,res){
        var likeurl=url.parse(req.url,true).query.link;
        async function getData(){
            var res1=await promise.findTitle();
            var res5=await promise.clickRank();
            var res11=await promise.recommendInfo();
            var res21=await promise.likeBlog("%"+likeurl+"%");
            var allres={
                titleindex:0,
                navres:res1,
                rankres:res5,
                recommendres:res11,
                blogres:res21
            }
            return allres;
        }
        getData().then(function(result){
            res.render("like",result);
        });
    });
}

注：like 路由中的blogres:res21和首页中的blogres:res10,所渲染到页面中的数据名称需一致，在此均为 blogres

五、效果展示

进行搜索：

搜索结果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持猪先飞。

[!--infotagslink--]

相关文章

  • linux服务器快速卸载安装node环境(简单上手)

    这篇文章主要介绍了linux服务器快速卸载安装node环境(简单上手)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-22

  • Node实现搜索框进行模糊查询

    这篇文章主要为大家详细介绍了Node实现搜索框进行模糊查询，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-06-28

  • Element-ui 自带的两种远程搜索(模糊查询)用法讲解

    这篇文章主要介绍了Element-ui 自带的两种远程搜索(模糊查询)用法讲解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-01-29

  • Select下拉框模糊查询功能实现代码

    这篇文章主要介绍了Select下拉框模糊查询功能实现代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下...2016-07-29

  • Node.js程序中的本地文件操作用法小结

    这篇文章主要介绍了Node.js程序中的本地文件操作用法小结,作为运行在服务器端的JavaScript解释器,Node中自然拥有操作本地文件的方法,需要的朋友可以参考下...2016-03-09

  • node.js如何自定义实现一个EventEmitter

    我们了解到，Node采用了事件驱动机制，而EventEmitter就是Node实现事件驱动的基础，本文主要介绍了node.js自定义实现EventEmitter，感兴趣的可以了解一下...2021-07-17

  • node自定义安装更改npm全局模块默认安装路径的步骤

    有段时间没用npm了，新建个项目，需要改变npm全局包默认安装的路径，本文就来介绍一下node自定义安装更改npm全局模块默认安装路径的步骤，感兴趣的可以了解下...2021-09-14

  • MySql like模糊查询通配符使用详细介绍

    一、SQL模式SQL的模式匹配允许你使用“_”匹配任何单个字符，而“%”匹配任意数目字符（包括零个字符）。在 MySQL中，SQL的模式缺省是忽略大小写的。下面显示一些例子。注意在你使用SQL模式时，你不能使用=或！=；而使用LIKE或NOT...2013-10-04

  • 如何用Node.js编写内存效率高的应用程序

    这篇文章主要介绍了如何用Node.js编写内存效率高的应用程序，对Node.js感兴趣的同学，可以参考下...2021-05-01

  • Node+Express+MongoDB实现登录注册功能实例

    这篇文章主要介绍了Node+Express+MongoDB实现登录注册功能,需要的朋友可以参考下...2017-04-27

  • Node与Python 双向通信的实现代码

    最简单粗暴的通信方式是 Nodejs调用一下 Python 脚本，本文详细介绍了Nodejs与Python 双向通信的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-07-17

  • node中短信api实现验证码登录的示例代码

    这篇文章主要介绍了node中短信api实现验证码登录的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-01-20

  • Node.js之网络通讯模块实现浅析

    本篇文章主要介绍了Node.js之网络通讯模块实现浅析，具有一定的参考价值，有兴趣的可以了解一下。 ...2017-04-03

  • 详解node HTTP请求客户端 - Request

    Request是一个Node.jsNPM模块，它是一个HTTP客户端，使用简单功能确十分强大...2017-05-09

  • jquery中用jsonp实现搜索框功能

    这篇文章主要为大家详细介绍了jquery中用jsonp实现搜索框功能的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-10-20

  • node中使用shell脚本的方法步骤

    这篇文章主要介绍了node中使用shell脚本的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-21

  • DevExpress实现自定义TreeListNode的Tooltip的方法

    这篇文章主要介绍了DevExpress实现自定义TreeListNode的Tooltip的方法,需要的朋友可以参考下...2020-06-25

  • Nodejs实现内网穿透服务

    很多人都不知道什么是内网穿透，就是公网客户端，可以访问局域网内的服务，本文详细的介绍了原理以及实现，需要的朋友们下面随着小编来一起学习学习吧...2021-05-20

  • node.js使用express-fileupload中间件实现文件上传

    本文使用express作为服务端，使用express-fileupload库提供的中间件函数来接受从客户端传来的图片，并将图片作为文件存储在服务端，感兴趣的可以了解一下...2021-07-17

  • PHP中模糊查询并关联三个select框

    这篇文章主要介绍了PHP中模糊查询并关联三个select框,需要的朋友可以参考下...2017-06-20