python制作網站開發(貴陽網站開發制作)

2024-04-29 分類： python

來源：麥叔編程

作者：麥2叔

開發一個包含數據庫的簡單網站系統是Web開發入門的最好方式。

Flask是Python最熱門的兩個Web框架之一，是最簡單易用，容易上手的框架。

本系列使用Python的Flask框架開發一個簡易的博客系統，共用時約90分鐘。整個文章分為3部分，今天是第「2」部分。第3部分本周日發布。

原計劃是分成2部分，篇幅有點長，臨時改成了3部分。

第1部分的鏈接：

是時候學習Web開發了！1小時用Python開發博客系統【1】

整個文章包括以下內容，第1部分涵蓋前5部分，今天包含中間的3部分：

安裝flask創建項目運行你的第一個網站創建一個像樣的網頁用樣式表美化網頁「使用模板和bootstrap」「創建文章數據庫」「顯示所有的文章」顯示一篇文章發布新文章修改文章內容刪除文章關于麥叔頁面

今天的文章信息量有點大，所有源代碼都可以關注公眾號「麥叔編程」，回復「fff」獲得鏈接。

我們開始吧！上次我們已經創建好了flask程序和一個應用了基本樣式的頁面：

一、使用模板和Bootstrap

我們要繼續「美化」頁面。

大部分網站都有很多頁面，這些頁面都會共用同樣的菜單欄。總不能開發沒頁面的時候都要把菜單欄寫一遍吧？

這里就用到了「模板」的概念，我們創建一個模板，模板包含了菜單等共同的部分，而具體頁面只要往模板中填空就行了。

我們的博客最終的樣式是這樣的，它包含了「列表」，「新建」，「詳情」，「修改」，「關于麥叔」等多個頁面。這些頁面共用同一個模板。

1.下載JavaScript和CSS文件

我們需要用到jquery和bootstrap，先去我的git上下載這幾個文件，下載方法：關注麥叔編程，回復210820。

下載完后分別放在static目錄下的css和js目錄下。其中js目錄需要先創建出來。

2.在templates目錄下創建一個新的文件：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')}}">麥叔的博客</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="#">關于麥叔</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>

這里面信息量有點大，我來一個個解釋：

使用url_for方法引入了前面下載的1個css文件和3個js文件。之前我們創建的style.css文件就沒用了，可以刪除了。在開頭部分的{% block title %} {% endblock %}是標題(title)占位符，相當于定義了名為title的變量，后面會被具體內容替換掉。在中間部分的{% block content %} {% endblock %}是網頁內容的占位符，相當于定義了名為content的變量，后面會被具體內容替換掉。

修改index.html中的內容{% extends 'base.html' %}
{% block content %}
<h1>{% block title %} 歡迎來看麥叔的博客 {% endblock %}</h1>
{% endblock %}第一行extends 'base.html'表示我們要使用前面定義的base.html這個模板。要使用這個模板，就要把模板中的兩個占位符（兩個填空題）給填寫好。放在{% block content %}和{% endblock %}中間的所有內容都會填寫在content這個占位符中。放在{% block title %}和{% endblock %}中間的內容會填寫在title占位符中。注意這里的title變量會被重用。它既是title占位符的內容，也是content占位符的一部分。刷新頁面，應該看到如下的效果。如果不是，仔細檢查一下哪里是不是漏掉了，或者拼寫錯誤了。這里雖然沒有很大的變化，但是我們已經搭建好了模板，以后開發的頁面內容都可以重用這個模板，而頁面本身會變得很簡單。二、創建文章數據庫

博客系統會有很多文章，我們要把這些文章保存到數據庫。

數據庫有很多選擇，比如MySQL, postgresql，Oracle, sqlite3等。

我們今天要使用最輕量級的數據庫sqlite3，Python自帶了這個庫，所以不需要額外安裝。

在blog.py同目錄下創建一個文件db.sql，里面是創建數據庫表的SQL語句：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表是否存在，如果存在，先刪除它。創建一個名為posts的表，其中包含id，title，content以及創建時間（created)等字段。在blog.py同目錄下創建文件init_db.py這是一個python代碼文件，它連接到sqlite數據庫，執行上面的db.sql中的語句，然后再插入兩條文章。具體細節見注釋：import sqlite3
# 創建數據庫鏈接
connection = sqlite3.connect('database.db')
# 執行db.sql中的SQL語句
with open('db.sql') as f:
connection.executescript(f.read())
# 創建一個執行句柄，用來執行后面的語句
cur = connection.cursor()
# 插入兩條文章
cur.execute("INSERT INTO posts (title, content) VALUES (?, ?)",
('學習Flask1', '跟麥叔學習flask第一部分')
)
cur.execute("INSERT INTO posts (title, content) VALUES (?, ?)",
('學習Flask2', '跟麥叔學習flask第二部分')
)
# 提交前面的數據操作
connection.commit()
# 關閉鏈接
connection.close()打開一個命令行，運行init_db.py如果沒有報錯，就會發現文件夾下多了database.db，這就是數據庫文件。三、展示文章列表

現在數據庫里有兩篇文章，我們可以使用python從數據庫中獲取數據，并且展現到網頁上。

修改blog.py，具體細節見注釋import sqlite3 #引入sqlite3
from flask import Flask, render_template
app = Flask(__name__)
# 創建一個函數用來獲取數據庫鏈接
def get_db_connection():
# 創建數據庫鏈接到database.db文件
conn = sqlite3.connect('database.db')
# 設置數據的解析方法，有了這個設置，就可以像字典一樣訪問每一列數據
conn.row_factory = sqlite3.Row
return conn
@app.route('/')
def index():
# 調用上面的函數，獲取鏈接
conn = get_db_connection()
# 查詢所有數據，放到變量posts中
posts = conn.execute('SELECT * FROM posts').fetchall()
conn.close()
#把查詢出來的posts傳給網頁
return render_template('index.html', posts=posts)
@app.route('/about')
def about():
return render_template('about.html')修改index.html之前只顯示了一個標題，現在要循環blog.py中傳過來的posts列表，把每一篇文章顯示出來。注意for循環在頁面中的寫法，和python代碼很類似，只不過要用{%和%}包起來。{% extends 'base.html' %}
{% block content %}
<h1>{% block title %} 歡迎來看麥叔的博客 {% endblock %}</h1>
{% for post in posts %}
<a href="#">
<h2>{{ POST@['title'] }}</h2>
</a>
<span class="badge badge-primary">{{ POST@['created'] }}</span>
<hr>
{% endfor %}
{% endblock %}刷新頁面，應該可以看到這樣的效果：如果不行，仔細對比一下，看看少了什么或者有沒有拼寫錯誤。

今天就到這里了，后面的部分會在本周日發布，到時候也會發視頻到bilibili，請保持關注。

整個文章包括以下內容，第1部分涵蓋前5部分，今天包含后面的部分：

安裝flask創建項目運行你的第一個網站創建一個像樣的網頁用樣式表美化網頁使用模板和bootstrap創建文章數據庫顯示所有的文章「顯示一篇文章」「發布新文章」「修改文章內容」「刪除文章」「關于麥叔頁面」

非常感謝您讀完創新互聯的這篇文章："python制作網站開發(貴陽網站開發制作)"，僅為提供更多信息供用戶參考使用或為學習交流的方便。我們公司提供：網站建設、網站制作、官網建設、SEO優化、小程序制作等服務，歡迎聯系我們提供您的需求。

網頁名稱：python制作網站開發(貴陽網站開發制作)
文章起源：http://www.kartarina.com/news39/325889.html

網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有python等

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容