时间：2023-05-30 20:06:02 | 来源：网站运营
时间：2023-05-30 20:06:02 来源：网站运营
从零做网站开发：基于Flask和JQuery，实现表格管理平台：摘要：本文将为大家带来基于Flask框架和JQuery实现管理平台网站的开发功能。
在线咨询
from flask import Flaskapp = 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是个装饰器。app.run(debug=True,host="x.x.x.x",port="1234")通过对app.run()方法的参数定义，分别实现了调试功能，访问URL变更为 http://x.x.x.x:1234from flask import Flask,render_templateapp = Flask(__name__)@app.route('/')def hello_world(): return render_template('test.html')if __name__ == '__main__': app.run()只需要导入render_template库，并且在函数返回时改成对应的方法即可。con = sqlite3.connect('material.db')如果有数据库material.db，则进行连接数据库的操作；如果没有此数据库，则先创建数据库再进行连接；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……) sql = 'create table matrial_table ("ID" int[10] primary key not null )'同理，其他字段也可以相同的方式进行类型、长度的限制。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……)def query(): sql = 'select * from {0}'.format(tablename) result = cur.execute(sql) return list(result)简单描述为：select XX,XX from 表名 where 字段名1="数值1"# coding=utf-8# @Auther : "鹏哥贼优秀"# @Date : 2019/9/23# @Software : PyCharmfrom flask import Flask,render_templateimport sqlite3app = 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个知识点，我想再提下：<!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>对应的效果是这样的：<!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块内容：<td><input type="button" value="编辑"></td> <td><input type="submit" value="提交"></td>将这两行代码放在表格每行最后，就会生成相应的按钮<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>细心的同学会发现，我在点击”提交“按钮时，什么都没 发生。是的，”提交“功能，我将在下一个章节中进行介绍。<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 "数据写入成功！"在实现“提交”功能时，我主要遇到了以下几个 坑：<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>我理解这行代码的意思是声明下面要JQuery库，而不是其他JS库。（可能理解有误）var td = event.parentElement;var rownum = td.parentElement.rowIndex;通过alert调试，发现点击提交根本没有反应；又改成var td = event.srcElement;var rownum = td.parentElement.rowIndex;结果是获取不到任何内容tab.rows[0].cells[0].innerHTML在获取单元格内数据时，最验证的是我获取不到tab，即表格元素。因为我原先没有在表格元素里加id，即<td><input type="button" value="新增" id="create"></td><br>如果前面 的html能看懂了，这行是不难理解的。<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的写法，进行复制粘贴就可以了。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。$('input[id="submit"]').on('click', function(){ alert("test")}关于动态添加的按钮进行事件绑定有很多帖子，有用Live方法的，有用$(document).on('click','.edit',function()方法的，其实不用这么麻烦，和正常的“提交”写法是完全一样的。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，实现表格管理平台》，原文作者： 鹏哥贼优秀 。
关键词：实现,表格,平台,管理
