この記事は、非符号化デコーダの「オイルチューブクローン符号化」コースに基づいて作成されています.https://nomadcoders.co

サムネイル画像ソース:https://developers.google.com/youtube

2021年7月22日
最後のロケーションのベース設定とノード.JSフレームワークExpressの基礎知識を学びました.次に、Expressのrouterコンセプトを見てみましょう.
これまで、サーバは/リクエストを1つしか受信していませんでした.

const handleHello = (req, res) => {
  res.send("Hello!");
};

app.get("/", handleHello);

それでも、コードが占有するスペースはかなり大きいように見えます.コントローラが大きくなると、コードが複雑になる可能性があります.
Webサービスの作成に伴い、数十～数百のパスがあれば、コードはさらに複雑になります.そのため、URLをタイプ別にグループ化できるデバイスが必要です.この話はずっと続きます

ドメイン設計

まず、ユーザーの観点からドメインを設計しましょう.YouTubeのドメインは、次の2つに分類できます.videoとuserです.
videoはログインおよびプロファイルの管理に使用され、userはイベントの表示、アップロードおよび削除に使用されます.各状況に合ったページを作成します.
video:

/trending-videos

/see-video

/edit-video

/search-video

/upload-video

/delete-video

user:

/join

/login

/edit-user

/remove-user

/logout-user

/see-user

これらのパスのすべての要求がapp.get()であり、対応するコントローラと必要なミドルウェアがそれぞれ作成される場合、server.jsファイルは非常に複雑になります.
問題はURLにもあります.組織URLがないため、/upload-video、/delete-videoのように文字列videoを繰り返し続けなければならない.

router

Expressのルータでは、子ディレクトリが親ディレクトリにあるようにURLを整理できます.
/videos/deleteの要求が受信されると、その要求は/videosを担当するルータに送信される.ビデオルータは、/deleteコントローラを介してリクエストに応答します.

const globalRouter = express.Router();
const videoRouter = express.Router();
const userRouter = express.Router();

app.use("/", globalRouter);
app.use("/videos", videoRouter);
app.use("/users", userRouter);

このプロジェクトでは、合計3つのルータが使用されます.ユーザuserRouter、ビデオvideoRouter、およびホームglobalRouter.express.Router()を使用してルータを作成します.そして、app.use()において、ルータをパラメータとし、ルータが担当する経路を有する.
各ルータにパスを割り当てる方法は以前と同じです.

const watch = (req, res) => {
  res.send("Watch videos!");
};

videoRouter.get("/watch", watch);

ルータは、express appを介して特定のパスからのリクエストを受信することができます.これまでget()を介して特定のパスからのリクエストを受信してきたように.get()にvideoRouterのリクエストをもらいました.現在、ユーザが/watchを要求すると、/videos/watchによって処理される.
ここから見ると、各ルータの機能は「マイクロアプリケーション」のようなものです.videoRouterは、videoRouter、/watchなどの要求を処理できる小さなアプリケーションです.

ファイルの分割

import express from "express";
import morgan from "morgan";

const app = express();

const PORT = 4000;

const globalRouter = express.Router();
const videoRouter = express.Router();
const userRouter = express.Router();

const watch = (req, res) => {
  res.send("Watch videos!");
};

videoRouter.get("/watch", watch);

app.use(morgan("dev"));
app.use("/", globalRouter);
app.use("/videos", videoRouter);
app.use("/users", userRouter);

app.listen(PORT, () => {
  console.log(`Server is listening on port ${PORT}`);
});

Expressフレームワークを作成し、ルータを作成し、/editにvideoRouterコントローラを一時的にインストールしました.要求をパス別に分類するためにルータを作成することが望ましいが、/watchファイルは複雑になる.作成したすべてのページがドメイン設計で構想されている場合は、ルータとコントローラが混在して使用するのに適していない可能性があります.
次に、ルータとルータ、コントローラ、コントローラの集合のためにプロジェクトディレクトリを再構成します.

server.jsフォルダにsrcフォルダとroutersフォルダを作成します.

controllersフォルダにrouters、globalRouter.js、videoRouter.js、およびuserRouter.jsファイルを作成します.

controllersフォルダにvideoController.jsおよびuserController.jsファイルを作成します.controllersフォルダにglobalController.jsを作成しないのは、ホームページに表示されるコンテンツのタイプが最終的にユーザーまたはビデオに関連しているためです.

次に、server.jsに書かれたルータに関連するコードを各ファイルに移動します.globalRouterを例に説明する.

import express from "express";

const globalRouter = express.Router();

export default globalRouter;

ルータもExpressの機能であるため、expressがロードされます.globalRouterが作成され、exportから読み込まれます.
この操作は、server.jsおよびvideoRouterに対して繰り返される.
その後、userRouterから冗長コードを削除し、すべてのルータにロードします.

