【Vue】前端使用node.js对数据库直接进行CRUD操作

在JavaScript中直接连接数据库并进行增删改查(CRUD)操作通常不推荐这么做,因为JavaScript(尤其是前端JavaScript)无法直接连接数据库,出于安全性和架构设计考虑。一般来说,应该通过后端服务(例如Node.js、Express等)来与数据库进行交互,前端通过API请求与后端通信。

以下是一个完整的示例,展示如何使用Node.js与MySQL数据库进行CRUD操作:

  1. 安装必要的依赖
    首先,确保你已经安装了Node.js。然后使用以下命令初始化一个新的Node.js项目并安装依赖:
bash 复制代码
npm init -y
npm install express mysql2 body-parser
  1. 创建数据库(MySQL)
    在MySQL中创建一个数据库和表,例如:
bash 复制代码
CREATE DATABASE sportsms;

USE sportsms;

CREATE TABLE athletes (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100),
    age INT,
    event VARCHAR(100)
);
  1. 创建Node.js应用
    创建一个名为 app.js 的文件,示例代码如下:
bash 复制代码
const express = require('express');
const mysql = require('mysql2');
const bodyParser = require('body-parser');

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

// 使用body-parser来解析JSON请求体
app.use(bodyParser.json());

// 创建数据库连接池
const db = mysql.createPool({
  host: 'localhost',
  user: 'root',         // MySQL用户名
  password: '',         // MySQL密码
  database: 'sportsms'  // 数据库名称
});

// 测试数据库连接
db.getConnection((err, connection) => {
  if (err) {
    console.error('数据库连接失败:', err.stack);
    return;
  }
  console.log('成功连接到数据库');
  connection.release();
});

// 创建选手(增)
app.post('/athletes', (req, res) => {
  const { name, age, event } = req.body;

  const query = 'INSERT INTO athletes (name, age, event) VALUES (?, ?, ?)';
  db.query(query, [name, age, event], (err, result) => {
    if (err) {
      return res.status(500).json({ error: '数据库错误', details: err });
    }
    res.status(201).json({ id: result.insertId, name, age, event });
  });
});

// 获取所有选手(查)
app.get('/athletes', (req, res) => {
  db.query('SELECT * FROM athletes', (err, results) => {
    if (err) {
      return res.status(500).json({ error: '数据库错误', details: err });
    }
    res.json(results);
  });
});

// 获取单个选手(查)
app.get('/athletes/:id', (req, res) => {
  const { id } = req.params;
  db.query('SELECT * FROM athletes WHERE id = ?', [id], (err, results) => {
    if (err) {
      return res.status(500).json({ error: '数据库错误', details: err });
    }
    if (results.length === 0) {
      return res.status(404).json({ error: '选手未找到' });
    }
    res.json(results[0]);
  });
});

// 更新选手(改)
app.put('/athletes/:id', (req, res) => {
  const { id } = req.params;
  const { name, age, event } = req.body;

  const query = 'UPDATE athletes SET name = ?, age = ?, event = ? WHERE id = ?';
  db.query(query, [name, age, event, id], (err, result) => {
    if (err) {
      return res.status(500).json({ error: '数据库错误', details: err });
    }
    if (result.affectedRows === 0) {
      return res.status(404).json({ error: '选手未找到' });
    }
    res.json({ id, name, age, event });
  });
});

// 删除选手(删)
app.delete('/athletes/:id', (req, res) => {
  const { id } = req.params;
  db.query('DELETE FROM athletes WHERE id = ?', [id], (err, result) => {
    if (err) {
      return res.status(500).json({ error: '数据库错误', details: err });
    }
    if (result.affectedRows === 0) {
      return res.status(404).json({ error: '选手未找到' });
    }
    res.status(204).send();
  });
});

// 启动服务器
app.listen(port, () => {
  console.log(`服务器正在运行,访问 http://localhost:${port}`);
});
  1. 启动服务器
    在命令行中,运行以下命令启动服务器:
bash 复制代码
node app.js
  1. 测试API
    你可以使用工具如Postman或者直接用 curl 来测试API。以下是各个操作的示例请求:

增 - 创建选手:

POST /athletes

请求体(JSON):

bash 复制代码
{
  "name": "John Doe",
  "age": 25,
  "event": "100m Sprint"
}

查 - 获取所有选手:

GET /athletes

响应(JSON):

bash 复制代码
[
  {
    "id": 1,
    "name": "John Doe",
    "age": 25,
    "event": "100m Sprint"
  }
]

查 - 获取单个选手:

GET /athletes/1

响应(JSON):

bash 复制代码
{
  "id": 1,
  "name": "John Doe",
  "age": 25,
  "event": "100m Sprint"
}

改 - 更新选手信息:

PUT /athletes/1

请求体(JSON):

bash 复制代码
{
  "name": "John Doe",
  "age": 26,
  "event": "200m Sprint"
}

删 - 删除选手:

DELETE /athletes/1


这就是一个简单的Node.js和MySQL连接并进行增删改查(CRUD)操作的完整示例。你可以通过前端使用JavaScript发送HTTP请求与后端交互。注意,直接在前端处理数据库操作是不安全的,前端应仅通过API请求与后端交互。

相关推荐
2501_920931703 小时前
React Native鸿蒙跨平台采用ScrollView的horizontal属性实现横向滚动实现特色游戏轮播和分类导航
javascript·react native·react.js·游戏·ecmascript·harmonyos
0思必得05 小时前
[Web自动化] Selenium处理动态网页
前端·爬虫·python·selenium·自动化
东东5165 小时前
智能社区管理系统的设计与实现ssm+vue
前端·javascript·vue.js·毕业设计·毕设
catino5 小时前
图片、文件的预览
前端·javascript
-嘟囔着拯救世界-6 小时前
【保姆级教程】Win11 下从零部署 Claude Code:本地环境配置 + VSCode 可视化界面全流程指南
人工智能·vscode·ai·编辑器·html5·ai编程·claude code
2501_920931707 小时前
React Native鸿蒙跨平台实现推箱子游戏,完成玩家移动与箱子推动,当所有箱子都被推到目标位置时,玩家获胜
javascript·react native·react.js·游戏·ecmascript·harmonyos
layman05287 小时前
webpack5 css-loader:从基础到原理
前端·css·webpack
半桔7 小时前
【前端小站】CSS 样式美学:从基础语法到界面精筑的实战宝典
前端·css·html
AI老李7 小时前
PostCSS完全指南:功能/配置/插件/SourceMap/AST/插件开发/自定义语法
前端·javascript·postcss
_OP_CHEN8 小时前
【前端开发之CSS】(一)初识 CSS:网页化妆术的终极指南,新手也能轻松拿捏页面美化!
前端·css·html·网页开发·样式表·界面美化