用pymysql和Flask搭建後端，響應前端POST和GET請求，實現登陸和註冊功能

前言

此次做業不只須要我創建一個數據庫(詳情請點擊這裏)，還須要我基於這個數據庫寫後端接口（註冊和登陸）供前端訪問，接收前端的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/

歡迎討論和交流!