Webアプリ開発（Django+Vue.js+Docker）#8

こちらの記事の続きになります。

今回は、前回作成したテスト確認ページのポップアップからテストの内容の修正/削除を行えるようにします。

バックエンド

修正するときは、フロントから修正/削除の内容を受け取りデータベースに反映するという処理が必要になります。

そのため、テストを作るサイト同様のPOSTメソッドで送受信を行います。

フロントから各テストのidは取得できるので、まずはidをもとにデータベースからそのデータを引っ張ってきます。

elif request.method == 'POST':
    """ 問題のidに基づきその内容を変更する """
    test_id=request.POST.get('test_id')
    test = Test.objects.get(id=test_id)

その次に、そのデータを修正するのか、削除するのかを場合分けしなければいけません。その場合分けはそのように行います。

elif request.method == 'POST':
    """ 問題のidに基づきその内容を変更する """
    test_id=request.POST.get('test_id')
    test = Test.objects.get(id=test_id)

    if "update" in request.POST:
   
    elif "delete" in request.POST:

それでは、修正と削除のそれぞれの処理を行っていきましょう。

まずは、削除からって言ってもめっちゃ簡単で、以下を書くだけです。

elif "delete" in request.POST:
      test.delete()
    return HttpResponseRedirect(reverse('test:history'))

では、次は修正機能。

修正も簡単で、データベースから引っ張ってきたテストの各値を上書きすればいいだけです。

if "update" in request.POST:
      """ 入力された問題文と解答を上書きする """
      subject=request.POST.get('subject')
      question=request.POST.get('question')
      answer=request.POST.get('answer')
      test.subject = subject
      test.que = question
      test.ans = answer
      test.save()
      return HttpResponseRedirect(reverse('test:history'))

全部合わせると以下のようになります。

elif request.method == 'POST':
    """ 問題のidに基づきその内容を変更する """
    test_id=request.POST.get('test_id')
    test = Test.objects.get(id=test_id)

    if "update" in request.POST:
      """ 入力された問題文と解答を上書きする """
      subject=request.POST.get('subject')
      question=request.POST.get('question')
      answer=request.POST.get('answer')
      test.subject = subject
      test.que = question
      test.ans = answer
      test.save()
      return HttpResponseRedirect(reverse('test:history'))
    elif "delete" in request.POST:
      test.delete()
    return HttpResponseRedirect(reverse('test:history'))

バックエンドはこれで終わり！
簡単ですね！

フロントエンド

ここも、テスト作成画面と同じです。
ボタンが二つに増えるだけです。

以下のように、何もなかったポップアップのフッター部分に追加します。

<div class="modal-footer">
  <form method="post" action="{% url 'test:test_history' %}">
    {% csrf_token %}
    <input type="hidden" name="test_id" :value="[[ test.id ]]">
    <div>
      <label class="form-label" style="font-size: 25px;">科目</label><br>
      <select style="font-size: 20px;" v-model="test.subject" name="subject" type="subject">
        <option value="全て">全て</option>
        <option v-for="subject, index in subjects" :value="subject.subject">[[ subject.subject_name ]]</option>
      </select>
    </div>
    <div class="container">
      <div class="row">
        <div class="col">
          <h5>問題</h5>
          <textarea rows="5" cols="20" name="question" v-model="test.que" placeholder="問題文を入力してください" style="font-size: 20px;"></textarea>
        </div>
        <div class="col">
          <h5>解答</h5>
          <textarea rows="5" cols="20" name="answer" v-model="test.ans" placeholder="解答を入力してください" style="font-size: 20px;"></textarea>
          <div v-if="check_ans" style="color: red;">解答を入力してください</div> -->
        </div>
      </div>
    </div>
    <!-- 送信ボタン -->
    <button type="submit" class="btn btn-primary" name="update" style="margin: 0.3rem; font-size: 20px;">更新</button>
    <button type="submit" class="btn btn-danger" name="delete" style="margin: 0.3rem; font-size: 20px;">削除</button>
  </form>

それぞれ説明すると、まず一番重要なのは、フロントからデータベースをいじるので、

{% csrf_token %}

の記述を忘れずに。

テストのidをバックエンドに送らないとなんのテストを修正してよいのかわからなくなるので、見えないinputタグを書き、それで選択しているテストのidを送ることにします。

<input type="hidden" name="test_id" :value="[[ test.id ]]">

また、修正する時は一から書き直すのではなく、既に登録されている内容の細かい所をちょっと直すだけの方が便利だと思うので、初めから初期値を設定して置きます。
※v-model="~~~"に書くことで初期値になります。

テキストエリアにもv-modelを追加し、登録済みの内容を初期値をにします。

最後に修正ボタンと削除ボタンを作成し、それぞれにnameを追加します。これで、バックエンド側で修正なのか削除なのかを判断することができるようになります。

これで終了です！
確認して見ましょう！

確認

実際に使ってみましょう。
ボタンを押してポップアップから内容を修正が出来ることが分かります。
また、削除も確認して見ましょう。