如何获取用户提交到数据库的表单 (获取提交到数据库的表单)
随着互联网的发展和普及，越来越多的网站和应用程序需要获取用户提交的表单数据，以便进行后续的处理和分析。这些表单数据可能包括用户的个人信息、反馈意见、订单信息等等。而最常用的方式，是将这些表单数据存储到数据库中。那么呢？本文将从概念、技术和实例三个方面为您详细解答。
一、概念
在正式介绍之前，先简要介绍一下几个相关概念。
1.表单
表单是指网页上用于提交数据的一种HTML元素。它通常包括输入框、下拉菜单、单选框、复选框等等组件，用户可以通过填写这些组件来提交数据，以便后续处理和展示。
2.后端
后端指的是应用程序的服务器端。它通常负责处理和存储用户提交的表单数据，并提供API接口供前端调用。
3.数据库
数据库是指用于存储和管理数据的一种系统。它可以提供数据的持久化存储和高效查询，通常被应用在各种网站和应用程序中。
二、技术
了解了相关概念之后，我们来介绍一些实现获取用户提交到数据库的表单的技术。
1. PHP
PHP是一种流行的服务器端编程语言，它可以方便地将用户提交的表单数据存储到数据库中。下面是一个简单的PHP代码示例：
“`php
// 连接数据库
$conn = mysqli_connect(‘localhost’, ‘username’, ‘password’, ‘dbname’);
// 获取表单数据
$name = $_POST[‘name’];
$eml = $_POST[’eml’];
$message = $_POST[‘message’];
// 将数据插入到数据库
$sql = “INSERT INTO messages (name, eml, message)
VALUES (‘$name’, ‘$eml’, ‘$message’)”;
if (mysqli_query($conn, $sql)) {
echo “留言成功！”;
} else {
echo “留言失败：” . mysqli_error($conn);
}
// 关闭数据库连接
mysqli_close($conn);
?>
“`
这段代码中，首先通过mysqli_connect函数连接数据库。然后使用$_POST数组获取用户提交的表单数据。接着，使用INSERT语句将数据插入到名为messages的数据库表中。如果插入成功，则提示“留言成功”；否则输出错误信息。使用mysqli_close函数关闭数据库连接。
2. Node.js
Node.js是一种基于JavaScript的服务器端编程框架，它可以使用各种数据库插件方便地将用户提交的表单数据存储到数据库中。下面是一个简单的Node.js代码示例：
“`javascript
const express = require(‘express’);
const bodyParser = require(‘body-parser’);
const mysql = require(‘mysql’);
const app = express();
// 连接数据库
const conn = mysql.createConnection({
host: ‘localhost’,
user: ‘username’,
password: ‘password’,
database: ‘dbname’
});
conn.connect();
// 解析表单数据
app.use(bodyParser.urlencoded({ extended: false }));
// 处理表单提交
app.post(‘/submit’, (req, res) => {
const { name, eml, message } = req.body;
// 将数据插入到数据库
const sql = `INSERT INTO messages (name, eml, message)
VALUES (‘${name}’, ‘${eml}’, ‘${message}’)`;
conn.query(sql, (err, result) => {
if (err) {
res.send(‘留言失败’);
console.log(err);
} else {
res.send(‘留言成功’);
}
});
});
app.listen(3000, () => {
console.log(‘App is listening on port 3000’);
});
“`
这段代码中，首先使用require函数引入所需的模块。然后，创建一个express实例，并连接到名为dbname的MySQL数据库。接着，使用body-parser中间件解析表单数据。在处理表单提交的路由中，使用conn.query方法将数据插入到名为messages的数据库表中。如果插入成功，则返回“留言成功”；否则输出错误信息到控制台。
三、实例
我们来看一个实例，详细介绍。
假设有一个留言板应用程序，用户可以在这个应用程序中留言。每次用户提交留言后，应用程序将这条留言存储到MySQL数据库中。以下是具体实现步骤：
1. 创建MySQL数据库
在本地或远程MySQL服务器上创建一个名为mydb的数据库，并创建一个名为messages的数据表。messages数据表包括三个字段：id、name、eml、message。其中，id字段是自增主键。
2. 创建基于Node.js的服务器端应用程序
然后，我们使用Node.js创建一个服务器端应用程序，以便处理用户提交的表单数据，并将其存储到MySQL数据库中。以下是具体步骤：
– 在应用程序根目录下，使用npm init命令初始化应用程序，生成package.json文件。
– 安装必要的模块和插件。
“`
npm install express mysql body-parser –save
“`
– 创建app.js文件，并编写以下代码：
“`javascript
const express = require(‘express’);
const bodyParser = require(‘body-parser’);
const mysql = require(‘mysql’);
const app = express();
// 连接数据库
const conn = mysql.createConnection({
host: ‘localhost’,
user: ‘root’,
password: ‘password’,
database: ‘mydb’
});
conn.connect();
// 模板引擎
app.set(‘view engine’, ‘ejs’);
app.set(‘views’, __dirname + ‘/views’);
app.use(express.static(__dirname + ‘/public’));
// 解析表单数据
app.use(bodyParser.urlencoded({ extended: false }));
// 创建留言板主页
app.get(‘/’, (req, res) => {
const sql = ‘SELECT * FROM messages ORDER BY id DESC’;
conn.query(sql, (err, messages) => {
if (err) {
console.log(err);
res.render(‘index’, { messages: [] });
} else {
res.render(‘index’, { messages: messages });
}
});
});
// 处理留言提交
app.post(‘/submit’, (req, res) => {
const { name, eml, message } = req.body;
// 将数据插入到数据库
const sql = `INSERT INTO messages (name, eml, message)
VALUES (‘${name}’, ‘${eml}’, ‘${message}’)`;
conn.query(sql, (err, result) => {
if (err) {
res.send(‘留言失败’);
console.log(err);
} else {
res.redirect(‘/’);
}
});
});
app.listen(3000, () => {
console.log(‘App is listening on port 3000’);
});
“`
这段代码中，首先使用require函数引入所需的模块。然后，创建一个express实例，并连接到名为mydb的MySQL数据库。接着，使用body-parser中间件解析表单数据，使用ejs模板引擎渲染留言板主页。在处理留言提交的路由中，使用conn.query方法将数据插入到名为messages的数据库表中。如果插入成功，则重定向到留言板主页。
3. 创建留言板前端界面
我们使用HTML和CSS创建留言板的前端界面，并使用form元素创建一个供用户提交留言的表单。以下是具体步骤：
– 在应用程序根目录下创建public目录，并创建index.html文件。将以下HTML代码复制到index.html文件中：
“`html
留言板
<% for (var i = 0; i
“`
这段HTML代码中，创建一个表单，包括三个文本框和一个提交按钮。其中，文本框的name属性与Node.js代码中的req.body相对应，用于获取用户输入的数据。另外，使用ejs模板引擎渲染留言板主页时，使用标记嵌入JavaScript代码，用于显示最新的留言。
– 在public目录下创建css目录，并创建style.css文件。将以下CSS代码复制到style.css文件中：
“`css
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
.contner {
width: 80%;
max-width: 800px;
margin: 0 auto;
}
form label {
display: block;
margin-top: 20px;
}
form input[type=”text”],
form input[type=”eml”],
form textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
form button[type=”submit”] {
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
ul {
list-style: none;
padding: 0;
}
li {
background-color: #f8f8f8;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
}
.name {
font-weight: bold;
margin-right: 20px;
}
.eml {
color: #999;
margin-right: 20px;
}
.message {
white-space: pre-wrap;
}
“`
这段CSS代码中，设置了留言板的样式，包括背景、颜色、字体等等。其中，使用了CSS选择器使留言板呈现列表形式，并使用伪类选定元素的不同状态，如hover状态。
至此，我们完成了的全部内容。如果您想要使用表单数据，可能还需要进一步学习相关的数据库查询和操作技术。同时，我们也需要注意安全性，确保表单数据不被非法获取或篡改。本文所介绍的技术只是一种可以实现这一目标的方法，希望对您有所帮助。
