Flask框架的學習與實戰（二）：實戰小專案
昨天寫了一篇flask開發環境搭建，今天繼續，進行一個實戰小專案-blog系統。
blog系統很簡單，只有一個頁面，然後麻雀雖小五臟俱全。這裡目的不是為了做專案而做專案，這篇文章本意是通過這次練習傳達以下幾個知識點：
1、從全域性上了解flask專案的目錄結構
2、flask專案的執行機制
3、flask框架實現MVC架構
4、flask-sqlalchemy 操作mysql資料庫
一、新建專案：blog系統
在pycharm中，新建flask專案，如下圖：
完成後的目錄結構是這樣的：非常簡單，一個static資料夾，一個templates資料夾，一個py檔案
以上的目錄結構是flask初始時的結構，這個只能應對很小的專案，對於大型複雜的專案，我們需要引入包的管理，MVC架構設計。
二、目錄結構重構，引入包管理
針對上面的結構，在最上層blog3目錄下，
1、新建一個runserver.py檔案，作為專案統一入口檔案
2、新建blog資料夾，把已存在的static,templates,blog3.py移到blog資料夾下，然後分別建controller、model資料夾。把blog3.py改名為__init__.py，
現在目錄如下所示：
這樣就相當於一個大工程結構了：
1）最上層blog2目錄是專案名稱，一個專案下可以包括多個模組，也就是應用，每個應用下有自己的配置檔案，初始化檔案，MVC架構。
2）runserver.py：與應用模組平級，作為專案啟動檔案
3）第二級blog2目錄：模組名稱
controller目錄：MVC中的C,主要存放檢視函式
model目錄：MVC中的M,主要存放實體類檔案，對映資料庫中表
templates：MVC中的V，存放html檔案
static：靜態檔案，主要存放css，js等檔案
__init__.py:模組初始化檔案，Flask 程式物件的建立必須在 __init__.py 檔案裡完成， 然後我們就可以安全的匯入引用每個包。
setting.py:配置檔案，資料庫使用者名稱密碼等等
三、開發程式碼
1、先把專案執行起來：
1） 編寫__init__.py檔案，建立專案物件，程式碼如下：
# -*- coding: utf-8 -*- from flask import Flask #建立專案物件 app = Flask(__name__)
2） 在runserver.py檔案中新增如下程式碼：
from blog3 import app @app.route('/') def hello_world(): return 'Hello World!'
if __name__ == '__main__': app.run(debug=True)
3）執行runserver.py檔案：
然後在瀏覽器中輸入：http://127.0.0.1:5000/,會顯示helloworld字樣
到這裡，專案雛形就可以正常運行了，下面的事情就簡單了，新增內容，讓專案有血有肉吧。
2、設計資料庫
本次練習比較簡單，就兩個表，一個user表，一個文章表。我們採用python的orm框架flask-sqlalchemy實現表的建立、增刪改查功能。
在model資料夾中新增User.py和Category.py檔案，內容如下：
1) User.py:
from blog2 import db class User(db.Model): __tablename__ = 'b_user' id = db.Column(db.Integer,primary_key=True) username = db.Column(db.String(10),unique=True) password = db.Column(db.String(16)) def __init__(self,username,password): self.username = username self.password = password def __repr__(self): return '<User %r>' % self.username
2) Category.py
from blog2 import db class Category(db.Model): __tablename__ = 'b_category' id = db.Column(db.Integer,primary_key=True) title = db.Column(db.String(20),unique=True) content = db.Column(db.String(100)) def __init__(self,title,content): self.title = title self.content = content def __repr__(self): return '<Category %r>' % self.title
3）在模組目錄blog2下新建setting.py檔案，配置資料庫連線資訊
# _*_ coding: utf-8 _*_ #除錯模式是否開啟 DEBUG = True SQLALCHEMY_TRACK_MODIFICATIONS = False #session必須要設定key SECRET_KEY='A0Zr98j/3yX R~XHH!jmN]LWX/,?RT' #mysql資料庫連線資訊,這裡改為自己的賬號 SQLALCHEMY_DATABASE_URI = "mysql://username:[email protected]:port/dbname"
4）讓專案讀取配置檔案
修改__init__.py:新增如下內容（紅色部分）：
# -*- coding: utf-8 -*- from flask import Flask from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
#import os
#print os.environ.keys()
#print os.environ.get('FLASKR_SETTINGS')
#載入配置檔案內容
app.config.from_object('blog2.setting') #模組下的setting檔名，不用加py字尾
app.config.from_envvar('FLASKR_SETTINGS') #環境變數，指向配置檔案setting的路徑
#建立資料庫物件
db = SQLAlchemy(app)
注意：FLASKR_SETTINGS環境變數需要手工單獨設定，window下可以在命令列中輸入：
E:\workdir\blog2> set FLASKR_SETTINGS=E:\workdir\blog2\blog2\setting.py
或者點選我的電腦-->高階-->環境變數，新建一個。
5）建立資料庫和表
windows命令列模式下，cd到專案runserver.py那個目錄下，進入python shell下：
輸入紅色部分：
E:\workdir\blog2>python Python 2.7.10 (default, May 23 2015, 09:44:00) [MSC v.1500 64 bit (AMD64)] on wi n32 Type "help", "copyright", "credits" or "license" for more information. >>> from blog2 import db >>> db.create_all() >>> >>>
如果沒有任何錯誤輸出代表建立資料庫和表成功了。這時我們到資料庫中去檢視：
資料庫已經存在了，再看看錶情況：發現沒有對應的b_user和b_category表。這是為什麼呢？是不是沒有找到model目錄下的兩個類呢。問題在於：__init__.py檔案沒有引入model包，導致__init__.py無法找到實體類。記住：一切模組物件的建立都在__init__.py中完成
在blog2目錄下的__init__.py新增如下程式碼：
#只有在app物件之後宣告，用於匯入model否則無法建立表
from blog2.model import User,Category
再次執行上面命令：db.create_all()方法。這時表已經建立成功了。
3、新增介面模板：如登陸頁面，顯示blog文章頁面，新增blog頁面
在templates目錄下新增三個html檔案：
layout.html:
1 <!doctype html> 2 <title>Flaskr</title> 3 <link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}"> 4 <div class=page> 5 <h1>Flaskr</h1> 6 <div class=metanav> 7 {% if not session.logged_in %} 8 <a href="{{ url_for('login') }}">log in</a> 9 {% else %} 10 <a href="{{ url_for('logout') }}">log out</a> 11 {% endif %} 12 </div> 13 {% for message in get_flashed_messages() %} 14 <div class=flash>{{ message }}</div> 15 {% endfor %} 16 {% block body %}{% endblock %} 17 </div>
login.html:
{% extends "layout.html" %} {% block body %} <h2>Login</h2> {% if error %}<p class=error><strong>Error:</strong> {{ error }}{% endif %} <form action="{{ url_for('login') }}" method=post> <dl> <dt>Username: <dd><input type=text name=username> <dt>Password: <dd><input type=password name=password> <dd><input type=submit value=Login> </dl> </form> {% endblock %}
show_entries.html:
{% extends "layout.html" %} {% block body %} {% if session.logged_in %} <form action="{{ url_for('add_entry') }}" method='POST' class=add-entry> <dl> <dt>Title: <dd><input type=text size=30 name=title> <dt>Text: <dd><textarea name=text rows=5 cols=40></textarea> <dd><input type=submit value=Share> </dl> </form> {% endif %} <ul class=entries> {% for entry in entries %} <li><h2>{{ entry.title }}</h2>{{ entry.content|safe }} {% else %} <li><em>Unbelievable. No entries here so far</em> {% endfor %} </ul> {% endblock %}
對應static中新增css檔案：style.css
body { font-family: sans-serif; background: #eee; }
a, h1, h2 { color: #377BA8; }
h1, h2 { font-family: 'Georgia', serif; margin: 0; }
h1 { border-bottom: 2px solid #eee; }
h2 { font-size: 1.2em; }
.page { margin: 2em auto; width: 35em; border: 5px solid #ccc;
padding: 0.8em; background: white; }
.entries { list-style: none; margin: 0; padding: 0; }
.entries li { margin: 0.8em 1.2em; }
.entries li h2 { margin-left: -1em; }
.add-entry { font-size: 0.9em; border-bottom: 1px solid #ccc; }
.add-entry dl { font-weight: bold; }
.metanav { text-align: right; font-size: 0.8em; padding: 0.3em;
margin-bottom: 1em; background: #fafafa; }
.flash { background: #CEE5F5; padding: 0.5em;
border: 1px solid #AACBE2; }
.error { background: #F0D6D6; padding: 0.5em; }
4、新增業務邏輯
在controller目錄下新建blog_message.py檔案：
1 from blog2.model.User import User 2 from blog2.model.Category import Category 3 import os 4 5 from blog2 import app,db 6 from flask import request,render_template,flash,abort,url_for,redirect,session,Flask,g 7 8 @app.route('/') 9 def show_entries(): 10 categorys = Category.query.all() 11 return render_template('show_entries.html',entries=categorys) 12 13 @app.route('/add',methods=['POST']) 14 def add_entry(): 15 if not session.get('logged_in'): 16 abort(401) 17 title = request.form['title'] 18 content = request.form['text'] 19 category = Category(title,content) 20 db.session.add(category) 21 db.session.commit() 22 flash('New entry was successfully posted') 23 return redirect(url_for('show_entries')) 24 25 @app.route('/login',methods=['GET','POST']) 26 def login(): 27 error = None 28 if request.method == 'POST': 29 username = request.form['username'] 30 password = request.form['password'] 31 user = User.query.filter_by(username=request.form['username']).first() 32 passwd = User.query.filter_by(password=request.form['password']).first() 33 34 if user is None: 35 error = 'Invalid username' 36 elif passwd is None: 37 error = 'Invalid password' 38 else: 39 session['logged_in'] = True 40 flash('You were logged in') 41 return redirect(url_for('show_entries')) 42 return render_template('login.html', error=error) 43 44 45 @app.route('/logout') 46 def logout(): 47 session.pop('logged_in', None) 48 flash('You were logged out') 49 return redirect(url_for('show_entries'))
千萬不要忘了在模組級目錄下(blog2目錄)的__init__.py檔案引入檢視模組，程式碼如下：
#只有在app物件之後宣告，用於匯入view模組 from blog2.controller import blog_manage
5、執行專案，效果如下：
1）輸入http://127.0.0.1:5000/,正常情況下你的應該是空白的，因為還沒有任何資料。
2）點選log in
忘了告訴你了，你要事先在b_user表中新增一個使用者喔，因為登陸要驗證使用者的，否則你是無法登陸成功的。
3） 新增條目
以上就是這個小專案的所有頁面，很簡單吧。你一定能搞定！！！
【總結】：通過本次練習，是否對flask框架執行機制有所瞭解呢，是不是已經有了全域性的認識了，如果ok，那麼這個小練習就有存在價值了。
參考文獻：
【flask快速入門中文版】http://docs.jinkan.org/docs/flask/
【flask快速入門英文版】http://flask.pocoo.org/docs/0.11/
【flask-sqlalchemy中文版】http://www.pythondoc.com/flask-sqlalchemy/index.html
【flask-sqlalchemy英文版】http://flask-sqlalchemy.pocoo.org/2.1/