将接口数据返回至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. FTP登录提示Can't open data connection for transfer of "/"

    服务器: 系统:windows server 2008 R2 standard 是否开启防火墙:是 FTP客户端:Filezilla server 本地: FTP服务端:winscp 使用winscp ...

  2. iptables防护CC和DDos和PPTP穿透脚本

    一.iptables优化脚本案例 #!/bin/bash #脚本下载地址:#wget www.mrliangqi.com/pack/shell/iptables.sh #脚本使用:#bash ipta ...

  3. Python traceback的优雅处理

    刚接触Python的时候,简单的异常处理已经可以帮助我们解决大多数问题,但是随着逐渐地深入,我们会发现有很多情况下简单的异常处理已经无法解决问题了,如下代码,单纯的打印异常所能提供的信息会非常有限. ...

  4. windows Sever 2012下Oracle 12c安装配置方法图文教程

    windows Sever 2012下Oracle 12c安装配置方法图文教程 Oracle 12c安装配置方法图文教程,具体内容如下 1.我们开启虚拟机 2.Windows Sever 2012启动 ...

  5. input，select默认颜色修改

    input::-webkit-input-placeholder{color: #7f7f7f;} select{color: #7f7f7f} option{color: #7f7f7f;}

  6. 第十四单元 Linux网络原理及基础设置

    ·ifconfig命令来维护网络(详见linux系统管理P422) 1) 掌握ifconfig命令的功能:显示所有正在启动的网卡的详细信息或设定系统中网卡的IP地址.2) 灵活应用ifconfig命令 ...

  7. java----String解析

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

  8. ajax----发送异步请求的步骤

    1)获取(创建)Ajax对象:获取XMLHttpRequest对象2)创建请求:调用xhr的open方法3)在发送请求之前需要设置回调函数:绑定指定xhr的onreadystatechange事件4) ...

  9. Spring Boot 导出Excel表格

    Spring Boot 导出Excel表格 添加支持 <!--添加导入/出表格依赖--> <dependency> <groupId>org.apache.poi& ...

  10. EntityFramework Reverse POCO Code First 反向生成器

    https://marketplace.visualstudio.com/items?itemName=SimonHughes.EntityFrameworkReversePOCOGenerator ...