Angular + ExpressでイベントドリブンでMySQLと通信方法

Question

前提・実現したいこと

Angularの練習として、フォームにあるボタンを押すと打刻できるアプリを作成しております。
もともと、JS + ExpressでMySQLのテーブルから情報を取得するものを作成していたので、通信部分はそれを流用しようと考えております。

MySQLのユーザー情報がいれてあるテーブルから名前を取得しフォームのセレクトボックスに反映。名前を選択しボタンを押すと、MySQL側の別テーブルに選択した名前とボタン押下時の時刻をインサートしたいと思っております。

発生している問題・エラーメッセージ

色々と調べてはいるのですがHTTPClientModuleを用いてどのようにMySQL側から取得した情報をもとに、クリックイベントを動かせばよいのか分からず詰まっております。
どのように記述したらよいのか分からず教えて頂けたら幸いです。

該当のソースコード

######フォーム

<form class="form">
    <div>
       <label class="form-name">名前</label>
       <select id="select_name" name="input_name" class="form-selectbox">
          <option value="test">TEST</option>
       </select>
       <label><span class="form-id">ID</span><input id="select_id" name="input_id" class="form-label"></label>
       <label><span class="form-mail">メールアドレス</span><input id="select_mail" name="input_mail" class="form-label"></label>
    </div>
    <div class="form-button">
       <button class="btn" id="begin" name="begin_button" type="submit" value="current_time" (click)="begin_click()">打刻</button>
    </div>
</form>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {

  begin_click() :void {
    console.log('test');
  }

  constructor() { }

  ngOnInit(): void {
  }

}

######Express

const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const dateutils = require("date-utils");
const util = require("util");

app.use(express.static("css"));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

/*
 * usersは、ユーザー情報テーブル
 * dakokuは、打刻情報テーブル
 */
app.get("/", async (req, res) => {
  let users_sql = "select * from users";
  let dakoku_sql = "select * from dakoku";
  let data_users = await queryAsync(users_sql);
  let data_dakoku = await queryAsync(dakoku_sql);
  res.json(data_dakoku, data_users);
});

app.post("/", async (req, res) => {
  var dt = new Date;
  var now = dt.toFormat("HH24:MI:SS");
  var today = dt.toFormat("YYYY年MM月DD日");

  console.log("request", req.body.input_name);

  const resid = await queryAsync("select max(id) from dakoku");
  const preid = resid[0]["max(id)"];
  const id = preid + 1;


  /*打刻日を取得*/
  let sql_lastdate = "select max(date) from attendance where name = ? ";
  var lastdate = await queryAsync(sql_lastdate, req.body.input_name);
  lastdate = lastdate[0]["max(date)"];


  /*ボタンクリック*/
  if(req.body.begin_button){
    let sql = "INSERT INTO attendance SET ?";
    
    var results = await queryAsync(sql, { id: id, name: req.body.input_name, mail: req.body.input_mail, date: today, pushtime: now});
    console.log("打刻");

    res.json("/");
  };
  

/*MySQL*/
app.listen(3000);

const mysql = require("mysql");

const con = mysql.createConnection({
  host: "localhost",
  user: 'root',
  password: "pass",
  database: "test_db",
});
const queryAsync = util.promisify(con.query).bind(con);

con.connect(function (err) {
  if (err) throw err;
  console.log("Connected");
});

テーブル名：dakoku
+----+-----------+--------------------+----------+----------+
| id | name      | email              | date     | pushtime |
+----+-----------+--------------------+----------+----------+

テーブル名：users
+----+-----------+--------------------+
| id | name      | email              |
+----+-----------+--------------------+
|  1 | user1     | [e-mail]     |
+----+-----------+--------------------+
|  2 | user2     | [e-mail]     |
+----+-----------+--------------------+
|  3 | user3     | [e-mail]     |
+----+-----------+--------------------+

補足情報（FW/ツールのバージョンなど）

angular cli v9.1.8
rxjs 6.5.5
typescript 3.8.3
webpack 4.42.0
MySQL v5.7.30
Node v12.16.3

Answer 1

JS + ExpressでMySQLのテーブルから情報を取得するものを作成していた

ここをもう少し掘り下げましょうか。
私が「実際にはこんな風にやってたんじゃないか？」と考えている内容です。

Node.jsのExpress.jsを使って
アクセスが来たらMySQLから値を取り出して、
そのMySQLから取り出した値を使って動的なHTMLを生成して返していた。

もしそうなら、次に必要になるのはAjaxです。

---

Angularはあまり詳しくありませんが、
Reactのライバルとも言えるJSフレームワークの一つで、思想は大体同じです。

1. HTMLのテンプレートをJSフレームワークに読ませる
2. JSフレームワークはテンプレートに従ってDOMを吐く
3. JSフレームワーク推奨の手順に従って変数を書き換える
4. 変数を書き換えた事を検知して、JSフレームワークが最新のDOMを出し直す

質問文のコードが動作するのであれば、
既に2までは完成しているはずです。

次は3ですが、下記の2つをクリアする必要があります。

• どうやってJavaScriptでExpressにアクセスしてDB値を取り出すのか
• どうやって3の手順で変数を書き換えるのか

Angular 2とちょっと古いですが、こんな感じでやるんだよと書かれている記事を見つけました。
参考記事: Angular2でAjaxを使ってデータを取得する（Httpクライアント）

これをとっかかりに「Angular Ajax」等で検索しながら頑張ってみてください。

Comments

[t_tak]

ご回答ありがとうございます。
教わった通り通信するためにHTTPClientModuleを用いることで、なんとかDBから情報を取得することができました。
色々試していたので遅くなってしまいましたが、助かりました。ありがとうございます！

[miyabi-sun]

お見事！
DBのテーブルなんかもきっちり出していたので
方向性に関しての抽象的なアドバイスを出すだけで行けるだろうと思いましたが流石ですね。

もし余力があるなら下記にも挑戦してみてください。
- MySQLのidは基本的にオートインクリメントがおすすめ
　https://www.dbonline.jp/mysql/table/index7.html
- RESTfulなURIに関しての知識
　→パスが`/`のURLがユーザ情報と打刻時刻を大量に返すのはいかがなもんか、RESTfulとしては微妙
　→RESTfulで調べて学習してみてください、格段に他人に説明しやすい水準で品質が安定します
- バリデートはミドルウェアでやっても良いかもね
　→Express.jsのミドルウェアは`app.use(fn)`です。
　→POSTのパスXに限ってこのミドルウェアを実行するみたいな事ができ、インターセプトして400番エラーを返すなんて事も可能。
　→じゃあミドルウェアってなんだ？Express.jsに於けるミドルウェアの作り方とは？
　→プログラマとしてのレベルが格段に上がる