将接口数据返回至html前端页面有两种方法

方法一：

1 @app.route('/index',methods=['get'])

2 def open_index():

3     page=open('my_index.html',encoding='utf-8');——---->打开当前文件下的my_index.html(这个html是你自己写的)

4     res=page.read()------>读取页面内容，并转义后返回

5     return res;

方法二：

 from flask import Flask,render_template,request

 app = Flask(__name__)

 #@app.route('/index')

 @app.route('/index/<username>')

 def hello_world(username):

     return render_template('hello.html',username=username);------------>其中hello.html文件在temaplte文件夹下

 if __name__ == '__main__':

     app.run(debug=True);

*与第一种方式的有点在于可以自动转义，第一种方式要手动转义，不方便

* rendr_template中第一个参数是要打开的文件，通常是html文件

*render_template中第二个参数：username=username，第一个username是html中的变量，第二个username是index函数中的值，将这个值赋予html中的变量展示

*同理，render_template中可以指定第三个参数，第....个参数

*在html中的变量，用{{<valueName>}}，如{{username}}，必须要和index中指定的html变量名一模一样，否则无法正确获取变量的值展示

*总而言之，render_template功能是对先引入html，同时根据后面传入的参数，对html进行修改渲染。

我的html页面内容如下

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>这是我的主页</title>

 </head>

 <body>
   {{username}}------>变量，必须要和index函数中给html的变量参数名一模一样，否则调取无效

 这是我的主页

 </body>

 </html>

问题来了：

如何判断函数是否有给html给传参数，如果传了则展示，如果没传，则展示其他的，这个判断应该在html中完成，逻辑判断的格式如下

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>你们好，这是我的模板</title>

 </head>

 <body>

 {% if username2 %}

     姓名：{{ username2 }}

 {% else  %}

     姓名：没有传username

 {% endif %}



 你们好，这是我的模板

 </body>

 </html>

问题2：如果需要将数据全部打印出来，那么就需要用循环（for）

####后端

@app.route('/')

@app.route('/lianxi')

def myindex():

    user={'username':'zhonghuihong'}

    posts=[{

        'author':{'username':'xiaoA'},

        'body':'这是小A的文章'

    },{

        'author':{'username':'小B'},

        'body':'这是小B的文章'

    }]

    return render_template('index.html',title='MYhome',user=user,posts=posts)------>使用render_template来调用index.html渲染页面。并且返回title、user、post数据来供前端渲染

###前端

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    {% if title %}

        <title>

        {{ title }}--您好

        </title>

    {% else %}

        欢迎来到这里-index

    {% endif %}

</head>

<body>

<h1>hello!!!,{{ user.username }}</h1>

{% for post in posts %}---------------->渲染这个页面的同时，带回了这些数据，post是字典样式，要打印出数据，需要使用循环

    {{ post.author.username }}写了一遍文章：<b>{{ post.body }}</b>

{% endfor %}

</body>

</html>
模板中最好的用处就是将大量重复的页面展示模块独立，复用，比如网站中的页眉、页脚、导航栏
------术语叫做【模板继承功能】，Jinja引擎的强大之一

简述：模板继承允许你创建一个基础的骨架模板， 这个模板包含您网站的通用元素，并且定义子模板可以重载的 blocks （这个非常重要）。

*block：使用{%block   <valueName>%}{%endblock%}标签定义子模板，代表这几个模块可以重载，

*block：所要做的事情就是告诉模板引擎，这个子模块可能会重写覆膜板的这个部分。

例子：

###定义一个基础base.html###

<!doctype html>

<html>

  <head>

     主页

  </head>

      {%if title %}

           <title>

           {{ title }}--小型微博

            </title>

      {% else %}

          <title>欢迎来到</title>

      {% endif %}

<body>

<div>卫星博客：<a href="/index">你好</a></div>------------------->这一快最终可以被其他html重载

{% block content%}------------------>这个content必须是唯一的

{% endblock %}

</body>
 ###########改写index.html，在index.html中继承#############

 {% extends 'base.html' %}------------>开头说明这个页面继承了哪些模块

 {% block content %}------------>紧接着说明页面继承的模块名，就是base.html定义的content

5     <h1>hello!!!,{{ user.username }}</h1>------------------->然后中间写专属于index的逻辑

6 {% for post in posts %}

7     {{ post.author.username }}写了一遍文章：<b>{{ post.body }}</b>

8 {% endfor %}

 {% endblock %}

#运行结果

 问题3：如果要在页面中跳转另一个页面
###前端页面####

<div>卫星博客：<a href="/index">你好</a></div>

####对应app.py中的后台接口#####

@app.route('/index')

def index():

    #fromdata=request.form();

    return render_template('post_from_test.html');

