取得

同一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に流してあげる。

https://nodejs.org/api/fs.html#fsreadfilesyncpath-options

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

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

 res.json(obj)

https://expressjs.com/ja/4x/api.html#res.json

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

https://dalomo.net/nodebbs/msg

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

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

https://news.mynavi.jp/techplus/article/zerojavascript-8/

こちらを参考に

    <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にしてく。${ }というのがプレースホルダーとして使えるらしい。初めて知った。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals

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

https://dalomo.net/nodebbs/

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