在Web开发中，前端技术（如HTML和JavaScript）通常用于与用户交互，而后端技术则用于处理数据库的连接和数据操作。要实现前端与MySQL数据库的连接，通常需要一个后端语言（如Node.js、PHP、Python等）作为中介。本文将展示如何使用Node.js和MySQL进行数据的增删改查（CRUD）操作，同时使用HTML和JavaScript作为前端展示。
1. 环境准备
在开始之前，确保你已经安装了以下软件：
- Node.js
- MySQL
- npm（Node.js包管理器）
2. 数据库设置
首先，需要在MySQL中创建一个数据库和数据表。假设我们创建一个名为sample_db的数据库，并在其中创建一个users表。
CREATE DATABASE sample_db;
USE sample_db;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
age INT NOT NULL
);
3. 后端代码
接下来我们使用Node.js搭建一个简单的后端，并连接到MySQL数据库。
首先，创建一个新的Node.js项目，并安装所需的包：
mkdir myapp
cd myapp
npm init -y
npm install express mysql body-parser
然后，创建一个名为app.js的文件，编写如下代码：
const express = require('express');
const mysql = require('mysql');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
// 创建数据库连接
const db = mysql.createConnection({
host: 'localhost',
user: 'your_username',
password: 'your_password',
database: 'sample_db'
});
// 连接数据库
db.connect(err => {
if (err) throw err;
console.log('数据库连接成功!');
});
// 获取用户
app.get('/users', (req, res) => {
db.query('SELECT * FROM users', (err, results) => {
if (err) throw err;
res.json(results);
});
});
// 添加用户
app.post('/users', (req, res) => {
const { name, age } = req.body;
db.query('INSERT INTO users (name, age) VALUES (?, ?)', [name, age], (err, result) => {
if (err) throw err;
res.json({ id: result.insertId, name, age });
});
});
// 修改用户
app.put('/users/:id', (req, res) => {
const { id } = req.params;
const { name, age } = req.body;
db.query('UPDATE users SET name = ?, age = ? WHERE id = ?', [name, age, id], (err) => {
if (err) throw err;
res.json({ id, name, age });
});
});
// 删除用户
app.delete('/users/:id', (req, res) => {
const { id } = req.params;
db.query('DELETE FROM users WHERE id = ?', [id], (err) => {
if (err) throw err;
res.json({ message: '用户已删除' });
});
});
// 启动服务器
app.listen(port, () => {
console.log(`服务器已启动，地址：http://localhost:${port}`);
});
4. 前端代码
接下来，我们创建一个简单的HTML页面，用于与后端进行交互。创建一个index.html文件，代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户管理</title>
</head>
<body>
<h1>用户管理</h1>
<form id="userForm">
<input type="text" id="name" placeholder="姓名" required>
<input type="number" id="age" placeholder="年龄" required>
<button type="submit">添加用户</button>
</form>
<ul id="userList"></ul>
<script>
const userForm = document.getElementById('userForm');
const userList = document.getElementById('userList');
// 获取用户列表
function fetchUsers() {
fetch('/users')
.then(response => response.json())
.then(data => {
userList.innerHTML = '';
data.forEach(user => {
const li = document.createElement('li');
li.textContent = `${user.name} (${user.age}岁)`;
userList.appendChild(li);
});
});
}
// 添加用户
userForm.addEventListener('submit', (e) => {
e.preventDefault();
const name = document.getElementById('name').value;
const age = document.getElementById('age').value;
fetch('/users', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name, age })
})
.then(response => response.json())
.then(() => {
fetchUsers();
userForm.reset();
});
});
// 初始化用户列表
fetchUsers();
</script>
</body>
</html>
5. 启动应用
运行Node.js应用：
node app.js
然后在浏览器中打开index.html文件，你可以通过表单添加用户、查看用户列表，并进一步扩展功能（如删除和修改用户）。
总结
本文提供了一个简单的示例，演示了如何使用HTML和JavaScript进行前端操作，以及如何通过Node.js连接MySQL数据库进行CRUD操作。通过本示例，您可以了解到前后端交互的基本流程，后续可以根据实际需求不断扩展和完善该程序。