Flask--第三个例子，写一个接口，该接口返回html前端页面，模板的使用的更多相关文章

  1. 用flask写一个简单的接口

    用falsk写一个简单的接口,这个接口的数据本来是爬虫爬取的数据,但是今天只写一个flask接口,数据就用测试数据好了. import random import re import time imp ...

  2. 比最差的API(ETW)更差的API(LTTng)是如何炼成的, 谈如何写一个好的接口

    最近这几天在帮柠檬看她的APM系统要如何收集.Net运行时的各种事件, 这些事件包括线程开始, JIT执行, GC触发等等. .Net在windows上(NetFramework, CoreCLR)通 ...

  3. linux设备驱动第三篇：写一个简单的字符设备驱动

          在linux设备驱动第一篇:设备驱动程序简介中简单介绍了字符驱动,本篇简单介绍如何写一个简单的字符设备驱动.本篇借鉴LDD中的源码,实现一个与硬件设备无关的字符设备驱动,仅仅操作从内核中分 ...

  4. 【Juicer】 一个高效、轻量的前端 (Javascript) 模板引擎

    引用地址:http://juicer.name/docs/docs_zh_cn.html * 一个完整的例子 HTML 代码: <script id="tpl" type=& ...

  5. js数字转金额，ajax调用接口，后台返回html(完整页面)，打开新窗口并写入html

    一.转换成金额形式 function toMoney(num){ if(num){ if(isNaN(num)) { alert("金额中含有不能识别的字符"); return; ...

  6. Python+Flask+Gunicorn 项目实战(一) 从零开始，写一个Markdown解析器 —— 初体验

    (一)前言 在开始学习之前,你需要确保你对Python, JavaScript, HTML, Markdown语法有非常基础的了解.项目的源码你可以在 https://github.com/zhu-y ...

  7. Java Web 开发利用Struts2+Spring+mybatis写一个用户登录界面以及简单的数据交互

    框架的东西太复杂也难以讲通,直接上代码: 一.首先得配置环境 和导入必要的jar包 有一些重要的如下: Filter文件夹下的SafetyFilter.java   model文件夹下的 Global ...

  8. 自己写一个java的mvc框架吧（一）

    自己写一个mvc框架吧(一) 目录 自己写一个mvc框架吧(一) 自己写一个mvc框架吧(二) 自己写一个mvc框架吧(三) 自己写一个mvc框架吧(四) 写之前的一些废话 废话 1 (总是要先随便说 ...

  9. django写一个简单的登陆注册

    要写这个,前提还是需要知道三个知识: 一个是urls.py,它是写我们的路由关系的,之前我写了通过wsgiref写一个简单的服务端,也用到了路由,就是 请求过来的url和视图函数的对应关系. 二是就是 ...

随机推荐

  1. LabVIEW---vi图标和符号的制作

    前言: 使用图形化设计语言进行开发时候,为VI添加说明的一个重要的方法是为其建立一个形象的图标,每个VI都在前面板后程序框图的右上角有一个图标,它是VI的图形化表示.如果VI当作子VI调用,该图标就会 ...

  2. thyemleaf：禁用JS缓存（原创）

    在开发时经常需要调整JS,但是调整后由于页面缓存的原因,看不到实时效果. 开发环境:springboot+thymeleaf 1.配置文件多模式 2.获得当前的激活的模式和随机数 import org ...

  3. ubuntu 精简配置

    是这样的情况,在windows 7的vm虚拟机上装了Ubuntu 12.04 Desktop,主要是想用它的gui, 所以把不要的给删了. sudo apt-get -y --auto-remove ...

  4. C#生成不重复的N位随机数

    直接上代码: #region 生成N位随机数 /// <summary> /// 生成N位随机数 /// </summary> /// <param name=" ...

  5. js——类型转换

      总述                   类型转换:显式.隐式(自动) 隐式转换是由编译器自动进行的,基本主要抽象操作有ToPrimitive, ToNumber, ToString, ToBoo ...

  6. 解决 安装或卸载软件时报错Error 1001 的问题

    卸载或安装程序时出错1001:错误1001可能发生在试图更新.修复或卸载windows os中的特定程序时.此问题通常是由于程序的先前安装损坏而引起的. 错误“1001”通常会遇到,因为程序的先前安装 ...

  7. mvn tomcat7:help的14个命令

    D:\2018\code\XXX>mvn tomcat7:help [INFO] Scanning for projects... [INFO] [INFO] ----------------- ...

  8. functions 示例

    示例1:  ","字符串截取 CREATE OR REPLACE FUNCTION splitstr(p_string IN VARCHAR2, p_delimiter IN VA ...

  9. 各数据库连接maven配置

    Derbydb driver maven dependency<dependency> <groupId>org.apache.derby</groupId> &l ...

  10. mysql视图的作用

    测试表:user有id,name,age,sex字段 测试表:goods有id,name,price字段 测试表:ug有id,userid,goodsid字段 视图的作用实在是太强大了,以下是我体验过 ...