簡易掲示板を作りたい、node.js+expressで ④/nodebbs/msgで取得する

スポンサーリンク
スポンサーリンク

取得

同一URLでデータを取得するようにする。さっきこのURLはPOSTメソッドだと投稿ができるようにしてたけど、今度はGETメソッドでJSONを取得できるようにする。そんでその取得したデータをもとに、投稿をページに表示すれば良いはず。

スポンサーリンク

GET /nodebbs/msg

log.jsonファイルを読み込んでJSON文字列形式に変換しレスポンスを返す。

const obj = JSON.parse('[' + fs.readFileSync('log.json', 'utf8') + ']')

log.jsonはちゃんとしたJSON形式ではないのでそのまま読み込もうとするとエラーが出る。なので配列を表す[]をつけてJSON.parseに流してあげる。

File system | Node.js v18.0.0 Documentation
JSON.parse() - JavaScript | MDN
JSON.parse() メソッドは文字列を JSON として解析し、文字列によって記述されている JavaScript の値やオブジェクトを構築します。任意の reviver 関数で、生成されたオブジェクトが返される前に変換を実行することができます。

expressにはJSON形式で返すというメソッドがあったのでそれを使う

 res.json(obj)
Express 4.x - API リファレンス

とりあえず全部返すようにした。全部返すなら一旦オブジェクトに変換せんでもlog.jsonに[]つけた文字列そのまま返せばいーじゃんとも思ったけど、後で範囲指定とかできたらしたいなと思ったのでこうした。ここまでやると

https://dalomo.net/nodebbs/msg

にアクセスするとJSONが返ってくる。ただこれexpress5.x系だと削除されるメソッドらしい。

スポンサーリンク

JavascriptでAPIを叩きレスポンスをページに反映する

ゼロからはじめるJavaScript(8) ブラウザのFetch APIで天気情報を取得してみよう
2005年に廃れかけていたJavaScriptに輝きを与え、その後のJavaScript興隆のきっかけになったのがAjax(エイジャックス)と呼ばれる技術です。これは、ブラウザから非同期処理を利用して外部データを取得する技術で、今ではいろいろな場面で一般的に利用されている技術です。

こちらを参考に

    <script>
        fetch('https://dalomo.net/nodebbs/msg')
            .then(res => res.json())
            .then(data => contents(data));

        function contents(data) {
            let s = ''
            for (let row of data) {
                s += `
                    <p>${row['msg']}</p>
                    <p>名前:${row['name']} 日時: ${row['dt']}</p>
                    <hr>
                    `
            }
            var contents = document.getElementById('contents')
            contents.innerHTML = s
        }
    </script>

fetchでAPIにアクセス。res.json()でレスポンスをJSON形式に。そのデータをcontents関数に渡して内容を作る。

for分でオブジェクトそれぞれのデータをHTMLにしてく。${ }というのがプレースホルダーとして使えるらしい。初めて知った。

テンプレートリテラル (テンプレート文字列) - JavaScript | MDN
テンプレートリテラルはバックティック (```) で区切られたリテラルで、substitutionと呼ばれる埋め込み式が利用できます。

できたHTML分をcontents内に配置して完了。これは前もやったな。デーモン化しておく。

nodebbs - dalomo

できた!ただ今のままだと脆弱性ありありでおっかない出来だと思うので、どーしたもんかな。

コメント

タイトルとURLをコピーしました