編寫一個簡單的flask的前後端互動的網頁(flask簡單知識的講解)

鮮衣發表於2021-04-23

實驗原理:
1.什麼是flask
Flask是一個使用Python編寫的輕量級Web應用框架,其WSGI工具採用Werkzeng,模板引擎使用Jinja2。Flask與 Django之間的區別就是Django將所有的擴充功能全部集中在了一起,因此其佔據記憶體較多,而Flask作為一個輕量級的框架,通過擴充或者python的庫來增加功能,因此佔據的記憶體小。需要什麼,匯入什麼。
並且flask基於python語言,對有一定python基礎的開發者十分友好。
2.Flask基礎知識
a.Flask目錄結構:
對於一個專案,flask對於專案檔案的命名具有一定的要求。
在工作目錄下一定要有兩個資料夾和一個檔案,其中圖片,視訊,css程式碼,js程式碼,icon等靜態的資源放 在static資料夾下(名字一定不能弄錯),css程式碼要新建一個css目錄並放在該目錄下,js程式碼要新建一個js目錄並放在該目錄下。
之後,對於html檔案,要放在templates資料夾下。最後,執行的.py檔案預設命名為app.py以及wsgi.py。

總之如下:

b.Flask基礎用法:
首先,Flask在python中是作為類封裝好的,因此要先使用import來匯入flask類,其次就是要例項化類,使用app = Flask(name)可以例項化一個flask類。之後,Flask開發的基本模式就是在程式中將一個檢視函式分配一個URL,當使用者訪問一個URL時,系統就會執行這個URL對應的檢視函式,然後將返回值渲染到瀏覽器上。


將檢視函式賦予url需要使用@route(“url”)裝飾器,url為要訪問的資源頁面,預設情況下在根目錄,也就是“/”,然後在這個裝飾器後定義檢視函式。
檢視函式的返回值,可以直接插入html程式碼,也可以使用render_template()函式來指定html檔案(該檔案一定要放在templates資料夾下),也可以使用redirect函式將其重定向到另一個檢視函式對應的url。

c.如何在html中插入flask程式碼,如何將flask中的資料傳入html中?
在html中,使用變數以及呼叫函式要使用{{變數名}}來指定flask程式碼中的變數,Flask的python語句要使用{% %}來插入,如:

注意,if語句後面要有endif,for語句後面要有endfor。
如何傳輸資料:
可以使用render_template()函式,第一個引數為要渲染的html檔案,後面的多個引數為 html中的變數名 = py中的變數名。

d.Flask中的資料庫flask_sqlalchemy
使用這個資料庫,首先需要指定db檔案的工作目錄,

WIN = sys.platform.startswith('win')
if WIN:
    prefix = 'sqlite:///'
else:
    prefix = 'sqlite:////'
app.config['SECRET_KEY'] = os.getenv('SECRET_KEY', 'secret string')

app.config['SQLALCHEMY_DATABASE_URI'] = os.getenv('DATABASE_URL', prefix + os.path.join(app.root_path, 'data.db'))
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

這些配置的目的就是將db檔案命名為data.db然後將db檔案的生成以及工作目錄都指定到根目錄下。
由於資料庫在python中也是一個物件,因此也需要例項化,使用db = SQLAlchemy(app)例項化。
在flask_sqlalchemy中,一個表就是python中的一個類,因此,要定義表,就得定義一個類。

class books(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    book_id = db.Column(db.Integer)
    book_name = db.Column(db.String(100))
    classification = db.Column(db.String(20))

然後使用db.create_all()方式來在db檔案中建立一個這樣的表,然後例項化這個類,將這個類的物件作為一行新增到表中(db.session.add(Book)),然後再使用db.session.commit()提交更新,就可以完成一個資料的填入了,之後在使用類方法的query.all()就可以查詢出所有的資訊了。

e.如何引用css檔案:
html引用flask專案中的檔案,只能使用url_for方法,並且由於這個是python函式,因此要用{{}}括起來,然後有兩個引數,第一個引數代表這個檔案是靜態檔案還是其他的檔案,因此是”static”,第二個引數代表的是以一個引數為根目錄的css檔案的路徑資訊。程式碼如下:

<link rel="stylesheet" href="{{ url_for('static',filename ='css/style.css') }}">

f.如何執行以及開發flask程式:
首先,如果不想讓環境之間相互影響,建議使用pipenv來管理包,首先使用pipenv install來安裝需要的包,如果沒有對應的配置檔案,會生成兩個配置檔案,Pipfile以及Pipfile.lock,以後使用pipenv install的時候,相關包的檔案就會自動儲存在Pipfile和.lock當中,下次到新環境時使用pipenv install就可以自動下載。之後,使用pipenv shell來建立一個新的虛擬環境。然後使用flask run命令就可以跑起來了。
如果要進入開發者模式的話,可以手動建立一個.flaskenv檔案,個app.py檔案同目錄,然後寫上FLASK_ENV=development一句話就行了。
進入開發者模式後,每次修改完程式碼只要將瀏覽器硬重新整理後就可以實時顯示修改完的資訊,不用重啟程式,並且錯誤之後會進入了Jinja2提供的debug頁面,裡面詳細的說了錯誤的資訊(有時)。

實驗內容:
本次實驗需要使用python讀取book.txt中的內容,將其使用某種資料結構化儲存,然後以表格的形式顯示在web的頁面上。

實驗步驟及具體實現:

1.讀取book.txt中的資料
定義一個函式read_file(),使用python中open方法開啟檔案,然後使用f.readlines將檔案一行一行以列表的形式讀入,去除\n以及一些奇怪的字元後使用split獲得包含所有資訊的二維陣列。
程式碼以及結果如下:

2.建立資料庫,將書籍資訊存入到資料庫中。
首先是例項化資料庫,之後修改配置檔案,這個之前在基本原理中已經講了,程式碼如下:

建立一個書籍的表,該表一共有三個欄位,分別為書籍序號,書籍名,書籍分類。

然後建立檢視函式,將讀到每一本圖書的資訊作為引數將books類例項化,然後加入到表中。

3.編寫前端html,渲染html並且將書籍資訊傳入到html中。
a)在檢視函式中呼叫查詢函式,將書籍資訊從資料庫中查詢出來,然後使用render_template()函式渲染html並且將取得的books資訊傳入html檔案中:

b)前端建立一個表格,然後使用for迴圈不斷地新增表格的行


該程式碼使用for迴圈不斷讀取books中的圖書資訊,然後生成表格的一列。

p.s 當然,這其中使用了css檔案調整了樣式,這裡不細說了。

最後的實驗結果如下:

心得體會:
1.在建立資料庫的時候,要先呼叫create_all()才可以重新建立已經定義好的表類,不然的話db.session.submit()會報錯。
2.在html中使用for語句,可以快速的形成重複的程式碼,使程式碼更加簡潔,而且可以根據資料庫動態更新。
3.這次實驗可以說是簡單編寫了一下flask的前後端,前端簡單使用了html和css程式碼,後端簡單使用了資料庫,並且實現了前後端的互動,還是很不錯的。

相關文章