the django travel（two）分頁

時間 2019-11-18

原文原文鏈接

一：django路由系統：javascript

注意：咱們在urls.py中定義url的時候，能夠加$和不加$,區別的是：加$正則匹配的時候，好比：'/index/$'只能匹配'/index/'這樣的url 不能匹配'/index/1'。而不加$的能夠進行模糊匹配的。css

至於加不加 $由本身的需求來定。html

a)在項目中路由默認配置在總項目下得urls.py文件中，以下：前端

 1 from django.conf.urls import url
 2 from django.contrib import admin
 3 from ops import views
 4 urlpatterns = [
 5     # url(r'^admin/', admin.site.urls),
 6     url(r'^login/', views.login),
 7     url(r'^regis/', views.regis),
 8     url(r'^home/', views.home),
 9     url(r'^menu/', views.menu),
10     url(r'^jquery/', views.jquery),
11     url(r'^hostinfo/', views.host_son),
12     url(r'^detail/', views.detail),
13     url(r'^input/', views.input),
14     url(r'^delete/', views.delete),
15     url(r'^chan_pwd/', views.chan_pwd),
16     url(r'', views.login),
17 ]

當客戶端鏈接到達django底層的socket時候，經過這個路由表。來匹配客戶端的url。匹配（正則匹配）順序從上到下，依次匹配，遇到匹配的url，中止匹配。django經過反射來實現，將用戶的請求給views.py模塊對應的函數來處理，函數將客戶端的請求java

處理以後，並返回給客戶端結果，能夠是一個跳轉(redirect）也能夠是返回一個字符串（HttpResponse），也能夠是攜帶變量和頁面(render)。python

固然我也能夠設置一個默認的url，當上面全部的都不匹配的url轉發到默認url：jquery

1  url(r'', views.login),

上面默認將不匹配的url轉發到登陸頁面。ajax

b)動態路由。正則表達式

需求場景：數據庫

1：好比說博客園中：

上圖中咱們能夠看見分頁中，若是頁數不少，咱們不能對每一個頁面寫一個url，這不實際，那怎麼辦呢？經過正則表達式來實現動態路由。

好比上面的分頁咱們能夠這麼寫：

1 url(r'^user_list/(\d+)$', views.user_list),

如上url，經過正則(\d+)來匹配一個數字。來實現匹配多個url族。由後端函數user_list來處理。

1 def user_list(request,uid):
2     print(uid)
3     return HttpResponse(uid)

如url,當請求進來的時候，會自動將後面的(\d+)的值傳給user_list函數。

2：關於分頁：

1 def user_list(reuqest):
2     page=request.GET.get('page')    
3     return HttpResponse(page)

注意:當咱們get請求的時候，好比url如：http://127.0.0.1:8000/hostinfo/?page=1 。?page=1 咱們能夠經過：request.GET.get('page') 獲取page這個變量。分頁就是採用這個功能來實現。

3：動態url傳入多個參數？

1 url(r'^user_list/(\d+)/(\d+)$', views.user_list),

後面函數接收的時候，多個參數接收，他們一一對應的，須要注意！參數之間用/隔開。

1 def user_list(request,uid,uid1):
2     print(uid)
3     return HttpResponse(uid+uid1)

4:動態url傳遞key:value形式：

原理是經過正則表達式來實現：

1  url(r'^user_list/(?P<v1>\d+)/(?P<V2>\d+)$', views.user_list),

?p<v1>表示後面的數字的key值爲v1。後面的函數接收參數須要寫成key形式。

1 def user_list(request,v1,v2):
2     print(v1,v2)
3     return HttpResponse(v1+v2)

這種的狀況下，變量的位置能夠隨意，這個是經過key值來獲取前端傳的參數。

5：路由分級

