Python测试开发-创建模态框及保存数据
什么是模态框？
模态框是指的在覆盖在父窗体上的子窗体。可用来做交互，我们经常会看到模态框用来登录、确定等等，到底是怎么实现这种弹出效果，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、完。