Nodejs 关于jade 页面模板化

Nodejs 关于jade 页面模板化

我现在要做一个管理系统。 正常分版，包括：上方、左方（菜单）、右方（功能区）和下方 我做要的效果是上方、左方和下方，是不动的，不刷新的。。只右方随着选择菜单项的不同而变 若不用iframe 。如何实现这一功能？ 模板用的是jade 。。以及express

3 回复

在Node.js中使用Jade（现在称为Pug）作为模板引擎，并结合Express框架来实现你描述的功能是非常可行的。你可以通过AJAX请求来动态加载不同的页面内容到右侧区域，而不刷新整个页面。以下是一个简单的示例，展示如何实现这种效果。

安装必要的依赖

首先，确保你的项目中已经安装了express和pug：

npm install express pug

服务器端代码 (app.js)

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

// 设置视图引擎为Pug
app.set('view engine', 'pug');

// 静态文件服务
app.use(express.static('public'));

// 路由处理
app.get('/', (req, res) => {
    res.render('index', { title: '管理系统' });
});

app.get('/menu/:id', (req, res) => {
    const id = req.params.id;
    // 根据id返回不同的HTML片段
    res.send(`<h1>这是菜单${id}的内容</h1>`);
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`服务器运行在 http://localhost:${PORT}`));

客户端代码 (public/index.html)

在这个示例中，我们假设你有一个基本的HTML结构，左侧有菜单列表，右侧显示内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理系统</title>
</head>
<body>
    <div class="header">系统头部</div>
    <div class="sidebar">
        <ul>
            <li><a href="#" data-menu="1">菜单1</a></li>
            <li><a href="#" data-menu="2">菜单2</a></li>
            <li><a href="#" data-menu="3">菜单3</a></li>
        </ul>
    </div>
    <div class="content" id="content"></div>
    <div class="footer">系统底部</div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        document.querySelectorAll('.sidebar a').forEach(item => {
            item.addEventListener('click', function(e) {
                e.preventDefault();
                const menuId = this.getAttribute('data-menu');
                fetch(`/menu/${menuId}`)
                    .then(response => response.text())
                    .then(data => {
                        document.getElementById('content').innerHTML = data;
                    });
            });
        });
    </script>
</body>
</html>

解释

  1. 服务器端：我们设置了一个基础路由/来渲染主页面，并定义了一个动态路由/menu/:id来根据ID返回不同的内容。

  2. 客户端：使用jQuery监听侧边栏链接的点击事件。当用户点击某个菜单项时，发送一个AJAX请求到服务器获取相应的内容，并将内容插入到右侧的content区域。

这种方式避免了整个页面的刷新，仅更新右侧的内容部分，从而提供更好的用户体验。


你说的是单页面应用？前端不刷新？推荐angularjs，当然backbone也可以，这和用什么模板没什么关系。

要实现您描述的功能，可以使用Node.js结合Express和Jade（现在称为Pug）来创建一个动态的页面模板。我们可以通过路由来处理不同菜单项的选择，并在右侧区域动态加载不同的内容。

示例代码

  1. 安装依赖 首先确保您已经安装了express和pug（原名Jade）：

    npm install express pug

  2. 创建基本项目结构

    /myapp
├── /views
│   └── index.pug
│   └── menu.pug
├── app.js
└── package.json

  3. 配置app.js

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

const app = express();
const port = 3000;

// 设置视图引擎为 Pug
app.set('view engine', 'pug');

// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'public')));

// 定义菜单项路由
app.get('/', (req, res) => {
  res.render('index', { title: '管理系统' });
});

// 假设我们有两个菜单项，分别加载不同的内容
app.get('/menu/:name', (req, res) => {
  const name = req.params.name;
  res.render('menu', { title: '管理系统', content: `这是${name}的内容` });
});

app.listen(port, () => {
  console.log(`应用运行在 http://localhost:${port}`);
});

  4. 创建视图文件

    • views/index.pug

      doctype
html
  head
    title= title
  body
    header
      h1 管理系统
    .container
      .left-nav
        ul
          each item in ['首页', '用户管理', '设置']
            li
              a(href='/menu/' + item)= item
    .main-content
      include ./menu.pug
    footer
      p 版权所有 © 2023

    • views/menu.pug

      .right-content
  != content

解释

  • 路由：我们定义了一个根路由/来渲染主页面，并定义了/menu/:name这样的路由来根据不同的菜单项显示不同的内容。
  • 视图文件：index.pug包含顶部、左侧导航栏和底部，右侧内容则通过包含menu.pug来动态加载。
  • 内容替换：menu.pug中的内容部分由后端传递的变量动态生成。

这样，当用户点击不同的菜单时，右侧内容区域会更新，而不会重新加载整个页面。

回到顶部