Nodejs jade layout中取得当前请求的action,然后读一个配置文件，根据配置中的js,读进来，合并以后输出，这个思路可行吗？

Nodejs jade layout中取得当前请求的action,然后读一个配置文件，根据配置中的js,读进来，合并以后输出，这个思路可行吗？

2 回复

当然可行。在Node.js中使用Jade（现在称为Pug）作为模板引擎时，你可以通过一些方法来实现你所描述的功能。以下是一个简单的示例，展示如何在布局文件中获取当前请求的动作，并根据配置文件中的JS列表动态加载这些脚本。

思路

  1. 获取当前请求的动作：可以通过Express中间件或者路由参数来获取。
  2. 读取配置文件：可以使用fs模块来读取配置文件。
  3. 动态加载JS：在Jade/Pug模板中根据配置文件中的JS列表生成<script>标签。

示例代码

配置文件 (config.js)

module.exports = {
    scripts: [
        '/js/script1.js',
        '/js/script2.js'
    ]
};

Express路由和中间件 (app.js)

const express = require('express');
const path = require('path');
const fs = require('fs');
const app = express();

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// 假设我们有一个中间件来设置当前请求的动作
app.use((req, res, next) => {
    req.action = req.path; // 这里假设动作就是请求路径
    next();
});

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

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

Jade/Pug模板 (layout.pug)

doctype
html
    head
        title= title
        each script in scripts
            script(src=script)
    body
        block content

Jade/Pug模板 (index.pug)

extends layout

block content
    h1= action

解释

  1. 配置文件：config.js 文件包含了需要加载的所有JavaScript文件的路径。
  2. Express路由：在路由处理函数中，将当前请求的动作传递给视图。
  3. Jade/Pug模板：layout.pug 模板中定义了基础HTML结构，并且使用循环遍历配置文件中的JS数组，动态生成 <script> 标签。
  4. 视图模板：index.pug 继承自 layout.pug，并在 content 块中显示当前请求的动作。

这种方式能够灵活地根据不同的请求动态加载所需的JS文件。


这个思路是可行的。在Node.js应用中，你可以通过中间件获取当前请求的信息，并读取配置文件来动态生成或合并所需的JavaScript文件。这里可以使用Jade（现更名为Pug）模板引擎来实现布局，并结合中间件处理逻辑。

以下是一个简单的示例代码，展示如何在Node.js应用中实现这一功能：

  1. 安装必要的库：
npm install express pug fs
  1. 创建一个简单的Express服务器：
const express = require('express');
const path = require('path');
const fs = require('fs');
const app = express();

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// 读取配置文件
function readConfig() {
    return new Promise((resolve, reject) => {
        fs.readFile('./config.json', 'utf-8', (err, data) => {
            if (err) {
                reject(err);
            } else {
                resolve(JSON.parse(data));
            }
        });
    });
}

// 在layout.pug中使用block来定义可替换部分
app.get('/', async (req, res) => {
    const config = await readConfig();
    res.render('index', { config: config, action: req.path });
});

// 定义布局文件 views/layout.pug
/*
doctype
html
head
  title= title
  block scripts
body
  block content
*/

// 定义主页面文件 views/index.pug
extends layout

block scripts
  script(src='/js/one.js')
  - if (config.extraScripts && config.extraScripts.includes(req.path)) {
    each js in config.scripts[req.path]
      script(src=`/js/${js}.js`)
  - }

app.listen(3000, () => console.log('Server is running on port 3000'));
  1. 配置文件config.json：
{
  "scripts": {
    "/": ["one", "two"],
    "/about": ["three"]
  }
}

上述代码首先设置了一个基本的Express服务器，并将Pug设置为视图引擎。接着定义了一个函数readConfig()来异步读取配置文件。在主路由中，我们读取配置并将其传递给视图。在布局文件layout.pug中，我们定义了一个名为scripts的块，用于插入脚本。在index.pug中，我们根据请求路径动态插入相应的脚本文件。

这样，你可以根据请求的路径动态地合并并插入不同的JavaScript文件。

回到顶部