用pymysql和Flask搭建後端，響應前端POST和GET請求
- 2020 年 4 月 5 日
- 筆記
前言
這次作業不僅需要我建立一個資料庫(詳情請點擊這裡)，還需要我基於這個資料庫寫後端介面（註冊和登錄）供前端訪問，接收前端的POST和GET請求，並將登錄、註冊是否成功傳給前端。
本文介紹如何用Flask搭建後端，其中使用了pymysql操作mysql資料庫，也會做這個部分的介紹。
正文
需要為前端提供的介面有兩個：註冊和登錄，為此我定義了四個函數，分別是
- select_user(userid, password)
- insert_user(userid, password, phone, email, company)
- on_register()
- on_login()
前兩個函數是操作資料庫，被後兩個函數調用；後兩個函數是給前端的介面。
後端說明
整個後端的程式碼如下：
from flask import Flask, request import json import pymysql from flask_cors import CORS # 定義app app = Flask(__name__) # 設置跨域 CORS(app, supports_credentials=True) # 連接資料庫，帳號是root，密碼是000，資料庫名稱是shopdata db = pymysql.connect("localhost", "root", "000", "shopdata") # 連接資料庫 cursor = db.cursor() # 定義游標 # select a user，根據userid和password獲取一個用戶是否存在，即判斷登錄是否成功 def select_user(userid, password): # mysql語句 select_user_sql = 'select * from userinfo where userid="%s" and password="%s";' % (userid, password) # 執行mysql語句 result = cursor.execute(select_user_sql) db.commit() # 如果返回了一條數據，則登錄成功，否則登錄失敗 if 1 == result: result = True else: result = False print('there is no user where userid="%s and password="%s"!!' % (userid, password)) return result # insert a user，根據userid、password等資訊，生成一個元組，將其插入資料庫shopdata的userinfo表 def insert_user(userid, password, phone, email, company): # mysql語句 insert_user_sql = 'insert into userinfo(userid, password, phone, email, company)' 'values("%s", "%s", "%s", "%s", "%s");' % (userid, password, phone, email, company) # 執行mysql語句，如果插入成功，則註冊成功，否則註冊失敗 try: cursor.execute(insert_user_sql) db.commit() print('insert user where userid="%s" and password="%s"!!' % (userid, password)) result = True except: print('can not insert user where userid="%s" and password="%s"!!' % (userid, password)) result = False finally: return result # on_register，提供給前端的註冊介面 @app.route("/api/register", methods=['POST']) # 路由，響應POST請求 def on_register(): # 默認的用戶名和密碼（該用戶不存在且非法） userid = '' password = '' phone = '' email = '' company = '' # 判斷傳入的參數是否為空，並取出前端傳來的參數 data = request.get_data() # print(data) if data is not None: # 將bytes類型轉化為字典。對應的，前端發過來的內容應該是JSON.stringify(一個對象) data = json.loads(data) # 轉化為字典對象 # print(data) userid = data.get('userid') password = data.get('password') phone = data.get('phone') email = data.get('email') company = data.get('company') # 判斷參數是否非法。若非法則直接判斷出註冊失敗，若合法則嘗試註冊，再根據資料庫操作結果判斷。 if len(userid) > 0 and len(password) > 0 and len(phone) > 0 and len(email) > 0 and len(password) > 0: return_dict = {'success': insert_user(userid=userid, password=password, phone=phone, email=email, company=company)} else: return_dict = {'success': False} # 返回結果（結果暫時簡單點，只返回成功或失敗） return json.dumps(return_dict) # 字典轉json # on_login，提供給前端的登錄介面 @app.route("/api/login", methods=['GET']) # 路由，響應GET請求 def on_login(): # 默認的用戶名和密碼（資料庫中不存在該用戶） userid = '' password = '' # 判斷傳入的參數是否為空，獲取前端傳來的參數 if request.args is not None: print(request.args) data = request.args.to_dict() userid = data.get('userid') password = data.get('password') # 查詢資料庫 result = select_user(userid=userid, password=password) if not result: print('user where userid="%s and password="%s" login!!' % (userid, password)) # 返回登錄結果（暫時簡單一點，成功或失敗） return_dict = {'success': result} return json.dumps(return_dict) # 字典轉json if __name__ == '__main__': # 運行app app.run() # 程式結束時釋放資料庫資源 cursor.close() db.close() # 關閉連接 值得注意的是，這裡的兩個介面分別響應POST請求和GET請求。
可以發現，兩個介面獲取前端傳過來的參數的方式是不同的：
-
GET
data = request.args.to_dict() # 需from flask import request這樣拿到的data是一個python的字典對象
-
POST
data = request.get_data() # 需from flask import request data = json.loads(data) # 轉化為字典對象。需import json這兩行程式碼才拿到一個python的字典對象
介面獲取前端傳過來的參數的方式與其響應的請求類型（如POST、GET、POST和GET）是對應的。
對應地，前端發過來的參數類型也需要和後端進行匹配。
前端程式碼
這裡給出前端處理用戶登錄和註冊請求的函數。
-
login
function login() { var url = "http://127.0.0.1:5000/api/login"; var userid = document.getElementById("userid"); var password = document.getElementById("password"); $.ajax({ url: url, type: "GET", data: { userid: userid.value, password: password.value, }, success: function(data) { var data1 = JSON.parse(data); // console.log(data1); if (data1.success) { window.sessionStorage.setItem("userid", userid.value); alert("登錄成功！進入主頁面！"); window.location.href = 'index.html'; } else { alert("登錄失敗！請輸入正確的帳號和密碼！"); } }, error: function(XMLHttpRequest, textStatus, errorThrown) { if (textStatus === 'timeout') { alert('請求超時，請重試！'); } } }) } -
register
function register() { var password1 = document.getElementById("password1").value; var password2 = document.getElementById("password2").value; var userid = document.getElementById("userid").value; var phone = document.getElementById("phone").value; var email = document.getElementById("email").value; var company = document.getElementById("company").value; if (password1 !== password2) { alert("兩次輸入的密碼不相同,請重新輸入！"); return; } $.ajax({ url: "http://127.0.0.1:5000/api/register", type: "POST", // 轉成json data: JSON.stringify({ userid: userid, password: password1, phone: phone, email: email, company: company }), success: function(data) { var data1 = JSON.parse(data); if (data1.success) { alert("註冊成功，請登錄！"); window.location.href = 'login.html'; } else { alert("註冊失敗，請檢查您輸入的資訊是否正確！"); } }, error: function(XMLHttpRequest, textStatus, errorThrown) { if (textStatus === 'timeout') { alert("請求超時！"); } } }) }
可以注意到，用ajax發送GET請求和PSOT請求時，我發的數據類型是不一樣的。
-
login是GET請求，發送了json字元串
JSON.stringify({ userid: userid, password: password1, phone: phone, email: email, company: company }) -
register是POST請求，發送了javascript的類的對象
{ userid: userid.value, password: password.value, }
至此，本文對這次作業中後端搭建的介紹就結束了。
這次作業算是我第一次寫後端，也是我第一次接觸Flask，如果我有寫錯的地方，請在評論區指正！
作者：@臭鹹魚
轉載請註明出處：https://www.cnblogs.com/chouxianyu/
歡迎討論和交流!
