如何用Node.js创建登录页，指向运行p5.js的客户端HTML页面？

我来帮你搞定这个需求！其实完全不用依赖服务器端模板（比如ejs），咱们用Node.js + Express搭个轻量服务器就能实现登录验证，同时让你的p5.js页面安安稳稳在客户端运行。下面是具体的实现步骤：

咱们的流程很清晰：用户先访问登录页→提交账号密码→服务器验证身份→验证通过就跳转至你的p5.js页面；如果未登录直接访问p5页面，服务器会自动把用户踢回登录页。这里用Session来记录用户的登录状态，让服务器能识别谁是已授权用户。

首先初始化项目并安装依赖：

npm init -y
npm install express express-session body-parser

然后创建server.js文件，代码如下：

const express = require('express');
const session = require('express-session');
const bodyParser = require('body-parser');

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

// 配置Session：用来保存用户登录状态
app.use(session({
  secret: 'your-custom-secret-key-123', // 换成自己的复杂密钥，用于加密Session
  resave: false,
  saveUninitialized: false,
  cookie: { secure: false } // 开发环境用false，生产环境开启HTTPS后设为true
}));

// 解析表单提交的账号密码数据
app.use(bodyParser.urlencoded({ extended: true }));

// 静态托管public文件夹：里面放登录页和p5.js页面
app.use(express.static('public'));

// 处理登录请求的路由
app.post('/login', (req, res) => {
  const { username, password } = req.body;
  // 这里替换成你实际的验证逻辑（比如查数据库），先写死示例数据
  const validUser = 'naman';
  const validPwd = 'sharma123';

  if (username === validUser && password === validPwd) {
    // 登录成功：标记Session状态
    req.session.isLoggedIn = true;
    // 跳转到你的p5.js页面（假设页面名叫sketch.html）
    res.redirect('/sketch.html');
  } else {
    // 登录失败：返回提示并引导回登录页
    res.send('<h2>登录失败！账号或密码错误</h2><a href="/login.html">返回重新登录</a>');
  }
});

// 自定义中间件：检查用户是否已登录
function checkAuth(req, res, next) {
  if (req.session.isLoggedIn) {
    next(); // 已登录，允许访问目标页面
  } else {
    res.redirect('/login.html'); // 未登录，强制跳回登录页
  }
}

// 保护p5.js页面：只有登录用户才能访问
app.get('/sketch.html', checkAuth, (req, res) => {
  res.sendFile(__dirname + '/public/sketch.html');
});

// 启动服务器
app.listen(PORT, () => {
  console.log(`服务器运行在 http://localhost:${PORT}`);
});

在项目根目录新建public文件夹，里面创建login.html：

<!DOCTYPE html>
<html>
<head>
  <title>用户登录</title>
  <style>
    body { text-align: center; margin-top: 100px; }
    .form-group { margin: 15px 0; }
  </style>
</head>
<body>
  <h1>请登录以访问绘图页</h1>
  <form action="/login" method="POST">
    <div class="form-group">
      <label>用户名：</label>
      <input type="text" name="username" required>
    </div>
    <div class="form-group">
      <label>密码：</label>
      <input type="password" name="password" required>
    </div>
    <button type="submit">登录</button>
  </form>
</body>
</html>

把你现有的p5.js页面放到public文件夹里，示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>我的p5.js绘图页</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
</head>
<body>
  <script>
    // 这里放你的p5.js核心代码
    function setup() {
      createCanvas(600, 400);
      background('#f0f0f0');
    }

    function draw() {
      if (mouseIsPressed) {
        fill('#ff4444');
        ellipse(mouseX, mouseY, 50, 50);
      }
    }
  </script>
</body>
</html>

1. 启动服务器：node server.js
2. 打开浏览器访问http://localhost:3000/sketch.html，会自动跳转到登录页
3. 输入正确的账号密码（示例里是naman/sharma123），就能成功进入p5.js绘图页面
4. 如果直接访问登录页并输入错误密码，会看到失败提示

• 生产环境中，不要把账号密码写死在代码里，建议用数据库（比如MongoDB、MySQL）存储用户信息
• Session的secret要换成复杂的随机字符串，避免安全风险
• 如果需要部署到线上开启HTTPS，记得把Session配置里的cookie.secure设为true

这样就完全满足你的需求了：登录页是纯静态HTML，p5.js页面在客户端运行，只有授权用户才能访问~

内容的提问来源于stack exchange，提问作者Naman Sharma