当前位置：首页 > 行业动态 > 正文

从自定义页面插入数据库

admin
行业动态
2025-04-08
1

从自定义页面插入数据库，需先在页面获取数据，再用编程语言连接数据库执行插入语句。

从自定义页面插入数据库

在现代Web开发中，将数据从自定义页面插入到数据库是一个常见且重要的任务，这个过程通常涉及前端的HTML表单、后端的服务器端脚本以及数据库管理系统，以下是一个详细的指南，介绍如何实现这一功能。

创建HTML表单

需要在自定义页面上创建一个HTML表单，用于收集用户输入的数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Insert Data</title>
</head>
<body>
    <h2>Insert Data into Database</h2>
    <form action="/submit" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required><br><br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required><br><br>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

设置服务器端脚本

需要编写一个服务器端脚本来处理表单提交的数据，并将其插入到数据库中，这里以Node.js和Express框架为例，使用MySQL数据库。

安装必要的包：

npm install express mysql body-parser

创建服务器端脚本（server.js）：

const express = require('express');
const mysql = require('mysql');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;
// Middleware
app.use(bodyParser.urlencoded({ extended: true }));
// Database connection
const db = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'testdb'
});
db.connect((err) => {
    if (err) throw err;
    console.log('Connected to the database.');
});
// Route to handle form submission
app.post('/submit', (req, res) => {
    const { name, email } = req.body;
    const sql = 'INSERT INTO users (name, email) VALUES (?, ?)';
    db.query(sql, [name, email], (err, result) => {
        if (err) throw err;
        res.send('Data inserted successfully!');
    });
});
app.listen(port, () => {
    console.log(Server running at http://localhost:${port}/);
});

创建数据库和表

确保你已经在MySQL中创建了相应的数据库和表。

CREATE DATABASE testdb;
USE testdb;
CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    email VARCHAR(255) NOT NULL
);