七転八転

よしなしごとを。

フロントエンドに強くなりたい(初歩)

前置き

この記事は異世界行ったら本気だすぴょこりんクラスタ Advent Calendar 2021 - Adventarのために書かれたものです。

前提

もうちょっとパパっとwebアプリケーションを作れるようになりたいので、こういう機会をチャンスとして仕込んでおく。なお私のこの辺の知識はほぼゼロであるので、多分読んでも学びはない気がします...。初歩的な目標として、データベースに入っているデータをバックエンド側で読み込んでフロントエンド側で可視化する、というところをめざす。

とりあえず、なんかそれっぽい感じで

  • フロントエンド:vue.js(ただし今回ここまでたどりつかなかった・・・)
  • バックエンド:node.js
  • データベース:MySQL

でやる。

やったこと

  • MySQLでデータベースを作る
  • node.jsからMySQLにつなぐ
  • データベースの中身をレスポンスとして返す

フロントエンド側でリクエスト飛ばしてレスポンスを表示するところが時間切れだった。。とりあえずWSLのubuntu18.04上で動かす。

MySQLでデータベースを作る

MySQLをインストールする。この辺の初期設定はあやしい・・・

sudo apt install mysql-server
sudo mysql_secure_installation
sudo mysql

ユーザを作り、テスト用のテーブルを作る。

CREATE USER 'hayap'@'localhost' IDENTIFIED BY '(PASSWORD)';
#パスワードポリシーがMID以上だと特殊文字を入れてないとはじかれる、厳しい

CREATE DATABASE FOOD;
CREATE TABLE foods (id INT AUTO_INCREMENT, name TEXT, num INT, PRIMARY KEY (id)) DEFAULT CHARSET=utf8;

(データ挿入は略)

mysql> SELECT * FROM foods;
+----+-------+------+
| id | name  | num  |
+----+-------+------+
|  1 | SUSHI |    2 |
|  2 | STEAK |    5 |
+----+-------+------+
2 rows in set (0.00 sec)
node.jsからMySQLにつなぐ

下記のmysqlモジュールをつっこめばつながりそう。
www.npmjs.com

npmでインストール

npm install mysql


test.jsとして作成

const mysql = require('mysql');
const connection = mysql.createConnection({
                                host: 'localhost',
                                user: 'hayap',
                                password: '(PASSWORD)',
                                database: 'FOOD'
                    });

connection.connect();
connection.query('SELECT * FROM foods', (error, results) => {
                console.log(results[0]);
        });
connection.end();              

実行

node test.js
RowDataPacket { id: 1, name: 'SUSHI', num: 2 }

でOK.

データベースの中身をレスポンスとして返す

バックエンド側でリクエストを受けて、データベースの中身を返すようにする。
expressモジュールでルーティング処理を書いてやる。server.jsとして作成。

const express = require('express');
const app = express();
const mysql = require('mysql');
const connection = mysql.createConnection({
                                host: 'localhost',
                                user: 'hayap',
                                password: '(PASSWORD)',
                                database: 'FOOD'
                    });

app.get('/test', (req,res) =>
        res.send({message: 'Hello World!'
        })
);

app.get('/api/foods', (req,res) => {
        connection.connect();
        connection.query('SELECT * FROM foods', (error, results) => {
                res.send(results);
        });
        connection.end();
});

app.listen(process.env.PORT || 3000);

これで、node server.jsして、http://localhost:3000/api/foodsにアクセスするとデータベースの中身がかえってくる。

最後に

引き続き頑張ってYATTEIKI。