一、使用接口接受从客户端发过来的数据进行验证
需求：
在前端做一个登录页面，在用户名输入数据进行登录，后端拿到数据对数据库进行验证，如果有就返回一个登录正确，如果没有就返回用户名或密码错误
后端需求分析：
1.在后端构建flask框架，导入MySQL模块和跨域模块
2.启动一个服务，引用跨域模块，让所有的url都允许跨域请求
3.启动一个路由，输入请求的路径和方式，默认的是入参是json
4.创建一个方法，一个定死的接口不会经过数据库
5.接收从客户端（前端）发过来所有的json格式的数据，用一个变量进行封装
6.定义两个变量，用来分别调用传过来的数据，传过来的数据是键值对
7.打开数据库并获取游标
代码示例
#打开数据库
conn = pymysql.connect(host='数据库地址', user='数据库管理系统用户名', passwd="数据库管理系统密码", db='数据库密码',charset='utf8',autocommit=False)
#autocommit=False是不用自动提交 charset='utf8'文档格式为utf8
#获取数据库游标
cur = conn.cursor()
8.输入一条查询语句用字符串拼接来把两个变量拼接起来进行查询并用变量进行封装
9.用使用cur.execute()语句执行sql语句并且赋给一个变量进行存储
代码示例
#使用cur.execute()语句执行sql语句
logincur = cur.execute(sql)
注：一般是需要对游标和数据库连接进行关闭的
10.if语句进行判断是否输入的正确，输入正确就返回登录成功，输入有误就返回密码或者用户名输入有误
11.启动这个服务
注：里面是可以写入端口号的
代码示例
server.run()
上后端代码
#!/user/bin/env python3
# -*- coding: utf-8 -*-
import flask
import pymysql
from flask_cors import CORS
'''
flask： web框架，通过flask提供的装饰器@server.route()将普通函数转换为服务
'''
# 创建一个服务，把当前这个python文件当做一个服务
server = flask.Flask(__name__)
# r'/*' 是通配符，让本服务器所有的 URL 都允许跨域请求
CORS(server, resources=r'/*')
# r'/*' 是通配符，让本服务器所有的 URL 都允许跨域请求
# @server.route()可以将普通函数转变为服务 的路径、请求方式
@server.route('/login', methods=['post']) # 入参为json
def login():
params = flask.request.json # 当客户端没有传json类型或者没传时候，直接get就会报错。
# params = flask.request.json #入参是字典时候用这个。
# print(params)
username = params.get("username")
password = params.get("password")
conn = pymysql.connect(host='数据库地址', user='数据库管理系统用户名', passwd="数据库管理系统密码", db='数据库密码',charset='utf8',autocommit=False)
cur = conn.cursor()
sql = "SELECT user_name,pass_word FROM user_login WHERE user_name='" + username + "' and pass_word='" + password + "'"
logincur = cur.execute(sql)
date = {'code': 1, 'msg': '登陆成功'}
data = {'code': 0, 'msg': '你输入的用户名或密码不正确'}
cur.close()
conn.close()
if logincur:
return date
else:
return data
前端需求分析：
1.生成一个html骨架，导入一个jQuery的库
2.创建两个input标签，一个text和password，分别设置为用户名和密码
3.再创建一个按钮，给按钮绑定了一个点击事件，给点击事件定义一个方法
4.创建一个script标签，在里面用函数封装点击事件的方法
5.在里面先获取input里面输入的数据分别给到一个新变量存储
6.声明一个json变量，用JSON.stringify()封装一个json格式的数据
7.使用ajax方法，先设置请求方式，声明返回结果的类型，声明发送的格式必须是json字符串，输入url地址，向接口发送json变量的数据
8.使用一个回调函数，在回调函数下调用回调函数返回的结果，将返回结果输出在浏览器的输出框上
上前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>
<style>
* {
padding: 0;
margin: 0;
}
#sys {
position: relative;
top: 5px;
right: 28px;
width: 20px;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
用户名：<input type="text" id="nam"><br>
<div>密码：<input type="password" id="pass">
<img src="images/close.png" alt="" id="sys">
</div>
<button onclick="logind()">登录</button>
<a id="jump" href="C:\Websites\html\js\登录\inde.html" target="_blank"></a>
<script>
var sys = document.getElementById('sys');
var pas = document.getElementById('pass')
var conter = 0
sys.onclick = function () {
if (conter == 0) {
sys.src = 'images/open.png';
pas.type = 'text';
conter = 1;
}
else {
sys.src = 'images/close.png';
pas.type = 'password';
conter = 0;
}
}
function logind() {
// $('#botPOST').on('click', function () {
sys = $('#nam').val()
pas = $("#pass").val()
var json = JSON.stringify({
username: sys,
password: pas
});
$.ajax({
type: 'POST',
contentType: "application/json",
dataType: "json",
url: 'http://127.0.0.1:5000/路由地址',
data: json,
success: function (res) {
alert(res.msg)
// alert(res.code)
if (res.code == 1) {
location.href = "select.html"
}
}
})
}
</script>
</body>
</html>
二、使用前端连接后端往数据库实现增加数据
需求
需要做一个窗口在浏览器窗口往数据库添加数据
后端需求分析
1.因为此时这个flask框架的文件已经是一个接口了，直接启用一个新的路由，输入新的地址和请求方式，接着在创建一个方法
2.接收从客户端（前端）发过来所有的json格式的数据，用一个变量进行封装
3.定义三个变量，用来分别调用传过来的数据，传过来的数据是键值对
4.打开数据库并获取游标
5.输入一条增添语句用字符串拼接来把三个变量拼接起来进行添加并用变量进行封装
6.用使用cur.execute()语句执行sql语句并且赋给一个变量进行存储
注：一般是需要对游标和数据库连接进行关闭的
7.if语句进行判断是否输入的正确，插入正确就返回插入成功，插入失败就返回插入数据有误或者是已经重复插入
8.启动这个服务
上后端代码
@server.route('/loginms', methods=['post']) # 入参为json
def submit():
params = flask.request.json # 当客户端没有传json类型或者没传时候，直接get就会报错。
dateof1 = params.get("dateof") #接收日期
learning2 = params.get("learning") #接收实际学习时间
results3 = params.get("results") #接收学习成果
conn = pymysql.connect(host='数据库地址', user='数据库管理系统用户名', passwd="数据库管理系统密码", db='数据库密码',charset='utf8',autocommit=False)
cur = conn.cursor()
sql = "INSERT INTO submit_work(dateof,learning,results) VALUES ('" + dateof1 + "','" + learning2 + "','" + results3+"')"
submitcur = cur.execute(sql)
cur.close()
conn.close()
results1 = {'code': 1, 'msg': '插入成功'}
results2 = {'code': 0, 'msg': '你插入的数据有误或者已经重复插入'}
# cur.close()
# conn.close()
if submitcur !=0:
return results1
else:
return results2
前端需求分析
1.生成一个html骨架，导入一个jQuery的库
2.创建三个input标签，一个date、number和text，分别设置为日期，实际学习时间和学习成果
3.再创建一个按钮，给按钮绑定了一个点击事件，给点击事件定义一个方法
4.创建一个script标签，在里面用函数封装点击事件的方法
5.在里面先获取input里面输入的数据分别给到一个新变量存储
6.声明一个json变量，用JSON.stringify()封装一个json格式的数据
7.使用ajax方法，先设置请求方式，声明返回结果的类型，声明发送的格式必须是json字符串，输入url地址，向接口发送json变量的数据
8.使用一个回调函数，在回调函数下调用回调函数返回的结果，将返回结果输出在浏览器的输出框上
上前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.w {
width: 800px;
height: 300px;
margin: 100px auto;
border: 1px solid #838383;
background-color: pink;
}
.a {
margin: 100px 200px;
}
span {
display: inline-block;
width: 120px;
}
button {
width: 100px;
margin: 20px 120px;
background-color: red;
}
input {
width: 200px;
}
.login {
/* width: 50px; */
height: 50px;
background-color: #838383;
line-height: 50px;
font-size: 16px;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div class="w">
<div class="login">插入数据</div>
<div class="a">
<!-- <span>编号：</span><input type="number" id="word_id" requied="requied"><br> -->
<span>日期：</span><input type="date" id="dateof" requied="requied"><br>
<span>实际学习时间：</span><input type="number" id="learning" requied="requied"><br>
<span>学习成果：</span><input type="text" id="results" requied="requied" placeholder="请输入"><br>
<button onclick="submit1()">提交</button>
</div>
</div>
<script>
function submit1() {
// var word_id = $('#word_id').val()
var date = $('#dateof').val()
var lear = $("#learning").val()
var resu = $("#results").val()
var json = JSON.stringify({
dateof: date,
learning: lear,
results: resu
})
$.ajax({
type: "POST",
contentType: "application/json",
dataType: "json",
url: "http://127.0.0.1:5000/路由地址",
data: json,
success: function (res) {
alert(res.msg)
},
error: function (data) {
alert("fail");
}
})
}
</script>
</body>
</html>
三、使用前端对数据库的数据进行爬取
需求
需要将数据进行查询，给到一个变量存储，并在前端输出表格形式的数据
后端需求分析
1.再次启用一个新的路由，输入新的地址和请求方式，并且写一个方法
2.接收从客户端（前端）发过来所有的json格式的数据，用一个变量进行封装，此时是不需要这个参数的，只需返回值即可，所以传参是可以传空参的
3.定义一个变量，用来接收一个空参
4.打开数据库并获取游标
5.输入一条查询语句，查询所有的数据并且使用一个变量进行封装
6.用使用cur.execute()语句执行sql语句并且赋给一个变量进行存储
注：此时是查询出被影响的数据行数
7.使用一个for循环遍历出来，用cur.fetchone()，需要四个临时变量，存储相对应的数据
注：在循环体外建一个数组，里边在创建一个字典，在对象之中是采取键值对的形式，键就是字段名，键是一个写死的，数据使用循环遍历出来就行依次添加进对象，多对象一般是由数组进行封装的，这个fetchone（）方法是把数据一行一行读取
注：一般是需要对游标和数据库连接进行关闭的
7.if语句进行判断是否输入的正确，查询正确就返回登录成功，查询失败就返回密码或者用户名输入有误
8.启动这个服务
后端代码
@server.route('/submit', methods=['post']) # 入参为json
def submit_word():
params = flask.request.json # 当客户端没有传json类型或者没传时候，直接get就会报错。
dateof1 = params.get("dateof")
conn = pymysql.connect(host='数据库地址', user='数据库管理系统用户名', passwd="数据库管理系统密码", db='数据库密码',charset='utf8',autocommit=False)
cur = conn.cursor()
submitword = "SELECT id,DATE_FORMAT(dateof,'%Y-%m-%d'),learning, results FROM submit_work "
curt = cur.execute(submitword)
result = []
for i in range(curt):
date1 = {}
word,dete,lear,resu=cur.fetchone()
date1['id'] = word
date1['dateof'] = dete
date1['learning'] = lear
date1['results'] = resu
result.append(date1)
# print(result)
cur.close()
conn.close()
前端需求分析
1.现在vscode里面生成一个html骨架
2.在body标签里建立一个表格（即列表）
3.把表格的边框设置为1像素（px），将内边距设置为0，把表格居中显示
注：不设置表格宽高，是想让其中的内容直接程开盒子
4.创建一个表头和表格内容的标签，即thead和tbody
5.创建一行表头，创建三个单元格（即三列）并加粗显示其中内容
6.在表格主体区域创建一行数据，创建三个单元格内容（即三列）
7.在每一个单元格之中都添加一个类名
注：这里添加一个类名主要是好分辨清楚那个单元格放哪个内容
8.开始在HTML头部标签区域（即head）导入一个jQuery库
注：可以在jQuery.com中下载，或是在其他网站直接引用，不进行载入jQuery库的话，在代码执行的时候是无法解析jQuery语法的会报错
9.创建一个script脚本标签
10.在标签里面先创建一个变量用来存储json格式的一个 JSON 空字符串
代码示例：
11.使用ajax方法
12.发送一个POST请求
13.要求向接口发送的数据必须是JSON字符串格式
14.放入一个url，一个发送请求的地址
15.接受后台的数据类型必须是json
16.要给接口发送的json格式的数据
17.ajax请求成功后触发的方法给到一个变量储存
18.使用function对象对回调函数进行封装
19.获取表格标签放在一个变量里面
20.获取tbody表格主体里面的内容
21.使用回调函数进行.each循环
注：each方法（）是jQuery的一种循环方式
22.创建一个jQuery对象$line装表格主体的内容
23.定义第一个变量装从接口返回过来的日期
24.定义第二个变量来装从接口返回过来的数值
25.定义第三个变量来装从接口返回的文本内容
26.用jQuery对象$line来获取他的后代元素并把日期装到内容里，修改后代的内容
27.用jQuery对象$line来获取他的后代元素并把数值装到内容里，修改后代的内容
28.用jQuery对象$line来获取他的后代元素并把文本放在里面，并修改后代的内容
29.用获取的表格变量把jQuery对象添加进去
注：在回调函数中，利用回调函数来进行jQuery each()方法循环遍历的时候，用jQuery获取最好写在each（）方法外面，因为在里面的话，每次进行添加的内容也会获取出来
代码完整如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>主页</title>
<script src="jquery.min.js"></script>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?b2pvt2');
src: url('fonts/icomoon.eot?b2pvt2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?b2pvt2') format('truetype'),
url('fonts/icomoon.woff?b2pvt2') format('woff'),
url('fonts/icomoon.svg?b2pvt2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
table {
text-align: center;
}
table thead {
/* position: fixed; */
background-color: #0097fc;
}
#w,
#insert,
#update,
#delete {
font-family: 'icomoon';
margin: 0 10px;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<span>
</span>
<table border="1" cellspacing="0" cellpadding="0" align="center">
<thead>
<tr>
<th>编号</th>
<th>日期</th>
<th>实际学习时间</th>
<th>学习成果</th>
</tr>
</thead>
<tbody id="tbody">
<tr class="line">
<td class="wordid"></td>
<td class="dateof"></td>
<td class="learning"></td>
<td class="results"></td>
<td><a href="update.html" id="update"></a>
<a href="insert.html" id="insert"></a>
<a href="delete.html" id="delete"></a>
<a href="login.html" id="w"></a>
</td>
</tr>
</tbody>
</table>
<script>
var json = JSON.stringify({})
$.ajax({
type: 'POST',
contentType: "application/json",
url: 'http:127.0.0.1:5000/路由地址',
dataType: "json",
data: json,
success: callback
});
function callback(res) {
var $table = $("table")
var tbody = $('#tbody').html();
$(res).each(function (idx, data) {
var $line = $(tbody);
var wordid = data.id
var dateof = data.dateof;
var learning = data.learning;
var results = data.results;
$line.find('.wordid').html(wordid);
$line.find('.dateof').html(dateof);
$line.find('.learning').html(learning)
$line.find('.results').html(results)
$table.append($line)
})
}
</script>
</body>
</html>
四、对数据库进行修改和删除
因为修改和删除是相对较简单的，和第二个的步骤大体上是相同的我直接上代码
后端代码
注：因为是一个py文件存在多个方法，所以此时只需要一个server.run()，可以理解为在flask框架中启用这个路由里面方法
#删除
@server.route('/delete', methods=['post']) # 入参为json
def delete_word():
params = flask.request.json # 当客户端没有传json类型或者没传时候，直接get就会报错。
# params = flask.request.json #入参是字典时候用这个。
delete_line = params.get("deleteLine")
conn = pymysql.connect(host='数据库地址', user='数据库管理系统用户名', passwd="数据库管理系统密码", db='数据库密码',charset='utf8',autocommit=False)
cur = conn.cursor()
sql = "delete from submit_work where results = '"+delete_line+"'"
deletecur = cur.execute(sql)
conn.commit()
date = {'code': 1, 'msg': '删除成功'}
data = {'code': 0, 'msg': '删除的目标不存在'}
cur.close()
conn.close()
if deletecur !=0:
return date
else:
return data
#修改
@server.route('/update', methods=['post']) # 入参为json
def update_word():
params = flask.request.json # 当客户端没有传json类型或者没传时候，直接get就会报错。
# params = flask.request.json #入参是字典时候用这个。
wordid = params.get("wordid")
updateline = params.get("updateLine")
conn = pymysql.connect(host='数据库地址', user='数据库管理系统用户名', passwd="数据库管理系统密码", db='数据库密码',charset='utf8',autocommit=False)
cur = conn.cursor()
sql = "update submit_work set results = '"+updateline+"' where id = '"+wordid+"'"
updatecur = cur.execute(sql)
conn.commit()
date = {'code': 1, 'msg': '修改成功'}
data = {'code': 0, 'msg': '没有找到需要修改的内容'}
cur.close()
conn.close()
if updatecur !=0:
return date
else:
return data
server.run()
前端代码
#删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>删除</title>
<script src="jquery.min.js"></script>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?b2pvt2');
src: url('fonts/icomoon.eot?b2pvt2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?b2pvt2') format('truetype'),
url('fonts/icomoon.woff?b2pvt2') format('woff'),
url('fonts/icomoon.svg?b2pvt2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
* {
margin: 0;
padding: 0;
}
.w {
width: 800px;
height: 300px;
margin: 100px auto;
border: 1px solid #838383;
background-color: pink;
}
.a {
margin: 100px 200px;
}
span {
display: inline-block;
width: 120px;
}
button {
width: 100px;
height: 30px;
margin: 20px 120px;
background-color: rgb(77, 255, 0);
}
input {
width: 200px;
}
.login {
/* width: 50px; */
height: 50px;
background-color: #838383;
line-height: 50px;
font-size: 16px;
}
#delete_id,
button {
font-family: 'icomoon';
}
#delete_id {
display: inline-block;
text-decoration: none;
width: 50px;
height: 50px;
color: rgb(0, 255, 140);
}
</style>
</head>
<body>
<div class="w">
<div class="login">删除数据</div>
<div class="a">
<!-- <span>编号：</span><input type="number" id="word_id" requied="requied" placeholder="请输入你要删除的编号"><br> -->
<a href="select.html" id="delete_id"></a>
<span>学习成果：</span><input type="text" id="results" requied="requied" placeholder="请输入你要删除的内容"><br>
<button onclick="delete1()"></button>
</div>
</div>
<script>
function delete1() {
var dele = $("#results").val();
json = JSON.stringify({
deleteLine: dele
})
$.ajax({
type: "POST",
contentType: "application/路由地址",
dataType: "json",
url: "http://127.0.0.1:5000/delete",
data: json,
success: function (res) {
alert(res.msg)
}
})
}
</script>
</body>
</html>
#修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>修改</title>
<script src="jquery.min.js"></script>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?b2pvt2');
src: url('fonts/icomoon.eot?b2pvt2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?b2pvt2') format('truetype'),
url('fonts/icomoon.woff?b2pvt2') format('woff'),
url('fonts/icomoon.svg?b2pvt2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
* {
margin: 0;
padding: 0;
}
.w {
width: 800px;
height: 300px;
margin: 100px auto;
border: 1px solid #838383;
background-color: pink;
}
.a {
margin: 100px 200px;
}
span {
display: inline-block;
width: 120px;
}
button {
width: 100px;
height: 30px;
margin: 20px 120px;
background-color: rgb(77, 255, 0);
}
input {
width: 200px;
}
.login {
/* width: 50px; */
height: 50px;
background-color: #838383;
line-height: 50px;
font-size: 16px;
}
#delete_id,
button {
font-family: 'icomoon';
}
#delete_id {
display: inline-block;
text-decoration: none;
width: 50px;
height: 50px;
color: rgb(0, 255, 140);
}
.results {
margin-left: 55px;
}
</style>
</head>
<body>
<div class="w">
<div class="login">修改数据</div>
<div class="a">
<a href="select.html" id="delete_id"></a>
<span>编号：</span><input type="number" id="word_id" requied="requied" placeholder="请输入你要删除的编号"><br>
<span class="results">学习成果：</span><input type="text" id="results" requied="requied"
placeholder="请输入你要进行修改的内容"><br>
<button onclick="update1_word()"></button>
</div>
</div>
<script>
function update1_word() {
var word_id = $("#word_id").val();
var resu = $("#results").val();
json = JSON.stringify({
wordid: word_id,
updateLine: resu
})
$.ajax({
type: "POST",
contentType: "application/json",
dataType: "json",
url: "http://127.0.0.1:5000/update",
data: json,
success: function (res) {
alert(res.msg)
}
})
}
</script>
</body>
</html>
总结
其实在flask框架可以直接把这个py文件当作一个服务，在客户端中输入的数据一般都是json为传入的数据进行传参，json就是一个对象，因为对象和python里面的字典是相同的，所以在进行操作的时候，可以直接用字典进行返回，多个字典返回的话必须加上数组，这个只是运用到了flask框架的知识、然后就是python对MySQL进行的增删改查的操作，在前端用到了jQuery获取元素和创建节点的操作还有Ajax方法，其他的知识感觉没有必要进行讲，其实现在一般都会出现跨域的问题，所以以防万一还是加上允许跨域的一些操作。一些css样式想设置就设置，像我这个就随便设置，过得去就行。
本文转载自: https://blog.csdn.net/weixin_65356515/article/details/126447251
版权归原作者 郗903 所有， 如有侵权，请联系我们删除。
版权归原作者 郗903 所有， 如有侵权，请联系我们删除。