使用Node.js和HTML实现MySQL的增删改查 |21xrx.com

使用Node.js和HTML实现MySQL的增删改查

2023-06-23 18:21:00 深夜i -- --

Node js HTML MySQL 增删改查实现

随着网络技术的发展，“前端+后端”的开发模式越来越流行，尤其是在Web应用程序的开发中更是如此。而Node.js作为JavaScript解释器，可以方便地实现后端的开发，而HTML作为前端开发的基础，则充分展现了Web开发的优势。本文将介绍如何使用Node.js和HTML实现MySQL的增删改查操作。

**1. 创建MySQL数据库**

首先需要创建一个MySQL数据库，包含姓名、年龄、性别三个字段的表格，表格名称为“person”。运行以下命令，在MySQL数据库中创建一个表：


CREATE TABLE `person` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(255) NOT NULL,
 `age` int(11) NOT NULL,
 `sex` varchar(10) NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

**2. 创建Node.js项目**

在本地创建一个名为“mysql-test”的文件夹，并使用命令行进入该文件夹。接着运行以下命令，初始化项目：

npm init

然后安装express和mysql两个依赖库：

npm install express mysql --save

**3. 创建服务器**

在mysql-test项目的根文件夹下创建一个名为“index.js”的文件，并将以下代码复制进去：


const express = require('express');
const mysql = require('mysql');
const app = express();
const conn = mysql.createConnection(
  password: '123456');
conn.connect((err) => {
  if (err) {
    console.log('数据库连接失败：' + err.message);
  } else {
    console.log('数据库连接成功！');
  }
});
app.get('/', (req, res) => {
  res.send('Hello World!');
});
const server = app.listen(8080, () => {
  console.log(`服务器已开启，地址为 http://localhost:${server.address().port}`);
});

该代码的意义是创建一个Node.js服务器，并连接上MySQL数据库。其中，host、user、password、database分别是MySQL数据库的主机名、用户名、密码、数据库名。conn.connect()方法用于连接数据库，而app.get()则是处理用户请求的方法，这里简单地返回了“Hello World!”。server为创建的服务器对象。

可以使用以下命令运行刚才的代码：

node index.js

然后在浏览器中输入“http://localhost:8080”，应该能看到网页上显示的文字为“Hello World!”。

**4. 编写HTML页面**

在mysql-test项目的根文件夹下创建一个名为“index.html”的文件，并将以下代码复制进去：


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Node.js + MySQL示例</title>
</head>
<body>
  <h1>Node.js + MySQL示例</h1>
  <form id="form">
    <input type="text" name="name" placeholder="姓名">
    <input type="number" name="age" placeholder="年龄">
    <select name="sex">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    <input type="button" value="添加" onclick="add()">
    <input type="button" value="查询" onclick="query()">
    <input type="button" value="修改" onclick="update()">
    <input type="button" value="删除" onclick="del()">
  </form>
  <br>
  <table id="table">
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>操作</th>
    </tr>
  </table>
  <script>
    function add()
      //TODO
    
    function query()
      //TODO
    
    function update()
      //TODO
    
    function del()
      //TODO
    
  </script>
</body>
</html>

该页面包括一个表单，可以输入姓名、年龄、性别，并有添加、查询、修改、删除四个按钮。另外还有一个用于显示结果的表格，近期白，没有数据。

**5. 实现MySQL的增删改查**

在最初编写的index.js文件中，添加以下几个方法，分别对应增加、删除、修改、查询操作：


