fastify データベースを検索した結果をhtmlで表示する

fastifyでデータベースの検索やhtmlの表示を試してみました。
fastifyで郵便番号検索APIのサンプル
fastifyでhtmlビューを表示する(point-of-view, ejs)

2つを組み合わせて、データベースを検索した結果をhtmlで表示してみます。


サンプル



サーバー部分は以下のようになりました。

・server.js


  1. const fastify = require('fastify')({ logger: true })
  2. const postal = require('./module/postal')()
  4. fastify.register(require('point-of-view'), {
  5.     engine: {
  6.         ejs: require('ejs')
  7.     }
  8. })
  10. fastify.get('/', async (req, reply) => {
  11.     // 検索結果をviewに渡す
  12.     const rows = await postal.search('銀座')
  13.     reply.view('/views/index.ejs', { rows: rows })
  14. })
  16. fastify.listen(3000, '0.0.0.0', err => {
  17.     if (err) throw err
  18.     console.log(`server listening on ${fastify.server.address().port}`)
  19. })




データベースを検索する処理です。

・module/postal.js


  1. const { Connection, Request } = require('tedious')
  3. module.exports = () => {
  4.     // 接続情報
  5.     const config = {
  6.         authentication: {
  7.             options: {
  8.                 userName: 'sa',
  9.                 password: 'P@ssw0rd'
  10.             },
  11.             type: 'default'
  12.         },
  13.         server: 'localhost',
  14.         options: {
  15.             database: 'sample',
  16.             encrypt: false,
  17.             rowCollectionOnRequestCompletion : true
  18.         }
  19.     }
  21.     // 設定に従いデータベースへ接続
  22.     this.create_connection = (config) => {
  23.     
  24.         const connection = new Connection(config)
  26.         // Promiseをnewした時点で引数のfunctionが実行される
  27.         const p = new Promise(function(resolve, reject) {
  28.             connection.on('connect', err => {
  29.                 if (err) {
  30.                     reject(err)
  31.                 } else {
  32.                     resolve(connection)
  33.                 }
  34.             })
  36.             connection.connect()
  37.         })
  39.         return p
  40.         
  41.     }
  43.     // SQLの実行
  44.     this.execute = (connection, sql) => {
  46.         const p = new Promise(function(resolve, reject) {
  47.             const request = new Request(sql, (err, rowCount, columns) => {
  48.                 if (err) {
  49.                     reject(err)
  50.                     return
  51.                 }
  53.                 let rows = []
  54.                 columns.forEach(column => {
  55.                     let row = {}
  56.                     column.forEach(field => {
  57.                         row[field.metadata.colName] = field.value
  58.                     });
  59.                     rows.push(row)
  60.                 });
  61.                 
  62.                 resolve(rows)
  63.             })
  65.             connection.execSql(request)
  66.         });
  68.         return p
  69.     }
  71.     // 住所の一部でデータを検索
  72.     this.search = async (address) => {
  73.         const connection = await this.create_connection(config)
  74.         const rows = await this.execute(connection, "SELECT * FROM postal_code WHERE address LIKE '%" + address + "%' ORDER BY code")
  75.         connection.close()
  77.         return rows
  78.     }
  81.     return this
  82. }




表示部分はこのようになりました。

