共计 11791 个字符，预计需要花费 30 分钟才能阅读完成。
摘要： 本文将为大家带来基于 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，实现表格治理平台》，原文作者：鹏哥贼优良。
点击关注，第一工夫理解华为云陈腐技术~
