(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 ...

随机推荐

Linux无法被远程登录；用户的关机，重启，注销，新增用户，删除用户
不能使用xshell连接到我的Linux服务器通过再windows的cmd中ping了我的Linux地址,发现网络不通. 查看百度发现是因为网络没有选桥接模式,然后选完桥接模式告诉我: 然后发现没有 ...
linux文件常用操作
建立目录:mkdir mkdir -p [目录名] -p 递归创建命令英文原意: make directories 切换所在目录:cd cd [目录] cd ~ 进入当前用户的家目录 cd c ...
jquery获取元素的display属性是不是none？
1.代码: $(".max_find_wl_info").click(function(){ if($('.max_wuliu').css('display') === 'none ...
基于CentOS7配置ArcGIS enterprise
Centos7GUI安装过程 1.右键点击列表中的虚拟主机,打开控制台. 点击绿色开机键,开始安装. 这里有一个很关键的点,就是上一步设置中的打开电源自动连接.一开始设置的时候别忘了. 2.开机后会出 ...
Codeforces Round #598 (Div. 3)- E. Yet Another Division Into Teams - 动态规划
Codeforces Round #598 (Div. 3)- E. Yet Another Division Into Teams - 动态规划 [Problem Description] 给你\( ...
jupyter notebook中导入其他ipynb文件中的代码
%%capture %run "../Untitled Folder 3/2nn.ipynb" %%capture 抑制输出%run "../Untitled Folde ...
treegrid 折叠全部节点
$(".easyui-treegrid").treegrid({ url: '@Url.Action("GetDataDictionaryList", &quo ...
在windows系统和kali中通过sqlmap注入
第1章在windows系统中通过sqlmap注入 1.1 环境搭建 Sqlmap是目前功能最强大,使用最为广泛的注入类工具,是一个开源软件,被集成于kaliLinux, 由于sqlmap是基于Pyt ...
python_并发编程——数据共享
1.数据共享实现进程之间的数据共享 from multiprocessing import Manager,Process class MyPro(Process): def __init__(se ...
Linux下安装Fiddler
1.首先,你要有个Mono环境,在Ubuntu环境下安装很简单,输入: sudo apt-get install mono-complete 2.下载一个最新的Fiddler for Mono版本,下 ...

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

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

随机推荐

热门专题