【實戰演練】Python+Django網站開發系列09-django學生選課系統-選課頁面

在整個學生選課系統裏面，最核心的就是選課頁面了。

咱們設定目標爲：

一、已經選修的課程，不能重複選修；

二、每一個學生最多可選修不超過2門課程。

三、可選課程數量過多的時候，頁面自動分頁，每頁默認最多顯示10條數據。

爲了實現目標，這裏須要使用3個東西：

一、後端業務邏輯查詢數據庫，得出能夠選修的課程，返回給前端頁面，前端頁面須要使用dataTable這個JS組件，實現即時搜索，自動分頁等功能。

二、點擊前端選修按鈕以後，會彈出確認的框，這個要使用彈層。

三、彈出裏面點擊確認以後，JS使用post將信息返回到後端業務邏輯函數，將學生與須要選修的課程進行鏈接而且寫入數據庫。

一、使用dataTable組件

首先，爲了實現自動翻頁與即時搜索的功能，咱們須要引用過一個js插件。在magic->組件庫->帶搜索表格，查看代碼能夠找到jquery.data.Tables.js與dataTables.bootstrap.js這個js插件，就是能夠實現自動翻頁與即時搜素的關鍵。

咱們先創建一個temp.html用於測試（建立html，增長views函數，增長urls路由），而後拷貝代碼。

<script type=>
        $(() {
            $().dataTable({
                lengthMenu: [],
                paging: ,ordering: ,searching: ,language: {
                    lengthMenu: + + + + + + + ,search: ,paginate: {previous: ,
                        next: ,
                        first: ,
                        last: },

                    zeroRecords: ,info: ,infoEmpty: ,infoFiltered: },
                paging: ,
                pagingType: ,});
            $().css({ width: });});
    </script>

views裏面使用的據實在以前已經說過了，就是使用OCM進行跨表的鏈接，跨表部分須要使用「外鍵__字段」來進行自動鏈接。

<script src="/static/js/course_sel.js"></script>

urls添加路由，在數據庫表課程表裏面手動增長內容。

刷新前端temp頁面，這樣就能夠實現展現後臺能夠選修的課程數據了。

二、製做彈層&POST數據

咱們建立獨立的JS文件，而後將JS的代碼拷貝到JS文件裏面，而且建立函數。

而後html裏面寫一個引用，引用該JS文件內容。

magicbox查找彈層，而且查看代碼，將cs與js引用拷貝，將<script>內容拷貝。<script>裏面有3個重點：

1）ok:function()，後面書讓你書寫點擊OK按鈕以後執行什麼動做的。

2）onshow:function()，這個是用來調用後臺邏輯函數，搜索數據庫數據，而後能夠在彈層中加載展現的。

3）content：就是彈層中展現的內容。能夠自行替換爲一個輸入表單也能夠。

咱們先修改title與content的內容，而後重點修改ok:function()裏面要執行的內容。前端使用js向後端傳輸，這裏須要使用post函數，post的核心格式以下：

$.post(url,data,function(){},datatype)

這樣咱們就順便將判斷用戶有沒有重複選課，以及選課的門數是否已經到達2門的上限的判斷邏輯也加上了。

select_course(sno,cno) {
    d = dialog({
            width: ,
            title: ,
            quickClose: ,
            content: ,
            ok: () {
                $.post(,{
                    :sno,
                    :cno,
                },(res) {
                    (res.result==){
                        alert()
                    }(res.result==){
                        alert()
                    }{
                        alert()
                    }
                },)
                window.location.reload();
            },
            cancelValue: ,
            cancel: () {
                console.log()
                },
            onshow: () {
                console.log()
                }
        });
        d.show();
}

三、綁定前端頁面按鈕

須要在選修按鈕裏面，增長onclick，指向函數，而且能夠按照以下格式，但參數輸入到JS的post函數。

<button class="btn btn-xs btn-success" id="plugin4_demo1" title="激活" onclick="select_course('{{ j.sno }}','{{ i.cno }}',)">

三、修改後端業務邏輯

使用post.get從前端獲取對應的字段，而後對數據庫進行搜索，進行業務邏輯判斷，若是判斷經過，則使用save寫入，而後已JSON格式返回result是True給前端，課程重複就返回result是Repeat，大於2門就返回result是Fales給前端，前端根據後端返回的不一樣內容，進行不一樣的JS彈層提示。

django.http HttpResponseRedirectJsonResponse
(request):
    username = request.session.get()
    sno = request.POST.get()
    cno = request.POST.get()
    data = student.objects.filter(=username).values()
    selected_cno = student.objects.filter(=username=cno).values()
    data.count() < selected_cno.count()<:
        selected = score()
        selected.sno_id = sno
        selected.cno_id = cno
        selected.save()
        JsonResponse({:})
    data.count() < selected_cno.count() >=:
        JsonResponse({:})
    :
        JsonResponse({:})

若是點擊確認提示成功選修，查看數據庫中score成績表，看看學生學號與課程號是否已經生成關聯數據，若是能夠，則表示已經成功了，能夠進行下一步，將html代碼拷貝到selcourse.htm裏面，將css、js引用以及js代碼拷貝到BASE02.html裏面。

(request):
    username = request.session.get()
    course_list = course.objects.all().values()
    userinfo = student.objects.filter(=username).values()
    render_to_response(())

而後刷新頁面運行測試，發現基本功能已經實現，可是有點BUG。

檢查代碼，發現是bootstrap重複引用了，因此就說了css與js的引用，重複的要刪除，不然會引發一些不可控的bug。