歡迎關注【無量測試之道】公眾號，回覆【領取資源】,
Python程式設計學習資源乾貨、
Python+Appium框架APP的UI自動化、
Python+Selenium框架Web的UI自動化、
Python+Unittest框架API自動化、

資源和程式碼 免費送啦~
文章下方有公眾號二維碼，可直接微信掃一掃關注即可。

今天開始我們講講Flask Web實踐專案開發中的新增功能是如何實現的。

Step1：html 部分

1  
2 <div class="row" align="right">
3         主要內容：<input type='text' id='contents' 
 
name='contents'>
4         <button class="btn btn-warning" id="select">查詢</button>
5         <button class="btn btn-primary" id="adds">新增</button>
6         <button class="btn btn-danger" id="delete">刪除</button>
7     </div>

Step2：javascript部分

 1  
 2 $(function
 
 (){
 3             $('#adds').click(function () {
 4                 $('#pageid').hide();//隱藏分頁標籤
 5                 $('#mainbody').html(table1);
 6                 $( "#add" ).click(function() {
 7                     var pms_name=$('#pms_name').val();
 8                     var content = $('#content').val();
 
 9                     var status = $('#status').val();
10                     var mark = $('#mark').val();
11                     // document.getElementById("apiadd").disabled = false;
12                     $("#add").attr('disabled',true);
13                     // alert(demands)
14                     data={data: JSON.stringify({"pms_name":pms_name, "content":content, "status":status, "mark":mark})};
15                     // alert(data);
16                     $.ajax({
17                         type: "post",
18                         dataType : 'json',
19                         async: false,
20                         url: "/adds",
21                         data: data,
22                         success: function(){
23                             alert("新增成功！！！");
24                             location.href="info.html";
25                         },
26                         error: function (){
27                             alert("新增失敗！！！");
28                         }
29                     })
30                 });
31             })
32 })

Step3：Python+Flask 部分

 1  
 2 @app.route('/adds',methods=['post'])
 3 def addApi():
 4     datas = json.loads(request.form.get('data'))
 5     print(datas)
 6     createtime = time.strftime("%Y-%m-%d %H:%M:%S", time.localtime())
 7     sql = "insert into flask_info (pms_name,content,status,mark,create_time) VALUES "
 8     data = "('" + datas['pms_name'] + "','" + datas["content"] + "','" + datas["status"] + "','" + datas["mark"] + "','" + str(createtime) + "'"
 9     end = data + ")"
10     sql = sql + end
11     execute_sql(sql)
12     return "200"

Step4: db部分

1 def execute_sql(sql1):
2     db = sqlite3.connect('test_flask.db')
3     cur = db.cursor()
4     print(sql1)
5     cur.execute(sql1)
6     cur.close()
7     db.commit()
8     db.close()

最後新增頁面與提交後的頁面如下圖所示：

總結：這篇文章主要就是點選“新增”按鈕後，渲染一個新增的頁面，然後在頁面上填寫相關的資訊再提交，後端就會接收到請求，將相關資訊組織成一個insert 語句提交給資料庫，這樣就完成了新增的功能。

備註：我的個人公眾號已正式開通，致力於測試技術的分享，包含：大資料測試、功能測試，測試開發，API介面自動化、測試運維、UI自動化測試等，微信搜尋公眾號：“無量測試之道”，或掃描下方二維碼：

新增關注，讓我們一起共同成長！