如何通过JavaScript代码修改SQL数据库表数据（字段自增示例）

可行，但前端JavaScript无法直接操作数据库——直接在前端暴露数据库凭证会引发严重安全风险（比如泄露账号、被恶意篡改数据），必须通过后端接口中转完成操作。以下是具体实现步骤：

1. 后端编写自增接口（以Node.js + Express为例） #

先搭建后端服务，连接数据库并提供处理自增请求的接口：

const express = require('express');
const mysql = require('mysql2/promise');
const app = express();
app.use(express.json());

// 数据库连接配置，替换为你的实际信息
const dbConfig = {
  host: 'localhost',
  user: 'db_username',
  password: 'db_password',
  database: 'rubik'
};

// 处理自增请求的POST接口
app.post('/increment-i', async (req, res) => {
  try {
    const connection = await mysql.createConnection(dbConfig);
    // 执行SQL自增语句
    await connection.execute('UPDATE cube_setting SET i = i + 1');
    await connection.end();
    res.status(200).json({ success: true, msg: '值已自增' });
  } catch (err) {
    console.error(err);
    res.status(500).json({ success: false, msg: '操作失败' });
  }
});

app.listen(3000, () => console.log('后端服务运行在 http://localhost:3000'));

2. 前端页面实现按钮触发逻辑 #

在前端页面中添加按钮，通过fetch调用后端接口：

<!DOCTYPE html>
<html>
<body>
  <button onclick="increaseI()">点击让i自增1</button>

  <script>
    async function increaseI() {
      try {
        const res = await fetch('http://localhost:3000/increment-i', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' }
        });
        const result = await res.json();
        alert(result.success ? '自增成功！' : `失败：${result.msg}`);
      } catch (err) {
        console.error('请求出错：', err);
        alert('请求失败，请检查后端服务是否启动');
      }
    }
  </script>
</body>
</html>

数据库结构参考 #

说明：rubik数据库下的cube_setting表包含整数类型列i，初始值为0。

内容的提问来源于stack exchange，提问作者Nico Fossa