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在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
JavaScript去掉数组中的重复元素
Jan 13 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
浅析Node.js实现HTTP文件下载
Aug 05 Javascript
angularjs 源码解析之injector
Aug 22 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 Javascript
javascript表单正则应用
Feb 04 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 Javascript
Vue.js实现可编辑的表格
Dec 11 Javascript
JS实现页面数据懒加载
Feb 13 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 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
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
php入门之连接mysql数据库的一个类
2012/04/21 PHP
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
php发送邮件的问题详解
2015/06/22 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
非常漂亮的JS代码经典广告
2007/10/21 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
详解React中setState回调函数
2018/06/14 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
python+django加载静态网页模板解析
2017/12/12 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
python读取Excel表格文件的方法
2019/09/02 Python
python实现快递价格查询系统
2020/03/03 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
Python库安装速度过慢解决方案
2020/07/14 Python
python中scrapy处理项目数据的实例分析
2020/11/22 Python
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
元旦晚会策划方案
2014/02/18 职场文书
购房委托书
2014/10/15 职场文书
离婚起诉状范本
2015/05/19 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
详解Oracle块修改跟踪功能
2021/11/07 Oracle