一、前端页面使用Django-bootstrap3
Django-bootstrap3项目是将Bootstrap3集成到Django中，为Django的一个应用提供。好处是在Django中使用Bootstrap会变得更加方便。
Django-bootstrap3在PyPI仓库的地址：https://pypi.python.org/pypi/django-bootstrap3。
安装完成后，在 .../ex_sign/settings.py 文件中添加“bootstrap3”应用。
settings.py
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'sign',
'bootstrap3',
]
二、发布会管理
完成发布会管理列表与发布会名称搜索功能的开发。
- 发布会列表
1.1.打开 .../sign/views.py 文件，修改 event_manage()视图函数。
from sign.models import Event, Guest # 导入Model中的Event类
......
@login_required
def event_manage(request):
event_list = Event.objects.all() # 通过Event.objects.all()查询所有发布会对象（数据）
username = request.session.get('user', '')
return render(request, 'event_manage.html', {"user":username, "events":event_list}) # 通过render()方法附加在 event_manage.html 页面返回给客户端。
1.2 打开并编写 .../templaes/event_manage.html 页面。
event_manage.html
<html>
<head>
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
<title>Event Manage Page</title>
</head>
<body role="document">
<!-- 导航栏 -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/event_manage">Guest Manage System</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">发布会</a></li>
<li><a href="/guest_manage/">嘉宾</a></li>
<li><a href="/sign_index/">签到</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">{{user}}</a></li>
<li><a href="/logout/">退出</a></li>
</ul>
</div>
</div>
</nav>
<!-- 发布会搜索表单 -->
<div class="page-header" style="padding-top: 60px;">
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form" method="get" action="/search_name/" />
<div class="form-group">
<input name="name" type="text" placeholder="名称" class="form-control">
</div>
<button type="submit" class="btn btn-sucess">搜索</button>
{% csrf_token %}
</form>
</div>
</div>
<!-- 发布会列表 -->
<div class="row" style="padding-top:80px;">
<div class="col-md-6">
<table class="table table-striped">
<thead>
<tr>
<th>id</th>
<th>名称</th>
<th>状态</th>
<th>地址</th>
<th>时间</th>
<th>签到</th>
</tr>
</thead>
<tbody>
{% for event in events %}
<tr>
<td>{{ event.id }}</td>
<td>{{ event.name }}</td>
<td>{{ event.status }}</td>
<td>{{ event.address }}</td>
<td>{{ event.start_time }}</td>
<td><a href="/sign_index/{{event.id}}/" target="{{event.id}}_blank">sign</a></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</body>
</html>
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
加载 bootstrap3 应用、CSS和 JavaScript 文件。
{% %} 为 Django 模板语言的标记。
{{ }} 为 Django 的模板语言标签，用于定义显示变量。
Django 模板语言有Python 语言并非一样。for循环语句需要有对应的 endfor 来表示语句的结束；同样，if分支语句也需要有endif来表示语句的结束。
发布会管理页面
-
搜索功能
发布会名称查询
注：method="get"为 HTTP请求方式；action="/search_name" 搜索请求路径；name="name" 搜索输入框的 name 属性值。通过GET方法接收搜索关键字，并通过模糊查询，匹配发布会name字段，然后把匹配到的发布会列表返回给客户端。
三、嘉宾管理
- 嘉宾列表
guest_manage.html
<html>
<head>
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
<title>Guest Manage Page</title>
</head>
<body role="document">
<!-- 导航栏 -->
<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="#">嘉宾</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">{{user}}</a></li>
<li><a href="/logout/">退出</a></li>
</ul>
</div>
</div>
</nav>
<!-- 嘉宾搜索表单 -->
<div class="page-header" style="padding-top: 60px;">
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form" method="get" action="/search_guest_name/" />
<div class="form-group">
<input name="realname" type="text" placeholder="名称" class="form-control">
</div>
<button type="submit" class="btn btn-sucess">搜索</button>
</form>
</div>
</div>
<!-- 嘉宾列表 -->
<div class="row" style="padding-top:80px;">
<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>发布会</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="?page={{guests.previous_page_number}}">上一页</a>
{% endif %}
<span class="current">
Page {{guests.number}} of {{guests.paginator.num_pages}}
</span>
{% if guests.has_next %}
<a href="?page={{guests.next_page_number}}">下一页</a>
{% endif %}
</span>
</div>
</body>
</html>
urls.py
url(r'^guest_manage/$', views.guest_manage),
-
分页功能
嘉宾管理分页功能
views.py
@login_required
def guest_manage(request):
username=request.session.get('user', '')
guest_list=Guest.objects.all()
paginator=Paginator(guest_list, 2)
page = request.GET.get('page')
try:
contacts = paginator.page(page)
except PageNotAnInteger:
# 如果page不是整数， 取第一页面数据
contacts = paginator.page(1)
except EmptyPage:
# 如果page不在范围, 取最后一页
contacts = paginator.page(paginator,num_pages)
return render(request, "guest_manage.html", {"user":username, "guests": contacts})
