zoukankan      html  css  js  c++  java
  • Flask 学习系列(二)---Jinjia2模板

    下面是一个jinjia2的简单模板的例子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jinjia2 Demo</title>
    </head>
    <body>
        <ul>
            {%  for item in navigation %}
                <li><a  href="{{ item}}">网址:{{ item }}</a> </li>
            {%  endfor %}
        </ul>
    <h1>
        hello world
    </h1>
    {{ a_variable }}
    {# 我是注释 #}
    </body>
    </html>
    

     {{...}}:用于输出变量或者表达式,本例子中为item,a_variable等

    {{%%}}:用于逻辑控制,本例子中for循环所用到的

    {#...#}:用于注释,再渲染后的html中不会出现。

    渲染后生成的页面和html代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jinjia2 Demo</title>
    </head>
    <body>
        <ul>
            
                <li><a  href="http://baidu.com">网址:http://baidu.com</a> </li>
            
                <li><a  href="http://www.goolge.com">网址:http://www.goolge.com</a> </li>
            
        </ul>
    <h1>
        hello world
    </h1>
    Developer
    
    </body>
    </html>
    

    后端用render_template渲染模板

    from flask import Flask
    from flask import render_template
    app = Flask(__name__)
    
    
    @app.route('/')
    def hello_world():
        return 'Hello World!'
    
    
    @app.route("/jinjia2")
    def jinjia2demo():
    
        return  render_template("jinjia2.html",a_variable='Developer',navigation=["http://baidu.com","http://www.goolge.com"])
    
    
    if __name__ == '__main__':
        app.run()
    
  • 相关阅读:
    Vue.js 父子组件间传递值
    Vue.js 单选绑定
    Vue.js 的v-for, v-html v-bind, v-show 实例
    Vue.js 表单input绑定
    Bootstrap tab
    Think PHP-- 笔记2
    MySql 修改登陆规则
    Think PHP--有趣的框架
    PHPStorm的xdebug配置
    伪类选择器
  • 原文地址:https://www.cnblogs.com/liuruitao/p/7787407.html
Copyright © 2011-2022 走看看