1. 编写 HTML 网页前端界面
编辑需要填写的字段,设置其格式。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>信息填报系统</title>
<style>
body{ text-align:center}
</style>
</head>
<p>Welcome!</p>
<hr />
<body>
<h1 style="text-align:center">信息填报系统</h1>
<div class="div">
<form id="form1"
accept-charset="UTF-8"
action = "http://ipaddress:8000/posttable/"
method="post"
target="myiframe"
onsubmit="return checkin()">
姓名:
<input type="text" name="name" id="in1" value="" required="required" style="width:260px; height:30px;">
<br><br>
学号:
<input type="text" name="id" value="" required="required" style="width:260px; height:30px;" />
<br><br>
班级:
<input type="text" name="class" value="" required="required" style="width:260px; height:30px;" />
<br><br>
性别:
<input type="text" name="wm" list="cars" required="required" style="width:260px; height:30px;" />
<datalist id="cars">
<option value="男">
<option value="女">
</datalist>
<br><br>
电话:
<input type="text" name="phone" value="" required="required" style="width:260px; height:30px;" />
<br><br>
备注:
<input type="text" name="note" value="" style="width:260px; height:30px;" />
<br><br>
<button type="reset" class="button">重置</button>
<input type="submit" name="btn1" value="提交" style="height:60px;width:180px;display:inline-block;background-color:blue" >
</form>
<iframe id="myiframe" name="myiframe"></iframe>
</div>
</body>
</html>
2. 后台处理代码
用nodejs 接收网页提交的POST请求,并将数据插入Mysql数据库
前提:配置好Mysql数据库
服务端:
若数据插入成功,则返回【插入时间+success】.;否则返回错误信息。
var mysql = require('mysql');
var bodyParser = require('body-parser');
// 创建 application/x-www-form-urlencoded 编码解析
var urlencodedParser = bodyParser.urlencoded({ extended: false })
const express = require('express');
const path = require('path');
const app = express();
var cnt = 0;
/*****数据库配置*****/
var connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : 'xxx',
port: '3306',
database: 'StudentInfo',
useConnectionPooling:true
});
var addSql = 'INSERT INTO table1(姓名,学号,班级,性别,电话) VALUES(?,?,?,?,?)';
var addSqlParams=new Array(5);
/****web页面显示*****/
app.use(express.static(path.join(__dirname, 'public')));
/****web提交数据处理****/
app.post('/posttable', urlencodedParser, function (req, res) {
addSqlParams[0] = req.body.name;
addSqlParams[1] = req.body.id;
addSqlParams[2] = req.body.class;
addSqlParams[3] = req.body.wm;
addSqlParams[4] = req.body.phonenumber;
/***数据库连接***/
// connection.connect();
/****插入数据*****/
connection.query(addSql,addSqlParams,function (err, result) {
if(err){
//插入失败,返回错误信息
console.log('[INSERT ERROR] - ',err.message);
res.end(err.message+" ");
}else{
//插入成功则返回时间+success
console.log('insert success!');
res.end(new Date().toLocaleString()+':success');
}
});
cnt = cnt + 1;
console.log('insert success!');
res.end('success');
});
app.listen(8000, () => {
console.log('server listening at port 8000')
});
3.备注
为了应对 学校收excel表格的烦恼,做了这个简单的系统。不足之处,后面会继续更正。