簡易掲示板を作りたい、node.js+expressで ⑤/nodebbs/msgで削除する

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

削除

削除ができるようにしたい。ほんとはパスワードとか入れて書き込んだ本人であるかのチェックが必要なんだろうけど、まずはボタン一発即削除という形で作りたい。

スポンサーリンク

ID的な要素を追加する

見通しが立っていないがあると便利そうなので追加したい。どの程度のスペックが必要なIDかというのはなんか色々あるみたいだが時間でいいやと思った。

Date.now() - JavaScript | MDN
Date.now() メソッドは、UTC (協定世界時) での 1970 年 1 月 1 日 0 時 0 分 0 秒 から現在までの経過時間をミリ秒単位で返します。

ちゅーことでapp.post内を

var obj = {
    id: Date.now(),
    contents: {
      name: req.body['user_name'],
      msg: req.body['user_message'],
      dt: (new Date()).toJSON()
    }
  }

こう変えた。それに伴って

 for (let row of data) {
    s += `
        <p>${row['contents']['msg']}</p>
        <p><button type="button" id="${row['id']}" onclick="delbtn()">削除</button> 名前:${row['contents']['name']} 日時: ${row['contents']['dt']}</p>
        <hr>
        `
    }

こうした。

スポンサーリンク

HTTP DELETEメソッドを使う

ボタンを押したらidを伴ってサーバー側に飛ばすイメージで書く。

function delbtn() {
            let id = event.target.id
            fetch('https://dalomo.net/nodebbs/msg/' + id, {
                    method: 'DELETE'
                })
                .then(res => location.reload())
        }

これ、VSC使ってたらほぼ書いてくれた。いつの間にか未来いたわ。

eventがクリックイベントの要素が入っとるらしい。そこのidを取得

Event.target - Web API | MDN
イベントを発生させたオブジェクトへの参照です。 イベントハンドラーがバブリング、またはキャプチャフェーズの間に呼び出されたとき、event.currentTarget とは異なります。

HTMLのみでDELETEメソッドを使う方法がわからなかったので、Javascriptのfetchを使う

Fetch の使用 - Web API | MDN
Fetch API は、リクエストやレスポンスといった HTTP のパイプラインを操作する要素にアクセスするための JavaScript インターフェイスです。グローバルの fetch() メソッドも提供しており、簡単で論理的な方法で、非同期にネットワーク越しでリソースを取得することができます。

そのままほっとくと画面が更新されなかったのでリロードを入れてみた。これもっとスマートな方法ないのかな。

スポンサーリンク

受け取ったリクエストをサーバーで処理する

app.delete('/nodebbs/msg/:id', (req, res) => {
  const id = req.params.id
  const obj = JSON.parse('[' + fs.readFileSync('log.json', 'utf8') + ']')
  const newObj = obj.filter(item => item.id != id)
  fs.writeFileSync('log.json', JSON.stringify(newObj).slice(1).slice(0,-1), 'utf8')
  res.end()
})

こ、これもほぼ自動的に作られた…。やべーな未来。でもあんま理解度が高くないからこれが合ってるのか分からないんですよね。。。

app.deleteでDELETEメソッドのリクエストを処理できる。ルートパスにパラメータを含めて、req.params.idで取得できる。

Express でのルーティング

JSONを読み込んで、obj.filter(item => item.id != id)のところ、これ勝手にAIが作ったコードなんだけどidでフィルターかけるんだけど削除したいid除外でフィルタかけるんだよね。全然発想持ってなかったわ。考えてたのはidでなんか検索とかして、その要素のみ削除みたいな感じで考えてた。すげーよ、こっちのが全然スマートな解決だわ。

Array.prototype.filter() - JavaScript | MDN
filter() メソッドは、与えられた関数によって実装されたテストに合格したすべての配列からなる新しい配列を生成します。

で、文字列に変換して、最初と最後の[]を削除して、ファイルを書き出し。でres.end()で終了。できたー。

ミリ秒単位なので自分の場合はほぼ起こらないと思うけど、例えば削除のために読み込んでる途中で新規書き込みがあったりすると、削除後のファイル書き込みによって、新規が無い状態での上書きがされるので、新規がどっかいくみたいなことは起こりうる。こういうのを防ぐためにDBとかの仕組みがあったりすのかなぁとか思った。

コメント

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