通过 Node.js 中的 Marko.js 进行模板渲染

Marko： Marko 使使用类似于HTML的语法来表示您的 UI 变得很容易。它是一个友好且超快速的 UI 库，使构建 Web 应用程序变得有趣。它与HTML非常相似，您可以将其用作模板语言（如车把、小胡子或哈巴狗）的替代品。

然而，Marko 不仅仅是一种模板语言。它是一种允许您通过描述应用程序视图如何随时间变化以及响应用户操作来以声明方式构建应用程序的语言。在浏览器中，当代表你的 UI 的数据发生变化时，Marko 会自动高效地更新 DOM 以反映变化。

安装：如果你是从零开始，你可以使用 Marko 的 cli 命令快速创建一个入门应用：

npx @marko/create

Marko 编译器在 Node.js 上运行，可以使用 npm 安装：

npm init -y // The -y installs the default package.json

我们需要安装以下必需的库：

npm install express --save // install express module
npm install marko --save  // install marko module
or using yarn:
yarn add marko

示例：文件名：template.marko

html

html
    head
        title -- Hello World
    body
        h1 -- Hello, ${data.fname} ${data.lname}
        h3 -- Welcome to, ${data.host}'s bar.
           p -- We offer you
               b -- ${data.drinks[0]}, ${data.drinks[1]}, ${data.drinks[2]}.

Template.marko 的等效代码：

html

    


    
Hello, ${data.fname} ${data.lname}
      
Welcome to, ${data.host}'s bar.
   

    We offer you ${data.drinks[0]},
    ${data.drinks[1]}, ${data.drinks[2]}.
  
 

文件名：index.js

javascript

// Node.js program to implement the
// marko.js template
 
// Allow Node.js to require and load
// `.marko` files
require("marko/node-require");
 
// Importing express module
var express = require("express");
 
// Importing marko module
var markoExpress = require("marko/express");
 
// Importing template module
var template = require("./template.marko");
 
var app = express();
 
// Enable res.marko(template, data)
app.use(markoExpress());
 
// Routing
app.get("/", function(req, res) {
  console.log("Routing done all fine...");
  res.marko(template, data={
    fname: "Devanshi",
    lname: "awasthi",
    host: "Vikas",
    drinks : ["Wine", "Beer", "Champagne"]
  });
});
 
// Listening on 2020 port number
app.listen(2020, ()=>{
    console.log("Server started at port: 2020...");
});

在 cmd 中使用以下代码运行index.js文件：

node index.js 

输出（在控制台中）：

Server started at port 2020…
Routing done all fine… 
 

在浏览器中：

在 2020 端口运行 localhost

注意：在控制台中运行服务器后，它会自动创建一个文件template.marko.js ，其中包含对所有模板文件的引用。

参考： https://markojs.com/docs/getting-started/