- 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!
- ServiceNow Application Development
- 精通JavaScript+jQuery:100%動態(tài)網(wǎng)頁設(shè)計密碼
- Angular UI Development with PrimeNG
- 軟件項目管理(第2版)
- WebAssembly實戰(zhàn)
- 從程序員到架構(gòu)師:大數(shù)據(jù)量、緩存、高并發(fā)、微服務、多團隊協(xié)同等核心場景實戰(zhàn)
- 劍指大數(shù)據(jù):企業(yè)級數(shù)據(jù)倉庫項目實戰(zhàn)(在線教育版)
- Learning Material Design
- Instant Debian:Build a Web Server
- Go語言底層原理剖析
- 零基礎(chǔ)學HTML+CSS
- 從零學Java設(shè)計模式
- Java并發(fā)實現(xiàn)原理:JDK源碼剖析
- Elasticsearch Blueprints
- 編程的原則:改善代碼質(zhì)量的101個方法