Returning HTML, Pug

10403 ワード
node.js html pug テキストリンク
文字列のみが返されます.だからHTMLで戻ります
2つの選択肢があります.
export const trending = (req, res) => res.send("Home Page Videos");
res.send("")では、HTMLの文字列を用いて送信する方法がある.
ブラウザはそのHTMLを実行して表示します.
res.send("<h1>Hello~!</h1>");
このように記述すると、ブラウザはHTML形式で実行されます.
しかし、問題があります.作るページは決して小さいサイズのサイトではありません.
いちいちそのような方法で指定することはできません.△肩書きを指定してからやるべきことが多すぎる.
もう1つの方法は、pugを利用する方法である.pugはプレスエンジンです.テンプレートを使用してビューを作成できます.
doctype html

html(lang="en")

head

title= pageTitle

script(type='text/javascript').

if (foo) bar(1 + 5)

body

h1 Pug - node template engine

#container.col

if youAreUsingPug

p You are amazing

elsep Get on it!

p.

Pug is a terse and simple templating language with a

strong focus on performance and powerful features.
このようにすれば、変換が可能です.
<!DOCTYPE html>

<html lang="en">

<head>

<title>Pug</title>

<script type="text/javascript">

if (foo) bar(1 + 5)

</script>

</head>

<body>

<h1>Pug - node template engine</h1>

<div id="container" class="col">

<p>You are amazing</p>

<p>Pug is a terse and simple templating language with a strong focus on performance and powerful features.</p>

</div>

</body>

</html>
このようにして.
インストールを行います.npm i pug次にやるべきことはexpressにhtml helperでpugを書くことです.
express公式ドキュメントを見れば、appで何かできることがあります.
appがあれば、appに欲しいものを設定することができます.
重要なのはviewエンジンを設定できることです.server.jsに加えて
app.set("view engine", "pug");
記入すればいいです.
デフォルトでは、expressはここのviewsフォルダのファイルを検索します.
srcフォルダ内にviewsフォルダを新規作成します.
中でhome.pugを作ります.
そして内容を書きます.
doctype html

html(lang="en")

head

title Wetube

meta(charset="UTF-8")

meta(http-equiv="X-UA-Compatible", content="IE=edge")

meta(name="viewport", content="width=device-width, initial-scale=1.0")

body

h1 Welcome to Wetube

footer &copy; 2022 Wetube
ファイルをpugに送信すると、pugはそのファイルをhtmlに変換します.videoController.jsまで修正します.
export const trending = (req, res) => res.render("home");
home.pugがレンダリングされます.
今はexpressがpugを使っていることを知っています.
app.set("view engine", "pug");
server.jsに書いてあるからです.
だから別に輸入する必要はありません.
expressはviewディレクトリでpugファイルを検索するように設定されているためです.
でもhttp://localhost:4000/に行くと、間違いが見えてきます.Error: Failed to lookup view "home" in views directory "viewディレクトリで「home」というviewを検索できませんでした.
エラーをよくチェックし、フォルダの指定位置が異常です.Documents/wetube/views筆者はフォルダをこうしたに違いない.Documents/wetube/src/viewsexpressのデフォルトは、現在の作業ディレクトリフォルダでビューを検索するためです.
現在の作業ディレクトリはどこを指していますかconsole.logと確認されました.
console.log(process.cwd());
Documents/wetube
これは、node.jsがどこで起動され、どこでサーバが起動されるかによって異なります.
それはpackage.jsonです.Documents/wetubeフォルダでは、package.jsonがnode.jsを実行します.
Javascript高次関数とは?
ListIterator