Node實現搜索框進行模糊查詢
本文實例為大傢分享瞭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
五、效果展示
進行搜索:
搜索結果:
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- Node.js前後端交互實現用戶登陸的實踐
- 使用Express+Node.js對mysql進行增改查操作
- Node連接MySQL並封裝其增刪改查的實現代碼
- 淺析Promise的介紹及基本用法
- 微信小程序訪問mysql數據庫流程詳解