Skip to main content
trgwによる終了済みの懸賞 信用度 50 点を授与
本文に 12 文字追加
ソース リンク
const connection = require('../db')

app.get('/', function (request, response, next) {
  connection.query('SELECT * FROM books', function (err, rows, fields) {
    if (err) throw err

    let table = ''
    for (let i = 0; i < rows.length; i++) {
        table += '<tr>'
        table += '<td>' + rows[i].id + '</td>'
        table += '<td>' + rows[i].title + '</td>'
        table += '<td>' + rows[i].author + '</td>'
        table += '<td>' + rows[i].genre + '</td>'
        table += '<td>' + rows[i].hight + '</td>'
        table += '<td>' + rows[i].publisher + '</td>'
        table += '</tr>'
    }

    res.render('all', {
      title: '一覧ページ',
      top: '/',
      libraryName: '...',
      content: table
    })
  })
})

allここまでall.ejsに<%- content %>とあったのでall.js側でHTMLを生成し埋め込むという想定でここまで書きましたが、ejs側でテーブル構造を表現(HTMLを生成)するのが良いでしょう。
これはHTMLを生成する部分と、プログラムの処理を分けることで可読性や保守性が上がるほか、HTMLに意図しないデータが含まれてしまうのを防ぐことができます。
もしユーザーによってデータベースに値を追加される場合、<script>alert('XSS!')</script>のような文字列を入れられた場合、そのままHTMLに埋め込まれ表示してしまいます。これはXSS脆弱性です。
テンプレート側でテーブル構造を表現することでこの問題を回避することができます。

const connection = require('../db')

app.get('/', function (request, response, next) {
  connection.query('SELECT * FROM books', function (err, rows, fields) {
    if (err) throw err

    let table = ''
    for (let i = 0; i < rows.length; i++) {
        table += '<tr>'
        table += '<td>' + rows[i].id + '</td>'
        table += '<td>' + rows[i].title + '</td>'
        table += '<td>' + rows[i].author + '</td>'
        table += '<td>' + rows[i].genre + '</td>'
        table += '<td>' + rows[i].hight + '</td>'
        table += '<td>' + rows[i].publisher + '</td>'
        table += '</tr>'
    }

    res.render('all', {
      title: '一覧ページ',
      top: '/',
      libraryName: '...',
      content: table
    })
  })
})

all.ejsに<%- content %>とあったのでall.js側でHTMLを生成し埋め込むという想定でここまで書きましたが、ejs側でテーブル構造を表現(HTMLを生成)するのが良いでしょう。
これはHTMLを生成する部分と、プログラムの処理を分けることで可読性や保守性が上がるほか、HTMLに意図しないデータが含まれてしまうのを防ぐことができます。
もしユーザーによってデータベースに値を追加される場合、<script>alert('XSS!')</script>のような文字列を入れられた場合、そのままHTMLに埋め込まれ表示してしまいます。これはXSS脆弱性です。
テンプレート側でテーブル構造を表現することでこの問題を回避することができます。

const connection = require('../db')

app.get('/', function (request, response, next) {
  connection.query('SELECT * FROM books', function (err, rows, fields) {
    if (err) throw err

    let table = ''
    for (let i = 0; i < rows.length; i++) {
      table += '<tr>'
      table += '<td>' + rows[i].id + '</td>'
      table += '<td>' + rows[i].title + '</td>'
      table += '<td>' + rows[i].author + '</td>'
      table += '<td>' + rows[i].genre + '</td>'
      table += '<td>' + rows[i].hight + '</td>'
      table += '<td>' + rows[i].publisher + '</td>'
      table += '</tr>'
    }

    res.render('all', {
      title: '一覧ページ',
      top: '/',
      libraryName: '...',
      content: table
    })
  })
})

