当前位置：首页 > 数据库 > 正文

js删除按钮怎么删除数据库

删除按钮无法直接删除数据库，需通过AJAX或Fetch向后端发送请求，后端

现代Web开发中,使用JavaScript（JS）来操作数据库是常见的需求之一，特别是在构建动态网页时，经常需要实现删除功能，比如点击一个“删除”按钮来从数据库中移除某条记录，本文将详细介绍如何使用JS实现删除按钮与数据库的交互，包括前端和后端的实现步骤、注意事项以及常见问题解答。

技术栈

要实现JS删除按钮删除数据库中的数据,通常涉及以下几个技术：

  1. 前端：HTML、CSS、JavaScript（可能使用框架如React、Vue或Angular）。
  2. 后端：Node.js（或其他后端语言如PHP、Python、Java等）。
  3. 数据库：常见的关系型数据库如MySQL、PostgreSQL，或非关系型数据库如MongoDB。
  4. 通信协议：通常使用HTTP请求，通过RESTful API或GraphQL与后端通信。

本文以Node.js和MySQL为例，详细说明整个流程。

前端实现

创建删除按钮

在前端页面中,需要为每条数据项添加一个删除按钮，假设我们有一个用户列表，每个用户旁边都有一个删除按钮：

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <!-假设从后端获取的数据 -->
    <tr>
      <td>1</td>
      <td>张三</td>
      <td><button class="delete-btn" data-id="1">删除</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td><button class="delete-btn" data-id="2">删除</button></td>
    </tr>
    <!-更多行 -->
  </tbody>
</table>

添加删除事件监听

使用JavaScript为删除按钮添加点击事件监听器,当用户点击删除按钮时，触发相应的删除操作。

document.addEventListener('DOMContentLoaded', () => {
  const deleteButtons = document.querySelectorAll('.delete-btn');
  deleteButtons.forEach(button => {
    button.addEventListener('click', (e) => {
      const id = button.getAttribute('data-id');
      if (confirm(`确定要删除ID为${id}的记录吗？`)) {
        deleteRecord(id);
      }
    });
  });
});
function deleteRecord(id) {
  // 发送删除请求到后端
  fetch(`/api/delete/${id}`, {
    method: 'DELETE'
  })
  .then(response => {
    if (response.ok) {
      // 删除成功后，从页面上移除该行
      const row = document.querySelector(`.delete-btn[data-id='${id}']`).closest('tr');
      row.remove();
      alert('删除成功！');
    } else {
      alert('删除失败，请重试。');
    }
  })
  .catch(error => {
    console.error('删除错误:', error);
    alert('删除过程中发生错误。');
  });
}

样式美化（可选）

可以使用CSS对删除按钮进行样式美化,提高用户体验。

.delete-btn {
  background-color: #ff4d4d;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}
.delete-btn:hover {
  background-color: #ff1a1a;
}

后端实现

设置Node.js服务器

使用Express框架快速搭建一个Node.js服务器。

js删除按钮怎么删除数据库 第1张

npm init -y
npm install express mysql body-parser cors

连接数据库

创建一个数据库连接模块 db.js：

// db.js
const mysql = require('mysql');
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'your_username',
  password: 'your_password',
  database: 'your_database'
});
connection.connect((err) => {
  if (err) {
    console.error('数据库连接失败:', err);
    return;
  }
  console.log('已连接到数据库');
});
module.exports = connection;

创建删除API路由

在 server.js 中设置删除路由：

// server.js
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const connection = require('./db');
const app = express();
const port = 3000;
app.use(bodyParser.json());
app.use(cors());
// 删除路由
app.delete('/api/delete/:id', (req, res) => {
  const id = req.params.id;
  const sql = 'DELETE FROM users WHERE id = ?';
  connection.query(sql, [id], (error, results) => {
    if (error) {
      console.error('删除错误:', error);
      res.status(500).send('服务器错误');
      return;
    }
    if (results.affectedRows === 0) {
      res.status(404).send('未找到该记录');
    } else {
      res.status(200).send('删除成功');
    }
  });
});
app.listen(port, () => {
  console.log(`服务器正在运行在端口 ${port}`);
});

启动服务器

确保MySQL服务已启动,并且数据库和表已正确配置，然后启动Node.js服务器：

node server.js

前后端联调

