带你进一步开发web应用

微信扫一扫,分享到朋友圈

带你进一步开发web应用

有理想、有抱负、懂得自律,相信在不久的将来,你会成功的!

打开微信搜索【孩子上学后】关注这个不一样的程序员。

一、模板

想要开发出易于维护的应用,关键在于编写形式简洁且结构良好的代码。到目前为止你看到的示例都还过于简单,无法说明这一点,但flask视图函数的两个完全独立的作用却被融合到了一起,这就产生了一个问题。

视图函数的作用很明确,即生成请求的响应,如示例中所示。对于简单的请求来说,这就足够了。但是在很多情况下,请求会改变应用的状态,而这种变化就发生在视图函数中。

以用户在网站上注册新用户为例,用户在表单中输入电子邮件和密码,然后点击提交按钮。服务器接收到包含用户数据的请求,然后flask把请求分派给处理注册请求的视图函数。这个视图函数需要访问数据库,添加新用户,然后生成响应返回给浏览器,指名操作成功还是失败。这两个过程分别称为 业务逻辑
表现逻辑

把业务逻辑和表现逻辑混在一起会导致代码难以理解和维护,假设要为一个大型表格构建HTML代码,表格中的数据由数据库中读取的数据以及必要的HTML字符串连接在一起,把表现逻辑迁移到模板中可以提升应用的维护性。

模板是包含响应文本的文件,其中包含占位变量表示的动态部分,其具体值只在请求上下文中才能知道。使用真实值替换变量,再返回最终得到的响应字符串,这一过程称为 渲染
。为了渲染模板,flask使用名为Jinja2的强大模板。

1.1 Jinja2模板引擎

形式最简单的Jinja2模板是一个响应文本的文件。

在templates文件夹下创建HTML文件

示例1-1 templates/index.html

<h1>Hello world</h1>
复制代码

示例1-2 templates/user.html

<h1>Hello,{{name}}</h1>
复制代码

2.1 渲染模板

默认情况下flask在应用目录中的templates子目录中寻找模板。

示例1-3 hello.py 渲染模板

from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def index():
    return render_template('index.html')


@app.route('/user/<name>')
def user(name):
    return render_template('user.html', name=name)
复制代码

flask提供render_template()函数把jinja2模板引擎集成到应用中,这个函数第一个参数是模板的文件名,随后的参数都是键——值对(关键字参数),表示模板变量对应的具体值。在这段代码中,第二个模板中收到一个名为name的变量。

示例1-4 hello.py

from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def index():
    # 类
    class Person(object):
        name = u'p17bdw'
        age = 18

    person1 = Person()
    context = {
        'username': 'c17bdw',
        'gender': u'男',
        'age': 17,
        'person': person1,
        'websites': {
            'baidu': 'www.baidu.com',
            'google': 'www.google.com'
        }
    }
    return render_template('index.html', **context)
复制代码

二、变量

在模板中使用{{name}}结构表示一个变量,这是一种特殊的占位符,告诉模板这个值从渲染模板时使用的数据中获取。

示例1-3
中,通过对context的封装,就可以在模板中通过变量访问到context里面的数据。

示例1-5 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>这个是HTML中出现的文字</h1>

<p>用户名:{{username}}</p>
<p>性别:{{gender}}</p>
<p>年龄:{{age}}</p>

<hr >
<p>名字:{{person.name}}</p>
<p>年龄:{{person.age}}</p>

<hr >
<p>百度:{{websites['baidu']}}</p>
<p>谷歌:{{websites['google']}}</p>

</body>
</html>
复制代码

从上面的代码示例中不难发现Jinja2能识别所有的变量类型,甚至是复杂的类型,例如列表、字典和对象。

2.1 控制结构

Jinja2提供了多种控制结构可以用来改变模板的渲染过程。

示例 1-6 if_statement.py

# 输入http://127.0.0.1:5000/1/ 为登录状态,否则为未登录状态
from flask import Flask, render_template


app = Flask(__name__)


@app.route('/<is_login>/')
def index(is_login):
    if is_login == '1':
        user = {
            'username': u'啃书君',
            'age': 18
        }
        return render_template('index.html', user=user)
    else:
        return render_template('index.html')
复制代码

示例1-7 index.html

<!DOCTYPE html>
<html lang="zh">
<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></title>
</head>
<body>
 <!-- 当user存在,并age大于15时,页面渲染的效果 -->
 {% if user and user['age'] > 15 %}
  <a href="#">{{user['username']}}</a>
  <a href="#">注销</a>

 {% else %}
  <a href="#">登录</a>
  <a href="#">注册</a>
 {% endif %}
</body>
</html>
复制代码

上述示例代码的运行差异是登录状态与未登录状态的区别。

2.2 循环结构

示例 1-8 for_statement.py

from flask import Flask, render_template

app = Flask(__name__)
# for遍历字典
@app.route('/')
def index():
    books = [
        {
            'name': '西游记',
            'author': '吴承恩',
            'price': 109
        },
        {
            'name': '红楼梦',
            'author': '曹雪芹',
            'price': 200
        },
        {
            'name': '三国演义',
            'author': '罗贯中',
            'price': 120
        },
        {
            'name': '水浒传',
            'author': '施耐庵',
            'price': 130
        }
    ]

    return render_template('index.html', books=books)
复制代码

在这部分,需要注意最后一行代码,第一个books是等一下交给和HTML代码去访问的,第二个books是在代码中定义的books

示例1-9 index.html

<!DOCTYPE html>
<html lang="zh">
<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></title>
</head>
<body>
 <table border="1">
  <thead>
   <th>书名</th>
   <th>作者</th>
   <th>价格</th>
  </thead>
 </table>
 <tbody>
  {% for book in books %}
   <tr>
    <td>{{book.name}}</td>
    <td>{{book.author}}</td>
    <td>{{book.price}}</td>
   </tr>
  {% endfor %}
 </tbody>
</body>
</html>
复制代码

最后

本次关于web开发的笔记分享到这里就结束了,努力做一个高产的作者,把web应用的全套都分享给大家。

我是 啃书君
,一个专注于学习的人,你懂的越多,你不懂的越多!更多精彩内容,我们下期再见!

精彩链接

微信扫一扫,分享到朋友圈

带你进一步开发web应用

研究称巨大的冰山可能威胁海豹、企鹅等野生动物的栖息地

上一篇

研究称3D打印混凝土砖可促进海堤附近的生物多样性

下一篇

你也可能喜欢

带你进一步开发web应用

长按储存图像,分享给朋友