首页 > 其他分享 >后端结合前端 模板渲染 显示列表

后端结合前端 模板渲染 显示列表

时间:2023-10-09 15:36:12浏览次数:29  
标签:__ render 渲染 Flask app 列表 entries 模板

最终效果

 

背景知识

将HTML文件放在"templates"文件夹中可以确保Flask能够自动找到和加载它们,我没建这个文件夹所以报错了,图中是查了资料改正后的

工程结构

python文件需要放到工程的子目录

 

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ol>
    {% for entry in entries %}
    <li><a href="{{ entry }}">{{ entry }}</a></li>
    {% endfor %}
</ol>

</body>
</html>

 

python代码

from flask import Flask, render_template

app = Flask(__name__)

# 路由方法
@app.route('/')
def index():
    entries = ['entry1', 'entry2', 'entry3']  # 3个条目的列表
    return render_template('index.html', entries=entries)

if __name__ == '__main__':
    app.run()

 

标签:__,render,渲染,Flask,app,列表,entries,模板
From: https://www.cnblogs.com/haha1988/p/17751833.html

相关文章

  • C++ 模板特化
    模板特化介绍模板特化是指在模板的基础上,针对某些特定的值,提供一种特殊的实现方式,模板特化分为两种,类模板特化和函数模板特化类模板特化类模板特化指的是在类模板上,针对某些特定的类型和值,提供一种特殊的实现方式。类模板特化分为全特化和偏特化两种。类模板全特化定义......
  • 无涯教程-Meteor - 模板(Template)
    Meteor模板正在使用三个顶级标签。前两个是head和body。这些标签执行与常规HTML相同的功能,第三个标签是template。这是无涯教程将HTML连接到JavaScript的地方。简单模板以下示例显示了它是如何工作的。无涯教程正在创建一个name=“myParagraph”属性的模板,无涯教程可以......
  • 由于蚂蚁老师课程视频中博客园网站更新,代码不适用于现有环境,故网上查找更新:网上爬取博
    importjsonimportreimportrequestsfrombs4importBeautifulSoupfOut=open("博客爬取文章列表标题及地址.txt","w",encoding="utf8")foridxinrange(20):print("#"*50,idx+1)url="https://www.cnblogs.com/AggSite/......
  • Python入门示例系列13 列表
    Python入门示例系列13列表 序列序列是Python中最基本的数据结构。Python包含6中内建的序列,即列表、元组、字符串、Unicode字符串、buffer对象和xrange对象。序列通用的操作包括:索引([])、长度(len)、组合(序列相加)、重复(乘法)、分片(切片[:])、检查成员(in,notin)、遍历、最小值(mi......
  • Jasper模板使用记录十——控制元素显示
    控制元素显示PrintWhenExpression1.通过设置PrintWhenExpression属性,来控制元素是否显示2.PrintWhenExpression应设置为一个表达式,表达式的结果为布尔类型的值,值为true时显示元素3.表达式使用java语法(此语法与模板的属性language有关)即可,如$F{flag}.equals("1")、$F{f......
  • 框架集 表格 列表
    一.框架集(frameset)注意:要把body删了 rows以纵向分 cols以横向分framboder=0/1是否有边框border=1边框为1frame框架noresize是否有拖拽scrolling=yes/no/auto是否有下拉或右拉target中的值可以自定义跳转但是必须在frameset中使用 二.内框架ifram......
  • Jasper模板使用记录九——detail整行换页
    问题当detail中的某行数据过长,高度拉伸之后,导致一行数据在两页中各显示一部分解决办法设置detail的SplitType属性为Prevent,就可以使整行数据在下一页显示......
  • Jasper模板使用记录八——背景实现整页边框
    背景Background实现整页边框1.使背景元素的大小与页面纸张大小一致,然后在背景元素上的添加的元素都会显示在页面的相应位置上2.这样就只需要在背景元素上添加一个矩形框,就可以作为整页的边框了<background> <bandheight="800"splitType="Stretch"> <propertyname="com......
  • css中实现分区中列表的标记的改变
    想要实现下面的情况该怎么写 1.可以在html中用分区标记(<div>)来实现三个分区2.样式可以使用css来实现。(这里我采用的是外部样式表)3.我们可以在分区标签中使用类标记器(上面的class就是类标记器),然后在css中使用后代选择器,在选择器中使用列表属性list-of-style: (注意使用......
  • 解锁 Vue 3 神奇技巧:让模板复用达到极致
    引出在vue的日常开发当中,我们可能会遇到这样的一种情况:某一部分的模版需要重复利用,但又不至于到新开1个组件的地步。比如:js复制代码<template><divv-for="iteminlist">//条件渲染<divv-if="isCase1(item.id)"class="case1Class...">......