Python測試開發-創建模態框及保存數據
- 2019 年 10 月 6 日
- 筆記
什麼是模態框？
模態框是指的在覆蓋在父窗體上的子窗體。可用來做交互，我們經常會看到模態框用來登錄、確定等等，到底是怎麼實現這種彈出效果，bootstrap已經為我們提供了相應的組件。
1、介面原型
點擊添加，彈出模態框，
然後輸入 用戶：tester， 消息：你好。如下圖1所示：
▲圖1
再點擊保存，那麼資料庫就存入了以上輸入的數據，查看介面的用戶列表會顯示tester，如下圖2所示：
▲圖2
2、開發過程
接下來根據以上實例，一步一步教你編寫程式碼。
首先搭建好Python環境–python3，django2，mysql，pycharm，等。
一 python數據模型 models.py，用於創建資料庫表存儲數據
clasTest(models.Model): name = models.CharField('名稱', max_length=200) message = models.CharField('消息', max_length=200) def __str__(self): return self.name
二 python邏輯處理視圖 view.py，test函數用於顯示用戶列表，savedata函數用於模態框點擊保存時觸發保存數據。
def test(request): users = Test.objects.all() return render(request, 'test.html',{"users":users}) def savedata(request): if request.method == "POST": name = request.POST.get('name', '') message = request.POST.get('message', '') test_info = Test(name=name, message=message) test_info.save() return HttpResponse('save success!')
三 python鏈接 url.py，用於函數和頁面的關聯
path('test/',app_uitest_views.test), path('savedata/', app_uitest_views.savedata),
四 前端模板頁面 test.html，用於前端展示用戶列表及js觸發模態框然後數據保存
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible"content="IE=edge"> <meta name="viewport"content="width=device-width, initial-scale=1"> <title>Bootstrap Modal</title> <link rel="stylesheet"href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> </head> <body> <div class="panel panel-default"> <div class="panel-heading">用戶列表</div> <div class="panel-body"> <button type="button"class="list-group-item" data-toggle="modal" data-target="#exampleModal" > 添加</button> <div class="list-group"role="group" aria-label="用戶列表"> {% for user in users %} <button type="button" class="list-group-item"data-toggle="modal" data-target="#exampleModal">{{ user.name }}</button> {% endfor %} </div> </div> </div>
<div class="modal fade" id="exampleModal" tabindex="-1"role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog"role="document" style="width: 680px;"> <div class="modal-content">
<div class="modal-body"> <div style="height:300px;overflow:auto;"> <br><br><br><br> <p style="align:center"> 用戶: <input style="align:center" type="text" name="name"id="name" required="required"/></p> <br> <p style="align:center"> 消息: <input style="align:center" type="text" name="message"id="message" required="required"/></p> <br> </div> </div> <div class="modal-footer"> <button type="button"class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button"class="btn btn-primary" data-dismiss="modal" href="javascript:void(0)" onclick="savedata()">保存</button> </div> </div> </div> </div> <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script type="text/javascript"> function savedata() { var name = $('#name').val(); var message =$('#message').val(); $.ajax({ url:"/savedata/", data:"name=" +name + "&message=" + message, headers:{'X-CSRFToken':'{{ csrf_token }}'}, //csrf contentType:'application/x-www-form-urlencoded; charset=utf-8', type: "POST", success: function(result) { // console.log(); }, fail: function (result) { debugger } }); } </script> </body> </html>
前端關鍵程式碼概覽如下
（注意紅色標示的程式碼，代表了按鈕，欄位，模態框id，函數之間的關聯）
1 創建模態框:
<button type="button"class="list-group-item" data-toggle="modal"data-target="#exampleModal" > 添加</button>
2 模態框內容:
<div class="modal fade" id="exampleModal" tabindex="-1"role="dialog" aria-labelledby="exampleModalLabel">
用戶: <inputstyle="align:center" type="text" name="name" id="name" required="required"/></p>
消息: <input style="align:center"type="text" name="message" id="message"required="required"/></p>
<button type="button"class="btn btn-default" data-dismiss="modal">關閉</button>
<button type="button"class="btn btn-primary" data-dismiss="modal"href="javascript:void(0)" onclick="savedata()">保存</button>
3 Js及js函數：
<link rel="stylesheet"href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<scriptsrc="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<scriptsrc="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
function savedata()
{
var name = $('#name').val();
var message = $('#message').val();
$.ajax({
url: "/savedata/",
data:"name="+ name + "&message=" + message,
headers:{'X-CSRFToken': '{{csrf_token }}'}, //csrf
contentType:'application/x-www-form-urlencoded; charset=utf-8',
type: "POST",
success: function (result) {
// console.log();
},
fail: function (result) {
debugger
}
});
}
3、完。
