创建Web应用

  • Post author:
  • Post category:其他


这里是使用python和Flask创建web应用。



安装python

最好安装python3的版本。可以直接在python官方网站上下载。这里就不多介绍了,网上有很多教程。



安装Flask

我们使用pip进行安装

pip install flask --index http://pypi.douban.com/simple --trusted-host pypi.douban.com

也有一些其他的方法。我们可以使用下面代码运行一下看是否安装成功

from flask import Flask  # 导入包
app = Flask(__name__)  # 创建一个Web应用
@app.route('/')  # 定义路由(Views),可以理解为定义页面的URL
def index():
    return "这是用Python + Flask 搞出来的。"  # 渲染页面
if __name__ == "__main__":
    app.run(host='127.0.0.1', port=8080)  # 运行,指定监听地址为 127.0.0.1:8080

成功后会出现以下结果

在这里插入图片描述

网页上也会出现这个

在这里插入图片描述

这就说明成功安装上了。



“Hello, World” Flask应用

1、先创建项目目录,我将这个应用命名为microblog。可以在一个新窗口打开。

2、因为应用程序是存在于包中的。 在Python中,包含__init__.py文件的子目录被视为一个可导入的包。 当你导入一个包时,

init

.py会执行并定义这个包暴露给外界的属性。

所以创建一个名为app的包来存放整个应用,要在microblog目录下。其中会有__init__.py文件

在其下文件__init__.py,输入如下的代码:

from flask import Flask
app = Flask(__name__)
from app import routes
app.run(debug=True)

上面的脚本仅仅是从flask中导入的类Flask,并以此类创建了一个应用程序对象。 传递给Flask类的__name__变量是一个Python预定义的变量,它表示当前调用它的模块的名字。

4、路由是应用程序实现的不同URL。 在Flask中,应用程序路由的处理逻辑被编写为Python函数,称为视图函数。 视图函数被映射到一个或多个路由URL,以便Flask知道当客户端请求给定的URL时执行什么逻辑。

在app目录下建一个routes.py文件。并写下第一个视图函数的代码

from app import app

@app.route('/')
@app.route('/index')
def index():
    return "Hello, World!"

5、microblog目录下创建一个命名为microblog.py的Python脚本。 它仅拥有一个导入应用程序实例的行:

from app import app

Flask应用程序实例被称为app,是app包的成员。from app import app语句从app包导入其成员app变量。

创建好后会看到如下目录结构

在这里插入图片描述

里面的templates会在下面用到,现在可以先不管。

成功运行后会看到如下结果

在这里插入图片描述



模板

原先的视图函数返回简单的字符串,我现在要将其扩展为包含完整HTML页面元素的字符串。我们可以这样写

from flask import Flask
app = Flask(__name__)
from app import app
@app.route('/')
@app.route('/index')
def index():
    user = {'username': 'Miguel'}
    return '''
<html>
    <head>
        <title>Home Page - Microblog</title>
    </head>
    <body>
        <h1>Hello, ''' + user['username'] + '''!</h1>
    </body>
</html>'''
app.run(debug=True)

在浏览器中看到如下结果

在这里插入图片描述

但是这种写法并不太好。因为当这个视图函数中的用户和博客不断变化时,里面的代码将会变得很复杂。应用的视图函数及其关联的URL也会持续增长。所以使用模板就有很大帮助。

模板有助于实现页面展现和业务逻辑之间的分离。 在Flask中,模板被编写为单独的文件,存储在应用程序包内的templates文件夹中。 在确定你在microblog目录后,创建一个存储模板的目录。 把这个文件写在app/templates/index.html中:

在这里插入图片描述

在index.html文件中写入

<html>
    <head>
        <title>{{ title }} - Microblog</title>
    </head>
    <body>
        <h1>Hello, {{ user.username }}!</h1>
    </body>
</html>

{

{ … }}包含的内容是动态的,只有在运行时才知道具体表示成什么样子。

网页渲染转移到HTML模板之后,视图函数就能被简化:

routes.py文件写入代码

from flask import render_template
from app import app
@app.route('/')
@app.route('/index')
def index():
    user = {'username': 'Miguel'}
    return render_template('index.html', title='Home', user=user)


init

.py文件写入代码

from flask import Flask
app = Flask(__name__)
from app import routes
app.run(debug=True)

在这里插入图片描述



模板中控制语句

index.html文件中写入

<html>
  <head>
    {% if title %}
    <title>{{title}} - microblog</title>
    {% else %}
    <title>Welcome to microblog</title>
    {% endif %}
  </head>
  <body>
      <h1>Hello, {{user.nickname}}!</h1>
  </body>
</html></html>

如果视图函数忘记输入页面标题的参数,不会触发异常反而会出现我们自己提供的标题。


init

.py文件和routes.py文件代码不变。

有标题情况

在这里插入图片描述

无标题情况

在这里插入图片描述



循环

index.html代码

<html>
    <head>
        {% if title %}
        <title>{{ title }} - Microblog</title>
        {% else %}
        <title>Welcome to Microblog</title>
        {% endif %}
    </head>
    <body>
        <h1>Hi, {{ user.username }}!</h1>
        {% for post in posts %}
        <div><p>{{ post.author.username }} says: <b>{{ post.body }}</b></p></div>
        {% endfor %}
    </body>
</html>


init

.py文件代码

from flask import Flask
app = Flask(__name__)
from app import routes
app.run(debug=True)

routes.py文件

from flask import render_template
from app import app
@app.route('/')
@app.route('/index')
def index():
    user = {'username': 'Miguel'}
    posts = [
        {
            'author': {'username': 'John'},
            'body': 'Beautiful day in Portland!'
        },
        {
            'author': {'username': 'Susan'},
            'body': 'The Avengers movie was so cool!'
        }
    ]
    return render_template('index.html', title='Home', user=user, posts=posts)

结果

在这里插入图片描述



模板的继承

从本质上来讲,就是将所有模板中相同的部分转移到一个基础模板中,然后再从它继承过来。

所以我现在要做的是定义一个名为base.html的基本模板,其中包含一个简单的导航栏,以及我之前实现的标题逻辑。 需要在模板文件app/templates/base.html中编写代码如下:

base.html

<html>
    <head>
      {% if title %}
      <title>{{ title }} - Microblog</title>
      {% else %}
      <title>Welcome to Microblog</title>
      {% endif %}
    </head>
    <body>
        <div>Microblog: <a href="/index">Home</a></div>
        <hr>
        {% block content %}{% endblock %}
    </body>
</html>

在这个模板中,我使用block控制语句来定义派生模板可以插入代码的位置。 block被赋予一个唯一的名称,派生的模板可以在提供其内容时进行引用。

通过从基础模板base.html继承HTML元素,我现在可以简化模板index.html了:

{% extends "base.html" %}

{% block content %}
    <h1>Hi, {{ user.username }}!</h1>
    {% for post in posts %}
    <div><p>{{ post.author.username }} says: <b>{{ post.body }}</b></p></div>
    {% endfor %}
{% endblock %}


init

.py文件和routes.py文件代码不变。

查看页面。

在这里插入图片描述



版权声明:本文为qq_44813849原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。