Flask架构和JQuery完成管理系统网站的开发功能

无需加好友免费技术支持

?引言：本文为您提供基本Flask架构和JQuery完成管理系统网站的开发功能。

写在前面

你要搭建网站吗？ 嗯。。

会Flask吗？ 真不知道哪些。

会JQuery吗？ 是python的库吗 ？

你会怎么样？ 我能F12打开网页

行吧，使我们写一个简单的表格管理系统。

根据Flask架构和JQuery要实现管理系统网站的开发功能，我花了两天时间撰写代码 ，从零开始创作；我时断时续地梳理总结和反思了近大半个月具体的完成全过程。就个人感觉来讲，你对全部过程结果的完成十分满意。

1、掌握python 热门的web框架

（1）Django：简单的说就是重型武器，是很全能开发框架，有自己想要的全部功能；可是重一点，合适公司级web开发；

（2）Flask：归属于web微框架开发精巧灵便，有关第三方库丰富多彩，合适较小规模开发设计web；

（3）Tornado：当然多线程，特性强，但架构所提供的功能少，须要开发人员自身完成；

因而，文中代码的建立通常是根据Flask达到的。

2、掌握Flask架构

（1）HelloWorld完成：

绝大多数的程序编写都是围绕hello world完成，因此大概来说helloworld涉及到的具体内容。

先申明一个Flask目标架构，随后界定路由器‘/’，即URL如果把途径界定为‘//new此外，需要把对应的访问地址改成此外，@app.route是装饰设计。

(2)如何做到实际IP访问地址或端口号？

根据对app.run()方式的主要参数界定各自完成了调节功能和浏览URL调整为

这儿的调节功能依然非常好，不但可以协助开发人员重新加载网页页面，还能够打印出详尽的错误报告，协助精准定位。

（3）怎样在web表明你的特殊html模板

只需导入render_template库，并且在函数公式回到时改成对应的方式。

但这需要注意，test.html务必储存在项目文件目录下template不然会到文档下出错。(主要是因为render_template默认设置书写界定template路径 ）

web数据互动离不了后台管理数据库的监管。此章的核心是解释python内置的sqlite3数据库。与其它宣布数据库对比，如mongo、solr、MySQL等，sqlite3非常简易，归属于轻量数据库。

1、sqlite安装和建立3个数据库

用pip可安装下载指令sqlite3数据库

建立数据库：

如有数据库material.db，联接数据库操作；要是没有这一数据库，在联接以前建立数据库；

2.建立数据分析表

简易叙述如下所示：create table 表名 (每一个字段1，每一个字段2……)

现阶段，数据分析表的字段名不受限制键入种类和长短，比如必须标准ID必须调整为必填项和整形美容，尺寸在10字节数内

sql = "create tablematrial_table ("ID" int[10] primary key not null )"

一样，别的字段能以相同的方法限定种类和长短。

注：在实施中cur.execute()以后，记牢con.commit()提交数据库，不然数据信息不容易真真正正载入数据库。

3、插入数据

简易叙述如下所示：insert into 表名 (每一个字段1，每一个字段2……) values(值1，值2……)

这 {7} 备至引号，为啥？是因为{7}相匹配互联网IP，是字符串数组，必须加 引号，不然会出错。

4、查询数据

简易叙述如下所示：select XX,XX from 表名 where 字段1="标值1"

5.更新数据:update 表名 set 字段1=”标值1“ where 字段2="标值2"

6.删除数据:delete from 表名 where 字段1="标值1"

【填补】

假如形成了db怎么查看数据库？你可以下载一个SQLiteExpert，打开，能够直接地查询数据库，并且通过图型按键开展 增删数据分析表。

1、Flask撰写架构方式

前边曾经说过 Flask怎样启用html因而，大家立即表明图中相对应的模版flask代码框架法

动态路由、sqlite设定数据库和操作开发者模式，请见以前的博主。但有2个知识要点，我觉得再提一遍:

(1)假如不添加数据库联接check_same_thread=False参数，则

数据库联接会出错：sqlite3.ProgrammingError: SQLite objects created in a thread canonly be used in that same thread. The object was created in thread id XX。

主要是因为sqlite线程同步浏览造成数据库矛盾，这儿需要注意。

(2)获得数据库表头:labels =[tuple[0] for tuple in cur.description]

2、Html文件(仅表明表格具体内容)

对应的实际效果如下所示：

由于第一次接触flask我只调节过html，但没实际接触。html怎样写好文章。因而，以上代码就是指高手的代码（

了解这一代码后，我觉得几个具体内容和我要实现的代码相关。

（1）title 文章标题改动

(2)表格的尺寸和总宽: 。 col-xs-*和col-sm-* 和col-md-*（col-xs表示超屏幕，col-md-中等水平显示屏，col-sm-屏幕)主要运用于融入不一样显示器的表格表明。因而，要调整对应的值。

