Python测试开发-创建模态框及保存数据

Posted 2022-06-26 finer

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Python测试开发-创建模态框及保存数据相关的知识，希望对你有一定的参考价值。

Python测试开发-创建模态框及保存数据

原创： fin 测试开发社区前天

什么是模态框？

模态框是指的在覆盖在父窗体上的子窗体。可用来做交互，我们经常会看到模态框用来登录、确定等等，到底是怎么实现这种弹出效果，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-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>