shinoblog-manabu

Progate(プロゲート)を使って初歩の初歩からプログラミング勉強をはじめました。無料から有料バージョンへ以降しつつ、自分辞書として活用しています。なるべく私と同じ初心者目線を使い、各プログラミング内容を説明したいです。

2. 削除ボタンの準備

 

目標

:削除ボタン(フォーム送信)を作る

:(削除後の)一覧表示された画面を作る

削除機能の手順を確認しよう

 

 

削除フォーム送信される→Node.jsを介して削除実行される→削除後の一覧画面が表示される

 

このように覚える。

削除後のリダイレクト機能もあるので、前回の復習を忘れずに。

 

 

 

ルーティングを用意しよう

目的:メモ削除のためのルーティングを作るため
手順1

app.post('/delete', (req, res) => {
ここに処理項目を書く
});

 

 

point

--

メモを削除する = データベースを変更する


このように覚える

 

 

 

削除ボタンを用意しよう

 

 

手順2
  • メモを削除するためのボタンを一つずつ作る
  • <form></form>属性をつかう
  • form属性の中にaction属性、method属性を追加する

(ルーティングによる。なのでルーティングに合わせて指定すること)

 

 

 

フォームの使いどころ

 
point 

postを使ってリクエストするときはフォームをつかう

 

 

Ex.フォームの型をマナブ

<form action="/delete" method="post">
<input type="submit" value="削除"
</form>

 

 このように書く

 

 

リダイレクトしよう

なぜリダイレクトをするのか

一覧画面を表示させるため処理する必要があるため

 

 


リダイレクト処理する方法

res.redirect('/index');
});

 

 

このように書く

 

 

演習問題

・メモ削除ルーティングについて
res.redirectの方法はそもそもapp.js内のコードに書いてある。

/indexの時も同じ書き方なので、真似して書けばOK。概念のみ理解しておこう。

・/index /delete それぞれ/(スラッシュ)をつけるのを忘れないようにする

・削除ボタンを作る際、送信先は/delete。deleteの通信方法はpost

 


参考: 

www.it-swarm-ja.tech

 

 

今回は以上になります。お疲れ様でした。