在项目的urls.py文件添加一条url

 from django.contrib import admin

 from django.urls import path, re_path

 from app01 import views  

 urlpatterns = [

     path('admin/', admin.site.urls),

     re_path('^$', views.index),  # 加入这条，代表什么都不匹配。打开127.0.0.1:8000就不会匹配不到任何url，依然走index视图。

     path('index/', views.index, name='index'),  # 首页的url,走index视图，添加index反向解析，也可以不加。

 ]

在首页我们应该显示书籍列表。

所以在index视图函数应该获取所有数据，传递给index.html模版渲染。

 def index(request):

     # 获取所有书籍

     book_lt = Book.objects.all()

     # 渲染到index.html页面

     return render(request, 'index.html',{"book_list":book_lt})

对三个模型做增删改查后，为了方便我们交互，所以把模版分为左右两板块，这样操作其他页面时，左边内容不变。

添加base.html文件作为母板。方便继承。(所有的html模版存放到项目目录的templates文件夹下)

 <!DOCTYPE html>

 <html lang="zh_CN">

 <head>

     <meta charset="UTF-8">

     <meta http-equiv="x-ua-compatible" content="IE=edge">

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <!--标题块-->

     {% block title %}

     {% endblock %}

     <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">

     <link rel="stylesheet" href="/static/book.css">

 </head>

 <body>

 <div class="container-fluid">

     <div class="row">

         <div class="col-md-3">

             <div class="panel panel-default action">

                 <div class="panel-heading">操作</div>

                 <ul class="list-group">

                     <li class="list-group-item aaa"><a href="{% url 'index' %}">书籍列表</a></li>

                     <li class="list-group-item aaa"><a href="#">作者列表</a></li>

                     <li class="list-group-item aaa"><a href="#">出版社列表</a></li>

                 </ul>

             </div>

         </div>

         <div class="col-md-8">

             <!--主体内容块-->

             {% block body %}

             {% endblock %}

         </div>

     </div>

 </div>

 <script src="/static/jquery.js"></script>

 <script src="/static/bootstrap-3.3.7/js/bootstrap.js"></script>

 </body>

 </html>

左边有个ul列表，有三条url，其中书籍列表我设置了反向解析到index页面的url，你也可以另外一种写法，href='/index/'。另外两条在设计好作者和出版社之后再回来改。

引入了静态文件，需要配置。在settings.py文件设置：

 STATIC_URL = '/static/'

 STATICFILES_DIRS =[

     os.path.join(BASE_DIR,'static')

 ]

在项目根目录创建static文件夹，用来存放静态文件。

右边部分是通过模版继承来写的，接下来写index.html页面。

 {% extends 'base.html' %}

 {% block title %}

     <title>书籍列表</title>

 {% endblock %}

 {% block body %}

     <h3>书籍列表</h3>

     <a href="#" class="btn btn-default" style="margin-top:10px;margin-bottom: 10px">添加书籍</a>

     <table class="table table-bordered">

         <thead>

         <tr>

             <th>书籍名称</th>

             <th>价格</th>

             <th>出版日期</th>

             <th>作者</th>

             <th>出版社</th>

             <th>操作</th>

         </tr>

         </thead>

         <tbody id="book_list">

         {% for book in book_list %}

             <tr>

                 <td>{{ book.title }}</td>

                 <td>{{ book.price }}</td>

                 <td>{{ book.pub_date|date:"Y-m-d" }}</td>

                 <td>

                     {% for author in book.author.all %}

                         <span><a href="#">{{ author.name }}&nbsp;</a></span>

                     {% endfor %}

                 </td>

                 <td><a href="#">{{ book.publish.name }}</a></td>

                 <td>

                     <a href="#">

                         <button class="btn btn-success">编辑</button>

                     </a>

                     <a href="#">

                         <button class="btn btn-danger">删除</button>

                     </a>

                 </td>

             </tr>

         {% endfor %}

         </tbody>

     </table>

 {% endblock %}

注意：

  • 继承base.html  要在首行加如语法  {% extends 'base.html' %}。你只要把不同的部分：标题，内容主体的块填充就行。
  • 写了一个表格显示书籍，for循环后端传过来的book_list。取出字段，作为每一列的数据。
  • 表头作者这一列，通过book.author.all来获取这本书的所有作者。
  • 表头出版社这一列直接通过book.publish.name来获取。
  • 取数据这一块都是和操作model有关，根据表对应关系，进行跨表查询。

虽然没数据：但是效果已经出来了。

