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

随机推荐

C++类中创建线程
经常会遇到需要在类中创建线程,可以使用静态成员函数,并且将类实例的指针传入线程函数的方式来实现. 实现代码代码如下: /* 类头文件 CTestThread.h */ #include<io ...
Android笔记(七十五) Android中的图片压缩
这几天在做图记的时候遇第一次遇到了OOM,好激动~~ 追究原因,是因为在ListView中加载的图片太大造成的,因为我使用的都是手机相机直接拍摄的照片,图片都比较大,所以在加载的时候会出现内存溢出,那 ...
MySQL/MariaDB数据库的主从复制
MySQL/MariaDB数据库的主从复制作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.MySQL复制概述 1>.传统扩展方式垂直扩展(也叫向上扩展,Sacle ...
SQL进阶系列之12SQL编程方法
写在前面 KISS -- keep it sweet and simple 表的设计注意命名的意义英文字母 + 阿拉伯数字 + 下划线"_" 属性和列编程的方针写注释注意 ...
玩转DNS服务器——Bind服务
合理的配置DNS的查询方式实验环境: 虚拟机:VMware® Workstation 15 Pro 均使用NAT连接网段为192.168.1.0/24 DNS 服务器 ---- Centos ...
Java调用Kotlin程序深度解析
异常: 在之前我们已经学习在Kotlin中的所有异常都是运行期的,而不像Java分为运行期和非运行期,下面用代码来演示一下,先建一个Java的异常: 然后在Kotlin中来调用一下该Java中的方法 ...
微信小程序~上拉加载onReachBottom
代码: //页面上拉触底事件的处理函数 onReachBottom(e) { console.log("底部")// 滚动到页面执行该方法 wx.showToast({ tit ...
HTML页面 js返回上一页
<input type="button" name="Submit" onclick="javascript:history.back(-1); ...
linux ssh tunnel
ssh -qTfnN -D 7070 ape@192.168.1.35
c++实用语法
数组的快捷初始化 int inq[110] memset(inq, 0, sizeof(inq)); string到char数组的转换: string str ("Please split ...

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

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

随机推荐

热门专题