一、准备静态资源

将项目使用到的静态资源拷贝到static目录

二、创建前台首页html

创建templates/home/home.html页面，内容包含导航和底部版权两部分，中间内容区域为模板标签。

注意静态资源路径部分使用了模板标签"{{url_for()}}"来访问static目录下的静态资源，它的第一个参数是静态资源目录static，第二个参数是static目录下面文件的名称：

 <!doctype html>

 <html lang="zh-CN">

 <head>

     <meta charset="UTF-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <meta name="renderer" content="webkit">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">

     <title>微电影</title>

     <link rel="shortcut icon" href="{{ url_for('static', filename='base/images/logo.png') }}">

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

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

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

     <style>

         .navbar-brand>img {

             display: inline;

         }

     </style>

     <style>

         .media{

             padding:3px;

             border:1px solid #ccc

         }

     </style>

 </head>

 <body>

 <!--导航-->

 <nav class="navbar navbar-default navbar-fixed-top">

     <div class="container">

         <!--小屏幕导航按钮和logo-->

         <div class="navbar-header">

             <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

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

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

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

             </button>

             <a href="index.html" class="navbar-brand" style="width:250px;">

                 <img src="{{ url_for('static', filename='base/images/logo.png') }}" style="height:30px;">&nbsp;微电影

             </a>

         </div>

         <!--小屏幕导航按钮和logo-->

         <!--导航-->

         <div class="navbar-collapse collapse">

             <form class="navbar-form navbar-left" role="search" style="margin-top:18px;">

                 <div class="form-group input-group">

                     <input type="text" class="form-control" placeholder="请输入电影名！">

                     <span class="input-group-btn">

                         <a class="btn btn-default" href="search.html"><span class="glyphicon glyphicon-search"></span>&nbsp;搜索</a>

                     </span>

                 </div>

             </form>

             <ul class="nav navbar-nav navbar-right">

                 <li>

                     <a class="curlink" href="index.html"><span class="glyphicon glyphicon-film"></span>&nbsp;电影</a>

                 </li>

                 <li>

                     <a class="curlink" href="login.html"><span class="glyphicon glyphicon-log-in"></span>&nbsp;登录</a>

                 </li>

                 <li>

                     <a class="curlink" href="register.html"><span class="glyphicon glyphicon-plus"></span>&nbsp;注册</a>

                 </li>

                 <li>

                     <a class="curlink" href="logout.html"><span class="glyphicon glyphicon-log-out"></span>&nbsp;退出</a>

                 </li>

                 <li>

                     <a class="curlink" href="user.html"><span class="glyphicon glyphicon-user"></span>&nbsp;会员</a>

                 </li>

             </ul>

         </div>

         <!--导航-->

     </div>

 </nav>

 <!--导航-->

 <!--内容-->

 <div class="container" style="margin-top:76px">

     {% block content %}{% endblock %}

 </div>

 <!--内容-->

 <!--底部-->

 <footer>

     <div class="container">

         <div class="row">

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

                 <p>

                     ©&nbsp;2017&nbsp;flaskmovie.xxx.com&nbsp;京ICP备 13046642号-2

                 </p>

             </div>

         </div>

     </div>

 </footer>

 <!--底部-->

 <script src="{{ url_for('static', filename='base/js/jquery.min.js') }}"></script>

 <script src="{{ url_for('static', filename='base/js/bootstrap.min.js') }}"></script>

 <script src="{{ url_for('static', filename='base/js/jquery.singlePageNav.min.js') }}"></script>

 <script src="{{ url_for('static', filename='base/js/wow.min.js') }}"></script>

 <script src="{{ url_for('static', filename='lazyload/jquery.lazyload.min.js') }}"></script>

 <script src="http://cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>

 <script>

     $(function() {

         new WOW().init();

     })

 </script>

 <script>

     $(document).ready(function() {

         $("img.lazy").lazyload({

             effect: "fadeIn"

         });

     });

 </script>

 </body>

 </html>

三、创建首页内容区域

创建templates/home/index.html内容，内容部分简单输出一句"Hello world!!!"：

{% extends "home/home.html" %}

{% block content %}

<h1>hello world!!!</h1>

{% endblock %}

四、修改视图

修改app/home/views.py文件：

 # coding:utf8

 from . import home

 from flask import render_template

 @home.route("/")

 def index():

     return render_template("home/index.html")

这里使用到了模板渲染引擎包render_template。

五、运行查看效果

运行manage.py，浏览器访问 http://127.0.0.1:5000/

【结束】

