通过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. Angular 1 深度解析：脏数据检查与 angular 性能优化

    TL;DR 脏检查是一种模型到视图的数据映射机制,由 $apply 或 $digest 触发. 脏检查的范围是整个页面,不受区域或组件划分影响 使用尽量简单的绑定表达式提升脏检查执行速度 尽量减少页面 ...

  2. 使用node打造自己的命令行

    一.实现一个简单的功能 二.环境 1.系统: window 10 2.编辑器: vscode 3.node版本: 8.7.0 三.开始玩 1.打开命令行,新建一个pa'ckage.json npm i ...

  3. html5调用摄像头功能

    前言 前些天,线上笔试的时候,发现需要浏览器同意开启摄像头,感觉像是 js 调用的,由于当时笔试,也就没想到这么多

  4. 本地目录配置多个远程Git仓库

    目录 情景一:不同的库分别 pull/push 1. 使用git命令配置 2. 修改.git/config 文件 3. 操作 情景二:不同的库一次push 1. 使用git命令配置 2. 修改.git ...

  5. 基于springcloud搭建项目-Ribbon篇(三)

    这篇文章主要是介绍一下ribbon的用法,我们都知道ribbon是负载均衡,但是却不知道他是怎么样的负载均衡,怎么用,能干嘛? ● 其实,简单的说,Spring Cloud Ribbon是基于Netf ...

  6. 内网渗透之权限维持 - MSF

    年初九 天公生 0x034 MSF(美少妇) 启动msf msfconsole 先启动msf依赖的postgresql数据库 初始化数据库 msfdb init (要用普通用户) msf路径 /usr ...

  7. div隐藏滚动条，仍可滚动

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  8. CSS 权重图

    关系图 图片出处我找不到了. 结论 权重从高到低排序 1. !important 2. style 3. #id 4. .class .child-class 5. .class1.class2 6. ...

  9. （转）协议森林13 9527 (DNS协议)

    协议森林13 9527 (DNS协议) 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 在周星驰的电影<唐伯虎点秋香> ...

  10. （转）协议森林06 瑞士军刀 (ICMP协议)

    协议森林06 瑞士军刀 (ICMP协议) 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 到现在为止,我们讲解了网络层中最重要的I ...