フロントエンドに強くなりたい(初歩)
前置き
この記事は異世界行ったら本気だすぴょこりんクラスタ Advent Calendar 2021 - Adventarのために書かれたものです。
前提
もうちょっとパパっとwebアプリケーションを作れるようになりたいので、こういう機会をチャンスとして仕込んでおく。なお私のこの辺の知識はほぼゼロであるので、多分読んでも学びはない気がします...。初歩的な目標として、データベースに入っているデータをバックエンド側で読み込んでフロントエンド側で可視化する、というところをめざす。
とりあえず、なんかそれっぽい感じで
- フロントエンド:vue.js(ただし今回ここまでたどりつかなかった・・・)
- バックエンド: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。