- 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>'
})
})
- 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
})
})
})