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
How to convert Chinese into UTF-8 in HTML
In HTML, the Chinese phrase “學好好學” can be express...
Four data type judgment methods in JS
Table of contents 1. typeof 2. instanceof 3. Cons...
How to operate MySql database with gorm
1. Setting case sensitivity of fields in the tabl...
How to add color mask to background image in CSS3
Some time ago, during development, I encountered ...
How to build php7 with docker custom image
First, perform a simple Docker installation. To c...
Web Design Tutorial (6): Keep your passion for design
<br />Previous article: Web Design Tutorial ...
Detailed explanation of the installation and configuration process of mysql8.018 on linux
Installation introduction under Windows: Check ou...
WeChat applet implements jigsaw puzzle game
This article shares the specific code for impleme...
Mysql sorting to get ranking example code
The code looks like this: SELECT @i:=@i+1 rowNum,...
Two implementation solutions for vuex data persistence
Table of contents Business requirements: Solution...
N ways to vertically center a div with single/multi-line text (unknown height/fixed height)
When talking about this issue, some people may ask...
Deeply understand the current status of HTML5 development in mobile development
"We're writing our next set of mobile pr...
Implementing the preview function of multiple image uploads based on HTML
I recently wrote a script for uploading multiple ...
Using CSS to implement image frame animation and curve motion
The basic principle of all animations is to displ...
Docker and iptables and implementation of bridge mode network isolation and communication operations
Docker provides multiple networks such as bridge,...