zoukankan      html  css  js  c++  java
  • 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}) #把匹配的发布会列表返回到页面上
       














  • 相关阅读:
    Windows10下配置单机zookeeper(连接服务器上的zookeeper)
    尚硅谷Zookeeper教程学习讲义
    腾讯云服务器在防火墙上添加可访问端口(CentOS7)
    uniPaaS 2.0新功能
    uniPaas RIA 安装与使用方法
    unipaas2.0发布了,有需要试的请与我联系QQ:79982575
    UNIPAAS抢滩Web 2.0
    最简便最快速的开发工具—Magic eDeveloper/DBMAGIC/UNIPAAS
    RIA技术的应用(UNIPAAS)
    数据库开发工具Magic教程基本操作(以Magic eDeveloper V10为例,其他版本会有差异)
  • 原文地址:https://www.cnblogs.com/zhifeiji822/p/15479185.html
Copyright © 2011-2022 走看看