頁面渲染傳參的方式 – Node實戰

魯鵬發表於2019-02-16

動態頁面的開發，基本會涉及一個比較關鍵的問題，那就是傳參。後臺把不同的引數傳遞給前臺，前臺頁面根據不同的引數顯示不同的頁面效果，這叫做渲染。

不同的後臺開發環境均有不同的渲染方式，Node開發過程中，傳遞引數的方式非常簡單直觀。直接就是渲染模版即可，如下程式碼：

res.render(`error`, {
  message: err.message,
  error: err
});

渲染頁面模版error，給它傳遞了2個引數。這樣前臺頁面模版就可以使用這兩個引數了。如下error頁面程式碼：

<h1><%= message %></h1>
<h2><%= error.status %></h2>
<pre><%= error.stack %></pre>

當然頁面上不僅僅只可以使用render方法傳遞的那幾個引數，如果你使用的是express框架的話，你還可以通過app.locals以及res.locals物件賦值的方式傳遞其他的引數到頁面模版引擎。例如：

router.use(function (req, res, next) {
  res.locals.period = moment().day(5).format(`YYYYMMDD`);  // 得到本週五的日期
  res.locals.prePeriod = moment().day(5 - 7).format(`YYYYMMDD`); // 得到上週五的日期
});

這個路由方法，會將period以及prePeriod兩個變數傳遞到該路由下所有路徑的模版引擎上。在該路由下的所有頁面模版上均可以使用這兩個變數。

但是，存在另外一種情況，頁面跳轉的時候，引數該什麼傳遞呢？

頁面的跳轉，例如：res.redirect(`/login`)，這條語句是把請求跳轉到另外一個路徑上；或者，res.redirect(`back`)返回上一頁。頁面的跳轉相當於重新訪問一遍目標路徑的路由。這種情況下，我們想傳遞引數，通過redirect方法貌似不可以實現。可能有人會想到使用session物件來作為一箇中介進行傳參，引數展現後就自動刪除該條session，沒錯，這就是connect-flash模版所實現的功能。

具體可參考：

  1. Express框架之connect-flash詳解 – 高山上的魚 – 部落格頻道 – CSDN.NET。

  2. connect-flash 用法詳解 – 雲庫網

原理和使用方法都已經有了，我就不贅述了，我的使用場景一般都是當進入一個沒有許可權訪問的頁面時，跳轉到登陸介面所提示資訊的展現。好多場景其實是可以通過前臺Ajax來取代的，例如：登陸介面的驗證等等。

總結

Node Web開發中，後臺三種傳參渲染頁面的方式：

  1. 普通頁面渲染使用res.render()方法；

  2. 還有別忘了express提供的app.locals以及res.locals物件；

  3. 針對跳轉頁面的場景可以嘗試使用connect-flash模組；

更多內容請訪問：LP`s Blog

相關文章