來(lái)源：麥?zhǔn)寰幊?/p>
作者：麥2叔
開(kāi)發(fā)一個(gè)包含數(shù)據(jù)庫(kù)的簡(jiǎn)單網(wǎng)站系統(tǒng)是Web開(kāi)發(fā)入門(mén)的最好方式。
Flask是Python最熱門(mén)的兩個(gè)Web框架之一，是最簡(jiǎn)單易用，容易上手的框架。
本系列使用Python的Flask框架開(kāi)發(fā)一個(gè)簡(jiǎn)易的博客系統(tǒng)，共用時(shí)約90分鐘。整個(gè)文章分為3部分，今天是第「2」部分。第3部分本周日發(fā)布。
?
原計(jì)劃是分成2部分，篇幅有點(diǎn)長(zhǎng)，臨時(shí)改成了3部分。
?
第1部分的鏈接：
是時(shí)候?qū)W習(xí)Web開(kāi)發(fā)了！1小時(shí)用Python開(kāi)發(fā)博客系統(tǒng)【1】
整個(gè)文章包括以下內(nèi)容，第1部分涵蓋前5部分，今天包含中間的3部分：
- 安裝flask
- 創(chuàng)建項(xiàng)目
- 運(yùn)行你的第一個(gè)網(wǎng)站
- 創(chuàng)建一個(gè)像樣的網(wǎng)頁(yè)
- 用樣式表美化網(wǎng)頁(yè)
- 「使用模板和bootstrap」
- 「創(chuàng)建文章數(shù)據(jù)庫(kù)」
- 「顯示所有的文章」
- 顯示一篇文章
- 發(fā)布新文章
- 修改文章內(nèi)容
- 刪除文章
- 關(guān)于麥?zhǔn)屙?yè)面
今天的文章信息量有點(diǎn)大，所有源代碼都可以關(guān)注公眾號(hào)「麥?zhǔn)寰幊獭?/strong>，回復(fù)「fff」獲得鏈接。
我們開(kāi)始吧！上次我們已經(jīng)創(chuàng)建好了flask程序和一個(gè)應(yīng)用了基本樣式的頁(yè)面：
一、使用模板和Bootstrap
我們要繼續(xù)「美化」頁(yè)面。
大部分網(wǎng)站都有很多頁(yè)面，這些頁(yè)面都會(huì)共用同樣的菜單欄?？偛荒荛_(kāi)發(fā)沒(méi)頁(yè)面的時(shí)候都要把菜單欄寫(xiě)一遍吧？
這里就用到了「模板」的概念，我們創(chuàng)建一個(gè)模板，模板包含了菜單等共同的部分，而具體頁(yè)面只要往模板中填空就行了。
我們的博客最終的樣式是這樣的，它包含了「列表」，「新建」，「詳情」，「修改」，「關(guān)于麥?zhǔn)濉?/strong>等多個(gè)頁(yè)面。這些頁(yè)面共用同一個(gè)模板。
1.下載JavaScript和CSS文件
我們需要用到j(luò)query和bootstrap，先去我的git上下載這幾個(gè)文件，下載方法：關(guān)注麥?zhǔn)寰幊蹋貜?fù)210820。
下載完后分別放在static目錄下的css和js目錄下。其中js目錄需要先創(chuàng)建出來(lái)。
2.在templates目錄下創(chuàng)建一個(gè)新的文件：base.html
<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="{{ url_for('static', filename= 'css/bootstrap.min.css') }}"> <title>{% block title %} {% endblock %}</title> </head> <body> <nav class="navbar navbar-expand-md navbar-light bg-light"> <a class="navbar-brand" href="{{ url_for('index')}}">麥?zhǔn)宓牟┛?lt;/a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">關(guān)于麥?zhǔn)?lt;/a> </li> </ul> </div> </nav> <div class="container"> {% block content %} {% endblock %} </div> <script src="{{url_for('static', filename='js/jquery.slim.min.js')}}" ></script> <script src="{{url_for('static', filename='js/popper.min.js')}}" ></script> <script src="{{url_for('static', filename='js/bootstrap.min.js')}}" ></script> </body></html>
這里面信息量有點(diǎn)大，我來(lái)一個(gè)個(gè)解釋：
- 使用url_for方法引入了前面下載的1個(gè)css文件和3個(gè)js文件。之前我們創(chuàng)建的style.css文件就沒(méi)用了，可以刪除了。
- 在開(kāi)頭部分的{% block title %} {% endblock %}是標(biāo)題(title)占位符，相當(dāng)于定義了名為title的變量，后面會(huì)被具體內(nèi)容替換掉。
- 在中間部分的{% block content %} {% endblock %}是網(wǎng)頁(yè)內(nèi)容的占位符，相當(dāng)于定義了名為content的變量，后面會(huì)被具體內(nèi)容替換掉。
- 修改index.html中的內(nèi)容{% extends 'base.html' %}
{% block content %}
<h1>{% block title %} 歡迎來(lái)看麥?zhǔn)宓牟┛?{% endblock %}</h1>
{% endblock %} - 第一行extends 'base.html'表示我們要使用前面定義的base.html這個(gè)模板。要使用這個(gè)模板，就要把模板中的兩個(gè)占位符（兩個(gè)填空題）給填寫(xiě)好。
- 放在{% block content %}和{% endblock %}中間的所有內(nèi)容都會(huì)填寫(xiě)在content這個(gè)占位符中。
- 放在{% block title %}和{% endblock %}中間的內(nèi)容會(huì)填寫(xiě)在title占位符中。注意這里的title變量會(huì)被重用。它既是title占位符的內(nèi)容，也是content占位符的一部分。
- 刷新頁(yè)面，應(yīng)該看到如下的效果。如果不是，仔細(xì)檢查一下哪里是不是漏掉了，或者拼寫(xiě)錯(cuò)誤了。這里雖然沒(méi)有很大的變化，但是我們已經(jīng)搭建好了模板，以后開(kāi)發(fā)的頁(yè)面內(nèi)容都可以重用這個(gè)模板，而頁(yè)面本身會(huì)變得很簡(jiǎn)單。
二、創(chuàng)建文章數(shù)據(jù)庫(kù)
博客系統(tǒng)會(huì)有很多文章，我們要把這些文章保存到數(shù)據(jù)庫(kù)。
數(shù)據(jù)庫(kù)有很多選擇，比如MySQL, postgresql，Oracle, sqlite3等。
我們今天要使用最輕量級(jí)的數(shù)據(jù)庫(kù)sqlite3，Python自帶了這個(gè)庫(kù)，所以不需要額外安裝。
- 在blog.py同目錄下創(chuàng)建一個(gè)文件db.sql，里面是創(chuàng)建數(shù)據(jù)庫(kù)表的SQL語(yǔ)句：DROP TABLE IF EXISTS posts;
CREATE TABLE posts (
id INTEGER PRIMARY KEY AUTOINCREMENT,
created TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
title TEXT NOT NULL,
content TEXT NOT NULL
); - 首先看看posts表是否存在，如果存在，先刪除它。
- 創(chuàng)建一個(gè)名為posts的表，其中包含id，title，content以及創(chuàng)建時(shí)間（created)等字段。
- 在blog.py同目錄下創(chuàng)建文件init_db.py這是一個(gè)python代碼文件，它連接到sqlite數(shù)據(jù)庫(kù)，執(zhí)行上面的db.sql中的語(yǔ)句，然后再插入兩條文章。具體細(xì)節(jié)見(jiàn)注釋：import sqlite3
# 創(chuàng)建數(shù)據(jù)庫(kù)鏈接
connection = sqlite3.connect('database.db')
# 執(zhí)行db.sql中的SQL語(yǔ)句
with open('db.sql') as f:
connection.executescript(f.read())
# 創(chuàng)建一個(gè)執(zhí)行句柄，用來(lái)執(zhí)行后面的語(yǔ)句
cur = connection.cursor()
# 插入兩條文章
cur.execute("INSERT INTO posts (title, content) VALUES (?, ?)",
('學(xué)習(xí)Flask1', '跟麥?zhǔn)鍖W(xué)習(xí)flask第一部分')
)
cur.execute("INSERT INTO posts (title, content) VALUES (?, ?)",
('學(xué)習(xí)Flask2', '跟麥?zhǔn)鍖W(xué)習(xí)flask第二部分')
)
# 提交前面的數(shù)據(jù)操作
connection.commit()
# 關(guān)閉鏈接
connection.close() - 打開(kāi)一個(gè)命令行，運(yùn)行init_db.py如果沒(méi)有報(bào)錯(cuò)，就會(huì)發(fā)現(xiàn)文件夾下多了database.db，這就是數(shù)據(jù)庫(kù)文件。
三、展示文章列表
現(xiàn)在數(shù)據(jù)庫(kù)里有兩篇文章，我們可以使用python從數(shù)據(jù)庫(kù)中獲取數(shù)據(jù)，并且展現(xiàn)到網(wǎng)頁(yè)上。
- 修改blog.py，具體細(xì)節(jié)見(jiàn)注釋import sqlite3 #引入sqlite3
from flask import Flask, render_template
app = Flask(__name__)
# 創(chuàng)建一個(gè)函數(shù)用來(lái)獲取數(shù)據(jù)庫(kù)鏈接
def get_db_connection():
# 創(chuàng)建數(shù)據(jù)庫(kù)鏈接到database.db文件
conn = sqlite3.connect('database.db')
# 設(shè)置數(shù)據(jù)的解析方法，有了這個(gè)設(shè)置，就可以像字典一樣訪問(wèn)每一列數(shù)據(jù)
conn.row_factory = sqlite3.Row
return conn
@app.route('/')
def index():
# 調(diào)用上面的函數(shù)，獲取鏈接
conn = get_db_connection()
# 查詢所有數(shù)據(jù)，放到變量posts中
posts = conn.execute('SELECT * FROM posts').fetchall()
conn.close()
#把查詢出來(lái)的posts傳給網(wǎng)頁(yè)
return render_template('index.html', posts=posts)
@app.route('/about')
def about():
return render_template('about.html') - 修改index.html之前只顯示了一個(gè)標(biāo)題，現(xiàn)在要循環(huán)blog.py中傳過(guò)來(lái)的posts列表，把每一篇文章顯示出來(lái)。注意for循環(huán)在頁(yè)面中的寫(xiě)法，和python代碼很類似，只不過(guò)要用{%和%}包起來(lái)。{% extends 'base.html' %}
{% block content %}
<h1>{% block title %} 歡迎來(lái)看麥?zhǔn)宓牟┛?{% endblock %}</h1>
{% for post in posts %}
<a href="#">
<h2>{{ post['title'] }}</h2>
</a>
<span class="badge badge-primary">{{ post['created'] }}</span>
<hr>
{% endfor %}
{% endblock %} - 刷新頁(yè)面，應(yīng)該可以看到這樣的效果：如果不行，仔細(xì)對(duì)比一下，看看少了什么或者有沒(méi)有拼寫(xiě)錯(cuò)誤。
今天就到這里了，后面的部分會(huì)在本周日發(fā)布，到時(shí)候也會(huì)發(fā)視頻到bilibili，請(qǐng)保持關(guān)注。
整個(gè)文章包括以下內(nèi)容，第1部分涵蓋前5部分，今天包含后面的部分：
- 安裝flask
- 創(chuàng)建項(xiàng)目
- 運(yùn)行你的第一個(gè)網(wǎng)站
- 創(chuàng)建一個(gè)像樣的網(wǎng)頁(yè)
- 用樣式表美化網(wǎng)頁(yè)
- 使用模板和bootstrap
- 創(chuàng)建文章數(shù)據(jù)庫(kù)
- 顯示所有的文章
- 「顯示一篇文章」
- 「發(fā)布新文章」
- 「修改文章內(nèi)容」
- 「刪除文章」
- 「關(guān)于麥?zhǔn)屙?yè)面」
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請(qǐng)發(fā)送郵件至 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。
