全栈登录注册系统完整流程（含命令行步骤 + MySQL 创建）

技术栈：Node.js + Express + MySQL + HTML/CSS/JS。本文档面向全新手，包含所有命令、路径、注意事项，可直接保存作为课程作业附录或复习笔记。

1. 创建项目目录

mkdir MyWebApp && cd MyWebApp

所有 node 相关命令必须在这个目录执行。

2. 初始化 Node.js 项目

npm init -y

生成 package.json。

3. 安装依赖

npm install express cors mysql2

4. 创建后端文件 server.js

路径：MyWebApp/server.js

import mysql from "mysql2";
import express from "express";
import cors from "cors";

const app = express();
app.use(cors());
app.use(express.json());

// ⭐ 连接数据库
const db = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "123456",
  database: "webapp"
});

db.connect(err => {
  if (err) console.error("数据库连接失败：", err);
  else console.log("数据库连接成功！");
});

// ⭐ 注册接口
app.post("/register", (req, res) => {
  const { username, password } = req.body;
  const sql = "INSERT INTO users (username, password) VALUES (?, ?)";
  db.query(sql, [username, password], err => {
    if (err) res.json({ success: false, error: err });
    else res.json({ success: true });
  });
});

// ⭐ 登录接口
app.post("/login", (req, res) => {
  const { username, password } = req.body;
  const sql = "SELECT * FROM users WHERE username = ? AND password = ?";
  db.query(sql, [username, password], (err, result) => {
    if (err) return res.json({ success: false, error: err });
    if (result.length > 0) res.json({ success: true });
    else res.json({ success: false });
  });
});

app.listen(3001, () => {
  console.log("后端已运行：http://localhost:3001/");
});

安全提示：上面是教学用的”能跑版”。真实生产必须做三件事：密码用 bcrypt 做哈希，登录成功后发 JWT / Session，并为账号表加 UNIQUE 约束。见文末「10. 升级清单」。

5. 创建前端目录 public/

MyWebApp/public/

6. login.html

<input id="username" placeholder="username">
<input id="password" type="password" placeholder="password">
<button onclick="doLogin()">Login</button>

<script>
async function doLogin() {
  const username = document.getElementById("username").value;
  const password = document.getElementById("password").value;
  const res = await fetch("http://localhost:3001/login", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ username, password })
  });
  const data = await res.json();
  if (data.success) {
    alert("登录成功！");
    window.location.href = "/dashboard.html";
  } else {
    alert("用户名或密码错误！");
  }
}
</script>

7. register.html

<input id="username" placeholder="username">
<input id="password" placeholder="password">
<button onclick="doRegister()">Register</button>

<script>
async function doRegister() {
  const username = document.getElementById("username").value;
  const password = document.getElementById("password").value;
  const res = await fetch("http://localhost:3001/register", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ username, password })
  });
  const data = await res.json();
  alert(data.success ? "注册成功！" : "注册失败！");
  if (data.success) window.location.href = "/login.html";
}
</script>

8. MySQL 数据库与表

CREATE DATABASE webapp;
USE webapp;

CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  username VARCHAR(255) UNIQUE,
  password VARCHAR(255)
);

9. 启动后端

node server.js

看到：

数据库连接成功！
后端已运行：http://localhost:3001/

10. 升级清单（生产前必做）

1. 密码哈希：npm i bcrypt，注册时 await bcrypt.hash(password, 10)，登录时 await bcrypt.compare(...)。
2. Session/JWT：npm i jsonwebtoken，登录成功后 jwt.sign({ userId }, SECRET, { expiresIn: "7d" }) 返给前端，前端放 Authorization: Bearer 头带回。
3. 输入校验：zod 或 joi 校验 body，避免 undefined 直接进 SQL。
4. 反注入：已经用了 ? 占位符，这点已经对了 —— 不要用字符串拼接 SQL。
5. HTTPS + CORS 白名单：cors({ origin: ["https://yourapp.com"] })。
6. 限流：express-rate-limit 给 /login 加 5次/分钟阈值，防暴力破解。

小练习：在浏览器里跑一段 JS

下面的 Run 按钮在 Web Worker 里执行 JS —— 试试看它用 fetch 模拟一次登录请求的 payload：

11. 最终结构

MyWebApp/
 ├── server.js
 ├── package.json
 ├── node_modules/
 └── public/
      ├── login.html
      ├── register.html
      └── dashboard.html

12. 一句话总结

cd MyWebApp → npm i → node server.js → 开 public/login.html → 登录或注册