使用node.js和JavaScript从简单的HTML表单插入数据到MySQL表

3
好的,经过三天的努力,我卡在一个点上,感觉完全不知所措。我感觉自己像是一个迷失在广阔无垠的Web开发世界中的小孩(我是主机开发人员),并开始感到非常沮丧,因此我决定寻求真正的帮助。我不会发布任何代码,因为它对解决问题没有任何帮助。
我想要但仍然无法实现的是:
输入“localhost:8080/datos.html”,其中有两个文本框和一个按钮。按下按钮后,我希望使用Node.js将2个文本框(“名称”和“密码”)的数据存储在MySQL数据库中。
情况如下:
我使用Windows 7。
Node.js已安装在我的PC上,我可以在cmd终端中执行“node server.js”,一切都能正常工作。
我可以在'server.js'中连接到MySQL数据库并进行查询,结果很好,我也可以进行插入操作,一切都很好。
在与'example.js'文件相同的文件夹中,我有一个名为'datos.html'的文件。
使用“URL解析”,我设法在浏览器(Chrome)中编写“localhost:8080/datos.html”,以便在通过Node.js启动'server.js'后正确显示'datos.html'(2个文本框和按钮正确显示)。
现在问题开始了:我根本找不到办法将文本框的数据插入MySQL数据库...正如我所说,通过server.js插入数据不是问题,使用'document.getElementByI()'从server.js获取文本框值也不是问题。问题是,我无法找到方法来实现这一点。
我知道这可能是一个愚蠢的问题,并且考虑过不提出它,但是天哪,对于一个习惯于COBOL、JCL和CICS的人来说,Web开发就太痛苦了。
作为参考,我阅读了W3Schools关于HTML、Ajax、Node.js的“教程”和指南,可以做出其中展示的例子,但只是无法将所有内容链接起来,使其成为一个单一的功能性事物。
请注意,我的问题并不是“技术性”的,我知道如何查询SQL表格或“启动”节点(以基本方式),我知道如何制作(过于)简单的HTML并从node.js中显示它;但问题在于“如何做某事”,这很简单,但我仍然无法实现它。
任何视频、手册、教程、课程或您拥有的任何东西都将帮助我实现这个简单的事情,我将非常感激。

2个回答

1

你正在正确的道路上。为了达到预期目标,请按照以下步骤操作。

1) 你可以像Jason在之前的回答中提到的那样使用express,并处理一切,暂时将客户端和服务器放在同一台机器上进行测试,就像我在我的应用程序中所做的那样,直到你准备把客户端和服务器分开为止。

2) 为了使用MySQL作为存储引擎,而不是我使用的SqlLite,请使用https://www.w3schools.com/nodejs/nodejs_mysql_insert.asp中的示例。

var mysql = require('mysql');

var con = mysql.createConnection({
  host: "localhost",
  user: "yourusername",
  password: "yourpassword",
  database: "mydb"
});

con.connect(function(err) {
  if (err) throw err;
  console.log("Connected!");
  var sql = "INSERT INTO customers (name, address) VALUES ('Company Inc', 'Highway 37')";
  con.query(sql, function (err, result) {
    if (err) throw err;
    console.log("1 record inserted");
  });
});

3) 创建一个HTML文件来处理以下所示的输入

4) 创建一个client.js文件来向NodeJS服务器发送请求

5) 创建server.js文件来接收请求并使用SQLite来处理插入

6) 为了创建数据库,请在Glitch控制台中运行以下命令

~sqlite demo      <---demo is name of db in sqlite3
% create table userlist(user, password);
CTRL+D            <---exit

7) 找到一个合适的在线资源需要一些努力,但我找到了一个地方,在那里可以编辑nodejs项目以查看。

我发现了这个:https://flaviocopes.com/nodejs-hosting/,并找到了一个名为Glitch的在线环境工具。

请尝试在Glitch上构建的以下示例,一旦单击绿色的Show Live按钮,即可查看、编辑和运行。

https://glitch.com/edit/#!/node-js-demo-stack-overflow?path=public/client.js:1:0

client.js

// client-side js
// run by the browser each time your view template referencing it is loaded

console.log('Testing Add');

function submit()
{
  // request the user from our app's sqlite database
  const userRequest = new XMLHttpRequest();
  userRequest.open('post', '/addUser');
  userRequest.setRequestHeader("Content-Type", "application/json;charset=UTF-8")
  userRequest.send(JSON.stringify({'user':document.getElementById("user").value, 'password': document.getElementById("password").value}));
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Welcome to Glitch!</title>
    <meta name="description" content="A cool thing made with Glitch">
    <link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">
    
    <!-- import the webpage's client-side javascript file -->
    <script src="/client.js"></script>
  </head>
  <body>
    <input type="text" id="user"/>
    <input type="text" id="password"/> 
    <button onclick="submit()">Send</button>
  </body>
</html>

server.js

// server.js
// where your node app starts

// init project
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
//
// we've started you off with Express, 
// but feel free to use whatever libs or frameworks you'd like through `package.json`.

// http://expressjs.com/en/starter/static-files.html
app.use(express.static('public'));

// init sqlite db
var fs = require('fs');
var dbFile = 'demo';
var exists = fs.existsSync(dbFile);
var sqlite3 = require('sqlite3').verbose();
var db = new sqlite3.Database(dbFile);

// create application/json parser
var jsonParser = bodyParser.json();


// http://expressjs.com/en/starter/basic-routing.html
app.get('/', function(request, response) {
  response.sendFile(__dirname + '/views/index.html');
});

// endpoint to addUser in the database
// currently this is the only endpoint, ie. adding dreams won't update the database
// read the sqlite3 module docs and try to add your own! https://www.npmjs.com/package/sqlite3
app.post('/addUser', jsonParser, function(request, response) {
 
  
// if ./.data/sqlite.db does not exist, create it, otherwise print records to console
  if (!exists) {
    console.log("Table not found");
    db.run('CREATE TABLE userlist (user text, password text');
    console.log('New table User List Created!');
    insert(request);
  }
  else{
    insert(request);
  }
  db.each('SELECT * from userlist', function(err, row) {
      if ( row ) {
        console.log('record:', JSON.stringify(row));
      }
    });
});

var insert = function (req)
{
    db.run('INSERT INTO userlist (user, password) VALUES ("'+req.body.user+'","'+req.body.password+'")');
}
    
// listen for requests :)
var listener = app.listen(process.env.PORT, function() {
  console.log('Your app is listening on port ' + listener.address().port);
});

在server.js的post处理程序的else块中插入此内容,位于insert(request)下方,以便能够发送表格值并在客户端中查看。
db.all('SELECT * from userlist', function(err, rows) {
        response.send(rows);
    });

在client.js的提交函数中插入此代码以查看提交时的表格值。
userRequest.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var rows = JSON.parse(this.responseText);
    var tbl = "<table border=1>";
    tbl += "<thead><td>Name</td><td>Password</td></thead>";
    for (var i = 0; i < rows.length; i++)
    {
      tbl+="<tr><td>"+rows[i].user+"</td><td>"+rows[i].password+"</td></tr>";
      console.log('record:', JSON.stringify(rows[i]));
    }
    tbl += "</table>";
    document.getElementById("tbl").innerHTML = tbl;
  }
}

0

如果你还没有使用,那么你应该考虑使用一个Node框架来作为你的路由器来处理传入的请求。多年来最受欢迎的框架是Express。

https://expressjs.com/

一旦你这样做了,你就能够处理像这样的请求

app.get("/datos", (req, res) => {
        // Serve the form logic here
    });

app.post("/datos", (req, res) => {
        // Handle the form submission logic here
    });

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接