如何用python做后端寫網頁-flask框架

什么是Flask
- 安裝flask模塊
- Hello World
- 更深一步：資料系結
- - 后端傳入資料
  - 從前端獲取資料
- 資料庫連接
- screen
- - 創建后臺
  - 查看洗掉后臺
- 結束

什么是Flask

Flask是一個使用 Python 撰寫的輕量級 Web 應用框架，其 WSGI 工具箱采用 Werkzeug ，模板引擎則使用 Jinja2 ，Flask使用 BSD 授權，以下程式均在自己服務器上運行（在vs code利用ssh進行連接）

安裝flask模塊

首先使用pip進行安裝：

pip install flask

在所在專案檔案夾下創建templates檔案夾（用于存放html等檔案）和app.py，如圖：
在這里插入圖片描述

Hello World

我們可以在templates檔案中新建index.html檔案，其內容如下：

<html>
    <h1>Hello Word!</h1>
</html>

在上一步建立的app.py檔案中，寫入：

from flask import Flask, render_template, request, jsonify
#創建Flask物件app并初始化
app = Flask(__name__)

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

我們寫好app.py檔案后，我們按F5 運行，即終端輸出：
在這里插入圖片描述
我們訪問服務器的8080埠，即Hello World出現在眼前！

更深一步：資料系結

上一步我們簡單地搭建好一個靜態網頁，它的顯示只取決于前端，是固定不變的，我們如何做到從后端傳遞數值并在前端顯示呢？這就需要使用資料系結.
資料系結,顧名思義，是為了實作一種“動態”的效果，后臺的資料更新了，前端頁面也自動更新；前端頁面上的資料更新了，后臺的資料也自動更新，在flask框架中，后端先將網頁進行加載，并把傳入的資料放在合適的位置后使用jinjia2引擎渲染，最后將渲染好的頁面回傳，

后端傳入資料

我們首先在render_template函式中傳遞需要系結的資料name,age:

from flask import Flask, render_template, request, jsonify
#創建Flask物件app并初始化
app = Flask(__name__)

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

在前端index.html中,我們獲取傳入的資料：

<html>
    <h1>我是{{name}},今年{{age}}歲</h1>
</html>

我們再按F5運行，并訪問服務器的8080埠，頁面顯示：
在這里插入圖片描述

從前端獲取資料

那么，前端提交的資料如何傳到后端呢？
在這里，我使用ajax實作資料的異步傳輸，我們將主要步驟概括為：

1.在前端頁面中引入jQuery
2.創建兩個輸入框，一個按鈕用于輸入資料和事件提交，
3.在js中撰寫事件，使用ajax進行資料提交
4.在后端app.py中撰寫對應的事件處理函式

前端index.html內容如下：

<html>
    <!--引入jQuery包用于使用ajax-->
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <h1>請輸入你的姓名和年齡</h1>
    <!--創建兩個input輸入框，定義id分別為name,age-->
    <input type="text" id="name" name="name" placeholder="姓名">
    <br>
    <input type="text" id="age" name="age" placeholder="年齡">
    <br>
    <!--創建button按鈕，點擊則激發submit()事件-->
    <button onclick="submit();">提交</button>
    <script>
        /*在這里撰寫submit()事件*/
        function submit() {
            $.ajax({
                url: "submit", /*資料提交到submit處*/
                type: "POST",  /*采用POST方法提交*/
                data: { "name": $("#name").val(),"age":$("#age").val()},  /*提交的資料（json格式），從輸入框中獲取*/
                /*result為后端函式回傳的json*/
                success: function (result) {
                    if (result.message == "success!") {
                        alert(result.message+"你的名字是"+result.name+",你的年齡是"+result.age)
                    }
                    else {
                        alert(result.message)
                    }
                }
            });
        }
    </script>
</html>

當我們完成ajax資料提交后，則在后端app.py處撰寫對應的處理函式submit()，
app.py中的內容如下：

from flask import Flask, render_template, request, jsonify
#創建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"])
#從這里定義具體的函式 回傳值均為json格式
def submit():
    #由于POST、GET獲取資料的方式不同，需要使用if陳述句進行判斷
    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")
    #如果獲取的資料為空
    if len(name) == 0 or len(age) ==0:
        return {'message':"error!"}
    else:
        return {'message':"success!",'name':name,'age':age}

#定義app在8080埠運行
app.run(port=8080)

撰寫完成后，我們訪問服務器8080埠進行測驗，結果如下：
在這里插入圖片描述

