在项目的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. [图]Windows 10 Build 16273版本更新发布：新增可变式字体Bahnschrift

    在经历了长达三周的等待之后,微软于今天终于面向Windows Insider项目的Fast通道用户发布了Windows 10 Build 16273版本更新.事实上,微软应该会在两周前就应该发布新版本 ...

  2. 【量产工具修复】U盘插上没反应，格式化提示有写保护

    最近在实验室发现师兄留下的U盘,插上电脑后打不开,弹出格式化界面,格式化的时候又提示该u盘“被写保护无法格式化”,于是打算采用量产的方法. 第一步:使用chipgenius监测u盘的芯片制造商和型号 ...

  3. [libxml2]_[XML处理]_[使用libxml2的xpath特性修改xml文件内容]

    场景: 1.在软件需要保存一些配置项时,使用数据库的话比较复杂,查看内容也不容易.纯文本文件对utf8字符支持也不好. 2.这时候使用xml是最佳选择,使用跨平台库libxml2. 3.基于xpath ...

  4. IOS 即时通讯的框架 配置环境

    一.了解XMPP 协议(标准)XMPP 即时通讯协议SGIP 短信网关协议 这手机发短信 移动支付和网页支付 0x23232[0,1] 0x23232 0x23232 0x23232 只有协议,必须会 ...

  5. 成都夏季招聘会IT行业缺口大！

    上个周末成都的夏季招聘会在新会展中心举行,我们传智播客的专业市场调查员也深入当中.了解IT行业招聘情况,我们发如今IT软件行业专区招聘的公司特别多,可是去应聘的人却非常少.这意味着IT行业正处于供不应 ...

  6. 【[APIO2012]派遣】

    题目 直接线段树合并就好了 之后在线段树上二分贪心选取金额较少的 如果是左偏树的话就开一个大根堆,根和子树顺次合并,合并之后堆内所有元素总和如果大于\(m\)就删除堆顶,由于每个元素只会被删除一次,所 ...

  7. React中的响应式设计思想和事件绑定

    这两个点是react入门非常重要的两个点,以前我们是直接操作dom的形式去做,react的设计思想和以前直接操作dom是完全不同的,react是一个响应式的框架,他在做编程的时候,强调的是我们不要直接 ...

  8. 2018.12.1 web项目中解决乱码问题的一个工具类

    <!-- 配置一个过滤器 编码格式的过滤器 --> <filter> <filter-name>encodeFilter</filter-name> & ...

  9. 2018.11.18 Sturts2配置详解&常量配置进阶

    1.基于struts.xml 的节点参数配置 package节点 action节点 result节点 include节点 2.struts常量配置以及如何修改为自己的想要的配置 2.1struts默认 ...

  10. 【洛谷P2746】[USACO5.3]校园网Network of Schools

    校园网Network of Schools 第一问:Tarjan缩点,搞出每一个连通块,入度为零的连通块是需要必须接受新软件副本的,统计数量即可 第二问:要让整个图构成一个环,显然要将入度为零点和出度 ...