プレスエンジンとは?ejsのインストール

9873 ワード
ES6 node.js サーバー テキストリンク

テンプレートエンジンのない画面の設定

  app.get('/', (req, res) => {
    res.send('<!DOCTYPE html>\
    <html lang="en">\
    <head>\
        <meta charset="UTF-8">\
        <meta http-equiv="X-UA-Compatible" content="IE=edge">\
        <meta name="viewport" content="width=device-width, initial-scale=1.0">\
        <title>Document</title>\
    </head>\
    <body>\
        Hi. I am with html<br>\
        <a href="/hi">Say Hi!</a>\
    </body>\
    </html>')
  })
ページを作成するたびにこのように追加する不便さ
HTMLコードを追加する必要がありますが、JavaScript言語で書くのは不便です
そのため、これらの不便を解消し、作業を容易にする方法-->プレスエンジンの使用
-->テンプレートエンジンを使用すると、ユーザーはフォーマットが一致するHTMLファイルに必要なデータを動的に挿入し、必要なフォーマットのホームページを整理できます.

プレスエンジンを使用するメリット


  • 多くのコードを減らすことができます.
    →ほとんどのTemplate Engineでは、既存のHTMLよりも簡単な構文を使用しています

  • リサイクル性が高い.
    →WebページやWebアプリケーションを作成する場合、同じデザインページのデータのみを変更する場合が多い.

  • メンテナンスが容易です.
    →複数ページをレンダリングするためのTemplateを作成する操作には、他にもメリットがあります.

    • テンプレートエンジン-ejsインストール


    npm install ejs

    ejsの簡単な使い方


    index.jsに追加
    app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');

app.get('/test', (req, res) => {
  let name = req.query.name;
  res.render('test', {name});
})
    ejsファイルをviewsというフォルダに入れる設定
    app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
    上のコードにはejsファイルを含むviewsというフォルダが設定されています.
    test.ejsファイルの内容を読み込み、表示()
    app.get('/test', (req, res) => {
  let name = req.query.name;
  res.render('test', {name});
})
    -->pathが/testの場合、コードが実行されます(応答済み)
    -->res.send(「htmlコード」)メソッドを使用せずに直接描画します.
    res.render()を使用してtestというejsファイルをロードし、描画します(上のコードでは-->test.ejsファイル).
    -->nameという変数データもquery形式で受信しejsファイルに渡します.
            --> 데이터를 받는 방식은 body로 받는 방식과 query로 받는 방식 등등이 있는데 여기서는 query형식으로 받았다.
    viewフォルダを作成した後、その中に作成したtest.ejsファイル
      <!DOCTYPE html>
  <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        Hi. My name is <%= name %><br>
    </body>
  </html>
    -->htmlコード全体-->上のrenderで呼び出して描画
    --->bodyセクションの<%=name%>は、上のインデックスです.jsに追加されたコードから{name}に割り当てられたデータ

    www.ドメイン/テスト？name=Willy


  • ドメインへのアクセス

  • ルータは/testという名前のパスを起動します

  • このpathからnameという変数の値Willyをquery形式で受信する

  • このパスはejsファイルによって画面を整理するので、プレゼンテーションコードによってtextを生成します.ejsファイルにアクセスし、
    また,name変数に対応する値Willyはtestである.ejsに転送されました

  • test.ejsでは、name変数に対応する値Willyを適用してコードを構成します-->このコンテンツに応答します.

  • 応答コードをブラウザで描画

    • 会社もテンプレートエンジンを使いますか。


    刺身です(会社by社)一部のWebサイトのフレームワークでは、テンプレートエンジン(例えば、ロッド、ノード、ラベルが付いている)を使用してホームページを作成していますが、最近ではフロントエンドとバックエンドに分かれた開発文化では、フロントエンド開発は個別のフレームワークを使用しているため、テンプレートエンジンを使用しないところが多いです.React, Vue.フロントエンドフレームワーク(jsなど)には、画面を整理するための機能が含まれています.したがって、ほとんどのビューはフロントエンドで表示され、バックエンドサーバはデータの加工/提供のみを担当します.
    複合(COMP)
    【エラー備忘録】translation data {:title=>"タイトル", :◯◯=>"△△"} can not be used with :count => 1. key 'other' is missing.