跟ChatGPT学网络编程 – Flask简介(2)

发表于由

让我们来回顾一下上一篇文章的代码：


from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello_world():
    return '<h1 style="color: blue">Hello, World!</h1>'

if __name__ == '__main__':
    app.run(debug=True)

首先我们导入了Flask模块，然后创建了一个名为app的flask实例，@app.route(‘/’)定义了一个路由，这里(‘/’)表示的是网站的根目录，当用户访问根目录的时候，就会调用hello_world()程序在网页上显示”hello world”，最后一行代码是执行该程序。

让我们来增加一下复杂度，用户可以访问网站的不同目录，网页显示不同的内容。

我：帮我增加几个不同的路由，一个是”login”, 网页显示“这里是登录页面”，一个是“registration”，网页显示是注册页面

ChatGPT：好的，下面是一个示例程序，其中包括了三个路由，分别为首页、登录页面和注册页面：


from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return '<h1>Welcome to my website!</h1>'

@app.route('/login')
def login():
    return '<h2>This is the login page.</h2>'

@app.route('/registration')
def registration():
    return '<h2>This is the registration page.</h2>'

if __name__ == '__main__':
    app.run()

在这个示例程序中，我们定义了三个路由，分别对应着三个不同的页面。当用户访问首页（'/'）时，将会显示'<h1>Welcome to my website!</h1>'；当用户访问登录页面（'/login'）时，将会显示'<h2>This is the login page.</h2>'；当用户访问注册页面（'/registration'）时，将会显示'<h2>This is the registration page.</h2>'。你可以根据需要修改返回的字符串来定制你自己的页面。

复制代码到VS Code中，运行结果如下：

首页：

图片

登录页面：

图片

注册页面：

图片

我：帮我在主页增加超链接，链接到其它两个页面

ChatGPT：好的，你可以在主页中增加超链接来链接到其他页面。下面是一个示例程序，其中包括了三个路由，分别为首页、登录页面和注册页面，并在首页增加了两个超链接：

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return '<h1>Welcome to my website!</h1><p><a href="/login">Login</a></p><p><a href="/registration">Registration</a></p>'

@app.route('/login')
def login():
    return '<h2>This is the login page.</h2>'

@app.route('/registration')
def registration():
    return '<h2>This is the registration page.</h2>'

if __name__ == '__main__':
    app.run()

在这个示例程序中，我们在首页的返回字符串中增加了两个超链接。第一个超链接指向登录页面，它的文本为Login，链接地址为/login；第二个超链接指向注册页面，它的文本为Registration，链接地址为/registration。当用户点击这两个超链接时，将会跳转到对应的页面。你可以根据需要修改返回的字符串和超链接的链接地址来实现你自己的页面导航。

运行结果：

图片

看上去不错，但是在实际网站搭建中，由于网页本身的复杂性，不同的页面往往用不同的html来管理，如何在Flask中实现呢？

我：我想将登录和注册页面交由不同的html页面管理

ChatGPT：好的，如果你想将登录和注册页面交由不同的HTML页面管理，可以使用Flask中的模板渲染功能。Flask提供了Jinja2模板引擎来帮助我们生成HTML页面。我们可以将页面的模板保存在独立的HTML文件中，然后在路由中调用模板并传递参数，Jinja2会自动将参数填充到HTML模板中生成最终的HTML页面。下面是一个示例程序，其中使用了两个独立的HTML文件分别管理登录和注册页面：


from flask import Flask, render_template

app = Flask(__name__)

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

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

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

if __name__ == '__main__':
    app.run()

在这个示例程序中，我们使用了render_template函数来调用模板文件，并将参数传递给模板文件。模板文件保存在templates文件夹下面，Flask会自动查找这个文件夹来寻找模板文件。在模板文件中，我们可以使用Jinja2的语法来引用参数和控制流程。例如，下面是一个简单的登录页面的模板文件login.html：


<!doctype html>
<html>
  <head>
    <title>Login</title>
  </head>
  <body>
    <h2>Login Page</h2>
    <form>
      <label>Username:</label>
      <input type="text" name="username"><br>
      <label>Password:</label>
      <input type="password" name="password"><br>
      <input type="submit" value="Login">
    </form>
  </body>
</html>

在这个模板文件中，我们使用了HTML表单来实现登录页面，并使用Jinja2的语法来引用参数。例如，我们可以使用{{ title }}来引用传递进来的title参数。在调用render_template函数时，我们可以将参数以关键字参数的形式传递进去。例如，下面是一个调用render_template函数的示例：

@app.route('/login')
def login():
    return render_template('login.html', title='Login Page')

在这个示例中，我们将title参数的值设为'Login Page'，然后将它传递给render_template函数。在login.html模板文件中，我们可以使用{{ title }}来引用这个参数并生成相应的HTML代码。

注意到chatgpt也将根目录切换到了home.html文件，让他帮我们生成一下，并且超链接到登录和注册页面。

我：创建home.html，链接到login.html和registration.html

ChatGPT:好的，下面是一个示例的home.html文件，其中包含了链接到login.html和registration.html的超链接：

<!doctype html>
<html>
  <head>
    <title>Home</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>Please select an option:</p>
    <ul>
      <li><a href="{{ url_for('login') }}">Login</a></li>
      <li><a href="{{ url_for('registration') }}">Registration</a></li>
    </ul>
  </body>
</html>

在这个模板文件中，我们使用了{{ url_for('login') }}和{{ url_for('registration') }}来生成链接到login和registration路由的超链接。在调用url_for函数时，我们需要传入路由函数的名称，而不是路由的URL路径。Flask会自动根据路由函数的名称来生成相应的URL路径，这样我们就可以避免硬编码URL路径的问题。

在项目文件夹下面建立”templates”目录，然后在该目录下建立home.html, login.html

图片

运行结果如下：

图片
图片

chatgpt还很贴心地在登录页面中创建了一个简单的登录界面。

小结一下：

1、@app.route()用于将一个函数绑定到指定的 URL 路径上，使得当该 URL 路径被请求时，该函数会被执行。具体来说，当 Flask 应用收到一个 HTTP 请求时，它会根据请求的 URL 路径和 HTTP 方法（GET、POST 等）来匹配相应的路由函数，并将请求的参数传递给该函数进行处理。

2、模板渲染：使用了render_template函数来调用模板文件，并将参数传递给模板文件。模板文件保存在templates文件夹下面，Flask会自动查找这个文件夹来寻找模板文件。