关于flask:从零做网站开发基于Flask和JQuery实现表格管理平台

摘要：本文将为大家带来基于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>


<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>

  $('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）增加编辑、提交按钮：

将这两行代码放在表格每行最初，就会生成相应的按钮

（2）编辑性能的实现：

编辑按钮对应的function是基于JQuery写的，

当然这段代码我也是参考另一位大神的（https://blog.csdn.net/luo2012...），因为以后我对JQuery齐全无所不知。

然而在相熟代码后，我依据本人对代码的了解进行了正文。

    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文件编写前台界面提交性能

            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后面加上一行代码：

我了解这行代码的意思是申明上面要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、如何增加“新增”按钮

如果后面的html能看懂了，这行是不难理解的。

2、点击新增按钮后，如何动静减少表格行、列

    $('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，实现表格治理平台》，原文作者：鹏哥贼优良。

点击关注，第一工夫理解华为云陈腐技术~