10、guest_and_sign_page_dev
簡單的嘉賓管理頁面開發
一、頁面點擊【嘉賓】跳轉到嘉賓管理頁面
urls.py 文件添加跳轉路徑javascript
url(r'^guest_manage/',views.guest_manage),
二、views.py文件添加視圖文件
@login_required
def guest_manage(request):
if request.method == "GET":
guest_list = Guest.objects.all()
print(guest_list)
username = request.session.get('user')
return render(request,'guest_manage.html',{'p_user':username,'guests':guest_list})
else:
return render(request,'new_index.html')
三、新建一個簡單的guest_manage.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>guest page</title>
</head>
<body>
<h1> guest page</h1>
</body>
</html>
修改guest_manage.html文件
一、添加頭部信息與bootstraps上面模板引用
<html lang="zh-CN">
<head>
<!-- 頭部的引用-->
{% load bootstrap3 %} <!-- 在setting文件裏面已經引入了bootstrap3，因此直接引用本地的bootstrap3-->
{% bootstrap_css %}
{% bootstrap_javascript %}
<title>Guest Manage</title>
</head>
<!-- 導航欄 -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/guest_manage/">Guest Manage System</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/event_manage/">發佈會</a></li>
<li class="active"><a href="#about">嘉賓</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">{{user}}</a></li>
<li><a href="/logout/">退出</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container theme-showcase" role="main">
<!--列表顯示 -->
<div class="row">
<div class="col-md-6">
<table class="table table-striped">
<thead>
<tr>
<th>id</th>
<th>名稱</th>
<th>手機</th>
<th>Email</th>
<th>簽到</th>
<th>發佈會id</th>
</tr>
</thead>
<tbody>
{% for guest in guests %}
<tr>
<td>{{ guest.id }}</td>
<td>{{ guest.realname }}</td>
<td>{{ guest.phone }}</td>
<td>{{ guest.email }}</td>
<td>{{ guest.sign }}</td>
<td>{{ guest.event }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<!-- 列表分頁器 -->
<div class="pagination">
<span class="step-links">
{% if guests.has_previous %}
<a href="?phone={{ phone }}&page={{ guests.previous_page_number }}">previous</a>
{% endif %}
<span class="current">
Page {{ guests.number }} of {{ guests.paginator.num_pages }}.
</span>
{% if guests.has_next %}
{% if phone %}
<a href="?phone={{ phone }}&page={{ guests.next_page_number }}">next</a>
{% else %}
<a href="?page={{ guests.next_page_number }}">next</a>
{% endif %}
{% endif %}
</span>
</div>
</body>
</html>
二、頁面添加搜索功能表單
guest_manage.html文件添加搜索功能css
<!--發佈會表單-->
<div class="page-header">
<!-- 搜索功能-->
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form" method="get" action="/search_phone/">
<div class="form-group">
<input name="phone" type="text" placeholder="手機號" class="form-control">
</div>
<button type="submit" class="btn btn-success">搜索</button>
</form>
</div><!--/.navbar-collapse -->
</div>
三、完善嘉賓--搜索功能表單
urls.py文件配置跳轉路徑html
url(r'^search_phone/',views.guest_search),
views.py文件添加視圖跳轉java
@login_required
def guest_search(request):
if request.method == "GET":
s_phone = request.GET.get('search_phone')
print(s_phone)
# phone= s_phone 爲精確搜索，name__contains=s_name爲模糊搜索
guest_list = Guest.objects.filter(phone= s_phone)
username = request.session.get('user')
return render(request,'guest_manage.html',{'p_user':username,'guests':guest_list})
else:
return render(request,'new_index.html')
views.py文件中將搜索關鍵字修改成search_name，相對應的html文件也要進行修改關鍵字一致python
樣式調整
調整高度正則表達式
guest_mange.py文件中修改shell
<div id="navbar" class="navbar-collapse collapse" style="padding-top: 80px">
分頁設計
一、分頁器
核心：列表的查詢數據django
二、shell模式聯繫分頁相關
python3 manage.py shell #進入Django的shell模式 >>> from django.core.paginator import Paginator #導入Django模塊下面的分頁類Paginator >>> from sign.models import Guest #導入嘉賓表的全部模型 >>> guest_list = Guest.objects.all() #導出全部的數據 >>> p = Paginator(guest_list,2) #對全部數據進行分頁，每頁顯示2條數據
三、分頁數據統計
>>> p.count #總共有幾條數據 5 >>> p.page_range #分頁的頁數範圍，分別爲第一、二、3頁，因此是1-4的範圍 range(1, 4)
四、展現具體頁面數據
第1頁數據bootstrap
# 進入到shell模式 # >>> p1 = p.page(1) 進入到p1頁面 # >>> p1 打印p1的數據，1，2總的有兩條 # <Page 1 of 3> # >>> p1.object_list 展現出來p1頁面的數據 # <QuerySet [<Guest: 二>, <Guest: 一>]> # >>> for p in p1: for循環p1的數據來展現相對應的數據，這裏必定要是p(p纔會有數據) # ... p.phone 打印電話 # ... p.realname 打印名字 # ... # '16287123' # '二' # '21973127' # '一'
第2頁數據session
# 進入到shell模式 # >>> p = Paginator(guest_list,2) 分頁操做 # >>> p2 = p.page(2) 進入到第2頁 # >>> p2.start_index() 第幾條數據是第2頁的開始 # 3 # >>> p2.end_index() 第幾條數據是第2頁的結束 # 4 # >>> p2.has_previous() 是否有上一頁 # True # >>> p2.has_next() 是否有下一頁 # True # >>> p2.previous_page_number() 上一個的頁數是多少 # 1 # >>> p2.next_page_number() 下一頁的頁數是多少 # 3
將分頁器集成到代碼
一、views.py 頁面
from django.core.paginator import Paginator,EmptyPage,PageNotAnInteger #導入分頁器模塊下面的分頁器類、空字符類、輸入異常類
@login_required
def guest_manage(request):
username = request.session.get('user') #獲取session
if request.method == "GET":
guest_list = Guest.objects.all() #獲取全部的嘉賓數據
paginator = Paginator(guest_list,2) #每頁2條數據進行分頁
page = request.GET.get('page') #接收一個頁數
#由於輸入的頁數中會有錯誤的頁面、空的頁數，不存在的頁面，因此須要作一個異常處理
try:
contacts = paginator.page(page) #分頁器下面的 頁數
print(contacts)
except PageNotAnInteger: #若是輸入的頁面不是正常的字符串則返回第一頁
# If page is not an integer ,delicer first page.
contacts = paginator.page(1)
except EmptyPage: #若是輸入的是空，在返回空數據
#If page is out of range(e.g. 999),deliver last page of results.
contacts = paginator.page(paginator.num_pages)
return render(request,'guest_manage.html',{"user":username,'guests':contacts})
else:
return render(request,'new_index.html')
二、在html文件中加分頁器
<!-- 列表分頁器 -->
<div class="pagination">
<span class="step-links">
{% if guests.has_previous %}
<a href="?phone={{ phone }}&page={{ guests.previous_page_number }}">previous</a>
{% endif %}
<span class="current">
Page {{ guests.number }} of {{ guests.paginator.num_pages }}.
</span>
{% if guests.has_next %}
{% if phone %}
<a href="?phone={{ phone }}&page={{ guests.next_page_number }}">next</a>
{% else %}
<a href="?page={{ guests.next_page_number }}">next</a>
{% endif %}
{% endif %}
</span>
</div>
三、頁面展現效果
發佈會簽到功能完善
一、將發佈會ID帶到URL地址裏面
發佈會sign按鈕關聯的到的是根據發佈會的ID，因此須要將發佈會的ID定義成一個變量，再關聯到URL裏面去便可
2 、sign頁面跳轉實現
urls.py文件添加路徑
#利用正則表達式：?P<event_id>[0-9]+ 匹配相對應的頁數，而且將頁數返回給event_id這個變量
url(r'^sign_index/(?P<event_id>[0-9]+)/$',views.sign_index),
views.py文件添加相對應的頁面
@login_required
def sign_index(request,event_id):
return HttpResponse("發佈會ID：" +str(event_id) )
跳轉頁面展現
三、在sign頁面返回一個簽到頁
views.py文件輸入
@login_required
def sign_index(request,event_id):
event = get_object_or_404(Event,id = event_id)
return render(request,'sign_index.html',{'event':event})
#return HttpResponse("發佈會ID：" +str(event_id) )
新建一個sign_index.html頁面接收sign數據
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
come！！！！
</body>
</html>
頁面展現
四、完善sign頁面
sign_index.html頁面添加以下代碼完善
<html lang="zh-CN">
<head>
<!-- 頭部的引用-->
{% load bootstrap3 %} <!-- 在setting文件裏面已經引入了bootstrap3，因此直接引用本地的bootstrap3-->
{% bootstrap_css %}
{% bootstrap_javascript %}
<title>Guest Manage</title>
</head>
<!-- 導航欄 -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">{{ event.name }}</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/event_manage/">發佈會</a></li>
<li><a href="/guest_manage/">嘉賓</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="">已簽到：{{sign}} | 嘉賓：{{guest}}</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container theme-showcase" role="main">
<!--簽到表單-->
<div class="row" style="margin-top:120px">
<div class="col-lg-6">
<form class="bs-example bs-example-form" role="form" action="/sign_index_action/{{ event.id }}/" method="post">
<div class="input-group">
<input type="text" class="form-control" placeholder="輸入手機號" name="phone">
<button type="submit" class="btn btn-success">簽到</button><br>
<font color="red">
<br>{{hint}}
<br>{{user.realname}}  {{user.phone}}
</font>
</div><!-- /input-group -->
</form>
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</div> <!-- /container glyphicon glyphicon-phone border-style:none; -->
</body>
</html>
頁面展現效果
五、實現簽到邏輯
urls.py頁面實現簽到跳轉
#添加簽到頁面
url(r'^sign_index_action/(?P<event_id>[0-9]+)/$',views.sign_index_action),
views.py頁面添加簽到動做的實現邏輯
#簽到動做
@login_required
def sign_index_action(request,event_id):
event = get_object_or_404(Event, id=event_id)
phone = request.POST.get('phone','')
result = Guest.objects.filter(phone = phone)
if not result:
return render(request, 'sign_index.html', {'event': event,
'hint': 'phone error.'})
result = Guest.objects.filter(phone=phone,event_id=event_id)
if not result:
return render(request, 'sign_index.html', {'event': event,
'hint': 'event id or phone error.'})
result = Guest.objects.get(phone=phone,event_id=event_id)
if result.sign:
return render(request, 'sign_index.html', {'event': event,
'hint': "user has sign in."})
else:
Guest.objects.filter(phone=phone,event_id=event_id).update(sign = '1')
return render(request, 'sign_index.html', {'event': event,
'hint':'sign in success!',
'guest': result})
相關文章
- 1. 10/10
- 2. 10-10
- 3. 2020-10-10
- 4. 2019/10/10
- 5. Alpha衝刺 - (10/10)
- 6. Alpha 衝刺 （10/10）
- 7. α衝刺 （10/10）
- 8. Alpha 衝刺 (10/10)
- 9. iros2016-Monday 10/10/2016
- 更多相關文章...
- • W3C RDF and OWL 活動 - W3C 教程
- • 高屏幕分辨率 統計 - 瀏覽器信息
- • RxJava操作符（一）Creating Observables
- • Kotlin學習（一）基本語法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 10/10
- 2. 10-10
- 3. 2020-10-10
- 4. 2019/10/10
- 5. Alpha衝刺 - (10/10)
- 6. Alpha 衝刺 （10/10）
- 7. α衝刺 （10/10）
- 8. Alpha 衝刺 (10/10)
- 9. iros2016-Monday 10/10/2016