【Nodejs】Expressテンプレートの使用

ここに画像の説明を挿入

1. 急行足場の設置

Express スキャフォールディングをインストールするには 2 つの方法があります。

Express-generator を使用してインストールする

コマンドラインを使用してプロジェクトディレクトリに入り、以下を順番に実行します。

cnpm i -g express-generator

コマンドラインのコマンドの意味は、express -h で確認できます。

express -h

使用法: Express [オプション] [ディレクトリ]

Options:
    --version        输出版本号
-e, --ejs            添加对 ejs 模板引擎的支持
    --pug            添加对 pug 模板引擎的支持
    --hbs            添加对 handlebars 模板引擎的支持
-H, --hogan          添加对 hogan.js 模板引擎的支持
-v, --view <engine>  添加对视图引擎（view） <engine> 的支持 (ejs|hbs|hjs|jade|pug|twig|vash) （默认是 jade 模板引擎）
    --no-view        创建不带视图引擎的项目
-c, --css <engine>   添加样式表引擎 <engine> 的支持 (less|stylus|compass|sass) （默认是普通的 css 文件）
    --git            添加 .gitignore
-f, --force          强制在非空目录下创建
-h, --help           输出使用方法

myapp という名前の Express アプリケーションを作成し、ejs テンプレートエンジンを使用しました

express --view=ejs myapp

アプリを入力して依存関係をインストールします

cd myapp
npm install

Windows では、次のコマンドを使用して Express アプリケーションを起動します。

set DEBUG=app:* & npm start

MacOS または Linux では、次のコマンドを使用して Express アプリケーションを起動します。

DEBUG=app:* npm start

Express コマンドを使用して、プロジェクトディレクトリをすばやく作成します。

Express プロジェクトフォルダーの名前 -e コマンドラインを使用してプロジェクトディレクトリに入る場合は、次の順序で実行します。

express app -e
cd app
cnpm install

この時点で、アプリフォルダー内のファイル構造も確認できます。

bin: 启动目录 里面包含了一个启动文件 www 默认监听端口是 3000 (直接node www执行即可)
node_modules：依赖的模块包
public：存放静态资源
routes：路由操作
views：存放ejs模板引擎
app.js：主文件
package.json：项目描述文件

初のExpressアプリ「Hello World」

ここでは、npm によって構築されたスキャフォールディングを使用する代わりに、最初に行ったようにメインディレクトリに新しい app.js ファイルを直接作成します。

app.js に入力します

const express = require('express');     //引入express模块
var app= express();     //express()是express模块顶级函数

app.get('/',function(req,res){
    
          //访问根路径时输出hello world
    res.send(`<h1 style='color: blue'>hello world</h1>`);
});

app.listen(8080);       //设置访问端口号

コマンドラインからプロジェクトフォルダーを入力した後、次のように入力します。

npm run start/npm start

つまり、サーバーの電源が入っており、サーバーが応答を受け取った後、ブラウザで http://localhost:3000/ を実行するだけでデータにアクセスできます。

2. テンプレートエンジンの紹介

jade テンプレートエンジンと比較して、ejs は元の HTML 言語に構造的な変更を加えていませんが、対話型データにいくつかの変更を加えており、jade よりもシンプルで使いやすくなっています。したがって、学習コストは非常に低くなります。ejs 公式 Web サイトも参照できます: https://ejs.bootcss.com/
(1) サーバー染色、バックエンドのネストされたテンプレート、バックエンドのレンダリングテンプレート、SSR (バックエンドアセンブルページ)

静的なページと動的な効果をうまく使いましょう。
フロントエンドコードをバックエンドに提供すると、バックエンドは静的 HTML とその中の偽のデータを削除して、テンプレートを通じて HTML コンテンツを動的に生成する必要があります。

(2) フロントエンドとリアエンドの分離、BSR（フロントエンドの組み立てページ）

静的なページと動的な効果をうまく使いましょう。
jsonシミュレーション、ajax、ページを動的に作成、
実際のインターフェイスデータ、前後の共同デバッグ。
フロントエンドからバックエンドの静的リソースフォルダーを提供します

サーバー側のレンダリングはソースコードで確認できますが、クライアント側のレンダリングはソースコードで確認できません

3. ejsの基本的な使い方

Express がテンプレートファイルをレンダリングできるようにするには、アプリケーションで次の設定を行う必要があります。
ここに画像の説明を挿入

ここでは次の構成ファイルを使用します。

基本的な ejs 操作は、次の方法で実現できます:
app.js ファイル:

const express=require("express");
const ejs=require("ejs");
const fs=require("fs");

var app=express();

//引用ejs
app.set('views',"./views");  //设置视图的对应目录
app.set("view engine","ejs");       //设置默认的模板引擎

app.get("/",function(req,res){
    
    
    res.render("index",{
    
    title: "<h4>express</h4>"});
    //会去找views目录下的index.ejs文件
});

app.listen(8080);

ejs ファイル:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <% for(var i=0;i<10;i++){ %>
            <%= i %>
        <% } %>
        <!-- 获取变量 -->
        <div class="datas">
            <p>获取变量：</p>
            <%- title %>
            <%= title %>
        </div>
    </body>
</html>

これから次のことがわかります。

<% xxx %>：里面写入的是js语法，
<%= xxx %>：里面是服务端发送给ejs模板转义后的变量，输出为原数据
<%- xxx %>：里面也是服务端发送给ejs模板后的变量，解析html
如果写html的注释，那样会在源码中显示，下面这种ejs注释不会在源码中显示
<%# 注释标签，不执行、不输出内容 %>

同様に、 res.render() 関数もコールバックをサポートします。

res.render('user', {
    
     name: 'Tobi' }, function(err, html) {
    
    
  console.log(html);
});

このようにして、htmlの内容を確認することができます。

res.redirect() について

const express = require('express');
const router = express.Router();

router.get('/', (req, res) => {
    
    
  res.render('login', {
    
    
    isShow: false,
    error: '',
  });
});

router.post('/', (req, res) => {
    
    
  if (req.body.username === 'ds' && req.body.password === '123') {
    
    
    console.log('登录成功');
    // res.send("成功")
    // 重定向到home
    res.redirect('/index');
  } else {
    
    
    console.log('登录失败');
    res.render('login', {
    
     error: '用户名密码不匹配', isShow: true });
  }
});

module.exports = router;

4. ejsタグの様々な意味

<% '脚本' 标签，用于流程控制，无输出。
<%_ 删除其前面的空格符
<%= 输出数据到模板（输出是转义 HTML 标签）
<%- 输出非转义的数据到模板
<%# 注释标签，不执行、不输出内容
<%% 输出字符串 '<%'
%> 一般结束标签
-%> 删除紧随其后的换行符
_%> 将结束标签后面的空格符删除

<% %>流程控制标签( 写的是if else，for)
<%= %>输出标签(原文输出HTML标签)
<%- %>输出标签(HTML会被浏览器解析)
<%# %>注释标签
<%- include(user/show',{user: user) %> 导入公共的模板内容

以上が ejs の基本的な使い方ですが、将来的にはデータベース操作でサーバーからテンプレートエンジンに直接 json データを返すようになる予定です。

5. パブリックテンプレートスタイルをインポートする

ヘッダー.ejs

<header>
  我是公共样式
  <div>
    <% if(isShowSchool) {
    
    %>
    <h1>校园招聘</h1>
    <% } %>
  </div>
</header>

インデックス.ejs

<%- include("./header.ejs",{ isShowSchool:true }) %> index <%# 我的注释 %>

ここに画像の説明を挿入