Photo by
mojamojataron
Node.js ルーティング 覚え書き
ウェブページを作るにあたってサーバー側の処理が出来る
Node.jsについて学んでみた
復習も兼ねて覚え書きを作成してみた
（注意：個人の解釈ですので間違っている場合があります）
語句についての認識
Node.js サーバー側で動かせる JavaScript ルーティングが出来る
express Node.js のフレームワーク 開発し易くなるもの
npm パッケージ共有・取得の為のシステム
ejs Node.js のパッケージ HTML に JavaScript を埋め込んで使える
MySQL データベースの１つ データ等を保持しておける
パッケージ等のインストールをする際の構文
ターミナル
//expressのインストール
npm install express
//ejsのインストール
npm install ejs
//MySQLのインストール
npm install mysql必須の構文だと思っているもの
app.js
//パッケージを読み込んで使用可能な状態にする
const express = require('express');
const mysql = require('mysql');
const app = express();
//publicフォルダ内を読み込めるようにする
app.use(express.static('public'));
//ejsのフォームから送信された値を受け取れるようにする
app.use(express.urlencoded({extended: false}));
//データベースへの接続情報を定数化しておく
const connection = mysql.createConnection({
host: 'ホスト名',
user: 'ユーザー名',
password: 'パスワード',
database: 'テーブル名'
});
//サーバーを起動させる(3000はローカルホストのポート番号）
app.listen(3000);ルーティングについての認識
app.js
//トップページにアクセスする際のルーティング
app.get('/', (req, res) => {
res.render('top.ejs');
});URL '/' にアクセスされた際には 'top.ejs' という html ファイルをユーザー側に res.render で表示する
自分が理解する為に図解してみた
DBに干渉する際のルーティングについての認識
app.js
//一覧のページにアクセスしてデータベースに存在するアイテムを表示させる
app.get('/index', (req, res) => {
connection.query(
'SELECT * FROM items',
(error, results) => {
res.render('index.ejs', {items: results});
}
);
});URL '/index' にアクセスされた際には connection.query で 'SELECT * FROM items ' というクエリを実行する
※クエリの内容 items というテーブルから全ての列の中身を抽出する
クエリの実行が正常に行われた場合には results にオブジェクトの形式でデータが格納される
また、'index.ejs' という html ファイルにオブジェクトとして引き渡すことが出来る
index.ejs
//app.jsから引き渡される場所のみを抜粋
<% items.forEach((item) => { %>
<li>
<div class="item-data">
<span class="id-column"><%= item.id %></span>
<span class="name-column"><%= item.name %></span>
</div>
</li>
<% }) %>html ファイル内に <% %> または <%= %> といった書き方で JavaScript を埋め込むことが出来る
今回の場合であれば items というオブジェクトから item という形で1件ずつ中身を取り出してページ内にリストを作成させることが出来る
こちらも自分が理解する為に図解してみた