資料庫連接

資料庫是一個網頁不可或缺的部分，前面的例子中，資料都是從前端獲取或者隨機輸入的，如何從資料庫中獲取資料呢？
首先我們引入pymysql庫并撰寫Database類，該類寫在database.py中：

import pymysql
class Database:
    #設定資料庫的連接引數，由于我是在服務器中撰寫的，所以host是localhost
    host = "localhost"
    user = "root"
    password = "Zhangxy0212!!"
    #類的建構式，引數db為欲連接的資料庫，該建構式實作了資料庫的連接
    def __init__(self,db):
        connect = pymysql.connect(host=self.host,user=self.user,password=self.password,database=db)
        self.cursor = connect.cursor()
    #類的方法，引數command為sql陳述句
    def execute(self, command):
        try:
            #執行command中的sql陳述句
            self.cursor.execute(command)
        except Exception as e:
            return e
        else:
            #fetchall()回傳陳述句的執行結果，并以元組的形式保存
            return self.cursor.fetchall()

我們可以在templates檔案中新建一個data.html檔案，用于創建一個新的頁面，檔案內容如下:

<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用來顯示提交結果-->
<p id="result"></p>
<script>
    function show() {
        $.ajax({
            url: "show",
            type: "POST",
            data: { "name": $("#name").val()},
            /*不要忘記 result為后端處理函式的回傳值！*/
            success: function (result) {
                if (result.status == "success") {
                    $("#result").text($("#name").val() + "是" + result.message)
                }
                else {
                    $("#result").text("出錯了")
                }
            }
        });
    }
</script>
</html>

按鈕的觸發事件為show();接下來我們在app.py中撰寫 渲染data.html頁面的函式data()和事件處理函式show().
切記，這兩個函式一定要加在 創建app物件 和 定義運行埠之間！！
由于我們要使用寫好的Database類進行資料庫的連接，因此需要在app.py頂部進行引入:

from database import Database

data()函式和show()函式如下：

#通過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資料
    if request.method == "POST":
        name = request.form.get("name")
    if request.method == "GET":
        name = request.args.get("name")
    #創建Database類的物件sql，test為需要訪問的資料庫名字 具體可見Database類的建構式
    sql = Database("test")
    try:
        #執行sql陳述句 多說一句，f+字串的形式，可以在字串里面以{}的形式加入變數名 結果保存在result陣列中
        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，我覺得也可以把它當成資料表，查詢的結果至多一個，result[0][0]回傳陣列中的第一行第一列
            return {'status':'success','message':result[0][0]}
        else:
            return "rbq"

我們按F5 運行app.py檔案后，訪問http://121.41.111.94/data
運行結果如圖：
在這里插入圖片描述
多提一句，資料表type中的內容如下：

screen

至此，使用flask框架搭建簡單網頁的基本流程結束啦！
我想你們心中一定有個疑問，每次運行python程式總是需要按F5運行，如果關掉 VS Code ，那么行程將會被殺掉，服務器頁面就無法顯示，如圖：
在這里插入圖片描述
那么我們就需要在服務器中使用screen創建一個后臺，將app.py程式放在后臺中運行，達到持續運行的目的，

創建后臺

由于我的服務器是Centos，所以我使用 yum install screen的方式下載的screen，
下載完成后，在服務器的任意位置輸入screen命令即可創建后臺，后臺如圖：
在這里插入圖片描述
即上面會顯示screen 0.
我們進入工程所在的檔案try 輸入命令：python app.py 如圖：

在這里插入圖片描述
這樣我們再訪問一下121.41.111.94，會發現網站已經啟動啦！我們即使關閉命令列，程式也繼續在后臺運行，

查看洗掉后臺

如果我們需要查看后臺的運行情況，在服務器中輸入命令：screen -x
如果需要停止后臺運行，則先通過 screen -x [pid號] 進入某一后臺，進入之后 Ctrl+C即可停止運行，
如果洗掉后臺，則先通過 screen -x [pid號] 進入某一后臺，進入之后輸入exit

結束

由于大三下學期做專案需要，臨時學了學flask框架，本人第一次寫CSDN博客，如有不對的地方，歡迎指正~

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/262589.html

標籤：其他

上一篇：Python繪制地理圖表之可視化神器pyecharts（二）

下一篇：SpringBoot 整合 ElasticSearch 實作京東搜索（手把手帶你完成一個 “前后端分離專案”）