云社区 博客 博客详情

用pymysql和Flask搭建后端,响应前端POST和GET请求

木栖西 发表于 2020-04-05 21:08:59 2020-04-05
0
0

【摘要】 前言这次作业不仅需要我建立一个数据库(详情请点击这里),还需要我基于这个数据库写后端接口(注册和登录)供前端访问,接收前端的POST和GET请求,并将登录、注册是否成功传给前端。本文介绍如何用Flask搭建后端,其中使用了pymysql操作mysql数据库,也会做这个部分的介绍。正文需要为前端提供的接口有两个:注册和登录,为此我定义了四个函数,分别是select_user(us...

前言

这次作业不仅需要我建立一个数据库(详情请点击这里),还需要我基于这个数据库写后端接口(注册和登录)供前端访问,接收前端的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/

欢迎讨论和交流!


文章来源: www.cnblogs.com,作者:臭咸鱼,版权归原作者所有,如需转载,请联系作者。

原文链接:https://www.cnblogs.com/chouxianyu/p/12636231.html

登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

上一篇:Kaggle竞赛入门(二):如何验证机器学习模型

下一篇:k8s中安装部署alertmanager

评论 (0)


登录后可评论,请 登录注册

评论