WebDevCurriculum]ORMによるDATA CRUDの実現

1.テンプレートに従ってミドルウェアを設定する

htmlを使用する場合はendcodeとエンジン設定が必要です.
他のエンジンを設定しない場合、expressで使用するビューエンジンはejsです.
ejsファイルをビューテンプレートとして使用しない場合は、endcodeまたはview engineに関連する設定を個別に設定する必要があります.

const app = require('express');
const bodyParser = require('body-parse');

app.use(bodyParser.urlencoded({extended: false}));

app.set('view engine', 'html');

app.use(express.static(path.join(__dirname, 'public')));

フレームワークは、テンプレートをロードする絶対パスを決定するため、テンプレートを整理するためにビューディレクトリを個別に作成する必要があります.

2.(HTML)POSTリクエスト設定

htmlをテンプレートとして使用する場合は、DATA U(更新)に個別のpost requestを設定する必要があります.
親フォームtagのメソッドをPOSTとして指定します.
また、actionプロパティにurlを入力し、button typeにsubmitプロパティを入れることもできます.
Inputに入力した値を使用するには、nameプロパティを定義する必要があります.後でinput値を使用するとname変数でインポートされます.

<form action="/tables/add" method="POST">
        <!--POST DATA BY HTML-->
        <input id="loginID" name="ID" type="text" placeholder="ID"/>
        <input id="loginPW" name="PW" type="password" placeholder="PW"/>
        <button id="loginBTN" type="submit">사용자 정보 저장하기</button>
        </form>

その後、ID、PW変数に入力値を格納して利用することができる.

これは画面上で上記のコードを実現するときです.

3. express.ルータによるデフォルトパスの設定

http://localhost:3300 → http://localhost:3300/tables
パスが多く複雑になった場合、デフォルトurlはlocalhost:3300/tablesではなくlocalhost:3300/tablesと同じフォーマットに変更できます.
express.router設定でデフォルトのパスを変更し、対応する論理(app.use)を構成するためにミドルウェアを構成します.

//express middleware
app.use('/tables', require('./routes/tables.js'));

/tables/... urlリクエストの場合、ルータ/テーブル.jsロジックで実現します.

const express = require('express');
const router = express.Router();

router.get('/', (req, res) => {..});
router.post('/add', (req, res) => {value1, value2} = req.body));

4.データベース接続とモデリング

database.jsでデータベースに接続する
postgresqlを使用する場合は、Sequeizeを使用して実際のデータベースに接続できます.
もちろん、sequelize自体はRDBMS用の機能なので、MySQLなど他のデータベースで利用できます.

const {Sequelize} = require('sequelize');

module.exports = new Sequelize(
    'DBname', 'username', 'password', {
        host: 'localhost',
        dialect: 'postgres'
});

モデリング
データベースは属性をモデリングします.
モデリングのプロパティは、後でDATA CRUDを行うオブジェクトです.

const Sequelize = require('sequelize');
const db = require('../config/database.js');

const tables = db.define('testDB2', {
    userID: {
        type: Sequelize.STRING
    },
    userPW: {
        type: Sequelize.STRING
    }
});

module.exports = tables;

4-1. (注意)id autoIncrement

通常、PostgresqlのRDBMSは、プライマリ・キー(または識別子)を自動的に設定し、後でDATA UPDATEが発生した場合に反映します.
簡単に言えば上のdbです.これはdefineによって属性をモデリングする過程でid値を別途定義する必要がないことを意味する.
ただし、実際のpostgresqldbでは、id、updateAt、createdAtなどの必須定義のプロパティを直接作成する必要があります.

※idの場合はdatatypeを連続して指定すればauto Incrementが行えます.クエリー文やモデリングを別途設定する必要がなく、ID値が自動的に入力されます.

5. DATA UPDATE

<form action="/tables/add" method="POST">
        <!--POST DATA BY HTML-->
        <input id="loginID" name="ID" type="text" placeholder="ID"/>
        <input id="loginPW" name="PW" type="password" placeholder="PW"/>
        <button id="loginBTN" type="submit">사용자 정보 저장하기</button>
        </form>

上記のPOST要求により、ユーザが入力した値がname=~という変数に格納されて渡される.
ID,PWとして指定し,後でID,PW変数で値を伝達して利用することができる.
get method

const db = require('../config/database');
const Model = require('../models/model.js');
const express = require('express');
const router = express.Router();

const bodyParser = require('body-parser');

const {Sequelize} = require('sequelize');
const Op = Sequelize.Op;

router.get('/', (req, res) => {
    res.send('HELLO WORLD!');
    Model.findAll()
    .then(list => {
        
        console.log(list);
    })
    .catch(err => console.error(err));
});

getメソッドで得られたデータを利用する.
モデル.findAll()(Model.findAll()からデータを取得し、logウィンドウでデータを表示できます.
logウィンドウで表示されるデータは、sequelizeによって実際のデータベースに格納されているデータをオブジェクト化して得られる.
post method

router.post('/add', (req, res) => {
    
    let {ID, PW} = req.body;

    if(!ID){
        alert('PLEASE CHECK ID');
    }
    if(!PW){
        alert('PLEASE CHECK PW');
    }

    Model.create({
        userID: ID,
        userPW: PW
    })
    .then((list)=>{
        console.log(list);
        res.redirect('/')
    })
    .catch((err)=>{console.error(err);})
})

postメソッドで実際にデータを更新することもできます.
上に格納されたデータの変数(ID,PW)はreqである.bodyでは構造化されていません.
すなわち,ユーザが入力した値はID,PWに格納され,これをモデリングの属性(userID,userPW)に格納すればデータ作成が可能となる.

6.参照リンク

react router
https://m.blog.naver.com/sejun3278/221797203201
get/post
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=pjs990417&logNo=221358485714
https://berkbach.com/node-js-3-265ed8757a69
app.use
https://berkbach.com/node-js-3-265ed8757a69