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

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

什么是模态框？

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

1、界面原型

    点击添加，弹出模态框，

    然后输入 用户：tester， 消息：你好。如下图1所示：

图片发自App

图1

    再点击保存，那么数据库就存入了以上输入的数据，查看界面的用户列表会显示tester，如下图2所示：

图片发自App

图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触发模态框然后数据保存

用户列表

  添加

 

      {% for user in users %}

          {{ user.name }}

      {% endfor %}

 

 

 

       

         

           

                用户:

           

           

                消息:

           

       

 

 

    关闭

    保存

 

 

 

前端关键代码概览如下

（注意红色标示的代码，代表了按钮，字段，模态框id，函数之间的关联）

1 创建模态框:

添加

2 模态框内容:

用户:

消息:

关闭

保存

3 Js及js函数：

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

                }

          });

      }