Node實(shí)現(xiàn)搜索框進(jìn)行模糊查詢
本文實(shí)例為大家分享了Node實(shí)現(xiàn)搜索框進(jìn)行模糊查詢的具體代碼,供大家參考,具體內(nèi)容如下
一、需求
點(diǎn)擊導(dǎo)航欄中的搜索圖,出現(xiàn)搜索框,從而進(jìn)行文章的模糊查詢
二、建表
1.blog表
添加外鍵:
2.nav表
3.type表
4.user表
三、頁(yè)面及樣式
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="請(qǐng)輸入關(guān)鍵字詞"> <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){ // 搜索框進(jìn)行模糊查找 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和首頁(yè)中的blogres:res10,所渲染到頁(yè)面中的數(shù)據(jù)名稱需一致,在此均為 blogres
五、效果展示
進(jìn)行搜索:
搜索結(jié)果:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
手把手教你用Node.js爬蟲爬取網(wǎng)站數(shù)據(jù)的方法
這篇文章主要介紹了手把手教你用Node.js爬蟲爬取網(wǎng)站數(shù)據(jù),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07websocket實(shí)現(xiàn)Vue?3和Node.js之間的實(shí)時(shí)消息推送
使用?WebSocket?實(shí)現(xiàn)實(shí)時(shí)消息推送是一種高效的方式,可以在客戶端和服務(wù)器之間建立長(zhǎng)連接,實(shí)現(xiàn)低延遲的雙向通信,以下是一個(gè)簡(jiǎn)單的示例,展示如何在前端使用?Vue?3?和后端使用?Node.js?搭建一個(gè)?WebSocket?實(shí)現(xiàn)實(shí)時(shí)消息推送的應(yīng)用2024-06-06node.js結(jié)合webSocket實(shí)現(xiàn)聊天室
于Node.js和WebSocket的聊天室,主要包括前端頁(yè)面,主要是用戶操作的頁(yè)面,還包括后臺(tái)數(shù)據(jù)通信以及邏輯處理,具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08從零開始學(xué)習(xí)Node.js系列教程五:服務(wù)器監(jiān)聽方法示例
這篇文章主要介紹了Node.js服務(wù)器監(jiān)聽方法,結(jié)合實(shí)例形式分析了nodejs事件監(jiān)聽相關(guān)操作技巧,需要的朋友可以參考下2017-04-04Nodejs高擴(kuò)展性的模板引擎 functmpl簡(jiǎn)介
本文給大家分享的是一款nodejs高擴(kuò)展性的模板引擎functmpl的簡(jiǎn)單介紹以及用法詳解,有需要的小伙伴可以參考下2017-02-02基于promise.js實(shí)現(xiàn)nodejs的promises庫(kù)
promise是JavaScript實(shí)現(xiàn)優(yōu)雅編程的一個(gè)非常不錯(cuò)的輕量級(jí)框架。該框架可以讓你從雜亂的多重異步回調(diào)代碼中解脫出來(lái),并把精力集中到你的業(yè)務(wù)邏輯上。2014-07-07