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

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模板提取优化页面展示的更多相关文章

python操作三大主流数据库(14)python操作redis之新闻项目实战②新闻数据的展示及修改、删除操作
python操作三大主流数据库(14)python操作redis之新闻项目实战②新闻数据的展示及修改.删除操作项目目录: ├── flask_redis_news.py ├── forms.py ├ ...
python操作三大主流数据库(12)python操作redis的api框架redis-py简单使用
python操作三大主流数据库(12)python操作redis的api框架redis-py简单使用 redispy安装安装及简单使用:https://github.com/andymccurdy/r ...
python操作三大主流数据库(10)python操作mongodb数据库④mongodb新闻项目实战
python操作mongodb数据库④mongodb新闻项目实战参考文档:http://flask-mongoengine.readthedocs.io/en/latest/ 目录: [root@n ...
python操作三大主流数据库(9)python操作mongodb数据库③mongodb odm模型mongoengine的使用
python操作mongodb数据库③mongodb odm模型mongoengine的使用文档:http://mongoengine-odm.readthedocs.io/guide/ 安装pip ...
python操作三大主流数据库(8)python操作mongodb数据库②python使用pymongo操作mongodb的增删改查
python操作mongodb数据库②python使用pymongo操作mongodb的增删改查文档http://api.mongodb.com/python/current/api/index.h ...
python操作三大主流数据库(7)python操作mongodb数据库①mongodb的安装和简单使用
python操作mongodb数据库①mongodb的安装和简单使用参考文档:中文版:http://www.mongoing.com/docs/crud.html英文版:https://docs.m ...
python操作三大主流数据库(6)python操作mysql⑥新闻管理后台功能的完善(增、ajax异步删除新闻、改、查)
python操作mysql⑥新闻管理后台功能的完善(增.删.改.查)安装表单验证D:\python\python_mysql_redis_mongodb\version02>pip instal ...
python操作三大主流数据库(4)python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示
python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示参考文档http://flask.pocoo.org/docs/0.11/http://flask ...
python操作三大主流数据库(3)python操作mysql③python操作mysql的orm工具sqlaichemy安装配置和使用
python操作mysql③python操作mysql的orm工具sqlaichemy安装配置和使用手册地址: http://docs.sqlalchemy.org/en/rel_1_1/orm/i ...

随机推荐

bzoj千题计划317：bzoj4650: [Noi2016]优秀的拆分（后缀数组+差分）
https://www.lydsy.com/JudgeOnline/problem.php?id=4650 如果能够预处理出 suf[i] 以i结尾的形式为AA的子串个数 pre[i] 以i开头的形式 ...
python --github 刷题
第 0001 题:做为 Apple Store App 独立开发者,你要搞限时促销,为你的应用生成激活码(或者优惠券),使用 Python 如何生成 200 个激活码(或者优惠券)? import r ...
retry示例
#!/usr/bin/python2.7 # -*- coding: utf-8 -*- import time import exceptions def func(): # a,b = None ...
【转载】C# List用法 List介绍
https://www.cnblogs.com/dyhao/p/9501479.html
Mac 键盘符号及VSCode快捷键说明
Mac 键盘符号说明 ⌘ == Command ⇧ == Shift ⇪ == Caps Lock ⌥ == Option ⌃ == Control ↩ == Return/Enter ⌫ == De ...
使用 Topshelf 结合 Quartz.NET 创建 Windows 服务
Ø 前言之前一篇文章已经介绍了,如何使用 Topshelf 创建 Windows 服务.当时提到还缺少一个任务调度框架,就是 Quartz.NET.而本文就展开对 Quartz.NET 的研究,以 ...
9.selenium
1.安装与入门 pip3 install selenium 将chromedriver放到一个没有权限要求的目录 from selenium import webdriver driverpath=& ...
tensorflow---文字识别
读取数据的三种方法: 1. feeding : providing data when running each step : classifier.eval(feed_dict={input:my_ ...
kindeditor<=4.1.5 文件上传漏洞利用
kindeditor<=4.1.5 文件上传漏洞 - Kindeditor <=4.1.5 file upload vulnerability and use 漏洞存影响版本:小于等于4. ...
MySQL - COUNT关键字
基础数据信息 SELECT COUNT(*) AS '用户名的个数' FROM t_user SELECT COUNT(DISTINCT username) AS '用户名不重复的个数' FROM t ...

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

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

随机推荐

热门专题