ここまでall.ejsに<%- content %>とあったのでall.js側でHTMLを生成し埋め込むという想定でここまで書きましたが、ejs側でテーブル構造を表現(HTMLを生成)するのが良いでしょう。
これはHTMLを生成する部分と、プログラムの処理を分けることで可読性や保守性が上がるほか、HTMLに意図しないデータが含まれてしまうのを防ぐことができます。
もしユーザーによってデータベースに値を追加される場合、<script>alert('XSS!')</script>のような文字列を入れられた場合、そのままHTMLに埋め込まれ表示してしまいます。これはXSS脆弱性です。
テンプレート側でテーブル構造を表現することでこの問題を回避することができます。

ソース リンク

  1. ejsにデータを渡す

expressでejsを使う場合は、テンプレート側(.ejsファイル)で使用する変数(all.ejsの場合だとtitleやtopなど)をrenderメソッドの第2引数に指定します。
形式はテンプレート側で使う変数名をキーにしたオブジェクトで、all.ejsの場合だとこのようになるでしょう。

app.get('/', function (request, response, next) {
  res.render('all', {
    title: '一覧ページ',
    top: '/',
    libraryName: '',
    content: '<tr><td>データ</td></tr>'
  })
})
  1. MySQLへの接続、クエリ

読み込み順序やサーバーを起動したときにデータベースに接続するために、db.jsなど別ファイルに書くのが良いと思います。

const mysql = require('mysql2')

const connection = mysql.createConnection({
  host: '',
  user: '',
  password: '',
  database: ''
})

module.exports = connection

hostやuserなどは接続先のデータベースの情報を入れます。
localhostは自身を指すので、具体的な状況は分からないですが、異なるサーバーで実行されているのならば、そのサーバーのホスト名やIPアドレスを入れることになります。

all.jsからのqueryはこのようになります。

const connection = require('../db')

app.get('/', function (request, response, next) {
  connection.query('SELECT * FROM books', function (err, rows, fields) {
    if (err) throw err

    let table = ''
    for (let i = 0; i < rows.length; i++) {
        table += '<tr>'
        table += '<td>' + rows[i].id + '</td>'
        table += '<td>' + rows[i].title + '</td>'
        table += '<td>' + rows[i].author + '</td>'
        table += '<td>' + rows[i].genre + '</td>'
        table += '<td>' + rows[i].hight + '</td>'
        table += '<td>' + rows[i].publisher + '</td>'
        table += '</tr>'
    }

    res.render('all', {
      title: '一覧ページ',
      top: '/',
      libraryName: '...',
      content: table
    })
  })
})

rowsにはその名前の通り、データベースから取得した行の配列が入っているので、これを元に表示するHTMLを生成して渡します。

all.ejsに<%- content %>とあったのでall.js側でHTMLを生成し埋め込むという想定でここまで書きましたが、ejs側でテーブル構造を表現(HTMLを生成)するのが良いでしょう。
これはHTMLを生成する部分と、プログラムの処理を分けることで可読性や保守性が上がるほか、HTMLに意図しないデータが含まれてしまうのを防ぐことができます。
もしユーザーによってデータベースに値を追加される場合、<script>alert('XSS!')</script>のような文字列を入れられた場合、そのままHTMLに埋め込まれ表示してしまいます。これはXSS脆弱性です。
テンプレート側でテーブル構造を表現することでこの問題を回避することができます。

<table>
  <% for (let i = 0; i < books.length; i++) { %>
    <tr>
      <td><%= books[i].id %></td>
      <td><%= books[i].title %></td>
      <td><%= books[i].author %></td>
      <td><%= books[i].genre %></td>
      <td><%= books[i].hight %></td>
      <td><%= books[i].publisher %></td>
    </tr>    
  <% } %>
</table>

このように書くことで、<%- foo %>を使ったHTMLの埋め込みをさけ、<%= foo %>を使うことができるため、XSS脆弱性が発生しません。

all.jsからはHTML生成処理がなくなるので、単にrowsを渡すだけになります。

const connection = require('../db')

app.get('/', function (request, response, next) {
  connection.query('SELECT * FROM books', function (err, rows, fields) {
    if (err) throw err

    res.render('all', {
      title: '一覧ページ',
      top: '/',
      libraryName: '...',
      content: rows
    })
  })
})