Node implements search box for fuzzy query
|
This article example shares the specific code for Node to implement fuzzy query in the search box for your reference. The specific content is as follows 1. DemandClick the search icon in the navigation bar to display the search box, so you can perform a fuzzy search on the article. 2. Create a table1.blog table
Add a foreign key:
2. Nav table
3.type table
4.user table
3. Pages and styleslike.ejs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Query</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="Please enter keywords">
<input type="submit" value="Search">
<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 Dataconnection.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) {
// Search box for fuzzy search 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);
});
});
}Note: Like blogres:res21 in the route and blogres:res10 in the home page, the data names rendered to the page must be consistent, here they are blogres 5. Effect displayConduct a search:
Search results:
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
>>: Detailed explanation of how MySQL solves phantom reads
Recommend
A brief discussion on MySQL event planning tasks
1. Check whether event is enabled show variables ...
Linux kernel device driver virtual file system notes
/******************** * Virtual File System VFS *...
11 ways to remove duplicates from js arrays
In actual work or interviews, we often encounter ...
css3 animation ball rolling js control animation pause
CSS3 can create animations, which can replace man...
JS practical object-oriented snake game example
Table of contents think 1. Greedy Snake Effect Pi...
The leftmost matching principle of MySQL database index
Table of contents 1. Joint index description 2. C...
Solve the problem of data synchronization when vue-seamless-scroll scrolls and likes
VUE uses vue-seamless-scroll to automatically scr...
Instructions for nested use of MySQL ifnull
Nested use of MySQL ifnull I searched online to s...
Detailed explanation of box-sizing in CSS3 (content-box and border-box)
Box-sizing in CSS3 (content-box and border-box) T...
How to change the Ali source in Ubuntu 20.04
Note that this article does not simply teach you ...
A very detailed tutorial on installing rocketmq under Docker Desktop
Install Docker Desktop Download address: Docker D...
Vue realizes simple effect of running light
This article shares the specific code of Vue to a...
Detailed tutorial on installing nacos in docker and configuring the database
Environment Preparation Docker environment MySQL ...
A brief discussion on Python's function knowledge
Table of contents Two major categories of functio...
A brief analysis of the function calling process under the ARM architecture
Table of contents 1. Background knowledge 1. Intr...