[MYSQL]Webアプリケーション作成-記事リスト

これまで、基本的なMySQLを使用する方法と、DBをサーバに関連付ける方法を学びました.では、簡単なWebアプリケーションを作成してみましょう.

簡単なWebアプリケーションの作成

生活コードegoningの[nodejs講座]Nodejsを使用してWebアプリケーションシリーズ講座を作成することで、Webアプリケーションを直接作成できます.(インフラストラクチャまたは生活コードを参照)これに基づいてWebアプリケーションを作成します.
講座を通して作成したWebアプリケーションのソースコードは以下の通りです.app_file.js

var express = require('express');
var app = express();
var fs = require('fs');
app.locals.pretty = true;

app.use(express.json())
app.use(express.urlencoded({ extended: true }))

app.set('views', './views_file');
app.set('view engine', 'pug');
app.get('/topic/new', function(req, res){
  fs.readdir('data', function(err, files){
    if(err){
      console.log(err);
      res.status(500).send('Internal Server Error');
    }
    res.render('new', {topics:files});
  });
});
app.get(['/topic', '/topic/:id'], function(req, res){
  fs.readdir('data', function(err, files){
    if(err){
      console.log(err);
      res.status(500).send('Internal Server Error');
    }
    var id = req.params.id;
    if(id) {
    // id 값이 있을 때
    fs.readFile('data/'+id, 'utf8', function(err, data){
      if(err){
        console.log(err);
        res.status(500).send('Internal Server Error');
      }
      res.render('view', {topics:files, title:id, description:data});
    })
  } else {
      // id 값이 없을 때
      res.render('view', {topics:files, title:'Welcome', description:'Hello, Javascript for server.'});
    }
  })
});

app.post('/topic', function(req, res){
  var title = req.body.title;
  var description = req.body.description;
  fs.writeFile('data/' + title, description, function(err){
    if(err) {
      console.log(err);
      res.status(500).send('Internal Server Error');
    }
    res.redirect('/topic/'+title)
  });
})
app.listen(3000, function() {
  console.log('Connected, 3000 port!');
})

expressが提供するjson、get、postなどの通信方式でサーバにデータを要求し、受信する.実際にアプリケーションを実行すると...

前述したように、各項目をクリックすると、クリックした項目の説明が表示され、newをクリックすると、リストに新しいtitleとdescriptionを入力するために実装されていることが表示されます.
このアプリケーションは、fs.readdir、fs.writeFileなどの関数を介してファイルとして読み取り、格納されるため、データベースの面で残念な点がある.しかし、MySQLとnodejsを組み合わせて使用する方法がわかりました.したがって、ファイルのすべての部分について、app_file.jsでMySQLのDB置換操作が行われる.
まず、app_file.jsをコピーし、ファイル名をapp_mysql.jsに変更します.
次に、mysqlを接続するためのdatabase_mysql.jsの設定を次のように追加します.

var fs = require('fs');
var mysql = require('mysql');
var conn = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : '*********,
  database : 'o2'
});

conn.connect();

これにより、生成したMySQL DB「o 2」への接続が完了します.実際のDBの内容をWebページから印刷してみましょう.

app.get(['/topic', '/topic/:id'], function(req, res){
  var sql = 'SELECT id, title FROM topic';
  conn.query(sql, function(err, rows, fields) {
      res.send(rows);
  });

resオブジェクトのsend関数で行の内容をWebページに出力すると、配列に次のオブジェクトが作成されていることがわかります.

次に、上記の内容を文章リスト(リスト)に出力します.
参照app_file.jsからresオブジェクトを介してview_fileディレクトリのviewsファイルをレンダリングし、次のコードを記述します.

app.get(['/topic', '/topic/:id'], function(req, res){
  var sql = 'SELECT id, title FROM topic';
  conn.query(sql, function(err, topics, fields) {
      res.render('view', {topics:topics});
  });

文章リストにタイトルだけを表示する必要があります.また,タイトルはトピックのid値で識別できる.このため、view.pugファイルのli部分を次のように置き換えます.

li
  a(href='/topic/'+topic.id)= topic.title

内容を変更してアプリを実行すると…

メインタイトルの内容とidに対応する値がそれぞれ順番にリストされて生成されることがわかる.今、メイン画面のlocalhost:3000/topicの下にウェルカムメッセージを挿入したい場合は、どうすればいいですか?
表示されているものについては、viewを見てください.view.pug

doctype html
html
  head
    meta(charset='utf-8')
  body
    h1
      a(href='/topic') Server Side JavaScript
    ul
      each topic in topics
        li
          a(href='/topic/'+topic.id)= topic.title
    article
        h2= title
        = description
    div
      a(href='/topic/new') new

articleのセクションを次のように変更します.

    article
      if topic
        h2= title
        = description
      else
        h2 Welcome
        | This is server side javascript tutorials.

これはif-elseゲートで、以下の2つの状況を示しています.

トピック値

記事リストのtitleをクリックします(ex.JavaScriptを押すとhttp://localhost:3000/topic/1が得られます).
:各トピックidのdescription出力.

トピック値がない

メイン画面の場合(http://localhost:3000/topic)
:elseのウェルカムワード出力.

メイン画面ではウェルカムメッセージの出力が表示されます.