HTML+Node.js提交表单至Mysql数据库

最新推荐文章于 2021-07-24 17:00:23 发布

我楚狂声

最新推荐文章于 2021-07-24 17:00:23 发布

阅读量4.5k

点赞数 8

分类专栏： Nodejs 文章标签： html mysql nodejs 表单 express

本文链接：https://blog.csdn.net/sinat_37853238/article/details/88288225

版权

Nodejs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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表格的烦恼，做了这个简单的系统。不足之处，后面会继续更正。

我楚狂声

关注

8
点赞
踩
50

收藏

觉得还不错? 一键收藏
打赏
5
评论
HTML+Node.js提交表单至Mysql数据库

1. 编写 HTML 网页前端界面编辑需要填写的字段，设置其格式。<!DOCTYPE html><html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>信息填报系统</title> <style> ...
复制链接

扫一扫