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


Posted in Javascript onJune 28, 2021

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

一、需求

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

二、建表

1.blog表

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

添加外键:

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

2.nav表

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

3.type表

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

4.user表

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

三、页面及样式

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

五、效果展示

进行搜索:

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

搜索结果:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一些常用的Javascript函数
Dec 22 Javascript
JS加ASP二级域名转向的代码
May 17 Javascript
基于jquery的跨域调用文件
Nov 19 Javascript
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
May 17 Javascript
两行代码轻松搞定JavaScript日期验证
Aug 03 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 Javascript
vue实现全匹配搜索列表内容
Sep 26 Javascript
React + Threejs + Swiper 实现全景图效果的完整代码
Vue实现tab导航栏并支持左右滑动功能
React列表栏及购物车组件使用详解
React如何创建组件
Jun 27 #Javascript
Vue3.0写自定义指令的简单步骤记录
关于JavaScript回调函数的深入理解
Jun 27 #Javascript
vue.js Router中嵌套路由的实用示例
Jun 27 #Vue.js
You might like
PHP 字符串操作入门教程
2006/12/06 PHP
php增删改查示例自己写的demo
2013/09/04 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
学习YUI.Ext 第七天--关于View&amp;JSONView
2007/03/10 Javascript
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
nodejs文件操作模块FS(File System)常用函数简明总结
2014/06/05 NodeJs
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
Carolina Lemke Berlin澳大利亚官网:时尚太阳镜品牌
2019/09/17 全球购物
罗技美国官网:Logitech美国
2020/01/22 全球购物
小学校园广播稿集锦
2014/10/04 职场文书
网站出售协议书范文
2014/10/10 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
党员倡议书
2015/01/19 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
golang goroutine顺序输出方式
2021/04/29 Golang
CPU不支持Windows11系统怎么办
2021/11/21 数码科技
vue动态绑定style样式
2022/04/20 Vue.js
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技