003---设计首页index页面的更多相关文章

  1. mxonline实战13，授课讲师列表页，详情页，index页面全局导航

    对应github地址:第13天   把teacher-list.html和teacher-detail.html拷贝过来   一. 授课讲师列表页   1. 修改html文件 把org-list.ht ...

  2. 微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法

    前段时间开发了一款微信小程序,运行了也几个月了,在index.js中的onLoad生命周期里获取app.js中onLaunch生命周期中在接口里动态设置的globalData一直没有问题,结果昨天就获 ...

  3. MVC4.0 如何设置默认静态首页index.shtml

    1.不启用二级域名情况下(www.xxx.com)下设置默认静态首页index.shtml 通过配置IIS的默认文档,设置默认首页地址 然后在MVC的路由中写入忽略默认路由代码 routes.Igno ...

  4. nginx报错：403 Forbidden 并且访问首页index.php是下载文件的状态

    nginx报错:403 Forbidden 并且访问首页index.php是下载文件的状态,不能正常解析php 系统有其他两个站访问是正常的 看日志没有看到明显的错误 搜索了下: 答案如下: php的 ...

  5. 在 Students 的 Index 页面增加列标题链接(排序)，分页，过滤和分组功能

    3-1  在 Students 的 Index 页面增加列标题链接 为 Index 页面增加排序的功能,我们需要修改 Student 控制器的 Index 方法,还需要为 Student 视图增加代码 ...

  6. dedecms中去除首页index.html的方法

    本文介绍了dedecms中去除首页index.html的方法,有需要的朋友参考下. dedecms织梦cms建站程序输入地址后,而打开的实际地址后面有个index.html.   这里分享下两种解决方 ...

  7. HTML基础——网站首页显示页面

    1.表格标签: border设置边框,align设置位置(居中等),bgcolor设置背景颜色,cellspacing设置边框之间的空隙,cellpadding设置边框与里面内容的间距. table表 ...

  8. nginx配置后只有根目录首页index.php能访问，其他页面404

    只有首页面根目录可以访问,其他页面地址都是404 not found.网上找了半天url重定向,url重写都试了无效,要不就是重定向过多,下图为跳坑历程. location / { #if ($htt ...

  9. asp.net mvc后台操作之读写xml控制首页动态页面开关显示

    一.背景 在asp.net mvc项目里,用户需要开拓几个活动版面,并以侧栏的方式呈现在首页右侧,几个活动时间不一致,为避免浏览者在活动未开放之时进入未开放的服务页面.因此不仅需要在活动代码中加入限制 ...

随机推荐

  1. Oracle里删除重复记录，保留一项

    我们在使用数据库的时候,有时数据会有所重复,当我们只需要一项数据时,不需要显示重复的记录时 如下就有SQL代码: --查找表中多余的重复记录,重复记录是根据单个字段来判断 select * from ...

  2. 初次撸Python，踩平些小坑～

    [转义字符] os.path.isdir(targetPath)总是报错,以为字符串不行而是要转成file类型,尝试了很多方法还是没解决,最后发现,windows下的路径中字符串中需要转义(例子在网上 ...

  3. 第一次团队合作，对Scrum的初步了解

    学习和运用scrum 作为长大的大三老腊肉,我们已经在长大生活了两年多,对于什么是长大人最想完善的校园需求.最想拥有的校园服务媒介也有了更加深切的体会. 于是,GoodJob小团队blingbling ...

  4. 网络体系结构的概念 - 网络协议TCP - 红黑联盟

    https://i.cnblogs.com/EditPosts.aspx?opt=1 网络体系结构的概念  计算机网络就是一组通过一定形式连接起来的计算机系统,它需要四个要素的支持,即通信线路和通信设 ...

  5. IOS开发之——IOS模拟器调试蓝牙BLE

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/zhenyu5211314/article/details/24399887 因为在iPhone 4s ...

  6. c#用链表存储并读取配置文件（代码部分）

    //读取配置参数 private void loadcofig() { //List<param> camra1 = new List<param>(); List<st ...

  7. 【luogu P2947 [USACO09MAR]向右看齐Look Up】 题解

    题目链接:https://www.luogu.org/problemnew/show/P2947 因为在单调队列上被dalao们锤爆 怒刷单调队列题 何为单调队列? 设我们的队列为从左至右单调递增 对 ...

  8. Feign Form表单POST提交

    Form表单的POST提交,调用该类接口最长用的方式就是HttpClient,如果使用Feign,如何实现呢? 首先,看下Http中已Form的形式做Post提交的定义: -------------- ...

  9. JavaScript函数的方法

    在一个对象中绑定函数,称为这个对象的方法. 在JavaScript中,对象的定义是: var xiaoming = { name:'小明'; birth:1990; }; 但是,如果我们给xiaomi ...

  10. 在cengos中安装zabbix server/agent， 并创建一个简单demo

    添加zabbix更新源 rpm -ivh http://repo.zabbix.com/zabbix/2.4/rhel/6/x86_64/zabbix-release-2.4-1.el6.noarch ...