Node はあいまい検索用の検索ボックスを実装します

この記事の例では、検索ボックスでファジークエリを実装するためのNodeの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

1. 需要

ナビゲーションバーの検索アイコンをクリックすると検索ボックスが表示され、記事のあいまい検索を実行できます。

2. テーブルを作成する

1.ブログテーブル

外部キーを追加します。

2. ナビゲーションテーブル

3.タイプテーブル

4.ユーザーテーブル

3. ページとスタイル

like.ejs:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>クエリ</title>
    <link rel="スタイルシート" href="/css/bootstrap.min.css" >
    <link rel="スタイルシート" href="/css/index.css" >
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/index.js"></script>
</head>
<本文>
    <%-include('detachPart/nav.ejs')%>
    <%-include('detachPart/search.ejs')%>
    <div class="コンテナ">
        <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')%>
</本文>
</html>

検索.ejs:

<div class="コンテナ検索閉じる">
    <フォームアクション="/like" メソッド="GET">
        <input name="link" type="text" placeholder="キーワードを入力してください">
        <input type="submit" value="検索">
        <img class="closebtn" src="image/icon/close.png" alt="">
    </フォーム>
</div>

インデックス.css:

.検索閉じる{
    表示: なし;
    位置: 相対的;
    マージン: 0.5rem 自動;
    パディング: 1rem 0;
    テキスト配置: 中央;
    背景色: 白;
}
.searchclose 入力:n番目の子(1){
    幅: 25rem;
    高さ：2.2rem;
    アウトライン: なし;
    フォントサイズ: 0.9rem;
    左パディング: 0.5rem;
    境界線: 1px 銀色;
    ボックスのサイズ: 境界線ボックス;
    垂直位置合わせ: 中央;
}
.searchclose 入力:n番目の子(2){
    表示: インラインブロック;
    幅: 10rem;
    高さ：2.2rem;
    行の高さ: 2.2rem;
    背景色: rgb(41, 41, 41);
    色: 白;
    垂直位置合わせ: 中央;
    境界線: 1px実線rgb(41, 41, 41);
    境界線スタイル: なし;
    左マージン: -1rem;
}
.searchclose画像{
    位置: 絶対;
    上: 0;
    右: 0;
}

インデックス:

$(関数(){
    $(".searchbtn").click(function(){
        $(".searchclose").show();
    });
    $(".closebtn").click(関数(){
        $(".searchclose").hide();
    });
});

MySQL データ

接続.js:

var mysql = require("mysql");
var 設定 = require("./setting");
var 接続;
var connectionmysql=関数(){
    接続 = mysql.createConnection({
        ホスト:設定.ホスト、
        ポート:設定.ポート、
        ユーザー:設定.ユーザー、
        パスワード:setting.pwd、
        データベース:setting.base
    });
}
接続mysql(); 
exports.select = 関数 (str, コールバック) {
    接続mysql();  
    接続.クエリ(str,関数(err,res){
        if(err) errをスローします。
        コールバック(res);
        接続を終了します。  
    });
}   
exports.find = 関数 (str, パラメータ, コールバック) {
    接続mysql();  
    接続.クエリ(str,パラメータ,関数(err,res){
        if(err) errをスローします。
        コールバック(res);
        接続を終了します。  
    });
}

sql.js:

モジュール.エクスポート={
    findTitle:"ナビゲーションから*を選択",
    clickRank:"ブログから ID、タイトルを選択、数値、降順、制限 7 で並べ替え"、
    推奨情報:"推奨=1 の制限 8 のブログから ID、タイトル、ロゴ、推奨を選択"、
    likeBlog:"blog.id、title、intro、logo、time、type.typeinfo、user.face を blog、type、user から選択します。blog.type=type.id かつ blog.face=user.id で、title が like ですか? 時間降順で並べ替えます"
}

promise.js:

var mysql = require("../MySQL/connection");
var sql = require("../MySQL/sql");
モジュール.エクスポート={
    findTitle:関数(){
        新しいPromise(function(resolve){を返す
            mysql.select(sql.findTitle,function(結果){
                JSON.parse(JSON.stringify(結果)) を解決します。
            });
        })
    },
    クリックランク:関数(){
        新しいPromise(function(resolve){を返す
            mysql.select(sql.clickRank,function(結果){
                JSON.parse(JSON.stringify(結果)) を解決します。
            });
        });
    },
    推奨情報:関数(){
        新しいPromise(function(resolve){を返す
            mysql.select(sql.recommendInfo,function(結果){
                JSON.parse(JSON.stringify(結果)) を解決します。
            });
        });
    },
    いいねブログ:function(msg){
        新しいPromise(function(resolve){を返す
            mysql.find(sql.likeBlog,msg,function(結果){
                JSON.parse(JSON.stringify(結果)) を解決します。
            });
        });
    }
}

ルーター.js:

var promise = require("../MySQL/promise");
var url = require("url");
module.exports = 関数 (アプリ) {
    // あいまい検索用の検索ボックス app.get("/like",function(req,res){
        var likeurl=url.parse(req.url,true).query.link;
        非同期関数 getData(){
            var res1 = promise.findTitle() を待機します。
            var res5 = promise.clickRank() を待機します。
            var res11 = promise.recommendInfo() を待機します。
            var res21 = promise.likeBlog("%"+likeurl+"%") を待機します。
            var allres = {
                タイトルインデックス:0,
                navres:res1,
                ランク:res5,
                推奨res:res11,
                ブログres:res21
            }
            すべてを返す;
        }
        getData().then(function(result){
            res.render("like",結果);
        });
    });
}

注: ルートのblogres:res21やホームページのblogres:res10のように、ページにレンダリングされるデータ名は一貫している必要があります。ここではblogresです。