🔖 コース範囲:#6.26～6.27

Preview ❗️

#7シリーズから、これまで学んだ理論をもとに、Webページの簡単な機能を作成します.
この授業では、簡単な検索ページと検索機能を作成します.

コアコンセプト🌟

MongooseのQuery。prototype.sort()

ソート順を設定します.オブジェクトを渡すときに許可される値はasc、desc、昇順、降順、1、および-1です.
https://mongoosejs.com/docs/api.html#query_Query-sort

Expressのreq。query

ルーティングにはquery string parameterのオブジェクトが含まれており、主にURLからデータをインポートするために使用されます.
はい.keyword="food"=> {keyword: "food"}
query parseが無効に設定されている場合は空のオブジェクト{}であり、そうでない場合は構成されたquery parseの結果です.
https://expressjs.com/ko/api.html#req.query

モンゴルDBのregex($regex)

MongoDBで正規表現を使用するキーワード
クエリー内のパターンマッチング文字列の一般的な式機能を提供します.
https://docs.mongodb.com/manual/reference/operator/query/regex

JavaScriptのRegExpmdn

アレイを使用してテキストを識別する場合は、RegExpジェネレータが使用されます.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp
RegExpの使用方法
文字記号とコンストラクション関数を使用してRegExpオブジェクトを作成できます.
文字記号のパラメータは、引用符を使用せずに2つの斜線で囲まなければなりません.
コンストラクション関数のパラメータには斜線はありませんが、引用符を使用します.

/ab+c/i 를 아래 RegExp 생성자를 이용해서 만들 수 있습니다.
new RegExp(/ab+c/, 'i') // 리터럴 표기법
new RegExp('ab+c', 'i') // 생성자 함수

正規式

正規表現を作成するサイト
https://www.regexpal.com
ちなみに、正規表現をもう一度知っておくと
例1://キーワード//ig
キーワードに対応するすべての文字列
後のフラグiはingnoreの略で、キーワードの大文字と小文字の違いを無視するオプションです.(ex. welcome = Welcome)
後ろのマークはglobalの略です.
例2:/^キーワード//ig
キーワードで始まる文字列のみ
例3://キーワード$//ig
キーワードで終わる文字列のみ

レッスン内容

検索機能を実行するurlの作成、表示する画面の設定、検索機能の作成

step 0. の手配を

// Router
globalRouter.get("/search", search);

// Controller 
export const search = (req, res) => {
  return res.render("search", { pageTitle: "Search" });
};

// Template 
	search.pug 생성

Step 1-1. 検索機能:req。query

// Template

form(method="GET")
        input(name="keyword" type="text" placeholder="Search By Title")
        input(type="submit" value="Search")
        
// Controller

const { keyworkd } = req.query;
    

url paramsで
?input name=inputに書いてある
追加されていることがわかります.
urlにデータをロードします.

step 1-2. 検索機能:モデル。find()

! 復習する
Model.find()
ドキュメントに移動します.(findOneとは異なり、ドキュメント全体を検索します.)
Mongooseは、コマンドを送信する前にモデルに一致するフィルタを割り当てます.
https://mongoosejs.com/docs/api.html#model_Model.find

// Controller

export const search = async (req, res) => {
  const { keyword } = req.query;
  let videos = [];
  if (keyword) {
    videos = await Video.find({ title : keyword });
  } 
  return res.render("search", { pageTitle: "Search", videos });
};


//Template - search.pug

    form(method="GET")
        input(name="keyword" type="text" placeholder="Search By Title")
        input(type="submit" value="Search")
    
    div 
        each video in videos
            +videoMixin(video)

step 2. 拡張された検索機能:一般的なRegExp

本当にキーワードを正しく入力する必要があるのではなく、検索機能を改善し、そのキーワードだけを含めても対応するデータをロードできます.

//controller 

// 이전
videos = await Video.find({ 
	title : keyword 
});

// 정규식 이용하여 검색 기능 개선 후 

videos = await Video.find({ 
      title : {
        $regex : new RegExp(`${keyword}`, "i"),
     } 
});

追加学習

モンゴル語dbの正規演算子

regexオペレータ($regex)を学習しました.
これに加えて、dbで使用可能な各種演算子については、時間の許す限り読み取りおよび整理を行う.
https://www.mongodb.com/docs/manual/reference/operator/query/regex/

req.body vs. req.query

ここで同じ質問はスタックオーバーフローにあります.
片付けてreq.bodyはput/postリクエストを受信したすべてのデータの情報を含み、url paramはその1つの情報にすぎない.req.queryには、すべてのメソッドが要求するurlのparam情報が含まれます.
例えば、住所は学校です.受信したリクエストがcom(paramのアドレスがない)の場合、req.bodyは受け取った情報の中でparam情報しかありませんがreq.queryはundefinedとして表示されます.

サマリ💖

search機能の作成を学ぶとともにsort,モンゴルdbの$reqex,expressのreq.query,jassのRegExp機能と正規表現の基本ルールを学習した.