Node實現搜尋框進行模糊查詢
阿新 • • 發佈：2021-06-29
本文例項為大家分享了Node實現搜尋框進行模糊查詢的具體程式碼，供大家參考，具體內容如下
一、需求
點選導航欄中的搜尋圖，出現搜尋框，從而進行文章的模糊查詢
二、建表
1.blog表
新增外來鍵：
2.nav表
3.type表
4.user表
三、頁面及樣式
like.e：
<!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="//bootstrap.min.css" >
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="Node實現搜尋框進行模糊查詢">
</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);
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();
});
});
四、www.cppcns.com資料
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,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,intro,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"
}
http://www.cppcns.com
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,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
五、效果展示
進行搜尋：
搜尋結果：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。