2024年最全《我用Python写网站01》Hello Flask(1)

既然是写Flask应用，那安装Flask包肯定是必不可少的：

(venv)~/ahoh$ pip install -U pip # 更新pip

(venv)~/ahoh$ pip install flask # 安装Flask

OK，现在环境就布置好了，可以开始愉快的敲代码了。

首先，我需要一个Flask的入口文件，按照官方文档的建议，就起名app.py：

(venv)~/ahoh$ touch app.py

最简单的Flask项目，就只需要一个文件，我的Hello World也是这样。

在 app.py 文件中写入以下代码：

~/ahoh/app.py

from flask import Flask

app = Flask(name)

@app.route(‘/’)

def index():

return ‘你好， Flask’

你可以选择使用Vim，也可以选择VSCode和PyCharm等集成开发工具。

到这里为止，整个Hello World项目就写完了，真是太容易了。

下面就要跑起来我的Hello World项目，只需要在命令行中输入flask run：

(venv)~/ahoh$ flask run # 启动Flask应用

• Environment: production

WARNING: This is a development server. Do not use it in a production deployment.

Use a production WSGI server instead.

• Debug mode: off

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

如果输出和上面一样，很有可能就是成功了，这个时候，只需要在浏览器中输入127.0.0.1:5000就能访问网站了！

你的结果和我一样吗？为了写这个小项目，我还专门搭建了项目论坛：www.ahoh.club ，欢迎来访！（这不是广告，里面只有我一个人，哈哈哈）

2. 你好，HTML

---

上小节中，我已经成功让Hello World项目输出了你好，Flask，但这绝不是我最终的要求。

我想要的必然是花里胡哨的网页，也就是HTML页面。

既然需要HTML，那就直接写个HTML代码，并通过/html访问新的HTML页面，在app.py中追加代码如下：

~/ahoh/app.py

@app.route(‘/html’)

def html():

html_str = “”"

我的第一个HTML页面

---

Oh，我的老天爷啊，这真是一个了不得的项目，我向上帝保证这是真的。

“”"

return html_str

然后，使用flask run命令重新启动Ahoh项目，在浏览器中输入127.0.0.1/html，就可以看到一个简单的HTML页面了！

虽然已经可以看到了HTML页面，还存在一个严重的问题：哪个小傻瓜还会在业务代码里面写HTML呢？

常规情况下，HTML都是存储在.html文件中的，和业务代码隔离，还好Flask早就想好处理方式。

在Flask中，所有的HTML文件默认存储在templates文件夹下，所以，需要先创建templates文件夹，然后在文件夹内创建HTML文件，这里我就创建一个hello.html文件。

(venv)~/ahoh$ mkdir templates # 创建templates文件夹

(venv)~/ahoh$ touch templates/hello.html # 创建html文件

然后将上面例子中html_str中的值复制到hello.html文件中，然后稍作修改，如下：

我的第二个HTML页面

---

How Are You, Savior

首先，在app.py文件的头部引入render_template函数：

from flask import render_template

然后，在app.py 中追加新的路由函数，访问路径就定为/hello：

~/ahoh/app.py

@app.route(‘/hello’)

def hello():

return render_template(‘hello.html’)

这样，就完成了hello.html文件的添加，此时，使用flask run重启服务，在浏览器中输入地址127.0.0.1:5000/hello就能看到第二个HTML页面了！

这里，我们使用了一个新的函数render_template()，这个函数可以直接渲染HTML文件，不需要我们从文件中读出HTML代码后再返回，后面我们使用的Jinja模板也需要通过这个函数渲染。

3. 你好，Jinja

---

截至小节2，我们已经可以成功的利用Flask返回一个HTML页面了。

但是，当前的页面只是一个静态的HTML，文件中的内容都是写死了的，这当然不是我想要的结果。

这里就要引入Flask默认的HTML模板引擎Jinja。

在templates文件夹中，新建jinja.html文件，然后将hello.html中的内容复制过去，并稍作更改。

如下：

我的第一个Jinja页面

---

How Are You, {{name}}

然后，在app.py中新建一个路由函数（视图函数），即追加如下代码：

~/ahoh/app.py

@app.route(‘/jinja’)

def jinja():

return render_template(‘jinja.html’,name=‘Jinja’) # 使用name='Jinja’向HTML中传入值

这里，我们就成功的创建了一个动态的页面，在视图函数中，修改name的值，前端HTML就会做出相应的变化。

而name的值，从后端（视图中）传递到前端（HTML页面中）也非常的简单，只需要在render_templates()函数中增加一个参数就可以了。

到这里就结束了吗？当然，没有，我们虽然创建了一个使用Jinja的HTML页面，也实现了从后端向前端传递参数，可以动态的修改页面，但是，如何从前端向后端传递参数呢？

在templates文件夹中创建文件新的HTML页面，命名为：para.html，然后将jinja.html中的内容复制过去，并稍作修改，如下：

传递参数页面

---

How Are You, {{name}}

然后在app.py中创建一个新的视图函数，在app.py文件中追加如下内容：

~/ahoh/app.py

@app.route(‘/para’)

@app.route(‘/para/string:name’)

def para(name=‘God’):

return render_template(‘para.html’,name=name)

现在，就可以重启Ahoh应用，然后在浏览器地址栏中输入127.0.0.1:5000/para/老天爷，效果如下：

这种传递参数的方式是通过URL路径传递，可能大多数人更熟悉的是使用?para_name=value的方式，在Flask中同样是可以用的，不过需要在视图函数中使用request.args.get('para_name')的方式获取传递的值。

现在能在网上找到很多很多的学习资源，有免费的也有收费的，当我拿到1套比较全的学习资源之前，我并没着急去看第1节，我而是去审视这套资源是否值得学习，有时候也会去问一些学长的意见，如果可以之后，我会对这套学习资源做1个学习计划，我的学习计划主要包括规划图和学习进度表。

分享给大家这份我薅到的免费视频资料，质量还不错，大家可以跟着学习

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里无偿获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！