import express from "express";
import morgan from "morgan";
import globalRouter from "./routers/globalRouter";
import videoRouter from "./routers/videoRouter";
import userRouter from "./routers/userRouter";

const app = express();
const PORT = 4000;

app.use(morgan("dev"));
app.use("/", globalRouter);
app.use("/videos", videoRouter);
app.use("/users", userRouter);

app.listen(PORT, () => {
  console.log(`Server is listening on port ${PORT}`);
});

書類がもっときれいになる.

ルータせっけい

次に、ファイルを整理し、各ルータの構造を設計します.現在の状況では、大まかな方向だけを作成し、修正を継続する計画です.

globalRouter

server.jsは、メイン画面に関連するページを集約するルータです.次のことができます.

globalRouter.get("/", trending);
globalRouter.get("/join", join);
globalRouter.get("/login", login);
globalRouter.get("/search", search);

ユーザーがホームページにアクセスすると、YouTubeに人気ビデオのリストが表示されます.これはglobalRouterコントローラが担当します.また、登録、ログイン、検索などの機能がホームページに入る可能性があります.

videoRouter

videoRouter.get("/upload", upload);
videoRouter.get("/:id", see);
videoRouter.get("/:id/edit", edit);
videoRouter.get("/:id/delete", deleteVideo);

ビデオには、アップロード、表示、変更、削除機能がある場合があります.
ここでtrendingと書いてある部分がURLパラメータです.YouTubeのすべてのビデオには、ビデオとメッセージを見ることができるページがありますが、グーグルがすべてのビデオのために直接ページを作ることができるという意味ではありません./:idは、ビデオのid値を含み、ビデオに関連するすべてのデータを予め作成されたテンプレートページに埋め込む.このセクションでは、データベースのセクションで詳しく説明します.

userRouter

userRouter.get("/logout", logout);
userRouter.get("/edit", edit);
userRouter.get("/remove", remove);
userRouter.get("/:id", see);

ユーザー関連機能には、ログアウト、ユーザープロファイルの変更、会員の脱退、プロファイルの表示が含まれます.ビデオと同様に、データベースからユーザ情報をロードする際に、より詳細に説明します.

コントローラの接続

各ルータを設計する際に、各リクエストおよびURLを処理するためのコントローラ関数を渡します.コントローラを一時的に作成しましょう.

userController

export const join = (req, res) => res.send("Join");
export const login = (req, res) => res.send("Login");
export const edit = (req, res) => res.send("Edit user");
export const remove = (req, res) => res.send("Remove user");
export const logout = (req, res) => res.send("Logout user");
export const see = (req, res) => res.send("See user");

すべてのコントローラは、ルータ/:idに使用することができる.ここで、exportおよびjoinはloginを使用し、残りのコントローラはglobalRouterを使用する.

videoController

export const trending = (req, res) => res.send("trending");
export const see = (req, res) => res.send("watch");
export const edit = (req, res) => res.send("edit");
export const search = (req, res) => res.send("Search");
export const upload = (req, res) => res.send("upload");
export const deleteVideo = (req, res) => res.send("deleteVideo");

同様に、すべてのコントローラはuserRouterに構成されています.exportはtrendingによってもたらされる.残りのコントローラはglobalRouterによって使用される.

ルータからインポート

各ルータは、videoRouterフォルダに作成されたコントローラを使用する必要があります.

import express from "express";
import { trending, search } from "../controllers/videoContoller";
import { join, login } from "../controllers/userContoller";

const globalRouter = express.Router();

globalRouter.get("/", trending);
globalRouter.get("/join", join);
globalRouter.get("/login", login);
globalRouter.get("/search", search);

export default globalRouter;

controllersは、次のコントローラを使用します.他のコントローラもそうです.

import express from "express";
import { logout, edit, remove, see } from "../controllers/userContoller";

const userRouter = express.Router();

userRouter.get("/logout", logout);
userRouter.get("/edit", edit);
userRouter.get("/remove", remove);
userRouter.get("/:id", see);

export default userRouter;

import express from "express";
import { upload, see, edit, deleteVideo } from "../controllers/videoContoller";

const videoRouter = express.Router();

videoRouter.get("/upload", upload);
videoRouter.get("/:id", see);
videoRouter.get("/:id/edit", edit);
videoRouter.get("/:id/delete", deleteVideo);

export default videoRouter;

現在、このプロジェクトのルータの設計はすでに一定の輪郭を持っている.この点は変更を続け、将来的にはデータベースをバインドしてHTMLをレンダリングします.
以下では、pugを使用してサーバ上でHTMLを効率的にレンダリングする方法について説明します.
<参考文献>

http://expressjs.com/en/5x/api.html#router