・views/index.ejs


  1. <html lang="ja">
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>fastifyサンプル</title>
  5. <style>
  6. table {
  7.     border: solid 2px;
  8.     border-collapse: collapse;
  9. }
  10. th, td {
  11.     border: solid 2px;
  12.     padding: 4px;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17.     <table>
  18.         <thead>
  19.             <tr>
  20.                 <th>郵便番号</th>
  21.                 <th>住所</th>
  22.             </tr>
  23.         </thead>
  24.         <tbody>
  25.             <% rows.forEach(row => { %>
  26.                 <tr>
  27.                     <td><%= row.code %></td>
  28.                     <td><%= row.address %></td>
  29.                 </tr>
  30.             <% }) %>
  31.         </tbody>
  32.     </table>
  33. </body>
  34. </html>




サーバーを起動してブラウザで表示してみると、ちゃんと住所に「銀座」を含む結果が表示されました。

a44_01.png

関連記事
  • 2021/04/15(木) 22:28:27

fastify 入力データの検証(validation)

fastifyで入力データの検証を試してみます。

id:数値
address:文字列 必須

というパターンだとこんな感じになりました。
受け取ったデータをそのまま送り返しています。


  1. const fastify = require('fastify')({ logger: true })
  3. const opts = {
  4.     schema: {
  5.         body: {
  6.             type: 'object',
  7.             required: [ // addressを必須項目に
  8.                 'address'
  9.             ],
  10.             properties: {
  11.                 id: { type: 'number'},
  12.                 address: { type: 'string' }
  13.             }
  14.         }
  15.     }
  16. }
  18. fastify.post('/', opts, async (req, reply) => {
  19.     // jsonデータはreq.bodyに設定される
  20.     return req.body
  21. })
  23. fastify.listen(3000, '0.0.0.0', err => {
  24.     if (err) throw err
  25.     console.log(`server listening on ${fastify.server.address().port}`)
  26. })




正常系

$ curl 'http://192.168.11.104:3000' --data '{"id": 123, "address":"住所"}' -X POST -H 'Content-Type:application/json'
{"id":123,"address":"住所"}



idが文字列(数値へ変換可能)

$ curl 'http://192.168.11.104:3000' --data '{"id": "123", "address":"住所"}' -X POST -H 'Content-Type:application/json'
{"id":123,"address":"住所"}


自動的に数値へ変換されました。

idが文字列(数値へ変換不可)

$ curl 'http://192.168.11.104:3000' --data '{"id": "abc", "address":"住所"}' -X POST -H 'Content-Type:application/json'
{"statusCode":400,"error":"Bad Request","message":"body.id should be number"}


ちゃんとエラーになりました。

idがなし

$ curl 'http://192.168.11.104:3000' --data '{"address":"住所"}' -X POST -H 'Content-Type:application/json'
{"address":"住所"}



addressが空白文字列

$ curl 'http://192.168.11.104:3000' --data '{"id": 123, "address":""}' -X POST -H 'Content-Type:application/json'
{"id":123,"address":""}



addressが数値

$ curl 'http://192.168.11.104:3000' --data '{"id": 123, "address":456}' -X POST -H 'Content-Type:application/json'
{"id":123,"address":"456"}



addressがなし

$ curl 'http://192.168.11.104:3000' --data '{"id": 123}' -X POST -H 'Content-Type:application/json'
{"statusCode":400,"error":"Bad Request","message":"body should have required property 'address'"}




このvalidationは、「Ajv」を使用しているとのことで、詳しい使い方はこちらのドキュメントを見たほうが良さそうです。
https://ajv.js.org/json-schema.html

関連記事
  • 2021/04/12(月) 22:09:10

fastify json形式のPOSTデータ受け取り

fastifyはPOSTデータはjson形式を想定しており、x-www-form-urlencoded形式のデータ受信にはひと工夫必要でした。
fastifyでPOSTデータ受信時、FST_ERR_CTP_INVALID_MEDIA_TYPE

POSTデータがjson形式の場合について見てみます。

プログラム修正




  1. {"address":"銀座"}



という形式で検索パラメーターを送信することにします。
json形式のPOSTデータは自動的にパースされ、req.bodyに設定されました。


  1. const fastify = require('fastify')({ logger: true })
  2. const postal = require('./module/postal')()
  4. fastify.post('/', async (req, reply) => {
  5.     // jsonデータはreq.bodyに設定される
  6.     const address = req.body.address
  7.     const rows = await postal.search(address)
  8.     return rows
  9. })
  11. fastify.listen(3000, '0.0.0.0', err => {
  12.     if (err) throw err
  13.     console.log(`server listening on ${fastify.server.address().port}`)
  14. })




動作確認


$ curl 'http://192.168.11.104:3000' --data '{"address":"銀座"}' -X POST -H 'Content-Type:application/json'
[
    {"code":"0691331","address":"北海道夕張郡長沼町銀座"},
    {"code":"1040061","address":"東京都中央区銀座"}
...
]

  • 2021/04/12(月) 21:24:07

fastifyでPOSTデータ受信時、FST_ERR_CTP_INVALID_MEDIA_TYPE

fastifyで郵便番号検索APIを作ってみました。
fastifyで郵便番号検索APIのサンプル

検索する住所をGETのクエリーパラメーターではなく、POSTで送信するよう変更してみます。


最初の実装



「fastify.getをfastify.postに変えれば動くだろう」と思い変更してみました。

・server.js


  1. const fastify = require('fastify')({ logger: true })
  2. const postal = require('./module/postal')()
  4. /*
  5. fastify.get('/', async (req, reply) => {
  6.     // クエリーパラメーター取得
  7.     const address = req.query.address
  8.     const rows = await postal.search(address)
  9.     return rows
  10. })
  11. */
  13. // postに変更
  14. fastify.post('/', async (req, reply) => {
  15.     const address = req.query.address
  16.     const rows = await postal.search(address)
  17.     return rows
  18. })
  20. fastify.listen(3000, '0.0.0.0', err => {
  21.     if (err) throw err
  22.     console.log(`server listening on ${fastify.server.address().port}`)
  23. })




curlで動作を確認すると、FST_ERR_CTP_INVALID_MEDIA_TYPE
Unsupported Media Type: application/x-www-form-urlencoded
というエラーになります。


$ curl 'http://192.168.11.104:3000' --data 'address=%E9%8A%80%E5%BA%A7' -X POST
{"statusCode":415,"code":"FST_ERR_CTP_INVALID_MEDIA_TYPE","error":"Unsupported Media Type","message":"Unsupported Media Type: application/x-www-form-urlencoded"





POST対応



調べてみると、デフォルトでPOSTはjson形式のみを受け付け、x-www-form-urlencodedなデータはエラーになるようです。
multipartも同様の模様。
Giving error with node/fastify Unsupported Media Type: application/x-www-form-urlencoded

fastify-formbodyを使うといいよとのこと。
fastify-formbody

インストールします。


$ npm install fastify-formbody




インストールしたfastify-formbodyを登録し、POSTデータをreq.bodyから取得するよう修正します。


  1. const fastify = require('fastify')({ logger: true })
  2. const postal = require('./module/postal')()
  4. // POST対応
  5. fastify.register(require('fastify-formbody'))
  7. // postに変更
  8. fastify.post('/', async (req, reply) => {
  9.     // req.bodyからPOSTデータを取得するよう変更
  10.     //const address = req.query.address
  11.     const address = req.body.address
  12.     const rows = await postal.search(address)
  13.     return rows
  14. })
  16. fastify.listen(3000, '0.0.0.0', err => {
  17.     if (err) throw err
  18.     console.log(`server listening on ${fastify.server.address().port}`)
  19. })




これでPOSTデータを受け取り、検索が実行できるようになりました。


$ curl 'http://192.168.11.104:3000' --data 'address=%E9%8A%80%E5%BA%A7' -X POST
[
     {"code":"0691331","address":"北海道夕張郡長沼町銀座"},
     {"code":"1040061","address":"東京都中央区銀座"}
...
]


関連記事
  • 2021/04/12(月) 21:15:18

fastifyで郵便番号検索APIのサンプル

fastifyを触ってみています。
Node.jsの高速webフレームワーク「fastify」

簡単なサンプルプログラムとして、郵便番号の検索APIを作ってみます。
データはこちらでSQL Serverにインストールしたものを検索します。
Node.js Tedious でBulkLoadを使用して郵便番号データを一括登録



サンプル



特にはまることもなく作成できました。
Node.jsを書く機会があまりないので、作法に沿っているか微妙ですが...

・server.js


  1. const fastify = require('fastify')({ logger: true })
  2. const postal = require('./module/postal')()
  4. fastify.get('/', async (req, reply) => {
  5.     // クエリーパラメーター取得
  6.     const address = req.query.address
  7.     //console.log(address)
  8.     const rows = await postal.search(address)
  9.     return rows
  10. })
  13. fastify.listen(3000, '0.0.0.0', err => {
  14.     if (err) throw err
  15.     console.log(`server listening on ${fastify.server.address().port}`)
  16. })



データの検索部分はモジュールを分けてみました。

・/module/postal.js


  1. const { Connection, Request } = require('tedious')
  3. module.exports = () => {
  4.     // 接続情報
  5.     const config = {
  6.         authentication: {
  7.             options: {
  8.                 userName: 'sa',
  9.                 password: 'P@ssw0rd'
  10.             },
  11.             type: 'default'
  12.         },
  13.         server: 'localhost',
  14.         options: {
  15.             database: 'sample',
  16.             encrypt: false,
  17.             rowCollectionOnRequestCompletion : true
  18.         }
  19.     }
  21.     // 設定に従いデータベースへ接続
  22.     this.create_connection = (config) => {
  23.     
  24.         const connection = new Connection(config)
  26.         // Promiseをnewした時点で引数のfunctionが実行される
  27.         const p = new Promise(function(resolve, reject) {
  28.             connection.on('connect', err => {
  29.                 if (err) {
  30.                     reject(err)
  31.                 } else {
  32.                     resolve(connection)
  33.                 }
  34.             })
  36.             connection.connect()
  37.         })
  39.         return p
  40.         
  41.     }
  43.     // SQLの実行
  44.     this.execute = (connection, sql) => {
  46.         const p = new Promise(function(resolve, reject) {
  47.             const request = new Request(sql, (err, rowCount, columns) => {
  48.                 if (err) {
  49.                     reject(err)
  50.                     return
  51.                 }
  53.                 let rows = []
  54.                 columns.forEach(column => {
  55.                     let row = {}
  56.                     column.forEach(field => {
  57.                         row[field.metadata.colName] = field.value
  58.                     });
  59.                     rows.push(row)
  60.                 });
  61.                 
  62.                 resolve(rows)
  63.             })
  65.             connection.execSql(request)
  66.         });
  68.         return p
  69.     }
  71.     // 住所の一部でデータを検索
  72.     this.search = async (address) => {
  73.         const connection = await this.create_connection(config)
  74.         const rows = await this.execute(connection, "SELECT * FROM postal_code WHERE address LIKE '%" + address + "%' ORDER BY code")
  75.         connection.close()
  77.         return rows
  78.     }
  81.     return this
  82. }




サーバーを起動。


$ node server.js




curlで「銀座」を含む住所を検索してみます。


$ curl http://192.168.11.104:3000/?address=%E9%8A%80%E5%BA%A7
[
    { "code": "0691331", "address": "北海道夕張郡長沼町銀座" },
    { "code": "1040061", "address": "東京都中央区銀座" },
    { "code": "3220052", "address": "栃木県鹿沼市銀座" },
    { "code": "3600032", "address": "埼玉県熊谷市銀座" },
    { "code": "3670052", "address": "埼玉県本庄市銀座" },
    { "code": "3940022", "address": "長野県岡谷市銀座" },
    { "code": "3940023", "address": "長野県岡谷市東銀座" },
    { "code": "3950031", "address": "長野県飯田市銀座" },
    { "code": "4130013", "address": "静岡県熱海市銀座町" },
    { "code": "4140028", "address": "静岡県伊東市銀座元町" },
    { "code": "4240817", "address": "静岡県静岡市清水区銀座" },
    { "code": "4480845", "address": "愛知県刈谷市銀座" },
    { "code": "4750874", "address": "愛知県半田市銀座本町" },
    { "code": "5220088", "address": "滋賀県彦根市銀座町" },
    { "code": "6128089", "address": "京都府京都市伏見区銀座町" },
    { "code": "7450032", "address": "山口県周南市銀座" },
    { "code": "7450033", "address": "山口県周南市みなみ銀座" },
    { "code": "7700916", "address": "徳島県徳島市銀座" },
    { "code": "8040076", "address": "福岡県北九州市戸畑区銀座" },
    { "code": "9300991", "address": "富山県富山市新庄銀座" }
]



パラメーターのチェックなど行っていませんが、動いてくれることが確認できました。
関連記事
  • 2021/04/11(日) 17:59:55

プロフィール

Author:symfo
blog形式だと探しにくいので、まとめサイト作成中です。
Symfoware まとめ

PR




検索フォーム


最新記事

カテゴリ

月別アーカイブ

RSSリンクの表示

リンク

このブログをリンクに追加する