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 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、完。

Python测试开发-创建模态框及保存数据的更多相关文章

  1. python测试开发django-197.django-celery-beat 定时任务

    前言 django-celery-beat 可以支持定时任务,把定时任务写到数据库. 接着前面这篇写python测试开发django-196.python3.8+django2+celery5.2.7 ...

  2. python测试开发django-15.查询结果转json(serializers)

    前言 django查询数据库返回的是可迭代的queryset序列,如果不太习惯这种数据的话,可以用serializers方法转成json数据,更直观 返回json数据,需要用到JsonResponse ...

  3. python测试开发django-41.crispy-forms设计标签式导航菜单（TabHolder）

    前言 xadmin的详情页面主要是用form_layout布局,学会了完全可以不用写html代码,也能做出很好看的页面. xadmin的html页面是用的Bootstrap3框架设计的,layout布 ...

  4. python测试开发django-36.一对一(OneToOneField)关系查询

    前言 前面一篇在xadmin后台一个页面显示2个关联表(OneToOneField)的字段,使用inlines内联显示.本篇继续学习一对一(OneToOneField)关系的查询. 上一篇list_d ...

  5. python测试开发django-16.JsonResponse返回中文编码问题

    前言 django查询到的结果,用JsonResponse返回在页面上显示类似于\u4e2d\u6587 ,注意这个不叫乱码,这个是unicode编码,python3默认返回的编码 遇到问题 接着前面 ...

  6. 【python测试开发栈】python基础语法大盘点

    周边很多同学在用python,但是偶尔会发现有人对python的基础语法还不是特别了解,所以帮大家梳理了python的基础语法(文中的介绍以python3为例).如果你已然是python大牛,可以跳过 ...

  7. 2019第一期《python测试开发》课程，10月13号开学

    2019第一期<python测试开发>课程,10月13号开学! 主讲老师:上海-悠悠 上课方式:QQ群视频在线教学,方便交流 本期上课时间:10月13号-12月8号,每周六.周日晚上20: ...

  8. python测试开发django-rest-framework-63.基于函数的视图(@api_view())

    前言 上一篇讲了基于类的视图,在REST framework中,你也可以使用常规的基于函数的视图.它提供了一组简单的装饰器,用来包装你的视图函数, 以确保视图函数会收到Request(而不是Djang ...

  9. Python测试开发必知必会-PEP

    互联网发展了许多年,不仅颠覆了很多行业,还让很多职位有了更多的用武之地.产品发布迭代速度不断加快,让测试开发这个岗位简直火得不要不要的. Python语言,作为一种更接近人来自然语言的开发语言,以简洁 ...

随机推荐

  1. mysql 不停机 短时间锁表 备份 主备同步 新增备份机器

    刷新数据   [root@localhost ~]# mysql -e 'flush tables with read lock;' 锁表刷新表数据   [root@localhost ~]# mys ...

  2. python全局灰度线性变换——自由设定图像灰度范围

    全局线性变换的公式是s = (r-a)*(d-c)/(b-a)+c,其中a.b是原图片的灰度最小值和最大值,c.d是变换后的灰度值的最小值和最大值.r是当前像素点的灰度值,s是当前像素点变换后的灰度值 ...

  3. 主流消息队列rocketMq,rabbitMq比对使用

    首先整理这个文章是因为我正好有机会实战了一下rocketmq,阿里巴巴的一个开源消息中间件.所以就与以往中rabbitmq进行小小的比较一下.这里主线的根据常见面试问题进行整理. 一.消息队列常用的场 ...

  4. Django框架的安装与使用

    Django框架的安装与使用 在使用Django框架开发web应用程序时,开发阶段同样依赖wsgiref模块来实现Server的功能,我们使用Django框架是为了快速地开发application, ...

  5. 14. docker 网络 docker bridge0 详解

    1.创建一个 container docker run -d --name test1 busybox /bin/sh -c "while true; do sleep 3600; done ...

  6. 2.docker machine 创建 包含 docker 的 linux 虚拟机

    1. 启动 从https://github.com/boot2docker/boot2docker/releases下载iso到~/.docker/machine/cache/里 docker-mac ...

  7. uniapp结合小程序第三方插件“WechatSI”实现语音识别功能，进而实现终端控制

    最近在用soket实现终端控制器的功能,然后就想用语音控制,这样显得更AI WechatSI在manifest.json中配置: 在vue中插入如下展示代码: <view class=" ...

  8. 工作记录mysql主从复制

    环境ubuntu 16.04 主配置 1.编辑主MySQL配置文件vim /etc/mysql/mysql.conf.d/mysqld.cnf 更改server-id,它位于[mysqld]段.这个数 ...

  9. 绝对定位( Absolute positioning )

    绝对定位( Absolute positioning ) 之前在介绍定位体系的时候,已经简单的介绍了绝对定位和固定定位.一般情况下,这两种定位的元素, 在 3D 的可视化模型中,处于浮动元素的上方,或 ...

  10. 【学习笔记】 2-SAT问题

    Algorithm Description \(2-SAT\)问题就是给定一串布尔变量,每个变量只能为真或假. 要求对这些变量进行赋值,满足布尔方程. 会有一些形如 \(x_1||x_2\) 或者 \ ...