将接口数据返回至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. 开启gtid导入报错

    导入报错 [root@redis02 data]# mysql -u root -p < ht.sqlEnter password: ERROR 1840 (HY000) at line 24: ...

  2. tcpdump详解

    tcpdump -i eth1 'host 121.14.84.221 and greater 76' -Ap -v -s10000 抓取 eth1 和 121.14.84.221 上的所有长度大于7 ...

  3. python-socket编程（入门，网络基础）

    一.网络基础 网络建立的目的是为了数据交互(通信) 如何实现通信: 1.建立好底层的物理连接介质 2.有一套统一的通信标准,称之为互联网协议 1.osi七层协议 互联网协议按照功能的不同分为osi七层 ...

  4. 原来商家登录系统的commonjs

    /* *适配 */ //orientationchange方向改变事件 (function (doc,win) { var docEl = doc.documentElement,//根元素html ...

  5. 一种基于NTC的控温电路及软件实现

    NTC(Negative Temperature Coefficient)是一种随温度上升时,电阻值呈指数关系减小的热敏电阻.应用广泛,最近我们就采用了NTC来控制加热并测温,并达到了预期的效果. 1 ...

  6. Oracle imp exp 导入导出 执行脚本

    一:用命令 imp/exp 的方式进行数据的导入和导出 一:文件后缀名: 二:oracle  导出 exp 命令 echo 开始备份数据库 if not exist D:\oracle_bak\fil ...

  7. Confluence 6 链接到其他应用

    应用链接(Application Links)有时候也被称为 "AppLinks" 是一系列测插件能够允许你在 Atlassian  的应用中互相链接.链接 2 个应用能够允许你在 ...

  8. SS-QT5

    https://blog.csdn.net/sos218909/article/details/78781017

  9. 基于多进程的Tcp套接字服务器

    服务端 import socketfrom multiprocessing import Process def task(c): print('顾客吃点啥') while True: data = ...

  10. spring boot 整合 shiro

    shrio官网:https://shiro.apache.org/ Apache Shiro是一个功能强大且易于使用的Java安全框架,可执行身份验证,授权,加密和会话管理.借助Shiro易于理解的A ...