(4)Flask项目模板渲染初体验的更多相关文章

  1. Flask 的模板渲染

    Flask 的模板渲染 渲染模板语言和django很像,都是用{{}},{%%} 注意点: 1 flask给模板传值,render_template("index.htm",use ...

  2. Flask开发系列之初体验

    Flask开发初探 介绍 在日常开发中,如果需要开发一个小型应用或者Web接口,一般我是极力推崇Flask的,主要是因为其简洁.扩展性高. 从这篇文章开始,我会写一个关于Flask的系列文章,通过多个 ...

  3. T4模板之初体验(语法)

    一.什么是T4模板 T4是Text Template Transformation Toolkit(文本模板转换工具包)的四个英文首字母的简称.是微软提供的一种代码生成引擎. 在ADO.NET实体数据 ...

  4. Django项目和Django初体验和创建、目录结构认识

    .MVC的设计方式(跟Flask一样,都是MVC的设计模式) .开发效率高 .功能强大(丰富的第三方组件) .安全性高(帮助开发者规避安全漏洞) 目前市面上使用:Django>Flask #使用 ...

  5. 学习C++模板，初体验

    最近,看了很多码神级人物的代码,发现其代码很炫酷,尤其对模板的使用,作为小码农,感觉已经落伍了,所以应该发奋图强,好好学习和掌握模板这个东西. 模板是什么呢?有人说一个模板就是一个创建类或函数的蓝图或 ...

  6. 【GISER&&Painter】Chapter01：WebGL渲染初体验

    基于上一篇OpenGL的渲染原理,这两周又陆续接触了一些关于WebGL绘图的一些内容,因为刚入门,很多东西又很晦涩,所以特意花了小半天的时间整理了一下,特此记录. 零  画一个多边形吧! 把一个多边形 ...

  7. C#代码生成工具:文本模板初体验 使用T4批量修改实体框架(Entity Framework)的类名

    转自:http://www.cnblogs.com/huangcong/archive/2011/07/20/1931107.html 在之前的文本模板(T4)初体验中我们已经知道了T4的用处,下面就 ...

  8. Cookiecutter: 更好的项目模板工具：（1）简介及可用资源汇总

    原文档地址:https://cookiecutter.readthedocs.io/en/latest/ 本系列只介绍cookiecutter的基础使用,而且会删除与功能使用无关的部分.深度使用及了解 ...

  9. Flask：Flask的模板系统和静态文件

    1.Flask模板系统 Django框架有自己独立的模板系统,而Flask是没有的,Flask默认采用jinjia2模板系统,jinjia2是仿写Django模板系统的一个第三方模块,但性能上要比Dj ...

随机推荐

  1. nginx的stream模块和upstream模块

    nginx7层调度方式 使用upstream模块定义集群名称和节点地址 定义在server字段之外httpd字段之内 upstream staticweb { server 172.17.0.2; # ...

  2. saltstack安装使用

    官网地址:https://docs.saltstack.com/en/latest/ 安装 saltstack 1. ​ sudo yum install https://repo.saltstack ...

  3. Appium启动淘宝APP，输入搜索内容

    # -*- coding:utf-8 -*- from appium import webdriver from time import sleep desired_caps ={ 'platform ...

  4. python测试开发django-rest-framework-64.序列化(serializers.Serializer)

    前言 REST framework中的serializers与Django的Form和ModelForm类非常像.我们提供了一个Serializer类,它为你提供了强大的通用方法来控制响应的输出, 以 ...

  5. 微信小程序~跳页传参

    [1]需求: 点击商品,跳到相应商品详情页面 [2]代码: (1)商品列表页 <view class="goodsList"> <view wx:for=&quo ...

  6. CentOS7.5环境下搭建禅道

    在安装配置禅道之前,可以百度了解一下两款项目管理工具禅道与JIRA的区别. 一.安装 进入禅道官网https://www.zentao.net,选择适用的版本进行安装,我这里下载的是“开源版11.6” ...

  7. CentOS 7.5下KVM的安装与配置

    由于没有物理机可用,在自己的VMware Workstation中CentOS 7.5下搭建完成. 首先查看VMware Workstation是否支持虚拟化,把红框内打钩即可. 虚拟化开启并安装Ce ...

  8. HDU - 5571 ：tree （动态点分治 异或）

    题意:给定一棵树,有点权a[],有边权. 现在有M次修改点权的操作,输出每次修改后,Σ(a[i]^a[j])*dis(i,j); 思路:因为待修改,我们需要快速得到以及修改一个点到其他所有点的信息. ...

  9. 浏览器-同源政策（same-origin policy）

    浏览器安全的基石是“同源政策”(same-origin policy). 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实行这个政策. 何为同源? 协议相同 域名相同 端 ...

  10. jQuery 查找和过滤

    通常情况下选择器可以直接定位到我们想要的元素,但是,当我们拿到一个jQuery对象后,还可以以这个对象为基准,进行查找和过滤. 最常见的查找是在某个节点的所有子节点中查找,使用find()方法,它本身 ...