一文解析Express框架view物件使用

2023-03-11 06:01:16

Expess View 從指定渲染引擎開始

以 mustache 渲染引擎為例，需要初始化一些程式碼

const app = express()
app.set("view engine", "mustache");
app.engine("mustache", mustacheExpress());
app.set("views", toAbsolutePath("./views"));

指定檢視引擎
指定引擎工具
指定檢視位置

安裝依賴

pnpm install mustache mustache-express

從 res.render 函數開始

render 函數接收兩個引數，第一個 view 的路徑，第二個渲染資料。

res.render = function render(view, options, callback) {
   // 呼叫 app.render
  app.render(view, opts, done);
};

下面是 app.render 程式碼實現

app.render = function render(name, options, callback) {
  // view
  if (!view) {
    var View = this.get('view');
    view = new View(name, {
      defaultEngine: this.get('view engine'),
      root: this.get('views'),
      engines: engines
    });
    if (!view.path) {
      var dirs = Array.isArray(view.root) && view.root.length > 1
        ? 'directories "' + view.root.slice(0, -1).join('", "') + '" or "' + view.root[view.root.length - 1] + '"'
        : 'directory "' + view.root + '"'
      var err = new Error('Failed to lookup view "' + name + '" in views ' + dirs);
      err.view = view;
      return done(err);
    }
    // prime the cache
    if (renderOptions.cache) {
      cache[name] = view;
    }
  }
  // render
  tryRender(view, renderOptions, done);
};

在 view 不在的情況下，會用 View 範例化 view, 最後呼叫 tryRender 函數，tryRender 函數會呼叫 view.render 方法:

View 的實現

module.exports = View;
function View(name, options) {
  // store loaded engine
  this.engine = opts.engines[this.ext];
  // lookup path
  this.path = this.lookup(fileName);
}

跟一般的建構函式一樣，初始化一些屬性，用傳入的 opts 合併一些屬性。

View 擴充套件方法

View.prototype.lookup = function lookup(name) {}
View.prototype.render = function render(options, callback) {
    this.engine(this.path, options, callback);
}
View.prototype.resolve = function resolve(dir, file) {}

render 的具體實現就交給第三方引擎來實現了。

mustache 的render 方法的實現

Writer.prototype.render = function render (template, view, partials, config) {
  var tags = this.getConfigTags(config);
  var tokens = this.parse(template, tags);
  var context = (view instanceof Context) ? view : new Context(view, undefined);
  return this.renderTokens(tokens, context, partials, template, config);
};

render 函數呼叫 renderTokens 方法來解析，具體 renderTokens 方法的實現，就不做深入的分析了。

一個案例切圖案例

需求是這樣的，後端使用費 Node.js 開發，沒有 JS 執行時，為了能夠快速的完成專案，頁面的切頭由前端完成。此時頁面多，任務重，React/Vue 這種現代框架，需要伺服器端渲染，後端不想用 Node.js，增加複雜度。因為前端 Node.js 能夠使用模板渲染，並且模板種類很多，模板能夠解決複用的問題，所以前端功能化能夠解決，現代前端能結局的問題。

使用 exprss 服務 + mustache 模板引擎為基礎實現一個簡單的切圖服務

Express 建立服務和路由
Nodemon 監聽檔案變化，重新啟動路由
esno + TypeScript + es Module 編寫伺服器端程式碼
prettier 格式化檔案

在 express 中使用 mustache

import express from "express";
import mustacheExpress from "mustache-express";
app.engine("mustache", mustacheExpress());
app.set("view engine", "mustache");
app.set("views", toAbsolutePath("./views")); // 指定檢視路徑

渲染一個檢視

app.get(url, async (_, res) => {
    res.render(url, data);
});

mustache 拆分模板的基本能用法

定義模板檔案
參照模板檔案，以及引入檔案下的模板的方法
在模板中使用變數
條件判斷
列表渲染

mustache 官方 Github 倉庫，需要研究的可以自己存取學習，更多具體的用法。

範例

形成一個約定：因為只做簡單的切圖工作，view + data 檔案使用 render 函數渲染的時候一一對應，這樣就減少了很多的樣板程式碼。 ·

main.server.ts

讀取 views/ 資料夾下的所有檢視檔案，佈局檔案不包含（簡化），將 /static 目錄設定為靜態資料夾目錄。路由不在單獨的寫了，此處統一處理為與檢視相同命名用於簡單的渲染。

// express
import express from "express";
import mustacheExpress from "mustache-express";
// config
import cutConfig from "./cut.config";
import defineVars from "iesmo";
// node
import { resolve } from "path";
import fs from "node:fs";
const { __dirname } = defineVars(import.meta);
export const toAbsolutePath = (p) => resolve(__dirname, p);
const routes = fs
  .readdirSync(toAbsolutePath("./views/"))
  .map((file) => {
    if (!/.mustache$/.test(file)) return null;
    return file.replace(/.mustache$/, "").toLowerCase();
  })
  .filter((i) => i !== null);
const app = express();
app.engine("mustache", mustacheExpress());
app.set("view engine", "mustache");
app.set("views", toAbsolutePath("./views"));
app.use("/static", express.static("static"));
routes.forEach((route) => {
  let url = route === "index" ? "/" : `/${route}`;
  app.get(url, async (_, res) => {
    let data = (await import(`./data/${route}.ts`)).default;
    res.render(route as string, data);
  });
});
app.listen(cutConfig.port, () => {
  console.log("server listening on port: ", cutConfig.port);
});

以 index.mustache 模板為範例：

資料存在 /data 資料夾下，預設輸出一個 JS 物件

<!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>{{{title}}}</title>
    {{#links}} 
    <link href="{{{href}}}" rel="external nofollow"  rel="external nofollow"  rel="stylesheet" />
    {{/links}}
    {{#scriptsHead}}
    <script src="{{{src}}}"></script>
    {{/scriptsHead}}
  </head>
  <body>
    {{>tpls/list }}
    {{>layout/footer}}
    {{#scriptBody}}
    <script src="{{{src}}}"></script>
    {{/scriptBody}}
  </body>
</html>

{{{title}}} 插入資料
根據 html 渲染出資料

{{#links}}
<link href="{{{href}}}" rel="external nofollow"  rel="external nofollow"  rel="stylesheet" />
{{/links}}

使用資料夾中的模板

<body>
    {{>tpls/list }}
    {{>layout/footer}}
  </body>

以上行為表示 tpls 目錄下的 list 模板檔案和 layout 目錄下的 footer 模板檔案

下面是一個具體的例子，使用到了 jQuery, Bootstrap 等等技術。可以自己嘗試一下，如果覺得還方便，可以給一個星星：

static-cutouts-express

以上就是一文解析Express框架view物件使用的詳細內容，更多關於Express框架view物件的資料請關注it145.com其它相關文章！