標籤：-- inf 目錄 分享圖片 pac mkdir UNC activate class
本項目全部在虛擬環境中運行，因此請參照前面的文章，連結為80302975 建立虛擬環境後，再接著完成本教程的學習。
0 開始之前網上看了很多教程，都不是很滿意，因此自己寫一個大型教程，從入門到做出一個比較完整的部落格。此次教程不是直接把整個部落格直接代碼整理出來然後運行一遍就完事，我會從flask的各個模組講起。所以，如果你沒有接觸過flask，按照整個教程完整做一遍會掌握flask。(前提是你要有一定Python和web基礎)
1 Hello world !如果你接觸過任何程式設計語言，對這個小標題都會很熟悉，此次對flask的學習也是從這個小例子開始。
準備工作環境
duke@coding:~$ mkdir flask_tutorialduke@coding:~$ cd flask_tutorial/duke@coding:~/flask_tutorial$ virtualenv --no-site-package venvUsing base prefix ‘/home/duke/.pyenv/versions/3.6.4‘New python executable in /home/duke/flask_tutorial/venv/bin/python3.6Also creating executable in /home/duke/flask_tutorial/venv/bin/pythonInstalling setuptools, pip, wheel...done.duke@coding:~/flask_tutorial$ source venv/bin/activate#進入Python虛擬環境(venv) duke@coding:~/flask_tutorial$(venv) duke@coding:~/flask_tutorial$ pip install flask#建立flask目錄(venv) duke@coding:~/flask_tutorial$ mkdir flask(venv) duke@coding:~/flask_tutorial$ cd flask/(venv) duke@coding:~/flask_tutorial/flask$
正式開始
(venv) duke@coding:~/flask_tutorial/flask$ mkdir app(venv) duke@coding:~/flask_tutorial/flask$ cd app/#建立初始設定檔案(venv) duke@coding:~/flask_tutorial/flask/app$ touch __init__.py
在_ _ init _ _.py中寫如下代碼，你可以使用pycharm,vscode等IDE來更快的書寫代碼。
app/_ _ init _ _.py : 項目初始化
from flask import Flask#建立app應用,__name__是python預定義變數，被設定為使用本模組.app = Flask(__name__)#如果你使用的IDE，在routes這裡會報錯，因為我們還沒有建立呀，為了一會不要再回來寫一遍，因此我先寫上了from app import routes
建立路由模組,你可以使用IDE直接建立，沒有必要要使用命令列建立
(venv) duke@coding:~/flask_tutorial/flask/app$ touch routes.py
app/routes.py : 首頁路由
#從app模組中即從__init__.py中匯入建立的app應用from app import app#建立路由，通過路由可以執行其覆蓋的方法，可以多個路由指向同一個方法。@app.route(‘/‘)@app.route(‘/index‘)def index(): return "Hello,World!"
現在基本都齊全了，但是我們還是需要在app模組之外建立一個主入口，即執行這個主入口就可以達成運行整個項目的目的。
(venv) duke@coding:~/flask_tutorial/flask/app$ cd ..(venv) duke@coding:~/flask_tutorial/flask$ touch myblog.py
myblog.py : 項目入口
#從app模組中匯入app應用from app import app#防止被引用後執行，只有在當前模組中才可以使用if __name__==‘__main__‘: app.run()
現在整個小demo就完成了，結構應該是這樣的
flask├── app│ ├── __init__.py│ └── routes.py└── myblog.py
ok,接下來就讓項目跑起來
(venv) duke@coding:~/flask_tutorial/flask$ export FLASK_APP=myblog.py(venv) duke@coding:~/flask_tutorial/flask$ flask run * Serving Flask app "myblog.py" * Environment: production WARNING: Do not use the development server in a production environment. Use a production WSGI server instead. * Debug mode: off * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
在瀏覽器裡輸入http://127.0.0.1:5000/ 或者 http://127.0.0.1:5000/index 都可以訪問你的項目啦!
2 模板在1裡，我們完成了一個傳回值的顯示，但這肯定遠遠不能滿足我們需求的。因為我們希望看到的是豐富多彩的網頁呀～,有什麼辦法呢？上一步咱們返回了一個值，那咱們返回一個網頁會怎麼樣呢？
app/routes.py : 返回一個網頁
from app import app@app.route(‘/‘)@app.route(‘/index‘)def index(): user = {‘username‘:‘duke‘} html = ‘‘‘ <html> <head> <title>Home Page - Microblog</title> </head> <body> <h1>Hello, ‘‘‘ + user[‘username‘] + ‘‘‘!</h1> </body></html> ‘‘‘ return html
，這樣就完成了返回網頁的目的，但是這樣實在是太麻煩了，因此肯定有解決這個問題的辦法嘍。對，模板就是解決這個問題的辦法。
(venv) duke@coding:~/flask_tutorial/flask$ mkdir app/templates#在建立的templates中建立一個index.html(venv) duke@coding:~/flask_tutorial/flask/app/templates$ touch index.html
app/templates/index.html : 首頁模板，將資料顯示在其中
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>{{ title }} - 部落格</title></head><body> <h1> Hello ,{{ user.username }} !</h1></body></html>
這裡出現{{ }} 意味著變數，可以接受資料的地方。既然在這裡寫了變數，那麼就要在路由中修改對應的格式，因為要把資料返回才可以。
app/routes.py : 將寫在路由中的html刪除，並增加一些變數。
#匯入模板模組from flask import render_templatefrom app import app@app.route(‘/‘)@app.route(‘/index‘)def index(): user = {‘username‘:‘duke‘} #將需要展示的資料傳遞給模板進行顯示 return render_template(‘index.html‘,title=‘我的‘,user=user)從新運行後，效果還是符合預期的。但是，如果你傳遞至模板的資料是空的，那頁面顯示豈不是很難看？因此我們需要在模板中加上一些判斷，看資料是否為空白。
app/templates/index.html : 首頁模板，完善模板
<!DOCTYPE html><html ><head> <meta charset="UTF-8"> {% if title %} <title>{{ title }} - 部落格</title> {% else %} <title>歡迎來到部落格!</title> {% endif %} </head> <body> <h1>Hello, {{ user.username }}!</h1> </body></html>如果傳進來的資料很多，那麼就可以使用迴圈來展示資料。首先，還是對路由裡的方法進行修改。
app/routes.py : 增加一些資料
from flask import render_templatefrom app import app@app.route(‘/‘)@app.route(‘/index‘)def index(): user = {‘username‘:‘duke‘} posts = [ { ‘author‘:{‘username‘:‘劉‘}, ‘body‘:‘這是模板模組中的迴圈例子～1‘ }, { ‘author‘: {‘username‘: ‘忠強‘}, ‘body‘: ‘這是模板模組中的迴圈例子～2‘ } ] return render_template(‘index.html‘,title=‘我的‘,user=user,posts=posts)增加了這些資料之後要對模板中的結構進行一些修改。
app/templates/index.html : 迴圈展示資料
<!DOCTYPE html><html ><head> <meta charset="UTF-8"> {% if title %} <title>{{ title }} - 部落格</title> {% else %} <title>歡迎來到部落格!</title> {% endif %} </head> <body> <h1>你好呀, {{ user.username }} !</h1> {% for post in posts %} <div><p>{{ post.author.username }} 說:<b>{{ post.body }}</b></p></div> {% endfor %} </body></html>
我們發現，每次修改頁面都是要有很多重複的不必要代碼，因此把重複的代碼放到一個基類模板裡，在裡面留上預留位置，這樣只需要修改其中一部分就可以了，十分方便。
建立一個基類模板
(venv) duke@coding:~/flask_tutorial/flask/app/templates$ touch base.htmlapp/templates/base.html : 填充內容
<!DOCTYPE html><html ><head> <meta charset="UTF-8"> {% if title %} <title>{{ title }} - 部落格</title> {% else %} <title>歡迎來到部落格!</title> {% endif %} </head> <body> <div>部落格 : <a href="/index">首頁</a></div> {% block content %} {% endblock %} </body></html>那麼這有什麼作用呢？注意這裡面有{% block content %} {% endblock %}這一對標籤，因此其他頁面只需要繼承這個頁面，然後寫上相同的標籤，在標籤內寫上內容，就可以完整的在頁面上顯示所有內容。既然有了基類模板，那麼index.html顯示就不需要那麼多代碼了，這裡對index.html進行修改。
app/templates/index.html : 修改格式和內容
{% extends ‘base.html‘ %} {% block content %} <h1>你好呀, {{ user.username }} !</h1> {% for post in posts %} <div><p>{{ post.author.username }} 說:<b>{{ post.body }}</b></p></div> {% endfor %} {% endblock %}再此訪問首頁面的地址試一試！
Flask從入門到做出一個部落格的大型教程(一)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
