9、event_page_dev

時間 2019-11-25

標籤 event page dev 简体版

原文原文鏈接

bootstrap3

一、定義

Bootstrap，來自Twitter，是目前很受歡迎的前端框架。Bootstrap 是基於HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得Web 開發更加快捷。它由Twitter 的設計師Mark Otto 和Jacob Thornton 合做開發，是一個CSS/HTML 框架。Bootstrap 提供了優雅的HTML 和CSS 規範，它便是由動態CSS 語言Less 寫成。
Bootstrap 中文網：http://www.bootcss.com/javascript

二、前端資源存儲位置

本地存儲css

CND存儲（推薦）html

本地引用CDN路徑前端

網上查找CDN文件java

三、登陸相關文件修改

修改title、頁面標題python

輸入框默認顯示文案web

修改登陸動做和登陸時的請求方法數據庫

根據name屬性的值，修改傳參django

錯誤信息提示bootstrap

修改輸入框的登錄樣式修改成text文本

應用的輸入框樣式

四、針對Django的bootstrap的開源項目

在python項目下引入Django-bootstrap3的包

MacBook-Pro-7:site-packages monkey$ python3 -m pip install django-bootstrap3

Collecting django-bootstrap3
  Downloading django-bootstrap3-9.1.0.tar.gz
Building wheels for collected packages: django-bootstrap3
  Running setup.py bdist_wheel for django-bootstrap3 ... done
  Stored in directory: /Users/monkey/Library/Caches/pip/wheels/72/e0/e8/4cb3d765c70ddf660249ac8136b57ec5da9ba9ecc5290d70c4
Successfully built django-bootstrap3
Installing collected packages: django-bootstrap3
Successfully installed django-bootstrap3-9.1.0

setting.py文件引入應用

頁面跳轉優化

一、登錄成功跳轉頁面關聯發佈會、嘉賓表

views頁面添加

from sign.models import Event,Guest


@login_required  #添加裝飾器
#定義上面跳轉到event_manage請求
def event_manage(request):
    event_list = Event.objects.all()   #查詢到全部的發佈會數據
    username = request.session.get('user') #獲取瀏覽器session
    return render(request,'event_manage.html',{'p_user':username,'enevts':event_list}) ：跳轉連接

二、在後臺建立好發佈會、嘉賓表

建立數據庫遇到1366的報錯，報錯信息以下圖

解析：object_repc這個字段編碼錯誤

  ->show full columns from 表名;  
  #發現address字段的Collation項非utf8，修改它！  
  ->alter table 表名 change 報錯的字段 報錯的字段 varchar(100) character set utf8 collate utf8_unicode_ci not null default '';

三、將建立好的發佈會信息顯示在登陸成功後的跳轉頁面

四、將發佈會的時間、地點經過for循環給展現出來（利用Django的模板語言）

五、樣式修改

登陸成功跳轉html頁面修改

<html lang="zh-CN">
<head>
    <!-- 頭部的引用-->
{% load bootstrap3 %} <!-- 在setting文件裏面已經引入了bootstrap3，因此直接引用本地的bootstrap3-->
{% bootstrap_css %}
{% bootstrap_javascript %}
<title>Guest Manage</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>  <!--active：表示選中狀態 -->
            <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-collapse -->
      </div>
    </nav>

    <div class="container theme-showcase" role="main">

<!-- 發佈會列表-->
 <div class="page-header">
        <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><!--/.navbar-collapse -->
      </div>

      <div class="row">
        <div class="col-md-6">
          <table class="table table-striped">
            <thead>
              <tr>
                <th>id</th>
                <th>名稱</th>
                <th>狀態</th>
                <th>地址</th>
                <th>時間</th>
                <th style="width: 60px;">簽到</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>
                  <td><a href="/sign_index2/{{ event.id }}/"  target="{{ event.id }}_blank">sign_web</a></td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>


</body>
</html>

六、給表單增長搜索功能

七、匹配搜索輸入框結果

urls配置相對應的訪問連接

url(r'^search_name/',views.event_search),

views.py文件寫相對應的請求方法

@login_required
def event_search(request):
    if request.method == 'GET':
        s_name = request.GET.get('search_name')
        print(s_name)
        event_list = Event.objects.filter(name__contains=s_name)
        username = request.session.get('user')
        return render(request,'event_manage.html',{'p_user':username,'events':event_list})
    else:
        return render(request,'new_index.html')

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。