- Building Web Applications with Flask
- Italo Maia
- 432字
- 2021-07-16 14:13:04
Serving HTML pages
First, to make our hello
function respond with HTML, all we have to do is change it like this:
def hello(): return "<html><head><title>Hi there!</title></head><body>Hello World!</body></html>", 200
In the preceding example, hello
is returning a HTML formatted string and a number. The string will be parsed as HTML by default while 200
is an optional HTTP code indicating a successful response. 200
is returned by default.
If you refresh your browser with F5, you'll notice that nothing has changed. That's why the Flask development server is not reloading when the source changes. That only happens when you run your application in debug mode. So let's do that:
app = Flask(__name__) app.debug=True
Now go to the terminal where your application is running, type Ctrl + C
then restart the server. You will notice a new output besides the URL where your server is running—something about "stat". That indicates your server will reload the code on source modification. That's nice, but did you spot the crime we just committed: defining our template inside the function that handles the response? Be careful, the MVC gods might be watching. Let's separate where we define our view from where we define our controller. Create a folder called templates and a file called index.html
inside it. The index.html
file content should be like this:
<html> <head><title>Hi there!</title></head> <body>Hello World!</body> </html>
Now change your code like this:
from flask import Flask, render_response @app.route("/") def hello(): return render_template("index.html")
Did you see what we did there? render_response
is capable of loading templates from the templates/
folder (a default for Flask) and you can render it just by returning the output.
Now let's add some JavaScript and CSS styles. By default, the Flask built-in development server serves all files in your project
folder that are in a subfolder called static
. Let's create ours and add some files to it. Your project tree should look like this:
project/ -main.py -templates/ --index.html -static/ --js ---jquery.min.js ---foundation.min.js ---modernizr.js --css ---styles.css ---foundation.min.css
Notice that I add files from the foundation.zurb
framework, a nice CSS framework available in http://foundation.zurb.com/. I advise you to do the same in order to have a modern, good-looking site. The path to the static files in your template should look like this:
<script src='/static/js/modernizr.js'></script>
The folder, /static
before the real file path is a route served by default by Flask that only works in debug mode. In production, you would have the HTTP server serving your static files for you. See the attached code for this chapter for the full example.
Try improving the hello world example with some nice CSS styling!
- 多媒體CAI課件設計與制作導論(第二版)
- Qt 5 and OpenCV 4 Computer Vision Projects
- C#高級編程(第10版) C# 6 & .NET Core 1.0 (.NET開發經典名著)
- Microsoft Exchange Server PowerShell Cookbook(Third Edition)
- GraphQL學習指南
- Cross-platform Desktop Application Development:Electron,Node,NW.js,and React
- C語言程序設計
- C語言程序設計案例式教程
- C++寶典
- 速學Python:程序設計從入門到進階
- 用案例學Java Web整合開發
- Android應用開發攻略
- JavaScript Mobile Application Development
- Pandas入門與實戰應用:基于Python的數據分析與處理
- 情境微課開發(第2版)