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件ずつ中身を取り出してページ内にリストを作成させることが出来る
こちらも自分が理解する為に図解してみた

前回の記事

長期休暇　～大人の自由研究～　【obniz】で【ドットアニメーション】に挑戦してみた結果 - Qiita