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

随机推荐

代码优化 - 求数组中的第 K 个最大元素
题目要求: 解法一: 直接用 sort 从大到小排序,取第 k 个 var findKthLargest = function (nums, k) { nums.sort((a, b) => { ...
Echo团队Alpha冲刺随笔 - 第十天
项目冲刺情况进展对Web端和小程序端进行各项功能的测试问题 bug无穷无尽心得 debug使人秃头,希望明天能挑好今日会议内容黄少勇今日进展测试小程序,对发现的bug进行处理存在问题 ...
django-自定义文件上传存储类
文件储存API:https://yiyibooks.cn/xx/django_182/ref/files/storage.html 编写自定义存储系统:https://yiyibooks.cn/xx/ ...
render函数之jsx应用
一.模板缺陷(模板的最大特点是扩展难度大,不易扩展.可能会造成逻辑冗余) <level :type="1">哈哈</level> <level :ty ...
mybatis的注意事项一
在UserMapper.xml文件中写resultType="cn.smbms.dao.pojo.User"返回类型的全路径是不是很长,而且也比较不美观:不便于后期项目的维护. 解 ...
Vue --- 组件练习
一 ad_data = { tv: [ {img: 'img/tv/001.png', title: 'tv1'}, {img: 'img/tv/002.png', title: 'tv2'}, {i ...
Oracle 查看index是否失效
一.普通索引是否失效 select * from dba_indexes s where s.owner in ('ISMP','BOSS','PAY','ACCOUNT','SETTLE','TE ...
gdb命令行
1.当程序出现core dump时,使用下面的命令调试: gdb 程序名 core.1234 或 gdb core.1234 gdb -c core.1234 程 ...
Windbg妙用
计算器当你在调试,需要做一些从十六进制到十进制的简单转换,一些整数计算你不需要切换到calc.exe,你可以只使用windbg的表达式计算器.假设你得到了一个十六进制的大小,比如说2e903000, ...
洛谷 P2563 [AHOI2001]质数和分解题解
P2563 [AHOI2001]质数和分解题目描述任何大于 1 的自然数 n 都可以写成若干个大于等于 2 且小于等于 n 的质数之和表达式(包括只有一个数构成的和表达式的情况),并且可能有不止一 ...

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

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

随机推荐

热门专题