通过flask，输出页面

后端代码文件：app.py

前端html文件：output.html

1、打开（app.py）

导入相关模块：

2、定义方法：（app.py）

3、写入与后端定义好的参数：（output.html）

4、接着就可以看到效果：

通过以上步骤就可以实现：后端传给前端参数，前端发送到页面展示。

如果不通过后端传参数，也可以直接在前端写数组，并且输出：

只要在html页面<body></body>标签中间加入以下代码就ok

 <body>

 {% for namelist in namelist %}

 {{ namelist }}

      <br>

 {% endfor %}

 <script>

     var namelist = ['哈哈','嘻嘻','你是最棒的'];

     for(i=0;i<namelist.length;i++){

         document.write(namelist[i]+"<br>")

     }

 </script>

 </body>

html前端代码块

 from flask import Flask,render_template

 app = Flask(__name__)

 app.config.update(DEBUG=False)

 @app.route('/')

 def hello_world():

     return 'Hello World!'

 @app.route('/test')

 def Shuru():

     namelist =  ['第一个名字','第二个名字','第三个名字'] #定义一个数组

     return  render_template('output.html',namelist=namelist)

 if __name__ == '__main__':

     app.run()

app.py后端代码块

丸子要加油呀

by:丸子

flask前后端输出html页面（数组遍历）的更多相关文章

  1. Flask前后端分离项目案例

    简介 学习慕课课程,Flask前后端分离API后台接口的实现demo,前端可以接入小程序,暂时已经完成后台API基础架构,使用postman调试. git 重构部分: token校验模块 auths认 ...

  2. flask前后端数据交互

    1.后端如何得到前端数据1)如果前端提交的方法为POST:后端接收时要写methods=[‘GET’,‘POST’]xx=request.form.get(xx);xx=request.form[’‘ ...

  3. 《京东上千页面搭建基石——CMS前后端分离演进史》阅读笔记

    一.背景 CMS即内容管理系统,目的是用于快速进行网站建设或者网页开发. 对于京东网站部门来说,CMS核心目的是用来快速开发和上线各种页面,诸如各种垂直频道页. 二.CMS核心目的 进行数据和模板的统 ...

  4. DevOps 视角的前后端分离与实战

    本文作者:CODING - 廖红坤 前言 随着微前端.微服务等技术理念和架构的蓬勃发展,我们已经没必要去讨论为什么要前后端分离这种话题,前后端分离已成为互联网项目开发的标准模式.前后端在各自的领域发展 ...

  5. 对java前后端分离的理解

    到目前为止,身为一个java后端开发人员的我, 在工作期间,无非就是ui设计页面,前端开发html,之后将做好的页面交给我,我负责后台逻辑一件html的页面渲染. 好好滴一个后台开发人员,莫名其妙的做 ...

  6. 【转】Web实现前后端分离，前后端解耦

    一.前言 ”前后端分离“已经成为互联网项目开发的业界标杆,通过Tomcat+Ngnix(也可以中间有个Node.js),有效地进行解耦.并且前后端分离会为以后的大型分布式架构.弹性计算架构.微服务架构 ...

  7. Web实现前后端分离，前后端解耦

    一.前言 ”前后端分离“已经成为互联网项目开发的业界标杆,通过Tomcat+Ngnix(也可以中间有个Node.js),有效地进行解耦.并且前后端分离会为以后的大型分布式架构.弹性计算架构.微服务架构 ...

  8. 重写IHttpHandler,实现前后端分离

    再说重写IHttpHandler,实现前后端分离   aspx页面第一次加载时,HttpHandler 里面是如何编译指定页面的呢?Framework提供了编译页面的API如下: BuildManag ...

  9. beego 前后端分离登录验证

    conf>app.conf 文件添加一下参数 copyrequestbody=true sessionon =true routers>router.go 文件添加初始化路由 func i ...

随机推荐

  1. XXE学习(一)——XML基础

    XXE学习(一)——xml基础 一.XML简介 XML 指可扩展标记语言(EXtensible Markup Language) XML 是一种标记语言,很类似 HTML XML 的设计宗旨是传输数据 ...

  2. 关于integer overflow错误

    前端突然报了integer overflow错误,int类型溢出也就是数字超过了int类型,一看很懵逼,查看后台日期发现是在Math.toIntExact()方法报错 那么我们看下方法内部代码: /* ...

  3. 一起了解 .Net Foundation 项目 No.17

    .Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. Peachpie Comp ...

  4. Matplotlib数据可视化（6）：饼图与箱线图

    In [1]: from matplotlib import pyplot as plt import numpy as np import matplotlib as mpl mpl.rcParam ...

  5. 爬虫之requestsku

    想用selenium实现B站自动登录已经点赞等功能,看到如何解决滑动解锁有关爬虫的内容,便开始学习爬虫,没过多久又想把记录自己生活的网站做起来,朋友便推荐了layui框架倒腾了一晚上自我觉得是做后台系 ...

  6. 单链表反转的原理和python代码实现

    链表是一种基础的数据结构,也是算法学习的重中之重.其中单链表反转是一个经常会被考察到的知识点. 单链表反转是将一个给定顺序的单链表通过算法转为逆序排列,尽管听起来很简单,但要通过算法实现也并不是非常容 ...

  7. Python进阶学习之面向对象

    目录 面向对象 私有属性 面向对象   python也有面向对象的编程,它与C++中的类有点相似.它也只是运算符重载,继承. class Test: num=0 def __init__(self): ...

  8. asp.net core 3.x 微信小程序登录库（也可用于abp）

    视频教程(使用+实现原理):https://share.weiyun.com/57HKopT 建议直接看视频 源码地址:https://github.com/bxjg1987/abpGeneralMo ...

  9. 欲善事先利器-IEAD插件篇

    工欲善其事,必先利其器,好鞋踢好球是非常合乎逻辑的事情. --<长江七号> 同样的开场白,不一样的酒,不一样的故事. 上篇<欲善事先利器--系统篇>已经推荐了一些个人常用的效率 ...

  10. 【攻防世界】simple-unpack

    知识:upx脱壳 simple-unpack 难度系数: 3.0 题目来源: 暂无 题目描述:菜鸡拿到了一个被加壳的二进制文件 提示说有壳子:然后用PE分析发现是ELF upx的壳子