Django模版-发布会列表

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中创建获取发布会的函数

    from sign.models import Event,Guest
    def event_manage(request):
         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>
         <th>id</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> 
    </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_required 
    def 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}) #把匹配的发布会列表返回到页面上
     














 

posted on 2021-10-29 10:22  zfj822  阅读(30)  评论(0编辑  收藏  举报