結合筆記02實列對a過程socket伺服器連結進行簡化

　　　　-可以建立一個新目錄sqlhelp建立函式

　　　　-把增刪改分為一組

def get_commit(sql,list):
    conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', password='123456', database='day6')
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    cursor.execute(sql, list)
    conn.commit()
    cursor.close()
    conn.close()
    
 
return 0

　　　　-把查分為一組

def get_all(sql,list):
    conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', password='123456', database='day6')
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    cursor.execute(sql,list)
    result = cursor.fetchall()
    cursor.close()
    conn.close()
    
 
return result

def get_one(sql,list):
    conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', password='123456', database='day6')
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    cursor.execute(sql, list)
    result = cursor.fetchone()
    cursor.close()
    conn.close()
    
 
return result

對於模板ti語言可以進行IF條件判斷，如果客戶輸入為空，提醒客戶字串不能為空白

　　　　-views中對使用者提交的資料進行判斷（Form元件）

　　　　-這個過程應用很有必要

建立模態對話方塊

　　-通過新URL方式（頁面會重新整理）

　　　　1，在urls.py中新增需要跳轉的url地址，

　　　　　2，建立與URL相互對應的函式（增刪改查。。。） 然後選擇合適的返回方式render/redirect　

　　　　　　3，利用前端知識，需要建立HTML的模板，關鍵詞的超連結，for迴圈語句

　　　　　　　　　　注意FORM表單提交是POST，刪查改的action的url需要帶‘ ？’+引數

-通過AJAX方式（頁面不會重新整理）

　　　　　1，在urls.py中新增需要跳轉的url地址，

　　　　　　　2，在HTML中引入JQuery檔案

 <script src='/static/jquery-1.12.4.js'></script>

　　　　　　　　3，在html的頭部中建立css樣式（隱藏hide，遮罩層shadow，對話方塊modal）

 <style>
        {# 隱藏 #}
         .hide{
             display: none;
         }
         {#遮罩層#}
        .shadow{
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.4;
            z-index: 99;
        }
        {#對話方塊#}
        .modal{
            z-index: 100;{# 優先順序 越大越優秀 #}
            position: fixed;
            left: 50%;
            top: 50%;
            height: 300px;
            width: 400px;
            background-color: white;
            margin-left:-200px ;
            margin-top: -150px;

        }
    </style>

　　　　　　　　4，在身體body中建立showmodal函式用於控制對話方塊的開和關

<script>
        function showmodal() {
            {#移除hide#}
            document.getElementById('shadow').classList.remove('hide');
            document.getElementById('modal').classList.remove('hide');
        }
     function endmodal()   {
            {#增加hide#}
            document.getElementById('shadow').classList.add('hide');
            document.getElementById('modal').classList.add('hide');
        }
</script>

　　　　　　　　5先把modal對話方塊關閉

    <div id="shadow" class="shadow hide"></div>
    <div id="modal" class="modal hide">

　　　　　　　　6在html對應的部分新增上keyword 超連結 搭配上mdal對話方塊的函式

 <a onclick="showmodal()"> 對話方塊新增</a> {# 包含事件 #}

　　　　　　　　7搭配上需要客戶輸入的部分，input

<p>
        新增班級名稱:<input type="text" name="title" id="title">
    </p>
        <input onclick="AjaxSend();" type="button" value="提交">
        <input onclick="endmodal();" type="button" value="取消">

　　　　　　　　8建立與URL相互對應的函式（增刪改查。。。） 然後選擇合適的返回方式HttpResponse 因為ajax只能返回一堆字串

　　　　　　　9，在bodys裡面寫上AJAX函式（其實邏輯上和form表單是一樣的），發到那裡去，用什麼方式發，發什麼內容三個部分 ，注意這一個部分是偷偷進行的 所以它不會重新整理頁面，注意標點符號的新增

 function AjaxSend() {
            {#   內容和form一樣 怎麼發 發到哪 發什麼東西#}
            $.ajax({
                url: '/modal_add_class/',
                type: 'POST',
                data: {'title': $('#title').val()},
                success: function (data) {
                    //當服務端處理完成後，自動呼叫
                    //data表示服務端返回的值
                    console.log(data);
                    if (data == 'ok'){
                        location.href='/class/'
                    } else {
                        $('#eorrmsg').text(data)
                    }
                                        }
                    })
 function AjaxDelete() {
            $.ajax({
            {% for item in class_list %}
                url:'/modal_del_class/?id={{item.id}}',
                type:'GET',
                data:{ },
            {% endfor %}
                success:function (data) {
                    console.log(data);
                    if (data == 'ok') {
                        location.href = '/class/'
                    }else{
                        $('#eorrmsg').text(data)
                    }
                }
            })

        }
        function AjaxEdit() {
            $.ajax({
            {% for item in class_list %}
                url:'/modal_edit_class/?id={{item.id}}',
                type:'POST',
                data:{'title':$('#title').val()},
            {% endfor %}
                success:function (data) {
                    console.log(data);
                    if(data == 'ok'){
                        location.href = '/class/'
                    }else {
                        $('#eorrmsg').text(data)
                    }
                }
            })

        }

　　　　　　　　　　　　type選擇傳送的方式，data是客戶輸入的資料，success是當前服務端處理完畢後，自動執行的回撥函式

$.ajax({
url: '要提交的地址',
type: 'POST', // GET或POST,提交方式
data: {'k1': 'v1','k2':'v2'}, // 提交的資料
success:function(data){
// 當前服務端處理完畢後，自動執行的回撥函式
// data返回的資料
}

})、

總結：這一部分需要用到部分前端的知識，自己還沒學CSS和js所以學得有點吃力，不過都是些簡單記憶的內容

模態對話方塊（Ajax）
- 少量輸入框
- 資料少
登入
新URL方式
- 操作多
- 對於大量的資料以及操作