(4)Flask项目模板渲染初体验

一、准备静态资源

将项目使用到的静态资源拷贝到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项目模板渲染初体验的更多相关文章

Flask 的模板渲染
Flask 的模板渲染渲染模板语言和django很像,都是用{{}},{%%} 注意点: 1 flask给模板传值,render_template("index.htm",use ...
Flask开发系列之初体验
Flask开发初探介绍在日常开发中,如果需要开发一个小型应用或者Web接口,一般我是极力推崇Flask的,主要是因为其简洁.扩展性高. 从这篇文章开始,我会写一个关于Flask的系列文章,通过多个 ...
T4模板之初体验(语法)
一.什么是T4模板 T4是Text Template Transformation Toolkit(文本模板转换工具包)的四个英文首字母的简称.是微软提供的一种代码生成引擎. 在ADO.NET实体数据 ...
Django项目和Django初体验和创建、目录结构认识
.MVC的设计方式(跟Flask一样,都是MVC的设计模式) .开发效率高 .功能强大(丰富的第三方组件) .安全性高(帮助开发者规避安全漏洞) 目前市面上使用:Django>Flask #使用 ...
学习C++模板，初体验
最近,看了很多码神级人物的代码,发现其代码很炫酷,尤其对模板的使用,作为小码农,感觉已经落伍了,所以应该发奋图强,好好学习和掌握模板这个东西. 模板是什么呢?有人说一个模板就是一个创建类或函数的蓝图或 ...
【GISER&&Painter】Chapter01：WebGL渲染初体验
基于上一篇OpenGL的渲染原理,这两周又陆续接触了一些关于WebGL绘图的一些内容,因为刚入门,很多东西又很晦涩,所以特意花了小半天的时间整理了一下,特此记录. 零画一个多边形吧! 把一个多边形 ...
C#代码生成工具:文本模板初体验使用T4批量修改实体框架(Entity Framework)的类名
转自:http://www.cnblogs.com/huangcong/archive/2011/07/20/1931107.html 在之前的文本模板(T4)初体验中我们已经知道了T4的用处,下面就 ...
Cookiecutter: 更好的项目模板工具：（1）简介及可用资源汇总
原文档地址:https://cookiecutter.readthedocs.io/en/latest/ 本系列只介绍cookiecutter的基础使用,而且会删除与功能使用无关的部分.深度使用及了解 ...
Flask：Flask的模板系统和静态文件
1.Flask模板系统 Django框架有自己独立的模板系统,而Flask是没有的,Flask默认采用jinjia2模板系统,jinjia2是仿写Django模板系统的一个第三方模块,但性能上要比Dj ...

随机推荐

IDEA如何配置tomcat及建一个web项目
需求:项目工程可能别人已经建好了,我需要把项目导入到自己的IDEA并配置tomcat运行; 准备工作:1.本地的tomat服务器 2.IDEA工具 3.JDK 步骤: 1.点击Run -> Ed ...
dijkstra，belllman-ford，spfa最短路算法
参考博客时间复杂度对比: Dijkstra: O(n2) Dijkstra + 优先队列(堆优化): O(E+V∗logV) SPFA: O(k∗E) ,k为每个节点进入队列的次数,一般小于等 ...
数组，字符串，json互相转换
数组转字符串 var arr = [1,2,3,4,'巴德','merge']; var str = arr.join(','); console.log(str); // 1,2,3,4,巴德,me ...
Centos7-重建官方yum源
删除yum源,重建官方 cd /etc/yum.repos.d/ #删除所有 rpm -Uvh --force http://mirror.centos.org/centos-7/7.7.1908/o ...
SOLOR介绍
https://www.cnblogs.com/ki16/p/11209508.html
vue组件通信方式（多种方案）
一.Props传递数据 components |-Grandson1.vue //孙子1 |-Grandson2.vue //孙子2 |-Parent.vue //父亲 |-Grandson1.vue ...
关于AndroidStudio项目app在手机上运行遇到登录网络问题的解决
又得提到我熟悉的12月份末尾,依旧想着把自己遇到的问题给大家看看,顺便分享我的解决办法. 看过我第一个发的随笔就知道,我遇到过给项目app打包成apk的问题啊,虽然解决了,但是运行到手机上就又出现了 ...
Java 内部类和Lambda
Java内部类内部类又称为嵌套类,是在类中定义另外一个类.内部类可以处于方法内/外,内部类的成员变量/方法名可以和外部类的相同.内部类编译后会成为完全不同的两个类,分别为outer.class和ou ...
Discrete Cosine Transform
离散余弦变换由于实信号傅立叶变换的共轭对称性,导致DFT后在频域中有一半的数据冗余.离散余弦变换(DCT)在处理实信号时比离散傅立叶(DFT)变换更具优势.在处理声音信号这类实信号时,DFT得到的结 ...
jmeter使用教程
jmeter是基于JVM(最新版本基于jdk8+)的压测工具包.提供了丰富的工具来设置压测计划,执行压测任务和生成压测报告. 我这边使用的是windows10平台. 整个流程如下: 1.下载jmete ...

(4)Flask项目模板渲染初体验

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

随机推荐

热门专题