django 学习(十二)—— 设计发布会管理
Bootstrap是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JavaScript的,它简洁灵活,使得Web开发更加快捷。
安装Django-bootstrap3:pip install django-bootstrap3
安装完成,在.../guest/settings.py文件中添加“bootstrap3”应用:
一、发布会列表
继续回到视图层的开发中
1.打开.../sign/views.py文件,修改event_manage()视图函数。
2.打开并编写.../templates/event_manage.html页面
DOCTYPE html>
<html lang="zh-CN">
<head>
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
<title>Guest Managetitle>
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 Systema>
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 nvbar-nav navbar-right">
<li><a href="#">{{ user }}a> li>
<li><a href="/logout/">退出a> li>
ul>
div>
div>
nav>
<div class="row" style="padding-top: 80px;">
<div class="col-md-6">
<table class="table table-striped">
<thead>
<tr>
<th>idth><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>
tr>
{% endfor %}
tbody>
table>
div>
div>
body>
html>
二、搜索功能
1.先在.../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>
2.在.../guest/urls.py文件中添加搜索路径的路由
3..../sign/views.py文件,创建search_name()视图函数