app.get('/add', (req, res) => {
  const sql = `insert into person (name, age, sex) values ('${req.query.name}', '${req.query.age}', '${req.query.sex}')`;
  conn.query(sql, (err, result) => {
    if (err) {
      console.log('添加失败：' + err.message);
      res.send('添加失败：' + err.message);
    } else {
      console.log('添加成功！');
      res.send('添加成功！');
    }
  });
});
app.get('/del', (req, res) => {
  const sql = `delete from person where id=${req.query.id}`;
  conn.query(sql, (err, result) => {
    if (err) {
      console.log('删除失败：' + err.message);
      res.send('删除失败：' + err.message);
    } else {
      console.log('删除成功！');
      res.send('删除成功！');
    }
  });
});
app.get('/update', (req, res) => {
  const sql = `update person set name='${req.query.name}', age='${req.query.age}', sex='${req.query.sex}' where id='${req.query.id}'`;
  conn.query(sql, (err, result) => {
    if (err) {
      console.log('修改失败：' + err.message);
      res.send('修改失败：' + err.message);
    } else {
      console.log('修改成功！');
      res.send('修改成功！');
    }
  });
});
app.get('/query', (req, res) => {
  const sql = `select * from person`;
  conn.query(sql, (err, result) => {
    if (err) {
      console.log('查询失败：' + err.message);
      res.send('查询失败：' + err.message);
    } else {
      console.log('查询成功！');
      let html = '<tr><th>ID</th><th>姓名</th><th>年龄</th><th>性别</th><th>操作</th></tr>';
      for (let i = 0; i < result.length; i++) {
        html += `<tr><td>${result[i].id}</td><td>${result[i].name}</td><td>${result[i].age}</td><td>${result[i].sex}</td><td><a href="#" onclick="update(${result[i].id}, '${result[i].name}', '${result[i].age}', '${result[i].sex}')">修改</a> | <a href="#" onclick="del(${result[i].id})">删除</a></td></tr>`;
      }
      res.send(html);
    }
  });
});

其中，app.get()方法与之前的app.get('/',...)类似，可以处理客户端发送的GET请求。req是客户端请求对象，res是发送回客户端的响应对象。以上代码中使用了conn.query()方法执行MySQL查询语句，操作数据库。

该代码中暴露了四个URL，分别是添加、删除、修改、查询的函数。可以在index.html中，调用以上四个方法，通过JavaScript来实现对MySQL的增删改查操作。在index.html文件底部的JavaScript中，添加以下代码：


function add() {
  const form = document.getElementById('form');
  const xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        alert(xhr.responseText);
      } else {
        console.log('添加失败：' + xhr.status);
      }
    }
  }
  const url = `/add?name=${form.name.value}&age=${form.age.value}&sex=${form.sex.options[form.sex.selectedIndex].value}`;
  xhr.open('GET', url);
  xhr.send();
}
function query() {
  const table = document.getElementById('table');
  const xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200)
        table.innerHTML = xhr.responseText;
       else {
        console.log('查询失败：' + xhr.status);
      }
    }
  }
  xhr.open('GET', '/query');
  xhr.send();
}
function update(id, name, age, sex) {
  const xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        alert(xhr.responseText);
      } else {
        console.log('修改失败：' + xhr.status);
      }
    }
  }
  const url = `/update?id=${id}&name=${name}&age=${age}&sex=${sex}`;
  xhr.open('GET', url);
  xhr.send();
}
function del(id) {
  const xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        alert(xhr.responseText);
      } else {
        console.log('删除失败：' + xhr.status);
      }
    }
  }
  const url = `/del?id=${id}`;
  xhr.open('GET', url);
  xhr.send();
}

以上代码实现了通过JavaScript调用Node.js服务器的URL来实现添加、删除、修改、查询操作。在点击按钮时，会调用对应的函数，再通过XMLHttpRequest对象发送请求。其中，url和请求数据在GET方式下直接放在URL中。在服务器端处理完后，将结果返回给客户端。

最后，运行以下命令启动服务器：

node index.js

然后在浏览器中输入“http://localhost:8080/index.html”，即可测试增删改查操作了。

总之，Node.js和HTML的出现使得Web开发更加方便，也更接近于现代的开发思路。MySQL作为一种流行的开源数据库，同样也成为Node.js开发中最常用的数据管理工具。对于刚接触Web开发的开发者，这种技术栈非常适合提高其开发水平。

上一篇: idea打包java可执行jar包

下一篇: C++中的计数器和累加器

评论区

()

相似文章