用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/

歡迎討論和交流!

---