django-bootstaps3
-
什么是bootstaps
是前端架构,是一款css/html框架,是将 BootStrap3(3 表示版本号)集成到 Django 中,作为 Django 的一个应用提供。这样做的好处是在 Django 中用 bootstrap 会更加方便 - 安装Django-bootstrap3
python3 -m pip install django-bootstrap3 - 添加应用
在/guest/settings.py
发布会列表
- 写一个展示发布会列表的页面
- H5的知识
1.div是分割页面的块级元素,在div块内可以单独设置属性(颜色排列等,不影响块外的) - 在views中创建获取发布会的函数
def event_manage(request):
from sign.models import Event,Guest
username=request.session.get('user','')#读取浏览器cookie
event_list=Event.object.all()
return render(request,"event_manage.html",{'user':username,'events':event_list}) - 在urls中添加
path('event_manage/',views.event_manage) - 在templates,修改event_manage.html
<html lang="zh-CN">
<head>
{%load bootstrap3%}
{%bootstrap_css%}
{%bootstrap_javascript%}
<title>Guest Manage</title>
</head>
<boby role="document">
<!-- 导航栏 -->
<nav class="navbar navbar-inverse navbar-fixed-top"><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>
</ul>
<ul class="nav navbar-nav navbar-right"><li><a href="#">{{user}}</a></li><li><a href="/logout/">退出</a></li>
</ul>
</div>
</nav>
<!-- 发布会列表 -->
<div class="row" style="padding-top: 80px;">
<div class="col-md-6">
<table class="table table-striped">
<thead><tr>
</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></tr>
{% endfor %}</tbody></table></div></div></body></html>
对于 BootStrap 框架来说,它主要通过 class 属性来设置 HTML 标签的样式。
{% load bootstrap3 %}{% bootstrap_css %}{% bootstrap_javascript %}加载 Bootstrap3 应用,CSS 和 JavaScript 文件。{% %}为 Django 的模板标签,Django 的模板语言将会在该标签下编写。
<title>Guest Manage</title>设置页面标题为 Guest Manage。
<li class="active"><a href="#">发布会</a></li><li><a href="/guest_manage/">嘉宾</a></li>
设置页面导航栏,class="active" 表示,当前菜单处于选中状态。href="/guest_manage/" 用于跳转到到嘉宾管理页,我们稍后完善该页面。
<li><a href="#">{{ user }}</a></li><li><a href="/logout/">退出</a></li>
{{ }} Django 的模板标签,用于定义显示变量。这里将会通过浏览器 sessionid 获取到对应的登录用户名,并显示。href="/logout/" 定义退出路径,稍后完善该功能。
{% 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></tr>{% endfor %}
Django 模板语言,用于循环打印发布的 id、name、status、address 和 start_time 等字段。Django 模板语言与 Python 有所不同。for 语句需要有对应 endfor 来表示语句的结束,同样,if 分支语句也需要 endif 来表示语句的结束。
对于列表管理来说,搜索功能必不可少,接下来开发针对发布会名称的搜索功能。
,先在.../templates/event_manage.html 页面上创建搜索表单。下面这段代码放在<!-- 发布会列表 -->上面
<!--发布会搜索表单--><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-success">搜索</button></form></div></div>method="get" HTTP 请求方式;action="/search_name/" 搜索请求路径;name="name" 搜索输入框的 name 属性值。不要忘记在.../guest/urls.py 文件中添加搜索路径的路由。
views中编辑搜索名字函数@login_requireddef search_name(request):
username = request.session.get('user', '') #读取浏览器cookie
search_name = request.GET.get("name", "") #通过 GET 方法接收搜索关键字
event_list = Event.objects.filter(name__contains=search_name) #通过模糊查询,匹配发布会 name 字段,使用django的objects.filter()方法匹配
return render(request, "event_manage.html", {"user": username, "events": event_list}) #把匹配的发布会列表返回到页面上