Javascript (カレンダー010_Node.js調べ2)
■もうすこしNodeについて調べる。
前回からカレンダーの修正を考えてみたけど、最終的にはクライアントからMysqlへの更新ができるようにはしたい。Nodeでデータベース更新をかけるのが、そのひとつの方法となりそうなので、やはりNodeについてもう少し調べてみる。
データベースの操作については、カレンダー008でデータ取得はできたので、データ更新も問題なくできると思う。あと確認したいのが、HTTP通信などによる入力したいデータの受け渡し。Nodeビギナーズブックというものの中で、POSTリクエストについて記載があったので、それについて調べてみる。
Nodeビギナーズブックのサンプルでは、以下の4つのファイルを使用している。
index.jsをnodeで実行すると、下のようにテキストエリアの入力待ち画面となり、テキストを入力しボタンを押すと、URLが変わり、入力したテキストが画面に表示される。
・index.js
・requestHandlers.js
・router.js
・server.js
Submit textボタンを押すと
ここで、入力した内容がプログラム内で受け渡しされているので、それをデータベースに入れるようコードを少し修正した。実行してみると、下のphpmyadminの画面のようにデータベースに登録されていた（どこかで”text=”が追加されてしまったが）。
これをうまく使えば、カレンダー上での入力内容をデータベースに登録できそう。requestHandlers.jsのコードを見て気づいたけど、<html>の記述を下のようにjavascript内に記載すれば、javascriptとnodeの組み合わせを実現できるのでは。ここで、”//================================================”で囲んだ部分がデータベースの登録のために追加した部分。他はサンプルをそのまま引っぱってきたもの。
var querystring = require("querystring");
function start(response, postData) {
console.log("Request handler 'start' was called.");
var body = '<html>'+
'<head>'+
'<meta http-equiv="Content-Type" content="text/html; '+
'charset=UTF-8" />'+
'</head>'+
'<body>'+
'<form action="/upload" method="post">'+
'<textarea name="text" rows="20" cols="60"></textarea>'+
'<input type="submit" value="Submit text" />'+
'</form>'+
'</body>'+
'</html>';
response.writeHead(200, {"Content-Type": "text/html"});
response.write(body);
response.end();
}
function upload(response, postData) {
console.log("Request handler 'upload' was called.");
response.writeHead(200, {"Content-Type": "text/plain"});
response.write("You've sent the text: "+
querystring.parse(postData).text);
//===================================================
const mysql = require('mysql');
var connection = mysql.createConnection({
host: 'localhost',
host: '127.0.0.1',
user: 'root',
password: '',
database: 'test'
});
connection.connect(function(err) {
if (err) {
console.error('error connecting: ' + err.stack);
return;
}
console.log('connected as id ' + connection.threadId);
});
let datevar = "2020-01-08"
let data = {date:datevar, title:'aaa7777', Note:postData, number:'157'};
connection.query('insert into diarydb set ?', data, (err, res) => {
if (err) throw err;
console.log(data.value);
});
connection.end();
//===================================================
response.end();
}
exports.start = start;
exports.upload = upload;
javascript内に<html>の記述を入れ込むのはごちゃごちゃしそうだけど一般的な方法なのかな。とりあえずカレンダーのhtmlを移せないか考えてみる。
