利用python實(shí)現(xiàn)后端寫(xiě)網(wǎng)頁(yè)（flask框架）
如何用python做后端寫(xiě)網(wǎng)頁(yè)-flask框架 什么是Flask安裝flask模塊Hello World更深一步：數(shù)據(jù)綁定后端傳入數(shù)據(jù)從前端獲取數(shù)據(jù) 數(shù)據(jù)庫(kù)連接screen創(chuàng)建后臺(tái)查看刪除后臺(tái) 結(jié)束
什么是Flask
Flask是一個(gè)使用 Python 編寫(xiě)的輕量級(jí) Web 應(yīng)用框架。其 WSGI 工具箱采用 Werkzeug ，模板引擎則使用 Jinja2 。Flask使用 BSD 授權(quán)。以下程序均在自己服務(wù)器上運(yùn)行（在vs code利用ssh進(jìn)行連接）
安裝flask模塊
首先使用pip進(jìn)行安裝：
pip install flask
在所在項(xiàng)目文件夾下創(chuàng)建templates文件夾（用于存放html等文件）和app.py，如圖：
Hello World
我們可以在templates文件中新建index.html文件，其內(nèi)容如下：
<html> <h1>Hello Word!</h1> </html>
在上一步建立的app.py文件中，寫(xiě)入：
from flask import Flask, render_template, request, jsonify
#創(chuàng)建Flask對(duì)象app并初始化
app = Flask(__name__)
#通過(guò)python裝飾器的方法定義路由地址
@app.route("/")
#定義方法 用jinjia2引擎來(lái)渲染頁(yè)面，并返回一個(gè)index.html頁(yè)面
def root():
return render_template("index.html")
#定義app在8080端口運(yùn)行
app.run(port=8080)
我們寫(xiě)好app.py文件后，我們按F5 運(yùn)行，即終端輸出：
我們?cè)L問(wèn)服務(wù)器的8080端口，即Hello World出現(xiàn)在眼前！
更深一步：數(shù)據(jù)綁定
上一步我們簡(jiǎn)單地搭建好一個(gè)靜態(tài)網(wǎng)頁(yè)，它的顯示只取決于前端，是固定不變的。我們?nèi)绾巫龅綇暮蠖藗鬟f數(shù)值并在前端顯示呢？這就需要使用數(shù)據(jù)綁定.
數(shù)據(jù)綁定,顧名思義，是為了實(shí)現(xiàn)一種“動(dòng)態(tài)”的效果，后臺(tái)的數(shù)據(jù)更新了，前端頁(yè)面也自動(dòng)更新；前端頁(yè)面上的數(shù)據(jù)更新了，后臺(tái)的數(shù)據(jù)也自動(dòng)更新。在flask框架中，后端先將網(wǎng)頁(yè)進(jìn)行加載，并把傳入的數(shù)據(jù)放在合適的位置后使用jinjia2引擎渲染，最后將渲染好的頁(yè)面返回。
后端傳入數(shù)據(jù)
我們首先在render_template函數(shù)中傳遞需要綁定的數(shù)據(jù)name,age:
from flask import Flask, render_template, request, jsonify
#創(chuàng)建Flask對(duì)象app并初始化
app = Flask(__name__)
#通過(guò)python裝飾器的方法定義路由地址
@app.route("/")
#定義方法 用jinjia2引擎來(lái)渲染頁(yè)面，并返回一個(gè)index.html頁(yè)面
def root():
return render_template("index.html",name="zxy",age=21)
#定義app在8080端口運(yùn)行
app.run(port=8080)
在前端index.html中,我們獲取傳入的數(shù)據(jù)：
<html>
<h1>我是{{name}},今年{{age}}歲</h1>
</html>
我們?cè)侔?kbd>F5運(yùn)行，并訪問(wèn)服務(wù)器的8080端口，頁(yè)面顯示：
從前端獲取數(shù)據(jù)
那么，前端提交的數(shù)據(jù)如何傳到后端呢？
在這里，我使用ajax實(shí)現(xiàn)數(shù)據(jù)的異步傳輸。我們將主要步驟概括為：
1.在前端頁(yè)面中引入jQuery
2.創(chuàng)建兩個(gè)輸入框，一個(gè)按鈕用于輸入數(shù)據(jù)和事件提交。
3.在js中編寫(xiě)事件，使用ajax進(jìn)行數(shù)據(jù)提交
4.在后端app.py中編寫(xiě)對(duì)應(yīng)的事件處理函數(shù)
前端index.html內(nèi)容如下：
<html>
<!--引入jQuery包用于使用ajax-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<h1>請(qǐng)輸入你的姓名和年齡</h1>
<!--創(chuàng)建兩個(gè)input輸入框，定義id分別為name,age-->
<input type="text" id="name" name="name" placeholder="姓名">
<br>
<input type="text" id="age" name="age" placeholder="年齡">
<br>
<!--創(chuàng)建button按鈕，點(diǎn)擊則激發(fā)submit()事件-->
<button onclick="submit();">提交</button>
<script>
/*在這里編寫(xiě)submit()事件*/
function submit() {
$.ajax({
url: "submit", /*數(shù)據(jù)提交到submit處*/
type: "POST", /*采用POST方法提交*/
data: { "name": $("#name").val(),"age":$("#age").val()}, /*提交的數(shù)據(jù)（json格式），從輸入框中獲取*/
/*result為后端函數(shù)返回的json*/
success: function (result) {
if (result.message == "success!") {
alert(result.message+"你的名字是"+result.name+",你的年齡是"+result.age)
}
else {
alert(result.message)
}
}
});
}
</script>
</html>
當(dāng)我們完成ajax數(shù)據(jù)提交后，則在后端app.py處編寫(xiě)對(duì)應(yīng)的處理函數(shù)submit()。
app.py中的內(nèi)容如下：
from flask import Flask, render_template, request, jsonify
#創(chuàng)建Flask對(duì)象app并初始化
app = Flask(__name__)
#通過(guò)python裝飾器的方法定義路由地址
@app.route("/")
#定義方法 用jinjia2引擎來(lái)渲染頁(yè)面，并返回一個(gè)index.html頁(yè)面
def root():
return render_template("index.html")
#app的路由地址"/submit"即為ajax中定義的url地址，采用POST、GET方法均可提交
@app.route("/submit",methods=["GET", "POST"])
#從這里定義具體的函數(shù) 返回值均為json格式
def submit():
#由于POST、GET獲取數(shù)據(jù)的方式不同，需要使用if語(yǔ)句進(jìn)行判斷
if request.method == "POST":
name = request.form.get("name")
age = request.form.get("age")
if request.method == "GET":
name = request.args.get("name")
age = request.args.get("age")
#如果獲取的數(shù)據(jù)為空
if len(name) == 0 or len(age) ==0:
return {'message':"error!"}
else:
return {'message':"success!",'name':name,'age':age}
#定義app在8080端口運(yùn)行
app.run(port=8080)
編寫(xiě)完成后，我們?cè)L問(wèn)服務(wù)器8080端口進(jìn)行測(cè)試，結(jié)果如下：
數(shù)據(jù)庫(kù)連接
數(shù)據(jù)庫(kù)是一個(gè)網(wǎng)頁(yè)不可或缺的部分。前面的例子中，數(shù)據(jù)都是從前端獲取或者隨機(jī)輸入的。如何從數(shù)據(jù)庫(kù)中獲取數(shù)據(jù)呢？
首先我們引入pymysql庫(kù) 并編寫(xiě)Database類，該類寫(xiě)在database.py中：
import pymysql class Database: #設(shè)置數(shù)據(jù)庫(kù)的連接參數(shù)，由于我是在服務(wù)器中編寫(xiě)的，所以host是localhost host = "localhost" user = "root" password = "Zhangxy0212!!" #類的構(gòu)造函數(shù)，參數(shù)db為欲連接的數(shù)據(jù)庫(kù)。該構(gòu)造函數(shù)實(shí)現(xiàn)了數(shù)據(jù)庫(kù)的連接 def __init__(self,db): connect = pymysql.connect(host=self.host,user=self.user,password=self.password,database=db) self.cursor = connect.cursor() #類的方法，參數(shù)command為sql語(yǔ)句 def execute(self, command): try: #執(zhí)行command中的sql語(yǔ)句 self.cursor.execute(command) except Exception as e: return e else: #fetchall()返回語(yǔ)句的執(zhí)行結(jié)果，并以元組的形式保存 return self.cursor.fetchall()
我們可以在templates文件中新建一個(gè)data.html文件，用于創(chuàng)建一個(gè)新的頁(yè)面，文件內(nèi)容如下:
<html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<h1>請(qǐng)輸入你的名字</h1>
<input type="text" id="name" name="name">
<button onclick="show();">提交</button>
<!--result用來(lái)顯示提交結(jié)果-->
<p id="result"></p>
<script>
function show() {
$.ajax({
url: "show",
type: "POST",
data: { "name": $("#name").val()},
/*不要忘記 result為后端處理函數(shù)的返回值！*/
success: function (result) {
if (result.status == "success") {
$("#result").text($("#name").val() + "是" + result.message)
}
else {
$("#result").text("出錯(cuò)了")
}
}
});
}
</script>
</html>
按鈕的觸發(fā)事件為show();接下來(lái)我們?cè)赼pp.py中編寫(xiě) 渲染data.html頁(yè)面的函數(shù)data()和事件處理函數(shù)show().
切記，這兩個(gè)函數(shù)一定要加在 創(chuàng)建app對(duì)象 和 定義運(yùn)行端口之間??！
由于我們要使用寫(xiě)好的Database類進(jìn)行數(shù)據(jù)庫(kù)的連接，因此需要在app.py頂部進(jìn)行引入:
from database import Database
data()函數(shù)和show()函數(shù)如下：
#通過(guò)python裝飾器的方法定義路由地址
@app.route("/data")
#定義方法 用jinjia2引擎來(lái)渲染頁(yè)面，并返回一個(gè)index.html頁(yè)面
def data():
return render_template("data.html")
#app的路由地址"/show"即為ajax中定義的url地址，采用POST、GET方法均可提交
@app.route("/show",methods=["GET", "POST"])
def show():
#首先獲取前端傳入的name數(shù)據(jù)
if request.method == "POST":
name = request.form.get("name")
if request.method == "GET":
name = request.args.get("name")
#創(chuàng)建Database類的對(duì)象sql，test為需要訪問(wèn)的數(shù)據(jù)庫(kù)名字 具體可見(jiàn)Database類的構(gòu)造函數(shù)
sql = Database("test")
try:
#執(zhí)行sql語(yǔ)句 多說(shuō)一句，f+字符串的形式，可以在字符串里面以{}的形式加入變量名 結(jié)果保存在result數(shù)組中
result = sql.execute(f"SELECT type FROM type WHERE name='{name}'")
except Exception as e:
return {'status':"error", 'message': "code error"}
else:
if not len(result) == 0:
#這個(gè)result，我覺(jué)得也可以把它當(dāng)成數(shù)據(jù)表，查詢的結(jié)果至多一個(gè)，result[0][0]返回?cái)?shù)組中的第一行第一列
return {'status':'success','message':result[0][0]}
else:
return "rbq"
我們按F5 運(yùn)行app.py文件后，訪問(wèn)http://121.41.111.94/data
運(yùn)行結(jié)果如圖：
多提一句，數(shù)據(jù)表type中的內(nèi)容如下：
screen
至此，使用flask框架搭建簡(jiǎn)單網(wǎng)頁(yè)的基本流程結(jié)束啦！
我想你們心中一定有個(gè)疑問(wèn)，每次運(yùn)行python程序總是需要按F5運(yùn)行，如果關(guān)掉 VS Code ，那么進(jìn)程將會(huì)被殺掉，服務(wù)器頁(yè)面就無(wú)法顯示，如圖：
那么我們就需要在服務(wù)器中使用screen創(chuàng)建一個(gè)后臺(tái)，將app.py程序放在后臺(tái)中運(yùn)行，達(dá)到持續(xù)運(yùn)行的目的。
創(chuàng)建后臺(tái)
由于我的服務(wù)器是Centos，所以我使用 yum install screen的方式下載的screen。
下載完成后，在服務(wù)器的任意位置 輸入screen命令即可創(chuàng)建后臺(tái)，后臺(tái)如圖：
即上面會(huì)顯示screen 0.
我們進(jìn)入工程所在的文件try 輸入命令：python app.py 如圖：
這樣 我們?cè)僭L問(wèn)一下121.41.111.94，會(huì)發(fā)現(xiàn) 網(wǎng)站已經(jīng)啟動(dòng)啦！我們即使關(guān)閉命令行，程序也繼續(xù)在后臺(tái)運(yùn)行。
查看刪除后臺(tái)
如果我們需要查看后臺(tái)的運(yùn)行情況，在服務(wù)器中輸入命令：screen -x
如果需要停止后臺(tái)運(yùn)行，則先通過(guò) screen -x [pid號(hào)] 進(jìn)入某一后臺(tái)。進(jìn)入之后 Ctrl+C即可停止運(yùn)行。
如果刪除后臺(tái)，則先通過(guò) screen -x [pid號(hào)] 進(jìn)入某一后臺(tái)，進(jìn)入之后輸入exit
結(jié)束
到此這篇關(guān)于利用python實(shí)現(xiàn)后端寫(xiě)網(wǎng)頁(yè)（flask框架）的文章就介紹到這了,更多相關(guān)python后端寫(xiě)網(wǎng)頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決Pycharm界面的子窗口不見(jiàn)了的問(wèn)題
今天小編就為大家分享一篇解決Pycharm界面的子窗口不見(jiàn)了的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
Django框架文件上傳與自定義圖片上傳路徑、上傳文件名操作分析
這篇文章主要介紹了Django框架文件上傳與自定義圖片上傳路徑、上傳文件名操作,結(jié)合實(shí)例形式分析了Django框架文件上傳的原理、步驟、實(shí)現(xiàn)方法以及圖片上傳時(shí)自定義上傳路徑、上傳文件名的相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
大家好，本篇文章主要講的是python用字符組成圖像代碼實(shí)例，感興趣的同學(xué)趕快來(lái)看一看吧，對(duì)你有幫助的話記得收藏一下，方便下次瀏覽2022-01-01
CentOS 7如何實(shí)現(xiàn)定時(shí)執(zhí)行python腳本
這篇文章主要介紹了CentOS 7如何實(shí)現(xiàn)定時(shí)執(zhí)行python腳本,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
CentOS6.5設(shè)置Django開(kāi)發(fā)環(huán)境
這篇文章主要為大家詳細(xì)介紹了CentOS6.5設(shè)置Django開(kāi)發(fā)環(huán)境,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要給大家介紹了python中解析json格式文件的相關(guān)資料，解析json文件就是編碼和解碼，本文還介紹了在解析中可能遇到的問(wèn)題與解決方法，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-05-05
Python爬蟲(chóng)小例子——爬取51job發(fā)布的工作職位
這篇文章主要介紹了Python爬取51job發(fā)布的工作職位，文中講解非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)Python，感興趣的朋友可以了解下2020-07-07
解決python中 f.write寫(xiě)入中文出錯(cuò)的問(wèn)題
今天小編就為大家分享一篇解決python中 f.write寫(xiě)入中文出錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
Python面向?qū)ο蟪绦蛟O(shè)計(jì)之類的定義與繼承簡(jiǎn)單示例
這篇文章主要介紹了Python面向?qū)ο蟪绦蛟O(shè)計(jì)之類的定義與繼承,結(jié)合完整實(shí)例形式分析了Python面向?qū)ο蟪绦蛟O(shè)計(jì)中類的定義、調(diào)用、繼承及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-03-03
快速進(jìn)修Python指南之控制if-else循環(huán)技巧
這篇文章主要為大家介紹了Java開(kāi)發(fā)者的Python快速進(jìn)修指南之控制之if-else和循環(huán)技巧示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12