削除
削除ができるようにしたい。ほんとはパスワードとか入れて書き込んだ本人であるかのチェックが必要なんだろうけど、まずはボタン一発即削除という形で作りたい。
ID的な要素を追加する
見通しが立っていないがあると便利そうなので追加したい。どの程度のスペックが必要なIDかというのはなんか色々あるみたいだが時間でいいやと思った。
ちゅーことで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を取得
HTMLのみでDELETEメソッドを使う方法がわからなかったので、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で取得できる。
JSONを読み込んで、obj.filter(item => item.id != id)のところ、これ勝手にAIが作ったコードなんだけどidでフィルターかけるんだけど削除したいid除外でフィルタかけるんだよね。全然発想持ってなかったわ。考えてたのはidでなんか検索とかして、その要素のみ削除みたいな感じで考えてた。すげーよ、こっちのが全然スマートな解決だわ。
で、文字列に変換して、最初と最後の[]を削除して、ファイルを書き出し。でres.end()で終了。できたー。
ミリ秒単位なので自分の場合はほぼ起こらないと思うけど、例えば削除のために読み込んでる途中で新規書き込みがあったりすると、削除後のファイル書き込みによって、新規が無い状態での上書きがされるので、新規がどっかいくみたいなことは起こりうる。こういうのを防ぐためにDBとかの仕組みがあったりすのかなぁとか思った。
コメント