003---設計首頁index頁面
阿新 • • 發佈：2018-11-09
在專案的urls.py檔案新增一條url
1 from django.contrib import admin 2 from django.urls import path, re_path 3 from app01 import views 4 5 urlpatterns = [ 6 path('admin/', admin.site.urls), 7 re_path('^$', views.index), # 加入這條，代表什麼都不匹配。開啟127.0.0.1:8000就不會匹配不到任何url，依然走index檢視。 8 9 path('index/', views.index, name='index'), # 首頁的url,走index檢視，新增index反向解析，也可以不加。 10 ]
在首頁我們應該顯示書籍列表。
所以在index檢視函式應該獲取所有資料，傳遞給index.html模版渲染。
1 def index(request): 2 # 獲取所有書籍 3 book_lt = Book.objects.all() 4 # 渲染到index.html頁面 5 return render(request, 'index.html',{"book_list":book_lt})
對三個模型做增刪改查後，為了方便我們互動，所以把模版分為左右兩板塊，這樣操作其他頁面時，左邊內容不變。
新增base.html檔案作為母板。方便繼承。(所有的html模版存放到專案目錄的templates資料夾下)
1 <!DOCTYPE html> 2 <html lang="zh_CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <!--標題塊--> 8 {% block title %} 9 {% endblock %} 10 <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css"> 11 <link rel="stylesheet" href="/static/book.css"> 12 </head> 13 <body> 14 15 <div class="container-fluid"> 16 <div class="row"> 17 <div class="col-md-3"> 18 <div class="panel panel-default action"> 19 <div class="panel-heading">操作</div> 20 <ul class="list-group"> 21 <li class="list-group-item aaa"><a href="{% url 'index' %}">書籍列表</a></li> 22 <li class="list-group-item aaa"><a href="#">作者列表</a></li> 23 <li class="list-group-item aaa"><a href="#">出版社列表</a></li> 24 </ul> 25 </div> 26 </div> 27 <div class="col-md-8"> 28 <!--主體內容塊--> 29 {% block body %} 30 31 {% endblock %} 32 </div> 33 </div> 34 </div> 35 <script src="/static/jquery.js"></script> 36 <script src="/static/bootstrap-3.3.7/js/bootstrap.js"></script> 37 </body> 38 </html>
左邊有個ul列表，有三條url，其中書籍列表我設定了反向解析到index頁面的url，你也可以另外一種寫法，href='/index/'。另外兩條在設計好作者和出版社之後再回來改。
引入了靜態檔案，需要配置。在settings.py檔案設定：
1 STATIC_URL = '/static/' 2 STATICFILES_DIRS =[ 3 os.path.join(BASE_DIR,'static') 4 ]
在專案根目錄建立static資料夾，用來存放靜態檔案。
右邊部分是通過模版繼承來寫的，接下來寫index.html頁面。
1 {% extends 'base.html' %} 2 3 {% block title %} 4 <title>書籍列表</title> 5 {% endblock %} 6 7 {% block body %} 8 <h3>書籍列表</h3> 9 <a href="#" class="btn btn-default" style="margin-top:10px;margin-bottom: 10px">新增書籍</a> 10 <table class="table table-bordered"> 11 <thead> 12 <tr> 13 <th>書籍名稱</th> 14 <th>價格</th> 15 <th>出版日期</th> 16 <th>作者</th> 17 <th>出版社</th> 18 <th>操作</th> 19 </tr> 20 </thead> 21 <tbody id="book_list"> 22 {% for book in book_list %} 23 <tr> 24 <td>{{ book.title }}</td> 25 <td>{{ book.price }}</td> 26 <td>{{ book.pub_date|date:"Y-m-d" }}</td> 27 <td> 28 {% for author in book.author.all %} 29 <span><a href="#">{{ author.name }} </a></span> 30 {% endfor %} 31 </td> 32 <td><a href="#">{{ book.publish.name }}</a></td> 33 <td> 34 <a href="#"> 35 <button class="btn btn-success">編輯</button> 36 </a> 37 <a href="#"> 38 <button class="btn btn-danger">刪除</button> 39 </a> 40 </td> 41 </tr> 42 {% endfor %} 43 </tbody> 44 45 </table> 46 {% endblock %}
注意：
- 繼承base.html 要在首行加如語法 {% extends 'base.html' %}。你只要把不同的部分：標題，內容主體的塊填充就行。
- 寫了一個表格顯示書籍，for迴圈後端傳過來的book_list。取出欄位，作為每一列的資料。
- 表頭作者這一列，通過book.author.all來獲取這本書的所有作者。
- 表頭出版社這一列直接通過book.publish.name來獲取。
- 取資料這一塊都是和操作model有關，根據表對應關係，進行跨表查詢。
雖然沒資料：但是效果已經出來了。
