通过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. 使用CSS实现折叠面板总结

    任务目的 深入理解html中radio的特性 深入理解CSS选择器以及伪元素的使用 任务描述 使用input的radio单选框特性结合CSS中的伪元素实现bootstrap中折叠面板(点击查看样例), ...

  2. 学习Java技术哪家强

    https://github.com/CyC2018/CS-Notes https://github.com/Snailclimb/JavaGuide SpringBoot 之 配置文件优先级 htt ...

  3. 如何提升.NET控制台应用体验？

    原文:Upgrade Your .NET Console App Experience 作者:Khalid Abuhakmeh 译文:Lamond Lu 在.NET生态系统中,控制台程序的表现相对较差 ...

  4. HTTP GET请求302重定向问题

    1.问题描述 ① 在华为云服务器中搭建了java环境,并在tomcat中部署了一个空的web项目 ② 在此web项目中上传了一个名为:plugin_DTDREAM_LIVING_DEHUMIDIFIE ...

  5. RedisTemplate：我不背锅，是你用错了

    今天分享一个RedisTemplate的问题,感兴趣的可以继续看下去了,不感兴趣的继续撩妹去吧! 如下图:一位朋友给了我一个报错的图片,为啥为啥取不到值? 我也有点懵,第一反应就是RedisTempl ...

  6. vuex和localStorage，全局变量的区别

    vuex是状态管理,是为了解决跨组件之间数据共享问题的,一个组件的数据变化会映射到使用这个数据的其他组件当中.如果刷新页面,之前存储的vuex数据全部都会被初始化掉. localStorage是H5提 ...

  7. windows服务搭建与删除简单介绍

    安装windows服务: 1 VS的开发命令使用管理员权限打开, 2 installutl.exe /servicename="服务名称"  "服务地址" 卸载 ...

  8. Vue2.0 【第三季】第1节 propsData Option 全局扩展的数据传递

    目录 Vue2.0 [第三季]第1节 propsData Option 全局扩展的数据传递 第1节 propsData Option 全局扩展的数据传递 Vue2.0 [第三季]第1节 propsDa ...

  9. Android微信逆向--实现发朋友圈动态

    0x0 前言 最近一直在研究Windows逆向的东西,想着快要把Android给遗忘了.所以就想利用工作之余来研究Android相关的技术,来保持对Android热情.调用微信代码来发送朋友圈动态一直 ...

  10. 洛古 P1312 Mayan游戏（dfs+剪枝）

    题目链接 这道题和俄罗斯方块很像 很明显,我们可以看出这是一个dfs,但是,我们需要几条剪枝: 1.如果只剩下1个或2个同样颜色的方块,那么直接退出 2.相同的块不用交换 3.注意优先性,优先左边换右 ...