python操作mysql⑤使用Jinja2模板提取优化页面展示

在templates目录下的index.html、cat.html等页面有一些共同的元素，代码比较冗余
可以使用模板提取公共代码，在各网页中集成模板即可，这样会是代码看起来更加优雅

1.模板页面home_base.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap-3.3.7-dist/css/bootstrap.min.css')}}">

  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css')}}">

  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='datatables.min.css')}}">

  <script type="text/javascript" src="{{ url_for('static', filename='jquery-3.3.1.min.js')}}"></script>

  <script type="text/javascript">

        $(document).ready(function() {

            $('#example').DataTable();

        } );

  </script>

  {% block head %}

  <title>首页</title>

  {% endblock %}

</head>

<body>

<div class="container">

    <h1>新闻列表</h1>

  <nav class="navbar navbar-inverse">

      <!-- 页面头部 -->

      <div class="navbar-header">

          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false">

              <span class="sr-only">Toggle navigation</span>

              <span class="icon-bar"></span>

              <span class="icon-bar"></span>

              <span class="icon-bar"></span>

          </button>

      </div>

      <div id="navbar-menu" class="collapse navbar-collapse">

          <ul class="nav navbar-nav">

              <li class="active"><a href="/">首页</a></li>

              <li><a href="{{url_for('cat', name='推荐')}}">推荐</a></li>

              <li><a href="{{url_for('cat', name='百家')}}">百家</a></li>

              <li><a href="{{url_for('cat', name='推荐')}}">本地</a></li>

              <li><a href="{{url_for('cat', name='图片')}}">图片</a></li>

          </ul>

      </div>

  </nav>

<!-- 新闻内容部分 -->

{% block content %}

<!-- 内容区域 -->

{% endblock %}

</div>

{% block extrajs %}

<!-- 其他脚本 -->

{% endblock %}

</body>

</html>

2.首页index.html

{% extends 'home_base.html' %}

{% block content%}

<div id="content" class="row-fluid">

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

        <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">

        <thead>

            <tr>

                <th>图片</th>

                <th>简介</th>

            </tr>

        </thead>

        <tfoot>

            <tr>

                <th>Name</th>

                <th>Position</th>

            </tr>

        </tfoot>

        <tbody>

        {% for obj in news_list %}

        <tr>

              <td>

              <img width=120 height=60 src="{{ obj.image }}" alt="图片">

              </td>

              <td>

              <p>

                <a href="{{ url_for('detail', pk=obj.id) }}">{{ obj.title }}</a>

                <small>{{ obj.created_at }}</small>

              </p>

              </td>

        </tr>

        {% endfor %}

        </tbody>

        </table>

        </div>

</div>

</div>

{% endblock %}

{% block extrajs %}

<script type="text/javascript" src="{{ url_for('static', filename = 'datatables.min.js')}}"></script>

{% endblock %}

3.详情页detail.html

{% extends 'home_base.html' %}

  {% block head %}

  <title>新闻详情</title>

  {% endblock %}

{% block content%}

<div id="content" class="row-fluid">

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

            <h2>新闻详情，来自新闻id> {{obj.id}}</h2>

        </div>

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

        <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">

        <thead>

            <tr>

                <th>具体新闻内容</th>

            </tr>

        </thead>

        <tbody>

        <tr>

              <td>

              <img width=600 height=500 src="{{ obj.image }}" alt="图片">

              </td>

              <td>

        </tr>

        <tr>

              <td>

              <p>

                {{ obj.title }}

                <small>{{ obj.created_at }}</small>

              </p>

              </td>

        </tr>

        </tbody>

        </table>

        </div>

</div>

</div>

{% endblock %}

</body>

</html>

4.专栏页面cat.html

{% extends 'home_base.html' %}

{% block head%}

<title>{{ name }}</title>

{% endblock %}

{% block content%}

<div id="content" class="row-fluid">

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

        <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">

        <thead>

            <tr>

                <th>图片</th>

                <th>简介</th>

            </tr>

        </thead>

        <tfoot>

            <tr>

                <th>Name</th>

                <th>Position</th>

            </tr>

        </tfoot>

        <tbody>

        {% for obj in news_list %}

        <tr>

              <td>

              <img width=120 height=60 src="{{ obj.image }}" alt="图片">

              </td>

              <td>

              <p>

                <a href="{{ url_for('detail', pk=obj.id) }}">{{ obj.title }}</a>

                <small>{{ obj.created_at }}</small>

              </p>

              </td>

        </tr>

        {% endfor %}

        </tbody>

        </table>

        </div>

</div>

</div>

{% endblock %}

{% block extrajs %}

<script type="text/javascript" src="{{ url_for('static', filename = 'datatables.min.js')}}"></script>

{% endblock %}

可以看到页面能够正常加载共用的js和css库文件

