zoukankan      html  css  js  c++  java
  • flask中的简单的前端写入

      那么flask这个框架是web开发,那么肯定离不开前端的一些代码,那么python用的web开发框架

      开发所用的前端模板就是jinja2模板。相对于jinja1比起来性能做到了很大的提升,那么Vue一些原理

      有很多类似jinja2的东西。就比如 {{ }},俩者也都用到了,也很实用。那么我们简单来写一个小页面

      当然,先要起flask服务

    代码如下

    # -*- encoding: utf-8 -*-

    # 网页模板需要导入render_template
    from flask import Flask,render_template

    # 建立对象
    app = Flask(__name__)

    app.config.from_pyfile('config.ini')

    @app.route('/')
    def index():
    my_str = "你好世界"
    # my_int = 123
    # my_list = [4,5,6]
    # my_dict = {'name':'小明','age':15}

    context = {}
    context['my_str'] = my_str
    context['my_int'] = 100
    context['my_list'] = ['卫生纸','胶条','乱七八糟',78,'再来一个','还是不好看','好乱!']
    context['my_dict'] = {'name':'小花','age':15}

    # 使用render_template 模块来渲染模板文件,通过第二个参数传递数据变量
    # return render_template('day03.html', my_str=my_str, my_int=my_int,my_list=my_list,my_dict=my_dict)
    # 推荐使用第二种。用过**引用来将嵌套dict直接传递给模板
    return render_template('day03.html',**context)



    if __name__ == "__main__":
    app.run()
     
      这简单的写一下,介绍一下。那么我们这里需要配合html来一起使用。注意一点,这里需要建一个文件夹名为 templates 的文件夹,不然在html中导入的话,你会找不到Py文件中所传递的参数,html页面的,代码如下
     
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>flask网页模板的学习</title>
    </head>
    <body>
    <div>
    <!-- 双中括弧是输出。单中括弧是逻辑判断 以后的注释要用{# #} 需要注意的是,这样的注释是在html中的简单注释,我们现在是动态的在传数据形式,那么以后的注释都要统一规范,我只是在我传入数据的时候写了几个简单的注释,下面的之后全是以{# #}来当注释的 小细节要注意,不然错误的话不好找 -->
    这是我们第一个网页模板 <br /><br />
    <!-- 这里是注释。最基本的模板语法输出一个变量 -->
    <!-- {{ my_str + ", 前端页面" }} <br /><br /> -->
    <!-- 模板语法可以做简单的运算 -->
    {{ my_int + 10 }} <br /><br />
    <!-- list的操作,可以引用下表的方式输出list元素 -->
    {{ my_list }}<br />
    {{ my_list[0] }}<br />
    {{ my_list.1 }}<br /><br /><br />
    {{ my_dict["name"] }} <br />
    {{ my_dict }} <br />
    {{ my_dict.age }} <br />

    {# 使用{% %} 来定义简单的逻辑控制代码 #}
    {% if my_int %}
    整型存在
    {% else %}
    不存在
    {# 使用if判断。一定要有endif 用来结束逻辑判断#}
    {% endif %}

    <ul>
    {# 使用for循环来遍历list #}
    {% for item in my_list %}
    <li>{{ item }}</li>
    {# 使用for循环也要用endfor#}
    {% endfor %}
    </ul>
    {# 使用if for 嵌套来实现单双行背景色 #}
      我这里用的是内联样式,为了更直观,并不是很正规。
    <table style="border:1px solid black;padding: 5px;">
    {% for item in my_list %}
    {% if loop.index % 2 == 0 %}
    <tr style="">">
    <td>{{ item }}</td>
    </tr>
    {% else %}
    <tr style="">">
    <td>{{ item }}</td>
    </tr>
    {% endif %}
    {% endfor %}
    </table>
    </div>
    </body>
    </html>
      
      那么简单的页面就基本完成了。  至于详细的会以后再做补充。 还是那句话,业务依据逻辑 ,逻辑推敲代码,代码完成业务!
     
      
  • 相关阅读:
    webpack4系列之 【2. 踩坑--webpack 2.x升级至4.x】
    计算月份差方法封装
    局域网内访问另一台电脑上运行的代码
    npm遇到的问题--npm install 执行报错 /bin/git submodule update -q --init --recursive
    功能说明书
    第一次结对作业
    MathExam
    第一次作业
    2017《Java预备作业》02 计科1501 李晓燕
    2017《Java技术》预备作业 计科1501 李晓燕
  • 原文地址:https://www.cnblogs.com/binyuei/p/10154636.html
Copyright © 2011-2022 走看看