用pymysql和Flask搭建後端，響應前端POST和GET請求
阿新 • • 發佈：2020-04-05
# 前言
這次作業不僅需要我[建立一個數據庫(詳情請點選這裡)](https://www.cnblogs.com/chouxianyu/p/12634881.html)，還需要我基於這個資料庫寫後端介面（註冊和登入）供前端訪問，接收前端的POST和GET請求，並將登入、註冊是否成功傳給前端。
本文介紹如何用Flask搭建後端，其中使用了pymysql操作mysql資料庫，也會做這個部分的介紹。
# 正文
需要為前端提供的介面有兩個：註冊和登入，為此我定義了四個函式，分別是
- select_user(userid, password)
- insert_user(userid, password, phone, email, company)
- on_register()
- on_login()
前兩個函式是操作資料庫，被後兩個函式呼叫；後兩個函式是給前端的介面。
## 後端說明
整個後端的程式碼如下：
```python
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
```python
data = request.args.to_dict() # 需from flask import request
```
這樣拿到的data是一個python的字典物件
- POST
```python
data = request.get_data() # 需from flask import request
data = json.loads(data) # 轉化為字典物件。需import json
```
這兩行程式碼才拿到一個python的字典物件
**介面獲取前端傳過來的引數的方式與其響應的請求型別（如POST、GET、POST和GET）是對應的。**
對應地，前端發過來的引數型別也需要和後端進行匹配。
## 前端程式碼
這裡給出前端處理使用者登入和註冊請求的函式。
- login
```javascript
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
```javascript
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
JSON.stringify({
userid: userid,
password: password1,
phone: phone,
email: email,
company: company
})
```
- register是POST請求，傳送了javascript的類的物件
```json
{
userid: userid.value,
password: password.value,
}
```
至此，本文對這次作業中後端搭建的介紹就結束了。
這次作業算是我第一次寫後端，也是我第一次接觸Flask，如果我有寫錯的地方，請在評論區指正！
---
作者：[@臭鹹魚](https://github.com/chouxianyu)
轉載請註明出處：