如何使用nodejs服务器和Pug一次显示列表中的一个元素并使用按钮进行迭代？

npm init -y

npm install express pug

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

// 设置Pug作为模板引擎
app.set('view engine', 'pug');

// 创建一个包含元素的列表
const list = ['元素1', '元素2', '元素3', '元素4'];

// 创建一个路由，用于渲染Pug模板并传递列表中的一个元素
app.get('/', (req, res) => {
  // 获取要显示的元素的索引
  const index = req.query.index || 0;

  // 渲染Pug模板，并传递要显示的元素和索引
  res.render('index', { element: list[index], index });
});

// 启动服务器
app.listen(3000, () => {
  console.log('服务器已启动，访问 http://localhost:3000');
});

html
  head
    title 列表元素显示示例
  body
    h1 列表元素显示示例
    p 当前元素：#{element}
    p 当前索引：#{index}
    button(onclick="nextElement(#{index})") 下一个元素

    script.
      function nextElement(index) {
        // 计算下一个元素的索引
        const nextIndex = (index + 1) % #{list.length};

        // 重定向到带有新索引的URL
        window.location.href = `/?index=${nextIndex}`;
      }

node app.js