(3)设定表格ID：。实际上不能没有设置id还可以，可是后面我觉得编写表格时，加上id方法是什么：tab =document.getElementById("test")

3、Html文件(添加编写和提交按键)

依据上述要改动的点，我重新改动了html具体内容，新的html代码如下所示：

相较于第 2步时的html这一次我关键添加了2个文档:

(1)添加编写和提交按键:

把这二行代码放到表格最后的，形成对应的按键

(2)完成编写功能:

编辑按钮相匹配function是根据JQuery自然，这也是所写的 我就借鉴了另一个高手的段代码。

（

而且现在我是对的JQuery一无所知。

但了解代码后，我根据自身对代码的认知展开了注解。

细心地老同学聚会发觉，在我点一下提交按键时，啥都没有 产生。的，提交功能，我将于下一章详细介绍。

对我而言，完成提交功能最难的是html传输前台接待数据信息。因此我参照编写功能，自己一个 一点写。以下属于实例代码:

（1）HTML文件撰写前台接待页面提交功能

(2)后台管理载入提交的信息，写数据库

在推进提交功能时，我主要碰到以下几个方面 坑：

（1）html撰写代码后，发觉程序错误，提醒$.ajax isnot a function。我，我看见别的高手的数据交换都是这样写的。为什么我不能？

查询在网上的文章，都觉得并没有界定或者跟别的库产生冲突。最终，自己看到了，因为我没有申明JQuery。必须在script前边加一行代码：

我能理解这一代码的意思解释下边的申明JQuery库，而非其他JS库(很有可能理解错误)

最终，添加此代码后，难题取得成功处理！

(2)获得现阶段号码

一开始，我懂得了在同事的帮助下了解怎么调试。在同事的帮助下，我懂得了根据alert(td.innerHTML)查询所获得的现阶段行具体内容。

最开始通过网上 寻找现阶段行书写是：

根据alert调节发觉点一下提交并没有反映；改成

结果显示无法得到一切具体内容

就那么小的难题，我花了接近两小时不断地搜集资料，尝试写。最终想说的是，假如是对得话html不了解，或是要找个高手带自身。

最终，在别人的支持下，得到现阶段的功能：

(3)获得每一个表格里面的内容

在获得表格中内数据信息时，最检验的就是我难以获得tab，换句话说，表格原素。因为我没有在表格原素中添加。id，换句话说，在网上搜到许多方法是什么难以实现的。最终，踏踏实实上 id="test"

讲理，html里的那 20行代码是我在这个表格管理系统上投入的较大时间精力。到现在为止，表格管理系统的功能基本已经变成一行 ！

之上功能只完成了编写和储存目前数据库的功能，那如果客户想添加新数据呢？我的第一个想法是让消费者自身变更数据库，嘿嘿。我很想写一个新的功能，累了，不想写。

以下属于新功能的讲解和实例代码。

1.怎样添加新按键？

假如前边 的html可以理解，这方面并不难理解。

2.点一下新按键后，怎样动态性添加表格列和行

最先界定tr原素，随后在tr再添加元素td原素。若表格中多么列数据，则仅需反复td书写，拷贝就可以。

此外，现阶段td.innerTHML假如要把表格中立即设为编辑状态，则调整为：

td1.innerHTML="input[type=text]/";

3.怎样动态性添加编写和提交按键

添加方法和添加输入框同样，但应注意元素类型Input，填补原素type/value/id。

4.如何绑定动态性添加的按键？以下属于提交功能为例子

有一些关于动态性添加按键绑定事件的文章，这是有效的Live有用的方法$(document).on("click",".edit",function()方式，真的没必要这么麻烦，和正常提交书写完全一样。

5.获得现阶段新增加行数据信息并提交。

这一代码的完成与提交功能同样。

创作者： 鹏哥贼出色

文中共享自华为云服务小区《【Python成长历程从 零网站建设 -- 根据Flask和JQuery，创作者： 技术性火炬手。