执行原理：浏览器请求初始界面IP地址，python后端flas框架路由返回主页HTML，当用户输入账号和密码，前端HTML通过Ajax发送账号密码请求后端正接口，，接口逻辑验证成功返回数据且封装请求头信息，防止不同源问题。
前端：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" />
<script src="Js/jquery-1.8.0.js"></script> <!--引用根目录的Js文件下的公共jquery-3.4.1.min.js文件。Ajax需要这个文件 -->
<script src="Js/login.js"></script> <!--js文件，里面定义了动作-->
<title>牛大爷管理云系统</title>
<link href="Css/login.css" rel="stylesheet" type="text/css" /> <!--引用根目录的Css下的login.css布局cs文件-->
</head>
<body>
<div id="login">
<!--上方的布局，欢迎图片 -->
<div id="top">
<div id="top_left"><img src="images/login_03.gif" /></div>
<div id="top_center"></div>
</div>
<div id="center">
<!-- 登入界面的布局 -->
<div id="center_left"></div>
<div id="center_middle">
<div id="biaoqian"></div>
<div id="user">账 户
<input id="userv" type="text" name="textfield" value="请输入您的账号" />
</div>
<div id="password">密 码
<input id="passwordv" type="password" name="textfield2" value="" />
</div>
<div id="btn" ><a id="lg">登录</a> <a id="del">清空</a></div> <!--登入按钮的id是lg,在js文件中对这个id有单独的触发设置--
</div>
<div id="center_right"></div>
</div>
<div id="down">
<div id="down_left">
<div id="inf">
<span class="inf_text">系统版本</span>
<span class="copyright">牛大爷管理系统 2019 v1.0</span>
</div>
</div>
<div id="down_center"></div>
</div>
</div>
</body>
</html>
前端html界面就是个简单的登入界面。
接下来对登入按钮设置js的动作，当用户点击登入按钮时触发，Ajax将获取HTML上的账号和密码并发送请求到验证接口。
js文件:
后端python文件：
//<script src="Js/jquery-3.4.1.min.js"></script> 这段在HTML中引用了，所以js文件中不需再次引用
// 登录的触发
$(document).ready(function(){ //定义js函数
$("#lg").click(function(){ //#代表类型是id，意思是当id为lg元素被click点击时触发这个函数内容
//验证账号密码是否为空，我做了简单验证，先判断账号密码是否为空。
if ( $("#userv").val()=="请输入您的账号"){ //如果id为userv的元素的值（val）等于 “请输入您的账号”这个字符串
$("#biaoqian").html("账号不能为空"); //那就将id为biaoqian的元素值（这里是标签p,所以更给他的值用.html函数）更改。用来提示效果
}
else {
if ( $("#passwordv").val()==""){
$("#biaoqian").html("密码不能为空");
}else { //如果账号和密码都不为空，那么我们就开始用Ajax请求验证
// POST一个json数据
var na = $("#userv").val(); //定义变量 na代表账号的值 $是代表继承jQuery的方法
var pw = $("#passwordv").val();
var daa={"name":na,"pwd":pw} //这里将账号和密码拼装成字典格式，方便后端接口接收读取
//alert("开始登入账户"+na+"开始登入密码"+pw);
$.ajax({ //Ajax框架结构
type: "POST", //定义请求类型
url:"http:/xxxxx:8088/login", //请求接口路径
data:daa, //发送的数据
//contentType:"application/json;charset=UTF-8",
Type:"json", //定义接收返回数据的类型
success:function(data) { //请求成功会执行这个函数
//var sev = JSON.parse(data);
var c=data.code; //读取响应数据中code的值
// alert("响应数据"+ c.value);
if (c==0001){ //如过响应的值是0001 让p标签提示相应信息，这个响应值也是前后端约定好的
$("#biaoqian").html("用户名或密码错误"); //需要用html函数改变p标签内容 vel只适合更改文本
}else if(c==0002){
$("#biaoqian").html("该用户未注册");
}else if(c==2000){
$("#biaoqian").html("登入成功");
window.location.href="./index.html";
}else if(c==5000){
$("#biaoqian").html("服务器故障");
}
},
error:function(xhr,type){
alert(JSON.stringify(xhr),JSON.stringify(type));
}
});
}
}
});
});
// 清空按钮触发 后期改成注册
$(document).ready(function(){
$("#del").click(function(){
$("#userv").val("请输入您的账号");
$("#passwordv").val("");
$("#biaoqian").html("");
});
});
// 获得焦点清空初始提示语逝去焦点值为空则恢复初始提示语
$(document).ready(function(){
$("#userv").focus(function(){
$(this).val("");
$("#biaoqian").html("");
});
$("#userv").blur(function(){
if ($(this).val() =='')
{
$(this).val("请输入您的账号");
$("#biaoqian").html("");
};
});
});
后端python文件：
#!/usr/bin/env python
import time
from flask import Flask,jsonify,request,make_response
import json
import socket
import random
import urllib.parse
import pymysql
from flask import Response
def sqldo(sql): #定义个执行连接数据库的函数
# 打开数据库连接
db = pymysql.connect("数据库IP","用户账号","密码","需要链接的库名" )
# 使用 cursor() 方法创建一个游标对象 cursor
cursor = db.cursor()
sq=sql
# 使用 execute() 方法执行 SQL 查询
cursor.execute(sq)
# 使用 fetchone() 方法获取单条数据.
data = cursor.fetchone()
return data
# 关闭数据库连接
db.close()
#创建一个flask服务，赋值给APP
app = Flask(__name__)
#指定接口访问的路径，仅支持post请求方式，这段代码意思是当访问/login路径就会执行下面的这个函数
@app.route('/login',methods=['POST'])
#登入系统验证接口
def login():
#获取接到的数据
print("接收请求")
#data = request.get_json()
data = request.form #因为Ajax发送的是post请求所以这里用from函数获取请求数据
print('请求的数据是',data,"请求模式是",request.method)
#print('用户名是',data['name'])
if len(data) <= 1: #如果请求数据小于1 证明他没数据
print ('请求为空')
#接收的请求时空则包0000
da ={"code":"5000"}
else: #如果请求数据不为空，咱们就开始验证账户密码
sql= 'select * from user where name="' + data['name'] + '"' #构建sql语句，查寻这个账号的数据，用字符串拼接方式组合，这样灵活变通
#print ('sql语句是',sql)
try: #加个异常，执行sql语句，出错还可以提示，方便调试
das= sqldo(sql) #sqldo是上面定义的查询数据库函数执行查询并将结果赋值给das
print(das)
except:
#数据库异常返回5000
da = {"code":"5000"}
if das == None: #如果值为空证明数据库没这个用户
print('判断为空')
#用户未注册返回0002
da = {"code":"0002"}
elif das[1]==data['pwd']: #如果查询数据库的值不为空，证明他注册了那我们来验证密码。根据数据结构数据库返回的是元组结构，das[1]第2个值是密码
#登入成功2000
da ={"code":"2000","name":'"'+das[0]+'"'} #依然用字符串拼接，密码正确返回 code码和这个用户名子。就是das[0]
else: #否则那就是密码错误了呗
print('密码错误')
#密码错误 0001
da = {"code":"0001"}
rst = make_response(da) #将code的码封装响应信息
rst.headers['Access-Control-Allow-Origin'] ="*" #给响应信息添加信息头 *代表所有都可以访问 可以跨域请求
rst.headers['Access-Control-Allow-Methods'] ="POST" #指定请求的模式post
print('响应数据是:',rst)
return rst #返回数据rst 这样 Ajax就会接收到数据
app.run(host='0.0.0.0',port=8088,debug=True) #程序 主入口 prot可以自定义访问端口，debug如果是True就代表室是更新，代码更改程序也直接更行
#debug:调试的时候，可以指定debug=true；如果是提供接口给他人使用的时候，debug要去掉