【Django入門】DjangoとVue.jsで作ったカレンダーに祝日入力機能追加してみた！

from rest_framework import viewsets
from .models import Holiday
from .serializers import HolidaySerializer

class HolidayList(viewsets.ModelViewSet):
    queryset = Holiday.objects.all()
    serializer_class = HolidaySerializer

# from rest_framework import generics
# from django.views import generic
# from .models import Holiday
# from .serializers import HolidaySerializer


# class HolidayList(generics.ListAPIView):
#     queryset = Holiday.objects.all()
#     serializer_class = HolidaySerializer
    
from django.shortcuts import render
from django.views import View

class HajimeteView(View):
    def get(self, request, *args, **kwargs):
       return render(request,"app_cal/index.html")

from rest_framework import routers
from app_cal.viewsets import HolidayList


router = routers.DefaultRouter()
router.register('app_cal',HolidayList)

from django.contrib import admin
from django.urls import path, include
from .routers import router# 追加
from django.views.generic import TemplateView # 追加

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include(router.urls)),# 追加
    path('app_cal', TemplateView.as_view(template_name='app_cal/index.html')), # 追加

    # path('calendar/', include('app_cal.urls')),
    # path('',include("app_cal.urls")),
]

<template>
  <div class="hello">
      <div class="container">
    <h1>祝日一覧</h1>
    
<table class="table">
        <thead>
          <tr>
            <th scope="col">ID</th>
            <th scope="col">名前</th>|
            <th scope="col">日付</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(name_date, index) in res_name_date" :key=index>
            <th scope="row">{{name_date.id}}</th>
            <td>{{name_date.name}}</td>|
            <td>{{name_date.date}}</td>
          </tr>
        </tbody>
      </table>
<br>
<div id="app">
    <div class="title">
      <p>祝日名: (new_name)</p>
      <input v-model="new_name">
    </div>
    <div class="day">
      <p>日付: (new_date)</p>
      <input v-model="new_date">
    </div>
      <button v-on:click="createNewUser">投稿</button>
    <div class="del">  
      <p>削除id:</p>
      <input v-model="del_id">
    </div>
      <button v-on:click="deleteid">削除</button>
  </div></div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
 data() {
        return {
            new_name:'',
            new_date:'',
            del_id:'',
            res_name_date: [],
            loading: false,

           newArticle: {'name': null, 'date': null },
        };
    },
    mounted() {
        axios.defaults.xsrfCookieName = 'csrftoken' ;// ←ココと
        axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"; // ←ココに追加しました
         this.getArticles();
    },
    methods: {
         getArticles() {
            
            this.loading = true;
            axios.get('https://localhost-人それぞれ違うサーバー名-1.paiza-user-free.cloud:8000/api/app_cal/?format=json')
                .then(response => {
                    this.res_name_date=response.data
                  })
          .catch((err) => {
           this.loading = false;
           console.log(err);
          })
         },
        createNewUser: function(){
             axios.post('https://localhost-人それぞれ違うサーバー名-1.paiza-user-free.cloud:8000/api/app_cal/',{
                 "name": this.new_name,
                 "date": this.new_date
         
                 })
                  .then(location='/app_cal')
                  .catch(error => console.log(error))     
        },
        deleteid: function(){
            var delurl="https://localhost-人それぞれ違うサーバー名.paiza-user-free.cloud:8000/api/app_cal/"+this.del_id+"/";
             axios.delete(delurl)
                  .then(location='/app_cal')
                  .catch(error => console.log(error))     
        }            
     },
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.table{
        margin: auto;
    }
    .container{
    text-align:center;
}

#app{
    text-align:center;
}
.title,.day,.del{
    width:80%;
    margin:0 auto;
    padding:15px 0;
    margin-bottom:30px;
    background-color:whitesmoke;
}
input{
    padding:5px 10px;
    min-width:250px;
}
button{
    width:80%;
    background-color: teal;
    color:white;
    padding:20px 0;
    border:none;
    border-radius:10px;
    cursor:pointer;
    margin-bottom: 50px;
}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

calcNextHoliday() {
        let mintermDays = 365;
        let minholiday = null;
      // 次の祝日までの日数、および次の祝日のオブジェクトを返す
      for (const holiday in this.holidayList) {
        const holidayToDate = new Date(this.holidayList[holiday].date.split('-'))
        const todayToDate = new Date(this.today.split('-'))
        const termDays = this.calcTermDays(todayToDate, holidayToDate)
        if(termDays < mintermDays && termDays >=0){
            minholiday = holiday;
            mintermDays = termDays;
        }
      }