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

【面試準備】又一次失敗的面試經歷，題目離譜～資深軟件測試工程師

dotnet 8 版本與銀河麒麟V10和UOS系統的 glibc 兼容性

【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以太網驅動總結