Day18 NodeJS-Express III

Express的学习从安装、Route和Middleware的概念开始，今天要进入前端实务面的部份：Template(样板)。

Template

样板在前面NodeJS的部份也有说明过，简而言之就是可以透过placeholder或一些语法动态变更内容的HTML页面。在Express中要使用样板需要透过样板引擎(Template Engine)，就如同其他的NPM套件，适用於Express的样板引擎也不少，例如：受欢迎的Jade、与.NET Webform的FormView语法相似的ejs、与.NET MVC的Razor语法相似的vash等，开发人员可以选择自己喜好的样板引擎，这里的范例是使用ejs练习。

实作静态样板档

今天的练习要从之前做的Express练习开始修改，先确认一下原始的程序码。

let express = require("express");
let app = express();
let port = process.env.PORT || 2000;

app.use("/assets", express.static(`${__dirname}/public`));

app.get('/', (req, res)=>{
    res.send("<html><head><link href=assets/style.css type=text/css rel=stylesheet /></head><body><h1>Hello</h1></body></html>");
});

app.get("/job/:type", (req, res)=>{
    res.send(`<html><head></head><body><h1>Job: ${req.params.type}</h1></body></html>`)
});

app.listen(port);

要使用ejs样板引擎的话，一样要先透过npm install安装，然後在主程序中设定样板引擎。由於样板引擎与Express会自动产生关联，在设定样板引擎时，是用app.set()的方法，而不是require()。

app.set("view engine", "ejs");

再来是档案的部份，可以在专案路径下建立views的资料夹并在其中建立名为index.ejs的样板档案。

<html>
    <head>
        <link href="/assets/style.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <h1>Hello</h1>
    </body>
</html>

将app.get()中回传页面的res.send()改成res.render(<样板档档名>)，会令Express查询并取得样板档，在render()里面也不需要使用副档名，Express会依据不同的样板引擎查找不同副档名的档案。

// 原始程序码 ------------------------
// app.get('/', (req, res)=>{
//    res.send("<html><head><link href=assets/style.css type=text/css rel=stylesheet /></head><body><h1>Hello</h1></body></html>");
// });

app.get('/', (req, res)=>{
  res.render("index");
});

执行後浏览器会显示样板页面。

实作动态样板档

在views资料夹中再建立一个名为Job的样板档。

<html>
    <head>
        <link href="/assets/style.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <h1>Job</h1>
    </body>
</html>

在样板档加入<% = TYPE%>可以加入动态变数ID。

<html>
    <head>
        <link href="/assets/style.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <h1>Job: <%= TYPE %></h1>
    </body>
</html>

将app.get()中回传页面的res.send()改成res.render(<样板档档名>)，并在Path後面加入样板的变数名称引入URL中的参数，变数名称会对应到样板档中的对应名称并将变数代入，成为动态样板档。

// 原始程序码 ---------------------------------------
// app.get("/job/:type", (req, res)=>{
//    res.send(`<html><head></head><body><h1>Job: ${req.params.type}</h1></body></html>`)
// });

app.get("/job/:type", (req, res)=>{
  res.render("job", {TYPE: req.params.type})
});