将接口数据返回至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. 【原创】运维基础之OpenResty

    openresty 1.15.8.1 官方:https://openresty.org/en/ 一 简介 OpenResty® is a dynamic web platform based on N ...

  2. 获得小程序码getWXACodeUnlimit

    报错47001 data format error 出现这个错误必须是Body里面的raw才可以,而且access_token参数必须写在地址后面,不能写在raw里面,不然也出错. /** * 生命周 ...

  3. Java希尔排序算法

    希尔排序就是对直接插入排序的一个优化.比如有这么一种情况:对一个无序数组进行从小到大的排序,但是数组的最后一个位置的数是最小的,我们要把它挪到第一个位置,其他位置的都要往后移动,要是这个数组非常大,那 ...

  4. centos6.5 Python.7 pip install PIL --allow-external PIL --allow-unverified PIL报错 no such option: --allow-external

    解决办法 pip install pillow 使用from PIL import Image ,正常!!

  5. Windows下Oracle 11g的下载与安装

    Windows下Oracle的下载与安装 一.Oracle下载 官网地址:http://www.oracle.com/technetwork/database/enterprise-edition/d ...

  6. Confluence 6 附件是如何被索引的

    当一个文件被上传到 Confluence 后,Confluence 将会尝试对文件进行解压,然后对文件中的内容进行索引.这样系统就能够允许用户对文件中的内容进行搜索,而不仅仅是搜索文件名.这个过程对系 ...

  7. nginx实践(四)之静态资源web服务(防盗链)

    防盗链目的 防止资源被盗用 http_refer 主要是判断refer信息,判断请求来源是不是合法身份 语法 实例 参数说明: none表示允许没有代理的头信息过来,blocked表示refer信息不 ...

  8. nginx(一）之默认配置文件

    首先是nginx.conf vim /etc/nginx/nginx.conf user nginx; // 设置nginx服务的系统使用用户 worker_processes 1; // 工作进程数 ...

  9. eclipse maven .jar中没有主清单属性

    报错环境: windows系统eclipse maven 打包jar包后, 运行 java -jar 报错 E:\My_java\mysql\target>java -jar original- ...

  10. HTML&javaSkcript&CSS&jQuery&ajax（四）

    一.HTML创建响应设计 Responsive Web Design 可以改变尺寸传递网页,对于平板和移动设备是必须的 1.<!DOCTYPE html><html lang=&qu ...