【Python成长之路】基于Flask框架开发web -- 了解html，并实现简单的表格管理平台（3）
2019-09-27 20:21
1281 查看
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuzipeng/article/details/101558690
【功能】
这里主要讲讲我当前对html的理解
【效果】
【知识点】
1、Flask框架方法编写
前面已经讲过 Flask如何调用html模板，因此我们直接展示上图对应的flask框架方法的代码
[code]# 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文件（仅展示表格内容）
[code]<!doctype html>
<html lang="en">
<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 class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3>表格管理平台</h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<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://www.geek-share.com/detail/2755513283.html）。
熟悉这段代码后，我觉得有几块内容是和我要实现的代码有关的。
（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代码如下：
[code]&
3ff7
lt;!doctype html>
<html lang="en">
<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 class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3>表格管理平台</h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<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://www.geek-share.com/detail/2664428961.html），因为当前我对JQuery完全一无所知。
但是在熟悉代码后，我根据自己对代码的理解进行了注释。
[code]<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>
细心的同学会发现，我在点击”提交“按钮时，什么都没 发生。是的，”提交“功能，我将在下一篇文章中进行介绍。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 基于Flask框架的Python web程序的开发实战 <二> 项目组织结构
- Flask 详细介绍 Flask 是一个微型的 Python 开发的 Web 框架，基于Werkzeug WSGI工具箱和Jinja2 模板引擎。 Flask使用BSD授权。 Flask也被称为“mi
- 基于Flask框架的Python web程序的开发实战 <一> 环境搭建
- webpy，希望能多了解一些关于WSGI，PYTHON的WEB开发框架的事，也希望能进一步了解PYTHON
- 基于配置实现信息管理系统开发基础框架
- （转）基于MVC4+EasyUI的Web开发框架经验总结（7）--实现省份、城市、行政区三者联动
- cWeb开发框架，基于asp.net的cWeb应用开发平台介绍（二）
- 基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
- 基于Metronic的Bootstrap开发框架经验总结（9）--实现Web页面内容的打印预览和保存操作
- express（基于 Node.js 平台，快速、开放、极简的 web 开发框架）
- 基于MVC4+EasyUI的Web开发框架经验总结（13）--DataGrid控件实现自动适应宽带高度
- Python的Flask框架中实现简单的登录功能的教程
- Python的Flask开发框架简单上手笔记
- 基于.Net(C#开发)平台的三层框架架构软件的设计与实现
- 1.1XAF框架开发视频教程-简单的订单管理实现过程,视频,提纲,及教程源码
- 新手开发基于Django框架的python web(二)
- Express 基于 Node.js 平台，快速、开放、极简的 web 开发框架。
- 1.1XAF框架开发视频教程-简单的订单管理实现过程,视频,提纲,及教程源码
- 基于MVC4+EasyUI的Web开发框架经验总结（9）--在Datagrid里面实现外键字段的转义操作
- Python基于twisted实现简单的web服务器