小白初尝flask(1)_小白flask-CSDN博客

本文链接：https://blog.csdn.net/weixin_44942551/article/details/90142198

http://docs.jinkan.org/docs/flask/index.html)这个是flask的中文文档
http://www.pythondoc.com/flask-mega-tutorial/index.html 这个是一个大神写的教程

前言：

这不是教程，只是我的个人笔记

虚拟环境

首先需要创建一个项目文件夹，并且使用命令行cd进入文件夹，创建一个虚拟环境，这一点十分重要

C:\Users\DELL\Desktop\myweb>python -m venv createvenv

python -m venv 这一段代码是固定的
createvenv 这一段是创建的虚拟环境的文件夹名称

C:\Users\DELL\Desktop\myweb\ven\Scripts>activate

该命令会进入虚拟环境

(ven) C:\Users\DELL\Desktop\myweb>

此为进入虚拟环境,在此环境下使用pip安装flask
pip install flask
pip install flask-login
pip install flask-openid
pip install flask-mail
pip install flask-sqlalchemy
pip install sqlalchemy-migrate
pip install flask-whooshalchemy
pip install flask-wtf
pip install flask-babel
pip install guess_language
pip install flipflop
pip install coverage
这些是以后会用到的包

开始编写最简单的"Hello World!"

在myweb文件下创建

app
tem
run.py
在app中创建一个__init__.py

from flask import Flask
app = Flask(__name__)
from app import views

创建一个简单的初始化脚本
views还未创建，接下来创建一个views.py，依然在app文件内

from app import app

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

在根目录下创建一个run.py

from app import app
app.run(debug = True)

之后再命令行中执行python run.py即可启动服务器，根据命令行内所给访问即可

 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

即访问 http://127.0.0.1:5000/

修改views与编写html

一般地，我们需要先编写我们的html，根据html来修改我们的views
在app/templates/内创建一个index.html

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

这里使用的是jinja2模板引擎

{{ user.nickname }}对应的是接下来在views中返回的内容
修改app下的view

from flask import render_template
from app import app

@app.route('/')
@app.route('/index')
def index():
    user = { 'nickname': 'Zhang' } # 这里因为还没有登陆应用，所以使用自己写的假用户
    return render_template("index.html",
        title = 'Home',
        user = user)

这里的title即index.html中的{{ title }},同理user为
{{ user.nickname }}
此时运行程序后会得到Hello,Zhang
且可以看到标题是Home-Blog
jinja2会把提供的参数替换掉 {{xxx}}内的值

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

if语句

修改一下index即可让网页略具动态，这里用到的是jinjia2的控制语句
{% if xx %}
xxx
{% else %}
xxx
{% endif %}

与平常编写的python语句有些类似，但必须endif，且花括号内必须加一对百分号%

for语句

修改views文件

def index():
    user = { 'nickname': 'Miguel' } 
    posts = [
        {
            'author': { 'nickname': 'John' },
            'body': 'Beautiful day in Portland!'
        },
        {
            'author': { 'nickname': 'Susan' },
            'body': 'The Avengers movie was so cool!'
        }
    ]
    return render_template("index.html",
        title = 'Home',
        user = user,
        posts = posts)

这里的posts是我们自己伪造的，以后会有直接的post
接下来修改idex.html

<html>
    <head>
        {% if title %}
        <title>{{ title }} -Blog</title>
        {% else %}
        <title>Welcome Blog</title>
        {% endif %}
    </head>
    <body>
        <h1>Hello,{{ user.nickname }}</h1>
        <hr>
        <table border="1">
         {% for post in posts %}
            <tr>
             <th>{{ post.author.nickname }}</th>
             <th>{{ post.body }}</th>
            </tr>
         {% endfor %}
        </table>
    </body>
</html>

这里将（伪）posts的数据做成一个列表,这里加入了<hr>标签作为分割线，访问结果如下。
循环语句类似于if语句，需要一句{% endfor %}做结束标志

模板的继承

在编写html的时候，网页与网页之间会需要一些公共的部分，这时候我们可以选择
1.复制粘贴
2.编写一个html作为base，命名为base.html，其余网页只需继承该网页的内容（如导航）即可
显然前者虽然简单但却会让网页显得极其冗杂。

首先，在index.html同目录下创建一个名为base.html的文件

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

这里的{% block content %}xxx{% endblock %}两个花括号之间夹着的xxx即为以后在其他html文件中编写的内容
基于此修改index.html

{% extends "base.html" %}
{% block content %}
<h1>Hello,{{ user.nickname }}</h1>
<hr>
<table border="1">
 {% for post in posts %}
    <tr>
     <th>{{ post.author.nickname }}</th>
     <th>{{ post.body }}</th>
    </tr>
 {% endfor %}
</table>
{% endblock %}

在这里插入图片描述
结果如上！