當咱們的子程序愈來愈多的狀況下，把全部的url放在一個配置文件中，顯着很笨拙也很不容易管理。因此有url分級。經過前端urls.py文件轉到後面的子程序urls.py的程序。進行轉發。

   url(r'^app01/', include("app01.urls")),

app01是咱們註冊的子程序。而後在app01下建立咱們的urls.py文件。能夠經過：hostip:port/app01/index or hostip:port/app01/login進行訪問。

三：Ajax數據提交：

ajax是基於jquey的封裝的，能夠在頁面不刷新的狀況下，進行後臺數據提交驗證，經常使用於非表單的提交的、用戶名和密碼驗證等。

code：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/css/font-awesome-4.6.3/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/css/menu/menu.css">
    <link rel="short icon" href="/static/img/6.png">
{#    <link rel="stylesheet" href="/static/css/bootstrap.min.css">#}
    {% block css %}
    {% endblock %}
</head>
<body>
    <div class="pd_header">
        <span>主機管理後臺</span>
       <a href="/login/"><button class="ko">帳號註銷</button></a>
{#        <div class="ok">登陸用戶:{{ username}}</div>#}
        <div style="clear: both;"></div>
    </div>
    <div class="menu">
        <div class="body">
            <p class="menu2" onclick="showmen(this);"><i class="fa fa-desktop left" aria-hidden="true"></i>
                主機管理<i class="fa fa-angle-double-down a" aria-hidden="true"></i></p>
            <div class="hide b">
            <p class="d">
                <i class="fa fa-angle-right c" aria-hidden="true"></i>
                <a id="1" style="border: 0"  href="/hostinfo/?page=1">主機信息</a>
            </p>
            <p><i class=" fa fa-angle-right c" aria-hidden="true"></i>
                <a id="2" style="border: 0" href="/home/?page=1" >信息修改</a></p>
            </div>
        </div>
        <div class="body">
            <p class="menu2" onclick="showmen(this)"><i class="fa fa-apple left" aria-hidden="true"></i>
                資產管理 <i class="fa fa-angle-double-down a" aria-hidden="true"></i></p>
            <div class="hide b">
            <p class="d"> <i class="fa fa-angle-right c" aria-hidden="true"></i>
                <a id="3"  style="border: 0" href="/input/" >資產錄入</a></p>
            <p><i class="fa fa-angle-right c" aria-hidden="true"></i>
                <a id="4" style="border: 0" href="#" >xx</a></p>
            </div>
        </div>
        <div class="body">
            <p class="menu2" onclick="showmen(this)"> <i class="fa fa-user left" aria-hidden="true"></i>
                用戶管理 <i class="fa fa-angle-double-down a" aria-hidden="true"></i></p>
            <div class="hide b">
            <p class="d"><i class="fa fa-angle-right c" aria-hidden="true"></i>
                <a id="5" style="border: 0" href="/chan_pwd/" >密碼修改</a></p>
            <p class="d"><i class="fa fa-angle-right c " aria-hidden="true"></i>
                <a id="6" style="border: 0" href="#" >待定</a></p>
            </div>
        </div>
    </div>
    <div class="pd_content">
     {% block content %} {% endblock %}
    {% block div_page %} {% endblock %}
    </div>

    <script src="/static/js/homejs/jquery-1.12.4.js"></script>
    {% block js  %}
    {% endblock %}
    <script>
        function showmen(obj){

            $(obj).next().removeClass('hide');
            $(obj).parent().siblings().find('.b').addClass('hide');
        }
        function CheckVal(ths){
            if ($('#test').val().length==0){
                var tag=document.createElement('div');
                tag.innerText='輸入不能爲空';
                $(ths).after(tag);
                return false
            }
        }
        function ShowMenu(ths){
            $('#1').parent().parent().removeClass('hide');
            $('#1').parent().addClass('active');
                }
        function RemoveS(ths){
            $(ths).siblings().remove('div')
            }
        function CatchInfo(ths){
            var id=$(ths).parent().siblings().first().text();
            $.ajax(
                    {
                        url:"/detail/",
                        type:"POST",
                        data:{
                            'id':id
                        }

                    }
            )
        }
        function Delete(ths){
            /*
            功能：該函數主要判斷用戶刪除數據返回狀況。
            */
            var a=[];
        $('input').each(
                function(){
                    if ($(this).prop('checked')){
                        var id=$(this).parent().next().text().trim();
                        $(this).parent().parent().remove();
                        $.ajax({
                            url:"/delete/",
                            type:"POST",
                            data:{"id":id},
                            success:function(data){
                                if(data=='1'){
                                    a.push(data)

                                }else {
                                    a.push('2')
                                }
                            }
                        })
                    }
                }
        );
            if($.inArray('2',a)==-1){
                console.log(a);
               alert("刪除成功！！");
            }

    }
        function Comm_Data(ths){
            var b=[];
            $('input[type=checkbox]').each(
              function(i){
                  var a=[];
                  if ($(this).prop('checked')){
                      $(this).parent().siblings().each(
                              function(){
                                  if($(this).attr('edit')){
                                      console.log($(this).children().val());
                                      a.push($(this).children().val())
                                  }
                              }

                      );
                      console.log(a);
                      $.ajax(
                              {
                                  url:'/home/',
                                  type:'POST',
                                  traditional :true,
                                  data:{"uu":a},
                                  success:function(data){
                                    if (data=='1') {
                                        b.push('1')
                                    }else {
                                        b.push('2')
                                    }
                                  }
                              }
                      )
                  }
              }
            );
            if ($.inArray('2',b)==-1){
                console.log(b);
                alert('數據更新成功！')
            }
        }
    {% block js1 %}
    {% endblock %}
    </script>
</body>
</html>

其中：

 1         function Delete(ths){
 2             /*
 3             功能：該函數主要判斷用戶刪除數據返回狀況。
 4             */
 5             var a=[];
 6         $('input').each(
 7                 function(){
 8                     if ($(this).prop('checked')){
 9                         var id=$(this).parent().next().text().trim();
10                         $(this).parent().parent().remove();
11                         $.ajax({
12                             url:"/delete/",/*提交的url，即向哪一個url提交數據。
13                             type:"POST",/*提交數據的方法。
14                             data:{"id":id},/*提交的數據類型。注意是字典形式。
15                             success:function(data){/*data是後臺返回的數據，success後面的函數，是提交數據以後接收後端數據進行操做的函數。自動執行。能夠在這裏進行判斷後臺是否正確處理咱們的請求。
16                                 if(data=='1'){
17                                     a.push(data)
18 
19                                 }else {
20                                     a.push('2')
21                                 }
22                             }
23                         })
24                     }
25                 }
26         );
27             if($.inArray('2',a)==-1){
28                 console.log(a);
29                alert("刪除成功！！");
30             }
31 
32     }

注意的是：success:function(data){}中的data是後臺返回的數據若是是render返回的頁面那data就是文件的字符串頁面若是是HttpResponse,那data就是接收的字符串。

後端接收：接收數組的時候須要getlist:request.POST.getlist('uu')

 1 def home(request):
 2     '''
 3     功能：該函數主要功能是後臺修改數據頁面。
 4     :param request:
 5     :return:返回用戶請求信息。
 6     '''
 7     if request.method=='GET':
 8         count=Hostinfo.objects.all().count()
 9         page_po=request.GET.get('page',None)
10         page_obj=div_page.Pager(page_po)
11         start=page_obj.start
12         end=page_obj.end
13         page=page_obj.page_str(count,'/home/')
14         host_obj=Hostinfo.objects.all()[start:end]
15         return render(request, 'host_mod_son.html',{'data':host_obj,'page_str':page})
16     # return render(request, 'host_mod_son.html',{'data':host_obj,'page_str':page})
17     elif request.method=='POST':
18         update_list=request.POST.getlist('uu')
19         print(update_list)
20         id=update_list[0]
21         hostname=update_list[1]
22         ip=update_list[2]
23         status=update_list[3]
24         host_info=Hostinfo.objects.filter(id=id)
25         if hostname!=host_info[0].host:
26             Hostinfo.objects.filter(id=id).update(host=hostname)
27         if  ip !=host_info[0].ip:
28             Hostinfo.objects.filter(id=id).update(ip=ip)
29         if  status !=host_info[0].stat:
30             Hostinfo.objects.filter(id=id).update(stat=status)
31         return  HttpResponse('1')

注意：當咱們用ajax傳數組的時候須要加入：traditional :true,

 1                       $.ajax(
 2                               {
 3                                   url:'/home/',
 4                                   type:'POST',
 5                                   traditional :true,/*傳遞數組的時候使用。
 6                                   data:{"uu":a},
 7                                   success:function(data){
 8                                     if (data=='1') {
 9                                         b.push('1')
10                                     }else {
11                                         b.push('2')
12                                     }
13                                   }
14                               }
15                       )

多條數據提交：

<script>
        function Ajaxsubmit(){
            var array_users = [
                {'username':'evil','weight':18},
                {'username':'liu','weight':18},
                {'username':'evil_liui','weight':18},

            ];
            $.ajax({
                url:"/ajax_mdata/",
                type:'POST',
                data:{data:array_users},
                success:function(arg){

                }
            })
        }
    </script>

上面只是簡單的返回數據，爲了返回的數據更規範化：

 1 import json
 2 
 3 def ajax_data(request):
 4     ret = {'status':True,'error':''}
 5     try:
 6         print request.POST
 7     except Exception,e:
 8         ret['status'] = False
 9         ret['error'] = str(e)
10     #在上面若是他出錯我就把他ret[status] = False
11     return HttpResponse(json.dumps(ret))

html：

 1 <script>
 2         function Ajaxsubmit(){
 3             var array_users = [
 4                 {'username':'evil','arg':18},
 5                 {'username':'liu','arg':18},
 6                 {'username':'evil_liu','arg':18},
 7 
 8             ];
 9             $.ajax({
10                 url:"/ajax_mdata/",
11                 type:'POST',
12                 tradition: true,
13                 data:{data:JSON.stringify(array_users)},
14                 success:function(arg){
15                     var callback_dict = $.parseJSON(arg);//這裏把字符串轉換爲對象
16                     //而後我們就能夠判斷
17                     if(callback_dict){//執行成功了
18                         //簡單測試
19                         alert('提交成功')
20                     }else{//若是爲False執行失敗了
21                         alert(callback_dict.error)
22                     }
23 
24                 }
25             })
26         }
27     </script>

四：模板

1：母板：

如上的後臺管理頁面，點擊左側的菜單，不管點擊那個子菜單，整個頁面只有C部分進行變換，咱們把A B部分叫作母板，變化的C叫作子板。

咱們建立一份母板，而後子板繼承母板既可。之後不用在寫母板部分的代碼，相似有python中的模塊導入的意思。

母板：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" href="/static/css/font-awesome-4.6.3/css/font-awesome.min.css">
 7     <link rel="stylesheet" href="/static/css/menu/menu.css">
 8     <link rel="short icon" href="/static/img/6.png">
 9     {% block css %}
10     {% endblock %}
11 </head>
12 <body>
13     <div class="pd_header">
14         <span>主機管理後臺</span>
15        <a href="/login/"><button class="ko">帳號註銷</button></a>
16         <div style="clear: both;"></div>
17     </div>
18     <div class="menu">
19         <div class="body">
20             <p class="menu2" onclick="showmen(this);"><i class="fa fa-desktop left" aria-hidden="true"></i>
21                 主機管理<i class="fa fa-angle-double-down a" aria-hidden="true"></i></p>
22             <div class="hide b">
23             <p class="d">
24                 <i class="fa fa-angle-right c" aria-hidden="true"></i>
25                 <a id="1" style="border: 0"  href="/hostinfo/?page=1">主機信息</a>
26             </p>
27             <p><i class=" fa fa-angle-right c" aria-hidden="true"></i>
28                 <a id="2" style="border: 0" href="/home/?page=1" >信息修改</a></p>
29             </div>
30         </div>
31         <div class="body">
32             <p class="menu2" onclick="showmen(this)"><i class="fa fa-apple left" aria-hidden="true"></i>
33                 資產管理 <i class="fa fa-angle-double-down a" aria-hidden="true"></i></p>
34             <div class="hide b">
35             <p class="d"> <i class="fa fa-angle-right c" aria-hidden="true"></i>
36                 <a id="3"  style="border: 0" href="/input/" >資產錄入</a></p>
37             <p><i class="fa fa-angle-right c" aria-hidden="true"></i>
38                 <a id="4" style="border: 0" href="#" >xx</a></p>
39             </div>
40         </div>
41         <div class="body">
42             <p class="menu2" onclick="showmen(this)"> <i class="fa fa-user left" aria-hidden="true"></i>
43                 用戶管理 <i class="fa fa-angle-double-down a" aria-hidden="true"></i></p>
44             <div class="hide b">
45             <p class="d"><i class="fa fa-angle-right c" aria-hidden="true"></i>
46                 <a id="5" style="border: 0" href="/chan_pwd/" >密碼修改</a></p>
47             <p class="d"><i class="fa fa-angle-right c " aria-hidden="true"></i>
48                 <a id="6" style="border: 0" href="#" >待定</a></p>
49             </div>
50         </div>
51     </div>
52     <div class="pd_content">
53      {% block content %} {% endblock %}
54     {% block div_page %} {% endblock %}
55     </div>
56 
57     <script src="/static/js/homejs/jquery-1.12.4.js"></script>
58     {% block js  %}
59     {% endblock %}
60     </body>
61 </html>

子板：

 1 {% extends 'layout/menu.html' %}
 2 {% block content %}
 3     <div>
 4     <h3>數據錄入</h3>
 5 </div>
 6     <form action="/input/" method="post">
 7         <table class="table2">
 8             <tr>
 9                 <th>IP</th>
10                 <th>port</th>
11                 <th>status</th>
12                 <th>hostname</th>
13             </tr>
14             <tr>
15                 <td><input lable="IP" onfocus="Remove(this)" name="IP" type="text" /></td>
16                 <td><input  lable="port" onfocus="Remove(this)" name="port" type="text" ></td>
17                 <td><input  lable="status" onfocus="Remove(this)" name="status" type="text"/></td>
18                 <td><input lable="hostname" onfocus="Remove(this)" name="hostname" type="text"/></td>
19             </tr>
20         </table>
21         <input type="submit" style="font-family:微軟雅黑" onclick=" return Make(this)" value="提交數據" />
22         <p style="color: red;font-family:「微軟雅黑">{{ messgae }}</p>
23     </form>
24 {% endblock %}
25 {% block js %}
26     <script src="/static/js/input.js"></script>
27 {% endblock %}
28 {% block js1 %}
29     function ShowMenu1(ths){
30     $('#3').parent().parent().removeClass('hide');
31     $('#3').parent().addClass('active');
32         }
33     ShowMenu1()
34 {% endblock %}

效果：

須要注意：

1：一個母板中，須要3個地方是由子板來進行自行定義的：

a:子板的CSS

b:子板的js

c:子板的內容。

繼承的母板的語法：

1 {% extends 'layout/menu.html' %}

母板中的可被定義部門的書寫方式：

1     {% block js  %}
2     {% endblock %}

子板能夠根據母板定義的block塊的名字進行引用：

1 {% block js %}
2     <script src="/static/js/input.js"></script>
3 {% endblock %}

規範：

咱們能夠建立一個include目錄，下面建立須要的html文件，裏面寫上要導入的內容。

1 <h1>輸入組合</h1>
2 <input type="text"/>
3 <input type="text"/>
4 <input type="text"/>
5 <input type="text"/>
6 <input type="text"/>

而後在html中導入

1 {% extends 'master/master_templates.html' %}
2 
3 {% block content %}
4     <h1>xxxxi</h1>
5     {% include 'include/simple_input.html' %}
6 {% endblock %}

五：分頁：

分頁思想：

1：須要考慮每頁須要展現多少條數據。

2：一共多少條數據，須要多少頁。

3：每一個頁面展現多少頁腳。

4：若是當前頁小於頁面展現的頁腳，該怎麼去展現。

代碼：

 1 #!/usr/bin/env python
 2 #-*- coding:utf-8 -*-
 3 #evil_liu
 4 from django.utils.safestring import mark_safe
 5 
 6 class Pager():
 7     '''
 8     功能：該類是實現分頁功能。
 9     '''
10     def __init__(self,current_page):
11         self.current_page = int(current_page)
12     #把方法僞形成屬性(1)
13     @property
14     def start(self):
15         return (self.current_page-1)*10
16     @property
17     def end(self):
18         return self.current_page*10
19 
20     def page_str(self,all_item,base_url):
21         '''
22         功能：該函數是對分頁計算以及字符串的拼接。
23         :param all_item: 數據庫中數據條目總數。
24         :param base_url: 分頁請求url。
25         :return: 返回分頁的字符串變量。
26         '''
27         all_page, div = divmod(all_item, 10)
28 
29         if div > 0:
30             all_page += 1
31 
32         pager_list = []
33 
34         if all_page <= 10:
35             start = 1
36             end = all_page
37         else:
38             if self.current_page <= 5:
39                 start = 1
40                 end = 10 + 1
41             else:
42                 start = self.current_page - 5
43                 end = self.current_page + 6
44                 if self.current_page + 6 > all_page:
45                     start = all_page - 10
46                     end = all_page + 1
47 
48         #把頁面動態起來傳入起始和結束
49         for i in range(start, end):
50 
51             #判斷是否爲當前頁
52             if i == self.current_page:
53                 temp = '<a style="color:red;font-size:26px;padding: 5px" href="%s?page=%d">%d</a>' % (base_url,i,i)
54             else:
55                 temp = '<a style="padding: 5px" href="%s?page=%d">%d</a>' % (base_url,i,i)
56 
57             # 把標籤拼接而後返回給前端
58             pager_list.append(temp)
59 
60         #上一頁
61         if self.current_page > 1:
62             pre_page = '<a href="%s?page=%d">上一頁</a>' % (base_url, self.current_page - 1)
63         else:
64             # javascript:void(0) 什麼都不幹
65             pre_page = '<a href="javascript:void(0);">上一頁</a>'
66         #下一頁
67         if self.current_page >= all_page:
68             next_page = '<a href="javascript:void(0);">下一頁</a>'
69         else:
70             next_page = '<a href="%s?page=%d">下一頁</a>' % (base_url, self.current_page + 1)
71 
72         pager_list.insert(0, pre_page)
73         pager_list.append(next_page)
74 
75         return mark_safe("".join(pager_list))

1. Travel around the UK
2. Travel網頁設計
3. 1030 Travel Plan (30 分)
4. The Two Routes
5. The First two weeks
6. Django Form two
7. Django分頁
8. Learning to Estimate the Travel Time（翻譯）
9. Remember the following two principles
10. USACO2.4 The Tamworth Two(ttwo)
更多相關文章...
• XSL-FO 頁面 - XSL-FO 教程
• jQuery Mobile 頁面 - jQuery Mobile 教程
• Git五分鐘教程
• 算法總結-二分查找法

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。