• 一个web应用的诞生(2)--使用模板


    经过了第一章的内容,已经可以做出一些简单的页面,首先用这种方式做一个登录页面,首先要创建一个login的路由方法:

    @app.route("/login",methods=["GET"])
    def login():
        html="<form method='post'>" 
             "<table>" 
             "<tr><td>请输入用户名</td><td><input type='text' name='username'/></td></tr>" 
             "<tr><td>请输入密码</td><td><input type='password' name='password'/></td></tr>" 
             "<tr><td><input type='submit' value='登录'/></td></tr>" 
             "</table>" 
             "</post>"
        return html
    

    这个页面返回后是一个简单的登录页,显示结果如下:

    然后是一个登录的post返回页:

    @app.route("/login",methods=["POST"])
    def loginPost():
        username=request.form.get("username","")
        password=request.form.get("password","")
        if username=="test" and password=="123" :
            return "登录成功"
        else:
            return "登录失败"
    

    输入test和123后,显示登录成功

    功能上当然是实现了,但是从其他方面来说,却很难说它是一个能够实际应用的程序,即使不考虑js脚本和css样式表,就从简简单单的维护来说,就是一场噩梦,比如说像增加一个验证码框,我想不会有人认为这是一件愉快的工作。

    所以,首先来说,我们要把页面html部分独立出来,这点,flask提供了jinja2模板引擎来实现。

    jinja2模板引擎同样符合flask最基础的约定,即众多配置中都有一个基础的默认值,相对jinja2来说,有一个最重要的默认值,即模板文件放在templates文件夹,这个文件夹虽然可以自定义,但目前来说,使用默认值已经足够了。

    好,首先在PyCharm的项目根目录创建templates文件夹,然后在文件夹内创建login.html文件,当然目录结构如下:

    在login.html中输入代码如下:

    <!DOCTYPE html>
    <html>
        <head>
            <title>欢迎您登陆--牛博客</title>
        </head>
        <body>
            <form method='post'>
                <table>
                <tr><td>请输入用户名</td><td><input type='text' name='username'/></td></tr>
                <tr><td>请输入密码</td><td><input type='password' name='password'/></td></tr>
                <tr><td><input type='submit' value='登录'/></td></tr>
                </table>
            </form>
        </body>
    </html>
    

    代码很简单,也名没有进行样式方面的美化,其实目前就我来说,仅仅是因为有了智能感知,就有足够的理由使用模板了,然后,对default.py的login方法进行修改代码为:

    from flask import render_template #头部,引入模板渲染方法
    
    @app.route("/login",methods=["GET"])
    def login():
        return render_template("/login.html")  #渲染模板,默认找templates文件夹下的login.html文件
    

    由于html模板内的代码和直接直接写在py文件中的一样,所以此时刷新页面,显示效果和刚刚相同,虽然显示效果没有明显的改观,但此时如果修改html中的某一元素,则会方便很多。

    关于jinja2模板引擎还支持一些更强大的功能,比如使用index做一些说明:

    基本用法

    修改default.py中的部分代码为:

    from flask import render_template #页头,导入渲染函数
    
    @app.route("/")
    def index():
        return render_template("index.html",site_name='myblog')
    

    index.html中的代码为:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>{{site_name}}</title>
    </head>
    <body>
    <h1>这个站点的名字为 {{site_name}} </h1>
    </body>
    </html>
    

    flask的render_template函数支持多参数,其中函数的第一个参数为模板名,之后可以提供若干参数,均为键值对,为模板中的变量提供数据。如此例子中,为site_name提供了myblog的值,而模板内使用{{参数名}}来表示一个变量

    此时浏览器输入地址输出结果为:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>myblog</title>
    </head>
    <body>
    <h1>这个站点的名字为 myblog </h1>
    </body>
    </html>
    

    jinja2模板还提供了一些变量过滤器,如代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>{{site_name|upper}}</title>
    </head>
    <body>
    <h1>这个站点的名字为 {{site_name}} </h1>
    </body>
    </html>
    

    这时输出为:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>MYBLOG</title>
    </head>
    <body>
    <h1>这个站点的名字为 myblog </h1>
    </body>
    </html>
    

    常用过滤器如下

    safe 不转义
    capitalize 首字母大写
    lower 转换为小写
    upper 转换为大写
    trim 去收尾空格
    striptages 去除html标签

    除此之外,Jinja2的变量还可以是一些复杂类型,甚至可以使用一些复杂类型的常用方法,如:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>{{site_name[2:]}}</title> 
    </head>
    <body>
    <h1>这个站点的名字为 {{site_name}} </h1>
    </body>
    </html>
    

    这时输出为:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>blog</title>
    </head>
    <body>
    <h1>这个站点的名字为 myblog </h1>
    </body>
    </html>
    

    控制语句

    控制语句是一个模板的基本功能,同样的jinja2也提供了相应的功能:

    选择
    {% if name=='test' %}
    	这是测试
    {% else %}
    	{{name}},你好
    {% endif %}
    
    循环
    <ul>
    	{% for blog in blogs%}
    		{{ blog.title }}
    	{% endfor%}
    </ul>
    

    除了这些基本用法,模板还为一些代码的重复使用提供了宏的功能,如将如下代码写入macros.html文件中

    {% macro  render_title(blog)%}
    	<li>{{blog.title}}</li>
    {% endmacro%}
    

    然后在之前的模板中:

    {% import 'macros.html' as macros %}
    <ul>
    	{% for blog in blogs %}
    		{{ macros.render_title(blog) }}
    	{% endfor %}
    </ul>
    

    执行结果与之前的完全相同

    Jinja2还提供了一个更为强大的功能,即模板继承,这个个人感觉有点像java的sitemesh框架,它首先需要创建一个base.html的基模板:

    <!DOCTYPE html>
    <html>
    <head>
        {% block head %}
        <meta charset="UTF-8">
        <title>{% block title%} {% endblock %} - 牛博客</title>
        <script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
        {% endblock %}
    </head>
    <body>
        {% block body %}
        {% endblock %}
    </body>
    </html>
    

    其中block标签的意思表示在子模板中可以修改,具体到此例子,则可修改的部分为 head,title,body。下面为子模板代码:

    {% extends "base.html" %}
    {% block title %}{{site_name[2:]}}{% endblock %}
    {% block head %}
        {{super()}}
    {% endblock %}
    
    {% block body %}
     <h1>这个站点的名字为 {{site_name}} </h1>
    {% endblock %}
    

    此时执行结果仍为:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>blog</title>
    </head>
    <body>
    <h1>这个站点的名字为 myblog </h1>
    </body>
    </html>
    

    现在有了模板引擎,不管怎么说,仅仅就页面层来说,已经可以很轻松的做出一些不错的功能了,但很明显,现在的界面还不是很美观,下一章将把现在主流的前端框架bootstrap与flask框架进行整合。

  • 相关阅读:
    hdoj Last non-zero Digit in N! 【数论】
    spin_lock &amp; mutex_lock的差别?
    20140514,微软5月14日公布8个安全补丁
    教你用笔记本破解无线路由器password
    SSL工作原理
    MS-SQLSERVER中的MSDTC不可用解决方法
    grub2手动引导ubuntu
    用递归翻转一个栈 Reverse a stack using recursion
    腾讯面试
    AngularJS移动开发中的坑汇总
  • 原文地址:https://www.cnblogs.com/jiangchao226/p/6357386.html
Copyright © 2020-2023  润新知