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

 fin  测试开发社区  今天

什么是模态框?

     模态框是指的在覆盖在父窗体上的子窗体。可用来做交互,我们经常会看到模态框用来登录、确定等等,到底是怎么实现这种弹出效果呢,bootstrap已经为我们提供了相应的组件。


实例操作效果:

1 点击添加按钮,弹出模态框,输入tester 你好

4444.png

2 点击保存,查看到用户列表

5555.png

接下来根据以上实例,一步一步教你编写代码。


首先搭建好Python环境--python3,django2,mysql,pycharm,等。


 一 python数据模型 models.py

class Test(models.Model):

    name = models.CharField(
'名称', max_length=200)

    message = models.CharField(
'消息', max_length=200)

   
def __str__(self):

       
return self.name

 

 

二 python逻辑处理视图 view.py

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

<!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:centertype="text" name="name"id="name" required="required"/></p>
            <br>
            <p 
style="align:center">
                
消息: <input style="align:centertype="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>

 

 

前端代码说明:

1 创建模态框:

<button type="button"class="list-group-item" data-toggle="modal"data-target="#exampleModal" > 添加</button>

2 模态框内容:

用户: <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

                }

           });

       }

 

完。