你正在正确的道路上。为了达到预期目标,请按照以下步骤操作。
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
console.log('Testing Add');
function submit()
{
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">
<link rel="stylesheet" href="/style.css">
<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
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.use(express.static('public'));
var fs = require('fs');
var dbFile = 'demo';
var exists = fs.existsSync(dbFile);
var sqlite3 = require('sqlite3').verbose();
var db = new sqlite3.Database(dbFile);
var jsonParser = bodyParser.json();
app.get('/', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
app.post('/addUser', jsonParser, function(request, response) {
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+'")');
}
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;
}
}