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. MySQL备份工具之mysqldump使用

    MySQL备份工具之mysqldump使用说明 一.备份分类 根据能否停用数据库,将备份类型分为: 1. 冷备:数据库服务停止后备份 2. 温备:只能对数据库进行读操作,不能进行写操作 3. 热备:在 ...

  2. hdu 5179 beautiful number（数位dp）

    原题链接 题意:求[l,r]中高位%低位等于0的数字个数.(不含0)分析:此题有三种方法.1.暴搜,毕竟最多才10个位.2.数位dp,预处理好整体的,再处理细节. dp[i][j]表示第i位上的数字位 ...

  3. 063、如何使用weave网络（2019-04-03 周三）

    参考https://www.cnblogs.com/CloudMan6/p/7471162.html   weave是Weaveworks开发的容器网络解决方案.weave创建的虚拟网络可以将部署在多 ...

  4. Install Ubuntu Server

    进入引导程序以后, 选择Install Ubuntu Server, 安装主菜单如下: 依次配置: 接着 https://www.youtube.com/watch?v=gqLaT01yei0

  5. Vue 限制input输入 限数字 或 小数点后两位number

    Vue 限制input输入 小数点后两位number <input type="number" @keydown="handleInput2" place ...

  6. 子线程导致 Windows 服务停止的情况(Topshelf 结合 Quartz.NET)

    Ø  前言 本文主要记录子线程导致 Topshelf 和 Quartz.NET 的 Windows 服务停止的现象,以及使用几种常用子线程的注意事项.因为我们有时可能需要开启多个线程执行复杂的逻辑,如 ...

  7. XXE攻防

    一.XML基础知识 XML用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言.XML文档结构包括XML声明.DTD文档类型定义(可 ...

  8. C# MVC EF框架 用事务

    using System.Transactions; [HttpPost] public JsonResult Update(InfoModel list) { using (TransactionS ...

  9. Ubuntu中安装NVIDIA显卡驱动

    1.参考: https://blog.csdn.net/xunan003/article/details/81665835 https://www.cnblogs.com/luofeel/p/8654 ...

  10. VS中ipch文件夹和sdf文件的处理方式

    ipch文件夹和sdf是VS产生的预编译头文件和智能提示信息,对编码没有影响,可存放在固定的位置,定期进行清理