[Day 28] 订阅(2)

建完表格後来写api，来写一个订阅的api，weatherSubscribe()，只允许post 方法。

main/views.py ，传入有选取的行政区，还有email，这边用update_or_create，会先去找有没有这个email，没有就建立，有得话就修改选取行政区。
这样同个email，重新按下订阅一次就会更新。

def weatherSubscribe(request):
    if request.method == "POST":
        locationNameList = request.POST.getlist("locationNameList[]", [])
        email = request.POST.get("email")
        if not locationNameList or not email:
            return JsonResponse({"msg": "no create"})
        weatherSubscribe, isCreate = WeatherSubscribe.objects.update_or_create(
            email=email,
            defaults={
                "districts": locationNameList
            })
        return JsonResponse({"msg": "success"})

main/urls.py

...
    path('api/weatherSubscribe/', views.weatherSubscribe),
...

前端，加上订阅按钮，写一个送reqFunc，headers 要加上csrf_token，
main/main.html

{% csrf_token %}
<div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon1">Email</span>
            </div>
            <input id="emailInput"
                   type="email" class="form-control" placeholder="[email protected]">
        </div>
...
<button id="weatherSubscribeBtn" class="btn btn-warning" type="button">
            订阅
        </button>
...

const reqWeatherSubscribe = (selectedDistrictChxArr, email) => {
// 加上csrf_token
        const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value
        $.ajax({
            url: `/api/weatherSubscribe/`,
            headers: {'X-CSRFToken': csrftoken},
            type: "post",
            data: {
                locationNameList: selectedDistrictChxArr,
                email: email
            }
            ,
            success: (res) => {

            }
        })
    }
    
$(document).on("click", "#weatherSubscribeBtn", (e) => {
            e.preventDefault();
            let selectedDistrictChxArr = []
            $('.districtChx[name=checkboxDistrict]:checked').each(function (i) {
                selectedDistrictChxArr.push(this.value)
            })
            const email = $('#emailInput').val()
            reqWeatherSubscribe(selectedDistrictChxArr, email)
        })

结果图：
按下订阅後

可以去後台admin看，http://localhost:8000/admin/

就有刚刚新增的那笔纪录了

也订阅也有取消订阅，也把这写一写，
weatherUnsubscribe ，只传email，就去资料库查，就直接删除那笔资料，这边就没有写如果查不到这些验证了。

def weatherUnsubscribe(request):
    if request.method == "POST":
        email = request.POST.get("email")
        if not email:
            return JsonResponse({"msg": "no create"})
        WeatherSubscribe.objects.filter(email=email).delete()
        return JsonResponse({"msg": "success"})

main/urls.py

...
    path('api/weatherUnsubscribe/', views.weatherUnsubscribe),
...

前端加一个按钮，取消订阅，这里只要email就好。

...
<button id="weatherUnsubscribeBtn" class="btn btn-danger" type="button">
            取消订阅
        </button>
        ...
        const reqWeatherUnsubscribe = (email) => {
        const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value
        $.ajax({
            url: `/api/weatherUnsubscribe/`,
            headers: {'X-CSRFToken': csrftoken},
            type: "post",
            data: {email: email},
            success: (res) => {

            }
        })
    }
        $(document).on("click", "#weatherUnsubscribeBtn", (e) => {
            e.preventDefault();
            const email = $('#emailInput').val()
            reqWeatherUnsubscribe(email)
        })

结果画面

执行完，就会看到那笔资料被删掉了