基于Flask和jquery实现前后端交互
前言
使用python写网站时，可以选择flask web框架来进行编写，flask具有轻量、简捷易上手的特点，适合新手使用。
这里简单写了一个注册、登录界面的前后端完全分离的程序，做一个使用示例。
前端使用的是html+jquery来实现的，前后端数据交互依靠jqeury的ajax方法。
flask使用
在主入口文件 index.py 中
先安装这两个模块
from flask import Flask
from flask_cors import CORS
创建flask服务对象
app = Flask(__name__)
app.config['SECRET_KEY'] = os.urandom(24)
app.config['PERMANENT_SESSION_LIFETIME'] = timedelta(days=7)
CORS(app)
编写后端接口
简单的返回了一个json格式的数据，需要导入json模块
@app.route('/index', methods=['GET'])
def index():
ret_msg={"name":"Jack","sex":"man"}
return json.dumps(ret_msg)
将后台服务启动起来
if __name__ == '__main__':
app.run()
前端访问后台的接口
先新建一个index.html文件，里面引入一下jquery
可以从 jquery.com 下载 jQuery 库，或者使用在线引入方式
<script type="text/javascript" src="webapp/JavaScript/jquery-3.4.1.min.js" ></script>
在线引入，自己更换对应版本
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
html中写一段简单的ajax代码，访问后台的python接口，将上面index接口的数据，弹窗显示出来
$.ajax({
type:'get',
url:'http://localhost:5000/index',
dataType:'json',
contentType: 'application/json; charset=utf-8',
success:function(serverdata){
alert(serverdata.name);
}
});
flask的蓝图，访问多个模块中的接口
使用flask的时候，会发现一个问题，我们在开发程序的时候，多个接口当然会分类放到不同的文件中
目前上述的方式只能访问到单个文件中的接口，所以这里要使用到flask中的蓝图模块 即 Blueprint
比如我们需要新建一个user.py模块，里面存放用户注册登录的相关接口
那么 只需要在主启动文件 index.py中 添加一行代码，当然如果多个文件 就添加多次
app = Flask(__name__)
app.config['SECRET_KEY'] = os.urandom(24)
app.config['PERMANENT_SESSION_LIFETIME'] = timedelta(days=7)
#添加以下一行代码 注册蓝图 相当于前端 也能访问通 /user路径下的接口了
app.register_blueprint(user,url_prefix='/user')
CORS(app)
user.py文件中：创建对应的Blueprint对象 参数 要和 register_blueprint内的 url_prefix 参数一致
然后就可以在user.py中写自己的接口了
接口内的某些数据库操作方法，可以自己完善以下，这里没有贴了
from flask import Blueprint,request,session
user=Blueprint('user',__name__)
#登录接口
@user.route('/login', methods=['POST'])
def login():
"""
:param dic_user: ["user_name":"","passwd":""]
:return:
"""
ret_msg={"status":"401","msg":"登录失败，异常问题"}
data=request.json #dict类型
username=data[0]["username"]
passwd=data[0]["passwd"]
count=userdao.query_rows((username,))
if count==0:
ret_msg["msg"]="登录失败,用户不存在,请先注册"
ret_msg["status"]="402"
elif count==1: #校验密码
get_pwd=userdao.query_passwd((username,))
if passwd!=get_pwd:
ret_msg["msg"] = "登录失败,密码错误"
ret_msg["status"] = "403"
else :
userdao.update_logintime((tool.get_time(),username))
ret_msg = {"status": "400", "msg": "登录成功"}
// session["username"]=username
// session.permanent = True
print(ret_msg)
return json.dumps(ret_msg)
flask的request，获取前端传递信息
上述代码使用到了flask模块的request ，这个是用来获取前端传给我们的数据的
request.json 获取json格式的数据，在python里面实际为列表里面嵌套字典的数据类型
用户登录前端设计
我们可以新建一个user_login.html, 里面简单的做下用户名、密码的输入 和登录按钮
这里使用了bootstrop的框架，让界面稍微好看一点，有兴趣的可以下载试下，不使用也不影响功能使用
主要介绍一下 跑通流程
我们在启动服务端之后，因为使用了蓝图，我们现在也能访问到user/login目录下的接口了
<body>
<div class="container" style="margin-top:100px">
<form class="form-horizontal">
<div class="form-group">
<label class="col-xs-offset-2 col-xs-2 control-label">账户：</label>
<div class="col-xs-5">
<input type="text" class="form-control" id="username" placeholder="工号登录">
</div>
</div>
<div class="form-group">
<label class=" col-xs-offset-2 col-xs-2 control-label">密码：</label>
<div class="col-xs-5">
<input type="password" class="form-control" id="password">
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-4 col-xs-8">
<button type="button" class="btn btn-default" id='confirmadd'>登录</button>
<button type="button" class="btn btn-default" id='cancle'>取消</button>
</div>
</div>
</form>
</div>
</body>
JS代码，获取输入框信息 访问后端接口，按钮事件绑定等
弹窗使用的layer 没有引用的 可以直接用 自带的 alert 之类的方法
//点击登录按钮 触发事件
$("#confirmadd").click(function(){
var username =$("#username").val();
var pwd =$("#password").val();
if(username=="" || pwd =="")
{
layer.open({
title:"提示",
content:"用户名或密码不能为空！"
});
}
else
{
var usermsg = new Array();
usermsg.push({username:username,passwd:pwd});
var datasend=JSON.stringify(usermsg);
console.log(datasend);
$.ajax({
type:'POST',
url:'http://localhost:5000/user/login',
dataType:'json',
contentType: 'application/json; charset=utf-8',
data:datasend,
success:function(serverdata){
// layer.msg(serverdata.msg);
if(serverdata.status=="400"){
layer.msg(serverdata.msg);
}
}
});
}
});
效果展示
![图片[1]-【使用python的flask和与前端ajax交互】实现一个简单的登录程序-JieYingAI捷鹰AI](https://www.jieyingai.com/wp-content/uploads/2024/07/1721664554447_0.png)
![图片[2]-【使用python的flask和与前端ajax交互】实现一个简单的登录程序-JieYingAI捷鹰AI](https://www.jieyingai.com/wp-content/uploads/2024/07/1721664554447_1.png)
暂无评论内容