内容简介:这次作业不仅需要我本文介绍如何用Flask搭建后端,其中使用了pymysql操作mysql数据库,也会做这个部分的介绍。需要为前端提供的接口有两个:注册和登录,为此我定义了四个函数,分别是
前言
这次作业不仅需要我 建立一个数据库(详情请点击这里) ,还需要我基于这个数据库写后端接口(注册和登录)供前端访问,接收前端的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/
欢迎讨论和交流!
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 前端VUE:开发环境搭建
- 【手牵手】搭建前端组件库(一)
- 你的前端知识框架,该如何搭建?
- 前端项目框架搭建随笔---Webpack踩坑记
- 从0搭建前端项目架构-webpack配置
- 【单页面博客从前端到后端】环境搭建
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。