@所有人 作业3:一个简单完整的WEB系统 功能描述:用户通过表单提交数据,存入MySQL数据库,提交成功后显示数据库中所有数据的列表。 数据描述:姓名,Email。 参考Guides: Vali
时间: 2024-12-16 16:21:57 浏览: 3
Servlet上传页面图片 并存入Mysql数据库
@所有人,作业3:构建一个基本的Web系统涉及到前端界面交互、表单处理和后端数据库操作。以下是简要步骤:
**前端部分**:
1. 使用HTML和CSS创建一个简单的页面,包括一个表格用于输入姓名和电子邮件,以及一个提交按钮。
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<title>作业3</title>
</head>
<body>
<form id="dataForm">
<label for="name">姓名:</label><input type="text" id="name" name="name" required><br>
<label for="email">Email:</label><input type="email" id="email" name="email" required><br>
<button type="submit">提交</button>
</form>
<div id="result"></div>
</body>
</html>
```
2. JavaScript负责验证输入并发送Ajax请求到后端服务器。
**后端部分(Node.js + Express + MySQL示例)**:
1. 安装必要的库:`express`, `mysql`, `body-parser` 等。
```bash
npm install express mysql body-parser
```
2. 创建Express应用,并设置路由处理表单提交。
```javascript
const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const app = express();
app.use(bodyParser.urlencoded({ extended: true }));
const connection = mysql.createConnection({
host: 'localhost',
user: 'your_username',
password: 'your_password',
database: 'your_database'
});
app.post('/submit', (req, res) => {
const { name, email } = req.body;
const query = `INSERT INTO users (name, email) VALUES (?, ?)`;
connection.query(query, [name, email], (error, results, fields) => {
if (error) throw error;
if (results.affectedRows > 0) {
// 数据插入成功,获取所有数据并返回给前端
getEntries(res);
} else {
res.status(400).send("提交失败");
}
});
});
// 获取所有数据的函数
function getEntries(res) {
connection.query('SELECT * FROM users', (error, data) => {
if (error) throw error;
res.send(data);
});
}
// 启动服务器
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
```
**运行说明**:
1. 配置MySQL连接信息。
2. 运行node server.js启动应用程序。
3. 在浏览器中访问`http://localhost:3000/submit`提交表单。
阅读全文