利用python實(shí)現(xiàn)后端寫網(wǎng)頁（flask框架）

更新時間：2021年02月28日 09:49:28 作者：來日方長。

這篇文章主要給大家介紹了關(guān)于如何利用python實(shí)現(xiàn)后端寫網(wǎng)頁（flask框架）的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

如何用python做后端寫網(wǎng)頁-flask框架什么是Flask安裝flask模塊Hello World更深一步：數(shù)據(jù)綁定后端傳入數(shù)據(jù)從前端獲取數(shù)據(jù) 數(shù)據(jù)庫連接screen創(chuàng)建后臺查看刪除后臺結(jié)束

什么是Flask

Flask是一個使用 Python 編寫的輕量級 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文件中，寫入：

from flask import Flask, render_template, request, jsonify
#創(chuàng)建Flask對象app并初始化
app = Flask(__name__)

#通過python裝飾器的方法定義路由地址
@app.route("/")
#定義方法 用jinjia2引擎來渲染頁面，并返回一個index.html頁面
def root():
 return render_template("index.html")
#定義app在8080端口運(yùn)行
app.run(port=8080)

我們寫好app.py文件后，我們按F5 運(yùn)行，即終端輸出：

在這里插入圖片描述

我們訪問服務(wù)器的8080端口，即Hello World出現(xiàn)在眼前！

在這里插入圖片描述

更深一步：數(shù)據(jù)綁定

上一步我們簡單地搭建好一個靜態(tài)網(wǎng)頁，它的顯示只取決于前端，是固定不變的。我們?nèi)绾巫龅綇暮蠖藗鬟f數(shù)值并在前端顯示呢？這就需要使用數(shù)據(jù)綁定.

數(shù)據(jù)綁定,顧名思義，是為了實(shí)現(xiàn)一種“動態(tài)”的效果，后臺的數(shù)據(jù)更新了，前端頁面也自動更新；前端頁面上的數(shù)據(jù)更新了，后臺的數(shù)據(jù)也自動更新。在flask框架中，后端先將網(wǎng)頁進(jìn)行加載，并把傳入的數(shù)據(jù)放在合適的位置后使用jinjia2引擎渲染，最后將渲染好的頁面返回。

后端傳入數(shù)據(jù)

我們首先在render_template函數(shù)中傳遞需要綁定的數(shù)據(jù)name,age:

from flask import Flask, render_template, request, jsonify
#創(chuàng)建Flask對象app并初始化
app = Flask(__name__)

#通過python裝飾器的方法定義路由地址
@app.route("/")
#定義方法 用jinjia2引擎來渲染頁面，并返回一個index.html頁面
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>

我們再按F5運(yùn)行，并訪問服務(wù)器的8080端口，頁面顯示：

在這里插入圖片描述

從前端獲取數(shù)據(jù)

那么，前端提交的數(shù)據(jù)如何傳到后端呢？

在這里，我使用ajax實(shí)現(xiàn)數(shù)據(jù)的異步傳輸。我們將主要步驟概括為：

1.在前端頁面中引入jQuery

2.創(chuàng)建兩個輸入框，一個按鈕用于輸入數(shù)據(jù)和事件提交。

3.在js中編寫事件，使用ajax進(jìn)行數(shù)據(jù)提交

4.在后端app.py中編寫對應(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>請輸入你的姓名和年齡</h1>
 <!--創(chuàng)建兩個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>
 /*在這里編寫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處編寫對應(yīng)的處理函數(shù)submit()。

app.py中的內(nèi)容如下：

from flask import Flask, render_template, request, jsonify
#創(chuàng)建Flask對象app并初始化
app = Flask(__name__)

#通過python裝飾器的方法定義路由地址
@app.route("/")
#定義方法 用jinjia2引擎來渲染頁面，并返回一個index.html頁面
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語句進(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)

編寫完成后，我們訪問服務(wù)器8080端口進(jìn)行測試，結(jié)果如下：

在這里插入圖片描述

數(shù)據(jù)庫連接

數(shù)據(jù)庫是一個網(wǎng)頁不可或缺的部分。前面的例子中，數(shù)據(jù)都是從前端獲取或者隨機(jī)輸入的。如何從數(shù)據(jù)庫中獲取數(shù)據(jù)呢？

首先我們引入pymysql庫并編寫Database類，該類寫在database.py中：

import pymysql
class Database:
 #設(shè)置數(shù)據(jù)庫的連接參數(shù)，由于我是在服務(wù)器中編寫的，所以host是localhost
 host = "localhost"
 user = "root"
 password = "Zhangxy0212!!"
 #類的構(gòu)造函數(shù)，參數(shù)db為欲連接的數(shù)據(jù)庫。該構(gòu)造函數(shù)實(shí)現(xiàn)了數(shù)據(jù)庫的連接
 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語句
 def execute(self, command):
 try:
 #執(zhí)行command中的sql語句
 self.cursor.execute(command)
 except Exception as e:
 return e
 else:
 #fetchall()返回語句的執(zhí)行結(jié)果，并以元組的形式保存
 return self.cursor.fetchall()

我們可以在templates文件中新建一個data.html文件，用于創(chuàng)建一個新的頁面，文件內(nèi)容如下:

<html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<h1>請輸入你的名字</h1>
<input type="text" id="name" name="name">
<button onclick="show();">提交</button>
<!--result用來顯示提交結(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("出錯了")
  }
  }
 });
 }
</script>
</html>

按鈕的觸發(fā)事件為show();接下來我們在app.py中編寫 渲染data.html頁面的函數(shù)data()和事件處理函數(shù)show().

切記，這兩個函數(shù)一定要加在 創(chuàng)建app對象 和 定義運(yùn)行端口之間??！

由于我們要使用寫好的Database類進(jìn)行數(shù)據(jù)庫的連接，因此需要在app.py頂部進(jìn)行引入:

from database import Database

data()函數(shù)和show()函數(shù)如下：

#通過python裝飾器的方法定義路由地址
@app.route("/data")
#定義方法 用jinjia2引擎來渲染頁面，并返回一個index.html頁面
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類的對象sql，test為需要訪問的數(shù)據(jù)庫名字 具體可見Database類的構(gòu)造函數(shù)
 sql = Database("test")
 try:
 #執(zhí)行sql語句 多說一句，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:
  #這個result，我覺得也可以把它當(dāng)成數(shù)據(jù)表，查詢的結(jié)果至多一個，result[0][0]返回數(shù)組中的第一行第一列
  return {'status':'success','message':result[0][0]}
 else:
  return "rbq"

我們按F5 運(yùn)行app.py文件后，訪問http://121.41.111.94/data

運(yùn)行結(jié)果如圖：

在這里插入圖片描述