确保前端发送的请求URL与后端API路由一致,在本例中，前端发送的请求是 /api/delete/:id，需要确保前端的fetch URL与后端的路由匹配，如果前后端不在同一个域，需要处理好CORS（跨域资源共享）问题，在上面的后端代码中，已经使用了 cors 中间件来允许跨域请求。

安全性考虑

在实际应用中,直接通过客户端发送删除请求存在安全风险，以下是一些增强安全性的建议：

js删除按钮怎么删除数据库 第2张

  1. 身份验证与授权：确保只有经过身份验证的用户才能执行删除操作，可以在后端添加认证机制，如JWT（JSON Web Token）。

  2. 输入验证：在后端对接收到的ID进行验证，防止SQL注入攻击，使用参数化查询（如上例中的 ）可以有效防止SQL注入。

  3. 日志记录：记录删除操作的日志，以便审计和追踪。

  4. 软删除：有时不建议物理删除数据，可以考虑软删除，即在数据库中添加一个 is_deleted 字段，标记记录为删除状态，而不是真正删除。

完整示例代码汇总

前端HTML和JS

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">删除示例</title>
  <style>
    .delete-btn {
      background-color: #ff4d4d;
      color: white;
      border: none;
      padding: 5px 10px;
      cursor: pointer;
    }
    .delete-btn:hover {
      background-color: #ff1a1a;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>张三</td>
        <td><button class="delete-btn" data-id="1">删除</button></td>
      </tr>
      <tr>
        <td>2</td>
        <td>李四</td>
        <td><button class="delete-btn" data-id="2">删除</button></td>
      </tr>
      <!-更多行 -->
    </tbody>
  </table>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const deleteButtons = document.querySelectorAll('.delete-btn');
      deleteButtons.forEach(button => {
        button.addEventListener('click', (e) => {
          const id = button.getAttribute('data-id');
          if (confirm(`确定要删除ID为${id}的记录吗？`)) {
            deleteRecord(id);
          }
        });
      });
    });
    function deleteRecord(id) {
      fetch(`http://localhost:3000/api/delete/${id}`, {
        method: 'DELETE'
      })
      .then(response => {
        if (response.ok) {
          const row = document.querySelector(`.delete-btn[data-id='${id}']`).closest('tr');
          row.remove();
          alert('删除成功！');
        } else {
          alert('删除失败，请重试。');
        }
      })
      .catch(error => {
        console.error('删除错误:', error);
        alert('删除过程中发生错误。');
      });
    }
  </script>
</body>
</html>

后端 server.js 和 db.js

db.js:

js删除按钮怎么删除数据库 第3张

const mysql = require('mysql');
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'your_username',
  password: 'your_password',
  database: 'your_database'
});
connection.connect((err) => {
  if (err) {
    console.error('数据库连接失败:', err);
    return;
  }
  console.log('已连接到数据库');
});
module.exports = connection;

server.js:

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const connection = require('./db');
const app = express();
const port = 3000;
app.use(bodyParser.json());
app.use(cors());
// 删除路由
app.delete('/api/delete/:id', (req, res) => {
  const id = req.params.id;
  const sql = 'DELETE FROM users WHERE id = ?';
  connection.query(sql, [id], (error, results) => {
    if (error) {
      console.error('删除错误:', error);
      res.status(500).send('服务器错误');
      return;
    }
    if (results.affectedRows === 0) {
      res.status(404).send('未找到该记录');
    } else {
      res.status(200).send('删除成功');
    }
  });
});
app.listen(port, () => {
  console.log(`服务器正在运行在端口 ${port}`);
});

常见问题与解决方案

跨域问题（CORS）

问题：前端无法向后端发送请求，浏览器报跨域错误。

解决方案：在后端使用 cors 中间件允许跨域请求，上述后端代码中已包含 app.use(cors());，可以根据需要配置具体的选项，只允许特定域名的请求：

const corsOptions = {
  origin: 'http://your-frontend-domain.com',
  optionsSuccessStatus: 200
};
app.use(cors(corsOptions));

SQL注入风险

问题：直接将用户输入的ID拼接到SQL语句中，可能导致SQL注入攻击。

解决方案：使用参数化查询，避免直接拼接用户输入，上述后端代码中使用了 作为占位符，并将 id 作为参数传递，这样可以有效防止SQL注入。

数据库删除
0

相关文章