django-兩種方式對單表的操做

時間 2019-12-13

標籤 django 兩種方式欄目 Python 简体版

原文原文鏈接

單表操做的內容

咱們這裏對數據庫單表的操做包含增刪改查四部分javascript

具體連接數據庫的方式咱們是經過pymysql，固然你也能夠用其餘的。css

兩種方式的概念與區別

一、新url的方式html

　　主要就是咱們每一次向後臺提交併訪問數據時，後臺都會給咱們前端

　　跳轉到一個新的界面，來完成咱們的操做java

二、模態對話框的方式mysql

　　就是咱們能夠在頁面不刷新的狀況下，完成先後臺數據之間的交互jquery

二者最大的區別就是新url確定會刷新頁面，而模態框可讓頁面不刷新進行交互ajax

新url方式

新url主要利用render和redirect對瀏覽器頁面進行從新刷新，還有a標籤進行頁面跳轉sql

　　a：至關於從新向數據庫

　　render：模板引擎渲染新頁面

　　redirect：重定向跳到另外一個頁面

前端html頁面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>新url</title>
    <link rel="stylesheet" href="/static/css/reset.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <style type="text/css">
        {#* { margin:0; padding:0; }#}
        
        li { list-style:none; }
        {#body { background-color: #222222; }#}
        .xs_ul { font-size:0; line-height:0; }
        .xs_ul li {display:inline-block; font-size:20px; line-height:20px; background:#fff;}
        .xs_ul li a {
            display:block;
            width:80px;
            text-align:center;
            padding:15px 30px;
            border:1px solid #000;
            color:#999; text-decoration:none;
        }
        .xs_box{
            position: absolute;
            right: 50px;
            top: 40px;
        }
    </style>
</head>
<body>
<div class="xs_box">
    <ul class="xs_ul">
        <!--點擊增長班級跳轉到新url中去添加信息-->
    <li class="xs_li_13"><a href="/add_classes/">增長班級</a></li>
</ul>
</div>

<section>
  <!--for demo wrap-->
  <h1>班級列表</h1>
  <div class="tbl-header">
    <table cellpadding="0" cellspacing="0" border="0">
      <thead>
        <tr>
          <th>ID</th>
          <th>班級名稱</th>
          <th>操做</th>
        </tr>
      </thead>
    </table>
  </div>
  <div class="tbl-content">
    <table cellpadding="0" cellspacing="0" border="0">
      <tbody>
        {% for item in classes %}
                <tr>
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <!--a標籤提交數據只能經過GET提交，因此刪除或者更新咱們想要攜帶數據只能經過?在後面進行拼接-->
                    <td><a href="/delete_classes/?id={{ item.id }}" onclick="return del()">刪除</a>|
                        <a href="/update_classes/?id={{ item.id }}">更新</a>
                    </td>
                </tr>
            {% endfor %}
      </tbody>
    </table>
  </div>
</section>

<div class="made-with-love">
  Made with
  <i>♥</i> by
  <a target="_blank" href="#">hesujian</a>
</div>

</body>
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/index.js"></script>
<script type="text/javascript" src="/static/js/jq_button.js"></script>
<script type="text/javascript" src="/static/js/xs.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".xs_li_13").xs999(13);
    });
</script>
<script>
    function del() {
        let res = window.confirm("確認刪除?");
        if (res == false) {
            return false;
        };

    }
</script>

</html>

html頁面

後端路由管理並處理頁面

def classes(request):
    # 生成一個操做數據庫
    sq = Classes()
    classes = sq.select_all()
    # 返回一個頁面（html與數據庫融合事後的）
    return render(request,"classes.html",{"classes":classes})

def add_classes(request):
    if request.method == 'GET':
        # 若是請求方式是GET，那麼說明是第一次按下添加操做
        # 返回一個新的靜態頁面讓他去作添加操做
        return render(request,"add_class.html")
    else:
        # 若是請求方式是POST，那麼說明是寫好數據提交上來的
        classname = request.POST.get("classname")

        sq = Classes()
        sq.add_data(classname)
        # 返回的是一個重定向的頁面
        return redirect("/classes/")

def delete_classes(request):
    id = request.GET.get("id")
    sq = Classes()
    sq.delete_data(id)
    return redirect('/classes/')


def update_classes(request):
    sq = Classes()
    if request.method == 'GET':
        id = request.GET.get("id")
        classes = sq.select_one(id)
        return render(request,'update_class.html',{'class':classes})
    else:
        id = request.POST.get("id")
        classname = request.POST.get("classname")
        sq.update_data(id,classname)
        return redirect('/classes/')


# 寫好路由關係映射
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^classes',classes),
    url(r'^add_classes',add_classes),
    url(r'^delete_classes', delete_classes),
    url(r'^update_classes', update_classes),

]

後端頁面代碼

模態對話框

主要經過ajax與後臺進行信息之間的交互，保證頁面不進行刷新

經過給特定標籤綁定click事件，在事件中經過jq對象對頁面進行一些簡單的修改以及與後臺的數據交互

ajax參數

$.ajax({
        type: 'post',    //向後臺提交數據的方式
        url: "/model_add_classes/",  //提交給後臺的url，由於這裏是本站跳轉，直接寫uri就能夠
        data: {"classname": $('.classname').val()},
        //data是向後臺提交的數據，用字典的方式傳送，後臺經過key進行取值
        //success是後臺成功返回信息的狀況，對應函數裏的參數就是後臺發送的數據
        success: function (data) {
            if (data == 'ok') {
                //刷新頁面經過 window.location.href = '/model_classes';
                window.location.href = '/model_classes';
            } else {
                $('.tips').text("用戶名不能爲空");
                {#console.log(data);#}
            }
            ;
        },
    });

後臺與ajax對應的代碼

def model_classes(request):
    sq = Classes()
    classes = sq.select_all()
    # 正常訪問頁面仍是經過render渲染一個頁面回去
    return render(request, "model_classes.html", {"classes": classes})

def model_add_classes(request):
    # 前臺經過ajax傳過來的數據返回的是文本，經過 HttpResponse("ok")
    classname = request.POST.get("classname")
    if classname:
        sq = Classes()
        sq.add_data(classname)
        return HttpResponse("ok")
    else:
        return HttpResponse("notok")

def check_classes(request):
    id = request.POST.get("id")
    sq = Classes()
    classes = sq.select_one(id)
    return HttpResponse(classes['name'])

def model_update_classes(request):
    id = request.POST.get("id")
    classname = request.POST.get("classname")
    sq = Classes()
    sq.update_data(id,classname)
    return HttpResponse("ok")

urlpatterns = [
    url(r'^model_classes',model_classes),
    url(r'^model_add_classes',model_add_classes),
    url(r'^check_classes',check_classes),
    url(r'^model_update_classes',model_update_classes)]