【Python成长之路】基于Flask框架开发web -- 了解html，并实现简单的表格管理平台（3）

【功能】

这里主要讲讲我当前对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 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://blog.csdn.net/a19990412/article/details/84955802）。

熟悉这段代码后，我觉得有几块内容是和我要实现的代码有关的。

（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 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://blog.csdn.net/luo201227/article/details/50559988），因为当前我对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>

细心的同学会发现，我在点击”提交“按钮时，什么都没发生。是的，”提交“功能，我将在下一篇文章中进行介绍。

【Python成长之路】基于Flask框架开发web -- 了解html，并实现简单的表格管理平台（3）

Spring Cloud 部署时如何使用 Kubernetes 作为注册中心和配置中心

KubeKey 部署 K8s v1.28.8 实战

【Python成長之路】基於Flask框架開發web -- 實現”新增 “功能，並實現簡單的表格管理平臺（5）

【Python成長之路】基於Flask框架開發web -- 瞭解jquery，並實現簡單的表格管理平臺（4）

【Python成長之路】基於Flask框架開發web -- 瞭解Sqlite3數據庫，並實現簡單的表格管理平臺（2）

【Python成長之路】基於Flask框架開發web -- 瞭解Flask框架，並實現簡單的表格管理平臺（1）

【Python成長之路】極簡代碼 -- 第K個排列

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結