将接口数据返回至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. Android来电拦截及来电转移

    1. 电话拦截这个功能大家可能都知道了,就是利用反射原理调用ITelephony的隐藏方法来实现.这个就不说了,在附件的代码里有.2.拦截后提示忙音/空号/已关机/已停机这个功能其实是要用到MMI指令 ...

  2. 47)django-以put和delete方式提交数据

    一:说明 同一个页面以ajax实现增删改查,对应方法post,delete,put,get, 其中delete和put方式提交的数据在request.body中需要序列化处理. 二:示例 #模板提交数 ...

  3. Protobuf3 语法指南

    目录 [−] 定义一个消息类型 指定字段类型 分配标识号 指定字段规则 添加更多消息类型 添加注释 保留标识符(Reserved) 从.proto文件生成了什么? 标量数值类型 默认值 枚举 使用其他 ...

  4. Confluence 6 手动备份站点

    Confluence 被配置自动备份数据,使用压缩的 XML 格式.同时你也可以通过 Confluence 的 管理员控制台(Administration Console)手动进行备份. 你需要具有 ...

  5. nginx安装编译参数

  6. Java语法基础常见疑惑解答8，16，17，21图片补充

    8. 16. 17. 21

  7. django之ORM数据库操作

    一.ORM介绍 映射关系: 表名 -------------------->类名 字段-------------------->属性 表记录----------------->类实例 ...

  8. java Swing组件和事件处理

    1.常见的容器 JComponent是 Container 的子类,中间容器必须添加到底层容器中才能够发挥作用, JPanel 面板 :使用jPanel 创建一个面板,再通过添加组件到该面板上面,JP ...

  9. java----String解析

    String在内存中的分析: public class Demo { public static void main(String[] args){ String a = new String(&qu ...

  10. DOBRI

    问题 : DOBRI 时间限制: 1 Sec  内存限制: 128 MB 题目描述 给出一个包含N个整数的序列A,定义这个序列A的前缀和数组为SUM数组 ,当SUM数组中的第i个元素等于在i前面的三个 ...