摘要: 本文将为大家带来基于 Flask 框架和 JQuery 实现治理平台网站的开发性能。
【写在后面】
你要开发网站?嗯。。
会 Flask 吗?什么货色,没听过。。。
会 JQuery 吗?是 python 的库吗?
那你会什么?我会 F12 关上网站
好吧,那咱们来写个简略的表格治理平台。
基于 Flask 框架和 JQuery 实现治理平台网站的开发性能,我代码编写用了 2 天的工夫,从零开始写;又对具体实现流程,本人断断续续地整顿总结了近半个月。从自我感觉来说,整个过程和后果的实现都让我很称心。
【成果如下】
【第一步】理解 Flask 框架
1、理解 python 支流的 web 框架
(1)Django: 简略来说就是重武器,是最全能的开发框架,你想要的性能它都有;然而比拟沉重,适宜企业级的 web 开发;
(2)Flask: 属于 web 开发微框架,玲珑灵便,相干的第三方库丰盛,适宜开发小型 web;
(3)Tornado: 天生异步,性能强悍,然而框架提供的性能少,须要开发者本人实现;
因而,本文代码实现次要是基于 Flask 实现的。
2、理解 Flask 框架
(1)HelloWorld 实现:
简直所有的编程都是基于“hello world”实现的,因而也大抵讲下 helloworld 波及的内容。
from flask import Flask
app = Flask(__name__)
@app.route(‘/’)
def hello_world(): return “Hello world!”
if name == ‘__main__’:
app.run()
先申明一个 Flask 框架的对象,而后定义路由 ’/’,即 URL 地址为 http://127.0.0.1:5000/;如果定义门路为‘/new’,那对应的拜访地址须要改为 http://127.0.0.1:5000/new。另外,@app.route 是个装璜器。
(2)如何实现具体 IP 地址或者端口的拜访呢?
app.run(debug=True,host=”x.x.x.x”,port=”1234″)
通过对 app.run() 办法的参数定义,别离实现了调试性能,拜访 URL 变更为 http://x.x.x.x:1234
这里调试性能还是很好用的,岂但能够帮忙开发者从新加载网页,而且会打印具体的错误信息,帮助定位。
(3)如何在 web 上显示本人特定的 html 模板
from flask import Flask,render_template
app = Flask(__name__)
@app.route(‘/’)
def hello_world(): return render_template(‘test.html’) if name == ‘__main__’:
app.run()
只须要导入 render_template 库,并且在函数返回时改成对应的办法即可。
不过 这 里要 留神,test.html 必须保留在工程目录与下 template 文件下,否则会报错。(这是因为 render_template 办法定义时默认写了 template 门路)
【第二步】理解 Sqlite3 数据库
web 数据交互离不开后盾数据库的治理,本章节重点解释 python 自带的 sqlite3 数据库。相比拟于其余“正规”的数据库,如 mongo、solr、MySQL 等,sqlite3 相当简略,属于轻量级的数据库。
1、sqlite3 数据库的装置和创立
用 pip 命令能够下载安装 sqlite3 数据库
创立数据库:
con = sqlite3.connect(‘material.db’)
如果有数据库 material.db,则进行连贯数据库的操作;如果没有此数据库,则先创立数据库再进行连贯;
2、创立数据表
label = [‘ID’,’ 网络 IP’,’ 地址 ’,’ 责任人 ’,’ 联系方式 ’]
content = [‘1′,’10.10.10.10′,’ 杭州滨江 ’,’ 鹏哥 ’,’123456′]
def create():
sql = 'create table {0} ({1},{2},{3},{4},{5})'.format(tablename,label[0],label[1],label[2],label[3],label[4])
result = cur.execute(sql)
con.commit() return True if result else False
简略形容为:create table 表名 (各字段名 1,各字段名 2……)
以后对数据表的字段未进行输出类型及长度的限度,比方须要规定 ID 为必填项,并且为整形,长度在 10 个字节内,则须要批改为
sql = ‘create table matrial_table (“ID” int[10] primary key not null )’
同理,其余字段也能够雷同的形式进行类型、长度的限度。
留神:在执行 cur.execute() 后,要记得 con.commit() 进行数据库提交,否则数据并不会真正写入数据库中。
3、插入数据
def insert():
sql = 'insert into {0} ({1},{2},{3},{4},{5}) values({6},"{7}","{8}","{9}","{10}")'.format(tablename,label[0],label[1],
label[2],label[3],label[4],content[0],content[1],content[2],content[3],content[4])
result = cur.execute(sql)
con.commit() return True if result else False
简略形容为:insert into 表名 (各字段名 1,各字段名 2……) values(数值 1,数值 2……)
这 里要留神,”{7}“是有加双引号的,为什么呢?因为”{7}“对应的是网络 IP,是个字符串,因而须要加 双引号,否则会报错。
4、查问数据
def query():
sql = 'select * from {0}'.format(tablename)
result = cur.execute(sql) return list(result)
简略形容为:select XX,XX from 表名 where 字段名 1 =” 数值 1 ″
5、更新数据:update 表名 set 字段名 1 =”数值 1“where 字段名 2 =” 数值 2 ″
6、删除某条数据:delete from 表名 where 字段名 1 =” 数值 1 ″
【补充】
如果生成了 db 数据库,如何查看呢?能够下载一个 SQLite Expert,关上后就能够很直观地进行数据库查看,并且能够通过图形化按钮进行 数据表的增删改查。
【第三步】理解 html
1、Flask 框架办法编写
后面曾经讲过 Flask 如何调用 html 模板,因而咱们间接展现上图对应的 flask 框架办法的代码
coding=utf-8 # @Auther : “ 鹏哥贼优良 ” # @Date : 2019/9/23 # @Software : PyCharm from flask import Flask,render_template
import sqlite3
app = Flask(__name__)
con = sqlite3.connect(‘material.db’,check_same_thread=False)
@app.route(‘/’)
def Material_Mangement():
# 获取数据库 material_table 表的内容
cur = con.cursor()
sql = 'select * from {0}'.format("material_table")
cur.execute(sql)
content = cur.fetchall()
# 获取数据库表的表头
labels = [tuple[0] for tuple in cur.description] return render_template('test.html',content=content,labels=labels) if __name__ == '__main__':
app.run(debug=True)
动静路由、sqlite3 数据库操作、调试模式的设置,这些常识请参考之前的博客。但有 2 个知识点,我想再提下:
(1)如果在数据库连贯时,不增加 check_same_thread=False 参数,则
数据库连贯会报错:sqlite3.ProgrammingError: SQLite objects created in a thread can only be used in that same thread. The object was created in thread id XX。
这是因为 sqlite3 数据库被多线程拜访导致抵触,因而这里要留神下。
(2)获取数据库表头:labels = [tuple[0] for tuple in cur.description]
2、Html 文件(仅展现表格内容)
<!doctype html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title> 物料治理平台 </title>
</head>
<body>
<div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="panel panel-default">
<div>
<h3> 表格治理平台 </h3>
</div>
<div>
<div>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr> {% for i in labels %} <td>{{i}}</td> {% endfor %} </tr>
</thead>
<tbody> {% for i in content %} <tr> {% for j in i %} <td>{{j}}</td> {% endfor %} </tr> {% endfor %} </tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!– Optional JavaScript –>
<!– jQuery first, then Popper.js, then Bootstrap JS –>
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js” integrity=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js” integrity=”sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49″ crossorigin=”anonymous”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js” integrity=”sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy” crossorigin=”anonymous”></script>
</body>
</html>
对应的成果是这样的:
因为一开始接触 flask 时,我只调试过 html,然而基本没具体接触过 html 怎么写。因而上述这段代码是参考于大神的代码(https://blog.csdn.net/a199904…)。
相熟这段代码后,我感觉有几块内容是和我要实现的代码无关的。
(1)title 题目批改
(2)表格的长宽大小:<div class=”col-md-6 col-sm-12 col-xs-12″>。col-xs- 和 col-sm- 和 col-md-*(col-xs 示意超小屏幕,col-md- 中等屏幕,col-sm- 小屏幕)次要是用来适应不同屏幕的表格展现。因而须要自适应调整对应的数值。
(3)设置表格的 ID:<table class=”table table-striped table-bordered table-hover”,id=”test”>。这里其实不设置 id 也是能够的,然而后续我要对表格进行编辑时,加上 id 会不便我定位表格,办法是:tab = document.getElementById(“test”)
3、Html 文件(增加编辑、提交按钮)
根据上述要批改的点,我从新批改了 html 内容,新的 html 代码如下:
<!doctype html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title> 表格治理平台 </title>
</head>
<body>
<div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="panel panel-default">
<div>
<h3> 表格治理平台 </h3>
</div>
<div>
<div>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr> {% for i in labels %} <td>{{i}}</td> {% endfor %} </tr>
</thead>
<tbody> {% for i in content %} <tr> {% for j in i %} <td>{{j}}</td> {% endfor %} <td><input type="button" value="编辑"></td>
<td><input type="submit" value="提交"></td>
</tr> {% endfor %} </tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!– Optional JavaScript –>
<!– jQuery first, then Popper.js, then Bootstrap JS –>
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js” integrity=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js” integrity=”sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49″ crossorigin=”anonymous”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js” integrity=”sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy” crossorigin=”anonymous”></script>
<script> (function(){
$('input[type="button"]').on('click', function(){var $this = $(this),
edit_status = $this.attr('edit_status'),
status_value = edit_status && 1 == edit_status ? 0 : 1,
$td_arr = $this.parent().prevAll('td');
$this.val(1 == status_value ? '实现' : '编辑').attr('edit_status', status_value);
$.each($td_arr, function(){var $td = $(this); if(1 == status_value) {$td.html('<input type="text"value="'+$td.html()+'">');
} else if(0 == status_value){$td.html($td.find('input[type=text]').val());
}
});
});
})(); </script>
</body>
</html>
相比于第 2 步时的 html 文件,这次我次要增加了 2 块内容:
(1)增加编辑、提交按钮:
<td><input type=”button” value=” 编辑 ”></td> <td><input type=”submit” value=” 提交 ”></td>
将这两行代码放在表格每行最初,就会生成相应的按钮
(2)编辑性能的实现:
编辑按钮对应的 function 是基于 JQuery 写的,
当然这 段代码我也是参考另一位大神的(https://blog.csdn.net/luo2012…),因为以后我对 JQuery 齐全无所不知。
然而在相熟代码后,我依据本人对代码的了解进行了正文。
<script> (function(){<!– 定义属于是 button 的按钮在点击后,产生上面的 function 性能 –> $(‘input[type=”button”]’).on(‘click’, function(){<!– 获取以后事件,并进行以后按钮的状态,如果是编辑状态,就进行将每个单元格设置成可输出状态 –>
var $this = $(this),
edit_status = $this.attr('edit_status'),
status_value = edit_status && 1 == edit_status ? 0 : 1,
$td_arr = $this.parent().prevAll('td');
$this.val(1 == status_value ? '实现' : '编辑').attr('edit_status', status_value); <!-- 如果单元格是可编辑状态,获取每列元素的值,并在最初 html 表格上进行展现 --> $.each($td_arr, function(){var $td = $(this); if(1 == status_value) {$td.html('<input type="text"value="'+$td.html()+'">'); <!-- 如果按钮状态是实现状态,间接展现单元内的值 --> } else if(0 == status_value){$td.html($td.find('input[type=text]').val());
}
});
});
})(); </script>
仔细的同学会发现,我在点击”提交“按钮时,什么都没 产生。是的,”提交“性能,我将在下一个章节中进行介绍。
【第四步】理解 JQuery
1、提交性能的实现,对我来说,最难的是 html 对前台数据的传输。因而,我就参考着编辑性能,本人一 点点写。以下是示例代码:
(1)HTML 文件编写前台界面提交性能
<script> (function(){<!– 定义属性是 submit 的按钮在点击后,产生上面的 function 性能 –> $(‘input[type=”submit”]’).on(‘click’, function(){<!– 获取以后行的 id –>
var td = event.srcElement.parentElement; var rownum = td.parentElement.rowIndex; <!-- 获取 html 表格元素 -->
var tab = document.getElementById("test"); <!-- 将每个单元格元素进行取值,并以字典模式传给后盾 -->
var data = {"ID":tab.rows[rownum].cells[0].innerHTML, "网络 IP":tab.rows[rownum].cells[1].innerHTML, "地址":tab.rows[rownum].cells[2].innerHTML, "责任人":tab.rows[rownum].cells[3].innerHTML, "联系方式":tab.rows[rownum].cells[4].innerHTML,
};
alert("提交胜利!")
$.ajax({
type: "get",
url: "/edit",
data: data,
dataType: "json" });
});
})();
(2)后盾对提交后的数据进行读取,并写数据库
@app.route(‘/edit’, methods=[‘get’])
def edit():
label = ['ID', '网络 IP', '地址', '责任人', '联系方式']
content = [request.args.get(i) for i in label]
print(content)
sql = 'update {0} set {1}="{6}",{2}="{7}",{3}="{8}",{4}="{9}"where {5}={10}'.format('material_table',
label[1], label[2], label[3],label[4],label[0],content[1],content[2],content[3],content[4],content[0])
cur = con.cursor()
cur.execute(sql)
con.commit() return "数据写入胜利!"
在实现“提交”性能时,我次要遇到了以下几个 坑:
(1)html 代码写完后,发现程序报错,提醒 $.ajax is not a function。我去,我看其余大神的数据交互也是这么写的呀,为什么我这不行?
查看网上的帖子,都是说未定义或者和其余库有抵触,最初我本人发现,是因为我没有申明是 JQuery。须要在 script 后面加上一行代码:
<script src=”http://libs.baidu.com/jquery/1.9.1/jquery.min.js”></script>
我了解这行代码的意思是申明上面要 JQuery 库,而不是其余 JS 库。(可能了解有误)
最初加上这行代码后,问题胜利解决!
(2)获取以后行号
一开始在获取行号,怎么获取不到,而且不晓得要怎么调试,在共事的领导下,才学会通过 alert(td.innerHTML) 来查看获取的以后行内容是什么。
最后从网上 查到获取以后行的写法是:
var td = event.parentElement; var rownum = td.parentElement.rowIndex;
通过 alert 调试,发现点击提交基本没有反馈;又改成
var td = event.srcElement; var rownum = td.parentElement.rowIndex;
后果是获取不到任何内容
就这么个小问题就破费了我近 2 个小时的工夫去不停地查资料,尝试编写。最初想说的是,如果对 html 不相熟,还是应该找个大神带带本人的。
最初在他人的帮助下,实现了获取以后行的性能:
(3)获取每个表格里的 内容
tab.rows[0].cells[0].innerHTML
在获取单元格内数据时,最验证的是我获取不到 tab,即表格元素。因为我原先没有在表格元素里加 id,即
网上找了很多办法都没法实现,最初老老实实地加上 id=”test”
讲道理,html 里的这 20 行代码是我搞这个表格治理平台时,破费最大精力的。至此,表格治理平台的性能根本成行!
【第五步】增加新增性能
以上性能只实现了对现有数据的编辑保留性能,然而如果用户想要新增数据,怎么办?我过后第一个想法是让用户本人去改数据库,哈哈。还要我去写新增性能,要累死了,不想写。
上面是对于新增性能的介绍和示例代码。
1、如何增加“新增”按钮
<td><input type=”button” value=” 新增 ” id=”create”></td>
如果后面 的 html 能看懂了,这行是不难理解的。
2、点击新增按钮后,如何动静减少表格行、列
<script> (function () {
$('input[id="create"]').on('click', function(){var editTable=document.getElementById("tbody"); var tr=document.createElement("tr"); var td1=document.createElement("td");
td1.innerHTML="";
tr.appendChild(td1);
editTable.appendChild(tr);
首先定义 tr 元素,而后在 tr 元素中再追加 td 元素。如果表格里有多列数据,那只须要反复 td1 的写法,进行复制粘贴就能够了。
另外,以后 td.innerTHML 是设置为空,如果要将该单元格间接设置为编辑状态,则批改成 :
td1.innerHTML=”input[type=text] /”;
3、如何动静增加“编辑”、“提交”按钮,上面以“编辑”为例
var td9 = document.createElement(“td”) var myedit =document.createElement(“input”);
myedit.type = “button”;
myedit.value = “ 编辑 ” myedit.id = “edit” td9.appendChild(myedit)
增加形式和增加文本框形式是一样的,只是须要留神元素类型是 Input,并且要补充下元素的 type/value/id。
4、如何对动静增加的按钮进行事件绑定,上面以提交性能为例
$(‘input[id=”submit”]’).on(‘click’, function(){
alert("test")
}
对于动静增加的按钮进行事件绑定有很多帖子,有用 Live 办法的,有用 $(document).on(‘click’,’.edit’,function() 办法的,其实不必这么麻烦,和失常的“提交”写法是齐全一样的。
5、获取以后新增行内的数据,进行提交。
var tab = document.getElementById(“test”); var rownum = td1.parentElement.rowIndex;
$('input[id="submit"]').on('click', function(){var data = { "ID":tab.rows[rownum].cells[0].innerHTML,
};
alert("新增胜利!")
$.ajax({
type: "get",
url: "/create",
data: data,
dataType: "json" });
});
这段代码和提交性能的实现是一样的,大同小异。
本文分享自华为云社区《【Python 成长之路】从 零做网站开发 — 基于 Flask 和 JQuery,实现表格治理平台》,原文作者:鹏哥贼优良。
点击关注,第一工夫理解华为云陈腐技术~