Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8691

Node.js(Express)とPostgreSQLを使ってChatアプリを作る。第2回(全4回)

$
0
0

はじめに

コピペ禁止です。
コマンド、コードはコピぺしないで作成してください。
気になった用語があれば各自で調べる。

PostgreSQLをインストール

PostgreSQLのインストール
PostgreSQL(ポストグレスキューエル)はオープンソースのリレーショナルデータベース管理システム(RDBMS)です。
簡単に言えばDBを管理するシステムです。
詳しくはWikipediaを参照してください。
https://ja.wikipedia.org/wiki/PostgreSQL

PostgreSQL

PostgreSQLを起動します。(Mac)

$ brew services start postgres
$ psql postgres

PostgreSQLを起動します。(Windows)

SQL Shell (psql)を起動します。
接続時に、パスワード以外、各質問に対して何も入力せずにenterキーを押してください。
postgres=#が表示されたら、コマンドを入力することができます。

データベースを作成します。
CREATE DATABASE bulletin_board;

データベースに接続する。
\c bulletin_board;

テーブルを作成する。

boardテーブル
CREATETABLEboard(board_idSERIALNOTNULL,titleVARCHAR(255)NOTNULL,created_atTIMESTAMPNOTNULL,PRIMARYKEY(board_id));
messagesテーブル
CREATETABLEmessages(messages_idSERIALNOTNULL,board_idINTEGERNOTNULL,messageTEXTNOTNULL,created_atTIMESTAMPNOTNULL,PRIMARYKEY(messages_id));

Node.jsとデータベースを接続しよう

HTML側でフォームを作る
まず、views/index.ejsを変更する。

<!-- 中略 -->
<body>
<div class="wrapper">
  <form action="/" method="post" class="board-form">
    <input type="text" name="title" class="input" placeholder="タイトル" required>
    <button type="submit" class="submit">作成</button>
  </form>b
</div>
</body>
<!-- 中略 -->

formactionというのはリクエストを送るURL、今回だと/
formmethodというのはリクエストを送るときの形式、今回はpost

フォームからリクエストを受け取とる
routes/index.jsを以下のように書き換える。

// 中略
/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

router.post('/', function(req, res, next) {
  var title = req.body.title;
  console.log(title);
});
// 中略

フォームから送られたリクエストをreq.body.[name属性]この形で取得することができる。
今回だとindex.ejsに記述したinputダグのname属性はtitleなのでreq.body.titleで取得できます。
そのパラメータをconsole.logでターミナルに出力といった流れの処理を書いています。

フォームに値を入力して作成のボタンを押した後にサーバーで値が取得されているか見てみてください。
スクリーンショット 2020-12-11 2.32.14.png

スクリーンショット 2020-12-11 2.30.50.png
確認できましたね。

Moment.jsを使って日付を取得する。

テーブルに日付を入れる場所を作成し、型にDATETIME型を選択したので、
DATETIME型になるようにフォーマットをしてきますが課題1でやった感じのを作るのナンセンスなので日付用のライブラリMoment.jsを使います。

$ npm i -S moment

だいぶ省略して書いていますが、やっていることはnpm install --save momentと同じです。
routes/index.js

var express = require('express');
var router = express.Router();
var moment = require('moment'); // 追加

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

router.post('/', function(req, res, next) {
  var title = req.body.title;
  var createdAt = moment().format('YYYY-MM-DD HH:mm:ss'); // 追加
  console.log(title);
  console.log(createdAt); // 追加
});

module.exports = router;

npm i -S momentでインストールしたライブラリはvar moment = require('moment')で使用することができます。

そしてvar createAt = moment().fromat('YYYY-MM-DD HH:mm:ss');
DATETIME型の現在時刻が取得できる。
ターミナルに2020-12-24 22:22:22感じで士官が取得できればOK。

データベースと接続しよう

Node.jsでデータベースに接続するためにはライブラリが必要です。今回使うのはPostgreSQLなのでPostgreSQLのライブラリを入れます。

$ npm install --save pg

これでPostgreSQLライブラリを使う準備はできましたが、接続するための関数はさまざまな箇所で使いたいので
汎用的な関数にしないといけないのでdbConnection.jsを作ってそれをroutes/index.jsでrequireできるように実装しましょう。

汎用的なデータベース接続モジュールを作成

dbConnection.jsを作成。

var pg = require('pg');

var dbConfig = new pg.Pool({
    database: 'bulletin_board',
    user: 'Postgre', // 変更してたらここ変えないとエラーでる
    password: '',   // 設定していたら記述する
    host: 'localhost',
    port: 5432,
});

module.exports = dbConfig;

momentでも記述したようにvar pg = require('pg');をします。
new pg.Pool()でデータベースの情報をオブジェクトにして引数に渡しmodule.expressで外部から
requireできようにしています。

データベースにデータを入れてみよう

routes/index.jsを書き換える。

// 中略
var moment = require('moment');
var connection = require('../mysqlConnection'); // 追加

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

router.post('/', function(req, res, next) {
  var title = req.body.title;
  var createdAt = moment().format('YYYY-MM-DD HH:mm:ss');
  var query = "INSERT INTO board (title, created_at) VALUES ('" + title + "', " + "'" + createdAt + "')";
  pool.connect(function (err, client) {
    client.query(query, function (err) {
      res.redirect('/');
    });
  });
});

module.exports = router;

var connection = require('../mysqlConnection');このようにするとrequireで呼び出すことができます。

connection.query();について説明します。connectionqueryメソッドは第一引数にPostgreSQLのquery、第二引数にcallback関数をとります。
この第一引数のクqueryを実行することによって、データがデータベースに蓄積されます。
そしてcallback関数が実行されます。

callback関数内ではres.redirect('/');をしています。res.redirect()は第一引数にURLをとります。そしてこのURLに移動するだけです。今回だと/なのでlocalhost:3000/に移動するだけです。

今回は以上です、次はデータの取得をしていきます。


Viewing all articles
Browse latest Browse all 8691

Trending Articles