使用 Express.js 创建动态颜色标题网页

本教程将指导你如何使用 Express.js 创建一个简单的网页，其标题颜色会根据访问次数循环变化，从红色、黄色、绿色、蓝色循环展示。

代码实现

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

let colors = ['red', 'yellow', 'green', 'blue'];
let currentColorIndex = 0;

app.get('/color.html', (req, res) => {
  let color = colors[currentColorIndex];
  let html = `
    <html>
      <head>
        <title>${color}</title>
      </head>
      <body>
        <h1 style='color: ${color}'>This is ${color}.</h1>
      </body>
    </html>
  `;
  res.send(html);
  currentColorIndex = (currentColorIndex + 1) % colors.length;
});

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

解释

定义颜色数组和索引:
- colors: 存储四种颜色的数组。
- currentColorIndex: 用于跟踪当前颜色在数组中的索引。
处理 GET 请求:
- 使用 app.get('/color.html', ...) 处理访问 /color.html 路径的 GET 请求。
- 从 colors 数组中获取当前颜色，并使用它构建 HTML 代码。
- 将生成的 HTML 代码作为响应发送给客户端。
- 更新 currentColorIndex 以指向下一个颜色，并使用模运算 (%) 确保索引始终在数组范围内。

注意事项

状态存储: 该代码没有使用任何数据库或存储机制来保存颜色索引。这意味着每次服务器重启后，颜色都会从红色开始。
持久化状态: 如果你需要更持久的解决方案，可以考虑使用数据库或其他存储机制来保存颜色索引。

总结

本教程展示了如何使用 Express.js 创建一个简单的动态网页，并通过循环显示不同颜色的标题。这只是一个简单的示例，你可以根据需要修改代码来实现更复杂的功能。

希望本教程对你有帮助! 🎉