在项目的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. 一.配置简单的嵌入式tomcat和jetty

    我们写了一个web应用,打成war包后,就需要找一个server来部署.对于我们的实际应用,我们基本没必要自己再写一个嵌入式的server.接下来两篇文章只是以钻研的心态来学习一下嵌入式tomcat和 ...

  2. 架构蓝图--软件架构 "4+1" 视图模型

    引言 我们已经看到在许多文章和书籍中,作者欲使用单张视图来捕捉所有的系统架构要点.通过仔细地观察这 些图例中的方框和箭头,不难发现作者努力地在单一视图中表达超过其表达限度的蓝图.方框是代表运行的程序吗 ...

  3. Spring MVC controller控制器映射无法访问问题！！！

    月 26, 2019 2:47:58 上午 org.apache.coyote.AbstractProtocol start信息: Starting ProtocolHandler ["aj ...

  4. Smokeping外置邮箱告警

    wget http://xrl.us/cpanm -O /usr/bin/cpanm 1.安装Authen::SASL模块 cpanm --mirror http://mirrors.163.com/ ...

  5. 三个方法教会你win7中IIS7配置php环境

    三个方法教会你win7中IIS7配置php环境.今天静下心来研究了下在win7中使用IIS7配置php环境,其实很简单!跟下面方法做之前,请先确定你的电脑中未安装其它相关环境程序及服务,之前安装过ap ...

  6. Jupyter notebook 的一个问题

    Traceback (most recent call last): File , in get value = obj._trait_values[self.name] KeyError: 'all ...

  7. HDU 2647 拓扑排序

    题意:每个人的工资至少888,然后有m个条件,前者比后者要多.求最少工资. 分析: 最开始的开邻接矩阵的肯定超时,如果dfs,会出现由于刚开始不是从入度为0的点出发,后期修改不了.比较麻烦. 正确方式 ...

  8. servlet三种方式实现servlet接口

    简单介绍 Servlet接口实现类 1.Servlet接口SUN公司定义了两个默认实现类,分别为:GenericServlet.HttpServlet. 2.HttpServlet指能够处理HTTP请 ...

  9. spring boot 解决后台返回 json 到前台中文乱码之后出现返回json数据报错 500：no convertter for return value of type

    问题描述 spring Boot 中文返回给浏览器乱码 解析成问号?? fastJson jackJson spring boot 新增配置解决后台返回 json 到前台中文乱码之后,出现返回json ...

  10. 课时91.CSS元素显示模式（掌握）

    在HTML中HTML将所有的标签分为两类,分别是容器级和文本级 在CSS中CSS也将所有的标签分为两类,分别是块级元素和行内元素 1.什么是块级元素,什么是行内元素? 块级元素会独占一行 行内元素不会 ...