Node實現(xiàn)搜索框進行模糊查詢
更新時間：2021年06月28日 11:54:35 作者：易安sparkle
這篇文章主要為大家詳細介紹了Node實現(xiàn)搜索框進行模糊查詢，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Node實現(xiàn)搜索框進行模糊查詢的具體代碼，供大家參考，具體內(nèi)容如下
一、需求
點擊導航欄中的搜索圖，出現(xiàn)搜索框，從而進行文章的模糊查詢
二、建表
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數(shù)據(jù)
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,所渲染到頁面中的數(shù)據(jù)名稱需一致，在此均為 blogres
五、效果展示
進行搜索：
搜索結(jié)果：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Nodejs下運行JS代碼有兩種方式,一種是在Node.js的交互環(huán)境下運行,另外一種是把代碼寫入文件中,然后用node命令執(zhí)行文件代碼,下面這篇文章主要給大家介紹了關于node環(huán)境執(zhí)行js文件的相關資料,需要的朋友可以參考下2023-02-02
手把手教你用Node.js爬蟲爬取網(wǎng)站數(shù)據(jù)的方法
這篇文章主要介紹了手把手教你用Node.js爬蟲爬取網(wǎng)站數(shù)據(jù)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了nvm的下載，安裝與使用方法,詳細介紹了nvm的功能、下載與安裝方法,常見命令以及相關問題解決方法,需要的朋友可以參考下2023-04-04
websocket實現(xiàn)Vue?3和Node.js之間的實時消息推送
使用?WebSocket?實現(xiàn)實時消息推送是一種高效的方式,可以在客戶端和服務器之間建立長連接,實現(xiàn)低延遲的雙向通信,以下是一個簡單的示例,展示如何在前端使用?Vue?3?和后端使用?Node.js?搭建一個?WebSocket?實現(xiàn)實時消息推送的應用2024-06-06
這篇文章主要介紹了node實現(xiàn)分片下載的示例代碼，使用場景包括基于瀏覽器的流文件片段傳輸、基于客戶端的分片下載等。感興趣的小伙伴們可以參考一下2018-10-10
node.js結(jié)合webSocket實現(xiàn)聊天室
于Node.js和WebSocket的聊天室,主要包括前端頁面,主要是用戶操作的頁面,還包括后臺數(shù)據(jù)通信以及邏輯處理,具有一定的參考價值,感興趣的可以了解一下2023-08-08
從零開始學習Node.js系列教程五：服務器監(jiān)聽方法示例
這篇文章主要介紹了Node.js服務器監(jiān)聽方法,結(jié)合實例形式分析了nodejs事件監(jiān)聽相關操作技巧,需要的朋友可以參考下2017-04-04
本文給大家分享的是一款nodejs高擴展性的模板引擎functmpl的簡單介紹以及用法詳解，有需要的小伙伴可以參考下2017-02-02
基于promise.js實現(xiàn)nodejs的promises庫
promise是JavaScript實現(xiàn)優(yōu)雅編程的一個非常不錯的輕量級框架。該框架可以讓你從雜亂的多重異步回調(diào)代碼中解脫出來，并把精力集中到你的業(yè)務邏輯上。2014-07-07
nvm是一個node的版本管理工具,可以簡單操作node版本的切換、安裝、查看,下面這篇文章主要給大家介紹了關于如何通過三步完成切換nodejs版本的相關資料,需要的朋友可以參考下2023-01-01