用pymysql和Flask搭建后端，响应前端POST和GET请求，实现登陆和注册功能

时间 2020-06-09

标签 pymysql flask 搭建后端响应前端 post 请求实现登陆注册功能栏目 MySQL 繁體版

原文原文链接

前言

此次做业不只须要我创建一个数据库(详情请点击这里)，还须要我基于这个数据库写后端接口（注册和登陆）供前端访问，接收前端的POST和GET请求，并将登陆、注册是否成功传给前端。javascript

本文介绍如何用Flask搭建后端，其中使用了pymysql操做mysql数据库，也会作这个部分的介绍。html

正文

须要为前端提供的接口有两个：注册和登陆，为此我定义了四个函数，分别是前端

select_user(userid, password)
insert_user(userid, password, phone, email, company)
on_register()
on_login()

前两个函数是操做数据库，被后两个函数调用；后两个函数是给前端的接口。java

后端说明

整个后端的代码以下：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请求。mysql

能够发现，两个接口获取前端传过来的参数的方式是不一样的：git

GETgithub
```
data = request.args.to_dict()  # 需from flask import request
```
这样拿到的data是一个python的字典对象ajax

POSTsql

data = request.get_data()  # 需from flask import request
	data = json.loads(data)  # 转化为字典对象。需import json

这两行代码才拿到一个python的字典对象

接口获取前端传过来的参数的方式与其响应的请求类型（如POST、GET、POST和GET）是对应的。

对应地，前端发过来的参数类型也须要和后端进行匹配。

前端代码

这里给出前端处理用户登陆和注册请求的函数。

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('请求超时，请重试！');
	            }
	        }

	    })
	}

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/

欢迎讨论和交流!