Django 實現增刪改查、登陸功能

時間 2019-11-12

標籤 django 實現增刪登陸功能欄目 Python 简体版

原文原文鏈接

******************************華麗分割線******************************javascript

1、【實現註冊功能】css

一、先創建註冊表，在django項目下找到對應App下的models.py，以下圖html

二、在models.py編寫註冊所須要的字段信息，並同步到數據庫，以下圖：前端

1）python manage.py makemigration App名稱html5

2）python manage.py makemigrationjava

3）python manage.py migratepython

執行成功後，若是沒報錯的話，就表示數據庫建立成功，查看數據庫表，以下圖：jquery

建立成功後，migrate文件下下也會有對應的相關文件，以下圖：ajax

廢話這麼久了，準備工做也差很少了，開始在前端頁面編輯表單並提交，以下圖：sql

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://v3.bootcss.com/examples/signin/signin.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <script src="http://v3.bootcss.com/assets/js/ie-emulation-modes-warning.js"></script>
    <script src="http://v3.bootcss.com/assets/js/ie10-viewport-bug-workaround.js"></script>
</head>
<body>

<div class="container">
    <form class="form-signin " action="adduser" method="post">

        <input type="hidden" name="mark" value="1">
        <label class="">帳號:</label> <label style="color: red;">*</label>
        <input type="text" name="user_name" class="form-control" placeholder="Username" required>
        <label class="">密碼:</label> <label style="color: red;">*</label>
        <input type="password" name="user_password" class="form-control" placeholder="Password" required>

        <label class="">郵箱:</label> <label style="color: red;">*</label>
        <input type="email" name="user_email" class="form-control" placeholder="email" required>

        <label class="">手機號碼:</label> <label style="color: red;">*</label>
        <input type="text" name="user_numbers" class="form-control" placeholder="number" required>

        <label class="">地址:</label>
        <textarea rows="3" name="user_address" class="form-control"> </textarea>

        <label class="">身份證號:</label>
        <input type="text" name="user_cards" class="form-control">
        <br>
        <button class="btn btn-lg btn-primary btn-block" type="submit">提交</button>
        {#        <button class="btn btn-lg btn-success btn-block" type="button" onclick="return openPage()";>註冊</button>#}
        <button class="btn-block btn-success btn-lg text-center" onclick="history.back()">返回</button>
    </form>
</div> <!-- /container -->
</body>
</html>

頁面效果以下圖：

一、填寫完必填項後，進行提交，指定form表單method='post' action='adduser'

PS:action 指定調整會在urls.py路由中分配，以下圖：

指定到views（業務邏輯處理）中的add_user方法進行處理，以下圖：

'''添加註冊信息'''


def add_user(request):
    if request.method == "POST":
        print request.POST
        mark = request.POST["mark"]
        username = request.POST["user_name"]
        password = request.POST["user_password"]
        email = request.POST["user_email"]
        address = request.POST["user_address"]
        cards = request.POST["user_cards"]
        numbers = request.POST["user_numbers"]
        # print username, password, email, address, cards, numbers
        models.User.objects.create(user_name=username, user_password=password, user_email=email, user_address=address,
                                   user_cards=cards, user_numbers=numbers)
        print u"註冊成功！"
        if mark == "0":
            lists = models.User.objects.filter().all()  # order_by('?')[0:4] 切片隨機取4條數據
            context = {
                "user_list": lists

            }
            return render(request, "home.html", context=context)
        else:
            context = {
                'context': u"註冊成功請登陸！"
            }
            return render(request, "login.html", context=context)

添加完成後，咱們render渲染login.html頁面：return render(request, "login.html", context=context)

到這裏，咱們的註冊功能就已經完成了。

******************************華麗分割線******************************

2、【實現登陸功能】

一、上代碼，以下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
    <title>請您登陸</title>
    <link href="http://v3.bootcss.com/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <link href="http://v3.bootcss.com/examples/signin/signin.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="http://v3.bootcss.com/assets/js/ie-emulation-modes-warning.js"></script>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <![endif]-->
</head>
<body>

<div class="container">
    <form class="form-signin " action="test-url-login" method="post">
        {% if context %}
            <div class="alert alert-warning">
                <a href="#" class="close" data-dismiss="alert">
                    &times;
                </a>
                <strong>{{ context }}</strong>
            </div>
        {% else %}
        {% endif %}
        <h2 class="form-signin-heading"></h2>
        <label for="inputEmail" class="sr-only">帳號:</label>
        <input type="text" name="user_name" class="form-control" placeholder="Username" required>
        <label for="inputPassword" class="sr-only">密碼:</label>
        <input type="password" name="user_pwd" class="form-control" placeholder="Password" required>
        <div class="checkbox">
            <label>
                <input type="checkbox" value="remember-me"> 記住我
                <label>
                    <a>忘記密碼？</a>
                </label>
            </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">登陸</button>
        <a class="btn-block btn-success btn-lg text-center" href="{% url 'test-url-register' %}">註冊</a>
    </form>

</div>
<script src="http://v3.bootcss.com/assets/js/ie10-viewport-bug-workaround.js"></script>
<script type="text/javascript">
    function openPage() {
        window.location.href = "/register.html";
    }
</script>
</body>
</html>

因爲也是一個form表單，咱們就直接submit，action="test-url-login" method="post"

action指定是的test-url-login 這個url路徑，那麼咱們就去urls.py中去配置，見圖：

from django.conf.urls import url
from django.contrib import admin

import testmodel.views as views

urlpatterns = [
    url(r'adduser', views.add_user),  # 註冊頁面,添加用戶信息
    url(r'test-url-login', views.user_login, name="test-url-login"),  # 登陸請求頁面

在views.py中找到新建一個user_login方法，以下圖：

'''登陸頁面'''


def user_login(request):
    if request.POST:
        user_name = request.POST["user_name"]
        user_pwd = request.POST["user_pwd"]
        print request.POST
        # 獲取的表單數據與數據庫進行比較
        user = models.User.objects.filter(user_name__exact=user_name, user_password__exact=user_pwd)
        # 查詢所有人員信息
        user_list = models.User.objects.filter().all()
        print "user_list%s=" % user_list
        if user:
            context = {
                'context': u"登陸成功",
                'user': user_name,
                'user_list': user_list
            }
            return render(request, "home.html", context=context)
        else:
            context = {
                'context': u"登陸不成功，請檢查帳號、密碼是否正確！"
            }
            return render(request, "login.html", context=context)
    return render(request, "login.html")

這裏要注意的是：django與以往的java處理方式不同，例如：models.User.objects.filter(user_name__exact=user_name, user_password__exact=user_pwd)，

在這裏我提一下django的各類查詢條件的關鍵字：以下

# Django 各類條件查詢關鍵字
# __exact  精確等於 like ‘aaa’
# __iexact 精確等於 忽略大小寫 ilike 'aaa'
# __contains 包含like '%aaa%'
# __icontains 包含 忽略大小寫 ilike ‘%aaa%’，可是對於sqlite來講，contains的做用效果等同於icontains。
# __gt  大於
# __gte 大於等於
# __lt 小於
# __lte 小於等於
# __in 存在於一個list範圍內
# __startswith 以…開頭
# __istartswith 以…開頭 忽略大小寫
# __endswith 以…結尾
# __iendswith 以…結尾，忽略大小寫
# __range 在…範圍內
# __year 日期字段的年份
# __month 日期字段的月份
# __day 日期字段的日
# __isnull=True/False

就是查詢數據庫有沒有已經存在的帳號名和密碼，若是已經存在，那麼就登陸成功，咱們定義一個字典context，登陸成功須要傳到home.html中，以下：

if user:
    context = {
        'context': u"登陸成功",
        'user': user_name,
        'user_list': user_list
    }
    return render(request, "home.html", context=context)

若是輸入錯誤的帳號密碼，咱們就定義一句話響應給前端並在前端顯示。

後臺代碼：

else:
    context = {
        'context': u"登陸不成功，請檢查帳號、密碼是否正確！"
    }
    return render(request, "login.html", context=context)

前端代碼：

{% if context %}
    <div class="alert alert-warning">
        <a href="#" class="close" data-dismiss="alert">
            &times;
        </a>
        <strong>{{ context }}</strong>
    </div>
{% else %}
{% endif %}

運行效果以下。

輸入正確的帳號、密碼，點擊登陸，則跳轉到home.html頁面，以下圖：

附home.html代碼，以下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>客戶關係管理系統</title>
    <!-- Bootstrap core CSS -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="http://v3.bootcss.com/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="http://v3.bootcss.com/examples/justified-nav/justified-nav.css" rel="stylesheet">

    <link href="http://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" ref="stylesheet">
    <link href="http://cdn.bootcss.com/toastr.js/latest/css/toastr.css" ref="stylesheet">
    <script src="http://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>
    <script src="http://cdn.bootcss.com/toastr.js/latest/toastr.min.js"></script>

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="http://v3.bootcss.com/assets/js/ie-emulation-modes-warning.js"></script>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script src="http://v3.bootcss.com/assets/js/ie10-viewport-bug-workaround.js"></script>


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>

    <![endif]-->

</head>
<body>

<script type="text/javascript">

    {#    toastr.error("Error");#}
    {#    toastr.warning("只能選擇一行進行編輯");#}
    {#    toastr.info("info");#}


    function deleteUser(id) {
        if (window.confirm("您確認刪除該條記錄嗎？")) {
            var post_data = {
                "userid": id
            };

            $.ajax({
                url: 'user_delete',
                type: 'POST',
                data: post_data,
                dataType: 'json',
                success: function (data) {
                    alert(data["status"]);
                    window.location.reload(true);
                    //window.location.reload(true);　//數據刪除後，進行頁面刷新
                    //window.location.reload(true);
                }

            });
        } else {

        }

    }

    //註冊新增按鈕的事件
    function addinfo() {
        $("#myModalLabel").text("新增");
        $("#myModal").modal();
    }


    function close() {
        $("#myModal").window.close();
    }


    $("#selectAll").click(function () {
        alert("22121");
    })

    //批量選擇checkbox
    function seltAll() {
        var chckBoxSign = document.getElementById("selectAll");       //ckb 全選/反選的選擇框id
        var chckBox = document.getElementsByName("chckBox");    //全部的選擇框其那麼都是chckBox
        var num = chckBox.length;
        if (chckBoxSign.checked) {
            for (var index = 0; index < num; index++) {
                chckBox[index].checked = true;
            }
        } else {
            for (var index = 0; index < num; index++) {
                chckBox[index].checked = false;
            }
        }
    }

    //批量刪除數據
    function deleteSelect() {
        var chckBox = document.getElementsByName("chckBox");
        var num = chckBox.length
        var ids = "";
        for (var index = 0; index < num; index++) {
            if (chckBox[index].checked) {
                ids += chckBox[index].value + ",";
            }
        }
        if (ids != "") {
            ids = ids.substring(0, ids.length - 1); //S 刪除字符串最後一個字符的幾種方法
            ids = {
                'ids': ids
            }
            if (window.confirm("肯定刪除所選記錄？")) {
                $.ajax({
                    type: "post",
                    url: 'deledeSelect', //要自行刪除的action
                    data: ids,
                    dataType: 'json',
                    success: function (data) {
                        if (data["success"]) {
                            alert("刪除成功");
                            window.location.reload(true);
                        }
                    },
                    error: function (data) {
                        alert("系統錯誤，刪除失敗");
                    }
                });
            }
        } else {
            alert("請選擇要刪除的記錄");
        }
    }


    //清空查詢條件
    function empty(){
        $("#user_name").val("");
        $("#user_email").val("");
        $("#user_address").val("");
        $("#user_cards").val("");
        $("#user_numbers").val("");
        $("#datetime_picker").val("");
        $("#datetime_end").val("");
    }



</script>

<div class="container">
    <!-- The justified navigation menu is meant for single line per list item.
         Multiple lines will require custom code not provided by Bootstrap. -->
    <div class="masthead">

        <h4 style="color: red">歡迎您， {{ user }} &nbsp;<a href="{% url 'home_url_login' %}">註銷</a></h4>

        <nav>
            <ul class="nav nav-justified ">
                <li class="active"><a href="#">人員管理</a></li>
                <li><a href="#">項目管理</a></li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">評審管理</a>
                    <ul class="dropdown-menu">
                        <li>11</li>
                        <li>11</li>
                        <li>11</li>
                        <li>11</li>
                    </ul>
                </li>
                <li><a href="#">客戶管理</a></li>
                <li><a href="#">報表管理</a></li>
                <li><a href="#">系統管理</a></li>
            </ul>
        </nav>
    </div>


    <div>
        <table class="table table-bordered">
            <tr>
                <td style="width: auto">姓名：</td>
                <td class="text-left" style="width: auto"><input type="text" name="user_name" id="user_name"></td>
                <td>Email：</td>
                <td class="text-left"><input type="text" name="user_email" id="user_email"></td>
                <td>地址：</td>
                <td class="text-left"><input type="text" name="user_address" id="user_address"></td>
            </tr>

            <tr>
                <td style="width: auto">身份證號：</td>
                <td class="text-left"><input type="text" name="user_cards" id="user_cards"></td>
                <td>手機號碼：</td>
                <td class="text-left"><input type="text" name="user_numbers" id="user_numbers"></td>
                <td>建立時間：</td>
                <td class="text-left">
                    <input type="text" name="user_numbers" id="datetime_picker" data-date-format="yyyy-mm-dd hh:ii"
                           style="width: auto" id="datetime_picker"> -
                    <input type="text" name="user_numbers" style="width: auto" id="datetime_end"></td>
            </tr>
        </table>
        <div class="text-center">
            <button type="button" class="btn btn-info" onclick="addinfo()">
                <span class="glyphicon glyphicon-file">新增</span>
            </button>

            <a type="button" class="btn btn-danger" onclick="deleteSelect();">
                <span class="glyphicon glyphicon-remove">刪除</span>
            </a>

            <button type="button" class="btn btn-success ">
                <span class="glyphicon glyphicon-search">查詢</span>
            </button>

            <button type="button" class="btn btn-primary" onclick="empty();">
                <span class="glyphicon glyphicon-trash">清空</span>
            </button>

            <button type="button" class="btn btn-info">
                <span class="glyphicon glyphicon-save">導出</span>
            </button>

            <div>
                <br>
            </div>
            <div style="width:100%;">

                <table class="table text-left">
                    <thead>
                    <tr class="alert alert-success">
                        <strong>
                            <th><input type="checkbox" id="selectAll" onclick="seltAll();"></th>
                            <th>姓名</th>
                            <th>密碼</th>
                            <th>Email</th>
                            <th>地址</th>
                            <th>身份證號</th>
                            <th>手機號碼</th>
                            <th>操做</th>
                        </strong>
                    </tr>
                    </thead>
                    <thead>
                    {% for foo in user_list %}
                        <tr class="alert-info">
                            <td ><input type="checkbox" value="{{ foo.id }}" name="chckBox"></td>
                            <td>{{ foo.user_name }}</td>
                            <td>{{ foo.user_password }}</td>
                            <td> {{ foo.user_email }}</td>
                            <td> {{ foo.user_address }}</td>
                            <td> {{ foo.user_cards }}</td>
                            <td> {{ foo.user_numbers }}</td>
                            <td>
                                <strong><a href="#">修改</a></strong>
                                <strong> <a href="#" onclick="deleteUser({{ foo.id }})">刪除</a></strong>
                            </td>
                        </tr>
                    {% endfor %}
                    </thead>


                </table>
                <ul class="pagination pagination-lg">
                    <li><a>首頁</a></li>
                    <li><a>></a></li>
                    <li class="disabled"><a>1</a></li>
                    <li><a>2</a></li>
                    <li><a>3</a></li>
                    <li><a>4</a></li>
                    <li><a>5</a></li>
                    <li><a><</a></li>
                    <li><a>尾頁</a></li>
                </ul>
            </div>
        </div>

        <!-- Jumbotron -->
        <div class="jumbotron">
            {#        <h1>Marketing stuff!</h1>#}
            <p><a class="btn btn-lg btn-success" href="#" role="button">Good...</a></p>
        </div>

        <!-- Example row of columns -->
        <div class="row">

        </div>
        {#      <div class="row">#}
        {#        <div class="col-lg-4">#}
        {#          <h2>Safari bug warning!</h2>#}
        {#          <p class="text-danger">As of v9.1.2, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p>#}
        {#          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>#}
        {#          <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>#}
        {#        </div>#}
        {#        <div class="col-lg-4">#}
        {#          <h2>Heading</h2>#}
        {#          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>#}
        {#          <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>#}
        {#       </div>#}
        {#        <div class="col-lg-4">#}
        {#          <h2>Heading</h2>#}
        {#          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>#}
        {#          <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>#}
        {#        </div>#}
        {#      </div>#}

        <!-- Site footer -->
    </div> <!-- /container -->

    <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myModalLabel">新增</h4>
                </div>
                <form class="form-signin " action="adduser" method="post">
                    <input type="hidden" name="mark" value="0">
                    <label class="">帳號:</label> <label style="color: red;">*</label>
                    <input type="text" name="user_name" class="form-control" placeholder="Username"
                           required>
                    <label class="">密碼:</label> <label style="color: red;">*</label>
                    <input type="password" name="user_password" class="form-control" placeholder="Password"
                           required>

                    <label class="">郵箱:</label> <label style="color: red;">*</label>
                    <input type="email" name="user_email" class="form-control" placeholder="email" required>

                    <label class="">手機號碼:</label> <label style="color: red;">*</label>
                    <input type="text" name="user_numbers" class="form-control" placeholder="number"
                           required>

                    <label class="">地址:</label>
                    <textarea rows="3" name="user_address" class="form-control"> </textarea>

                    <label class="">身份證號:</label>
                    <input type="text" name="user_cards" class="form-control">

                    <br>
                    <button class="btn btn-lg btn-primary btn-block" type="submit">提交</button>
                    <button class="btn-block btn-success btn-lg text-center" type="button" onclick="close();">關閉
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
</div>

</body>
</html>

登陸功能，也就完成了。

******************************華麗分割線******************************

3、【實現列表查詢功能】

在登陸成功的時候我就查詢了數據庫，並把結果一併傳給了前端，上代碼，如圖：

# 查詢所有人員信息
user_list = models.User.objects.filter().all()
print "user_list%s=" % user_list
if user:
    context = {
        'context': u"登陸成功",
        'user': user_name,
        'user_list': user_list
    }
    return render(request, "home.html", context=context)

那咱們在前端（home.html）頁面進行迭代顯示，見代碼：

<table class="table text-left">
    <thead>
    <tr class="alert alert-success">
        <strong>
            <th><input type="checkbox" id="selectAll" onclick="seltAll();"></th>
            <th>姓名</th>
            <th>密碼</th>
            <th>Email</th>
            <th>地址</th>
            <th>身份證號</th>
            <th>手機號碼</th>
            <th>操做</th>
        </strong>
    </tr>
    </thead>
    <thead>
    {% for foo in user_list %}
        <tr class="alert-info">
            <td ><input type="checkbox" value="{{ foo.id }}" name="chckBox"></td>
            <td>{{ foo.user_name }}</td>
            <td>{{ foo.user_password }}</td>
            <td> {{ foo.user_email }}</td>
            <td> {{ foo.user_address }}</td>
            <td> {{ foo.user_cards }}</td>
            <td> {{ foo.user_numbers }}</td>
            <td>
                <strong><a href="#">修改</a></strong>
                <strong> <a href="#" onclick="deleteUser({{ foo.id }})">刪除</a></strong>
            </td>
        </tr>
    {% endfor %}
    </thead>
</table>

頁面效果以下：

******************************華麗分割線******************************

4、【實現刪除功能】--單個刪除與批量刪除功能

{% for foo in user_list %}
    <tr class="alert-info">
        <td ><input type="checkbox" value="{{ foo.id }}" name="chckBox"></td>
        <td>{{ foo.user_name }}</td>
        <td>{{ foo.user_password }}</td>
        <td> {{ foo.user_email }}</td>
        <td> {{ foo.user_address }}</td>
        <td> {{ foo.user_cards }}</td>
        <td> {{ foo.user_numbers }}</td>
        <td>
            <strong><a href="#">修改</a></strong>
            <strong> <a href="#" onclick="deleteUser({{ foo.id }})">刪除</a></strong>
        </td>
    </tr>
{% endfor %}

在遍歷的列中，加入deleteUser方法，並把id傳進去，見代碼：

function deleteUser(id) {
    if (window.confirm("您確認刪除該條記錄嗎？")) {
        var post_data = {
            "userid": id
        };
        $.ajax({
            url: 'user_delete',
            type: 'POST',
            data: post_data,
            dataType: 'json',
            success: function (data) {
                alert(data["status"]);
                window.location.reload(true);//數據刪除後，進行頁面刷新
            }
        });
    } else {
        alert("刪除失敗");
    }
}

在urls.py建立對應的路由名稱，以下：

from django.conf.urls import url
from django.contrib import admin

import testmodel.views as views

urlpatterns = [
    url(r'adduser', views.add_user),  # 註冊頁面,添加用戶信息
    url(r'test-url-login', views.user_login, name="test-url-login"),  # 登陸請求頁面
    url(r'user_delete', views.user_delete, name='user_delete'),  # 刪除數據

在views建立user_delete方法，以下：

'''刪除數據'''


def user_delete(request):
    if request.method == "POST":
        userid = request.POST.get('userid')
        print "id = %s" % userid
        status = "刪除成功！"
        result = "Error!"
        deletesql = models.User.objects.filter(id=userid)  # 執行刪除操做
        if deletesql.delete():
            return HttpResponse(json.dumps({
                "status": status
            }))
        else:
            return HttpResponse(json.dumps({
                "result": result
            }))

效果以下：

實現批量刪除：

//批量選擇checkbox
function seltAll() {
    var chckBoxSign = document.getElementById("selectAll");       //ckb 全選/反選的選擇框id
    var chckBox = document.getElementsByName("chckBox");    //全部的選擇框其那麼都是chckBox
    var num = chckBox.length;
    if (chckBoxSign.checked) {
        for (var index = 0; index < num; index++) {
            chckBox[index].checked = true;
        }
    } else {
        for (var index = 0; index < num; index++) {
            chckBox[index].checked = false;
        }
    }
}

//批量刪除數據
function deleteSelect() {
    var chckBox = document.getElementsByName("chckBox");
    var num = chckBox.length
    var ids = "";
    for (var index = 0; index < num; index++) {
        if (chckBox[index].checked) {
            ids += chckBox[index].value + ",";
        }
    }
    if (ids != "") {
        ids = ids.substring(0, ids.length - 1); //S 刪除字符串最後一個字符的幾種方法
        ids = {
            'ids': ids
        }
        if (window.confirm("肯定刪除所選記錄？")) {
            $.ajax({
                type: "post",
                url: 'deledeSelect', //要自行刪除的action
                data: ids,
                dataType: 'json',
                success: function (data) {
                    if (data["success"]) {
                        alert("刪除成功");
                        window.location.reload(true);
                    }
                },
                error: function (data) {
                    alert("系統錯誤，刪除失敗");
                }
            });
        }
    } else {
        alert("請選擇要刪除的記錄");
    }
}

<a type="button" class="btn btn-danger" onclick="deleteSelect();">
    <span class="glyphicon glyphicon-remove">刪除</span>
</a>

在urls.py建立指定路由deledeSelect

url(r'adduser', views.add_user),  # 註冊頁面,添加用戶信息
url(r'test-url-login', views.user_login, name="test-url-login"),  # 登陸請求頁面
url(r'user_delete', views.user_delete, name='user_delete'),  # 刪除數據
url(r'deledeSelect', views.deleteSelect),  # 批量刪除

並在views.py中建立方法：deleteSelect

'''批量刪除'''


def deleteSelect(request):
    print '開始進行批量刪除！'
    ids = request.POST["ids"]
    print ids
    # idstring = ','.join(ids)
    deletesql = models.User.objects.extra(where=['id in (' + ids + ')'])
    context = {
        "success": '刪除成功',
        "error": '刪除失敗'
    }
    if deletesql.delete():
        # return render(request, "home.html", context=context)
        return HttpResponse(json.dumps({
            "success": '刪除成功'
        }))
    else:
        return HttpResponse(json.dumps({
            "error": '刪除失敗'
        }))

====================================================================================

對數據進行增刪改查

查

models.UserInfo.objects.all() #查詢所有

models.UserInfo.objects.all().values('user') #只取user列

models.UserInfo.objects.all().values_list('id','user') #取出id和user列，並生成一個列表

models.UserInfo.objects.get(id=1) #跟進ID進行查詢

models.UserInfo.objects.get(user='yangmv') #跟進用戶進行查詢

成功獲取數據

增

models.UserInfo.objects.create(user='yangmv',pwd='123456')

或者