python操作三大主流数据库(5)python操作mysql⑤使用Jinja2模板提取优化页面展示的更多相关文章

  1. python操作三大主流数据库(14)python操作redis之新闻项目实战②新闻数据的展示及修改、删除操作

    python操作三大主流数据库(14)python操作redis之新闻项目实战②新闻数据的展示及修改.删除操作 项目目录: ├── flask_redis_news.py ├── forms.py ├ ...

  2. python操作三大主流数据库(12)python操作redis的api框架redis-py简单使用

    python操作三大主流数据库(12)python操作redis的api框架redis-py简单使用 redispy安装安装及简单使用:https://github.com/andymccurdy/r ...

  3. python操作三大主流数据库(10)python操作mongodb数据库④mongodb新闻项目实战

    python操作mongodb数据库④mongodb新闻项目实战 参考文档:http://flask-mongoengine.readthedocs.io/en/latest/ 目录: [root@n ...

  4. python操作三大主流数据库(9)python操作mongodb数据库③mongodb odm模型mongoengine的使用

    python操作mongodb数据库③mongodb odm模型mongoengine的使用 文档:http://mongoengine-odm.readthedocs.io/guide/ 安装pip ...

  5. python操作三大主流数据库(8)python操作mongodb数据库②python使用pymongo操作mongodb的增删改查

    python操作mongodb数据库②python使用pymongo操作mongodb的增删改查 文档http://api.mongodb.com/python/current/api/index.h ...

  6. python操作三大主流数据库(7)python操作mongodb数据库①mongodb的安装和简单使用

    python操作mongodb数据库①mongodb的安装和简单使用 参考文档:中文版:http://www.mongoing.com/docs/crud.html英文版:https://docs.m ...

  7. python操作三大主流数据库(6)python操作mysql⑥新闻管理后台功能的完善(增、ajax异步删除新闻、改、查)

    python操作mysql⑥新闻管理后台功能的完善(增.删.改.查)安装表单验证D:\python\python_mysql_redis_mongodb\version02>pip instal ...

  8. python操作三大主流数据库(4)python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示

    python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示 参考文档http://flask.pocoo.org/docs/0.11/http://flask ...

  9. python操作三大主流数据库(3)python操作mysql③python操作mysql的orm工具sqlaichemy安装配置和使用

    python操作mysql③python操作mysql的orm工具sqlaichemy安装配置和使用 手册地址: http://docs.sqlalchemy.org/en/rel_1_1/orm/i ...

随机推荐

  1. ibatis项目启动报错The string "--" is not permitted within comments【原】

    该错误主要就是因为xml中<!-- [注释]--> 注释与-->之间没有空格造成xml解析错误 sqlMapConfig.xml内容如下 <?xml version=" ...

  2. MySQL mysqldump与source导入慢的解决方法

    Jquery中文网 >  数据库  >  mysql  >  正文 MySQL mysqldump与source导入慢的解决方法 MySQL mysqldump与source导入慢的 ...

  3. python-虚拟环境搭建

    虚拟环境 需求:        --公司之有一台服务器        -目前运行这一个5年前开发的Django项目,基于1.5        -现在要基于Django2.0开发一套程序         ...

  4. HTTP Method小记

    HTTP 0.9 这个版本只有GET方法 HTTP 1.0 这个版本有GET HEAD POST这3个方法 HTTP 1.1 这个版本是当前版本,包含GET HEAD POST OPTIONS PUT ...

  5. ArcGIS坐标系转换出错：Error 999999执行函数出错 invalid extent for output coordinate system

    本文主要介绍在用ArcGIS做坐标系转换过程中可能会遇到的一个问题,并分析其原因和解决方案. 如下图,对一份数据做坐标系转换: 过了一会儿,转换失败了.错误消息如下: “消息”中提示,“执行函数出错 ...

  6. 让overflow:auto页面滚动条出现时不跳动

    今天看到一篇张鑫旭的文章,转载过来.https://www.zhangxinxu.com/wordpress/2015/01/css-page-scrollbar-toggle-center-no-j ...

  7. js中文编码到C#后台解码

    escape() 方法: 采用ISO Latin字符集对指定的字符串进行编码.所有的空格符.标点符号.特殊字符以及其他非ASCII字符都将被转化成%xx格式的字符编码(xx等于该字符在字符集表里面的编 ...

  8. C# using 的用法

    Ø  前言 说起 C# using 语句,想必大家都不陌生,它是 C# 中关键字之一.我们基本每天写代码都会使用到,其实也非常简单. 1.   首先,说说 using 有哪些用途 1)   用于引用其 ...

  9. STLINK V2安装使用详解

    1.      解压st-link_v2_usb driver.zip文件. 2.       运行解压后的st-link_v2_usbdriver.exe文件,安装STLINK V2驱动程序.安装路 ...

  10. 【游记】关于NOIP2017

    -2017.11.13- Day0.到达酒店无所事事.跟着两个大佬拉着窗帘玩恐怖游戏留下了心理阴影,然后跑去找葱葱一起复习.晚上很晚才睡.Day1.T1结论题,以前写过.T2模拟,细节有点多.T3Di ...