Python测试开发-创建模态框及保存数据
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、完。
Python测试开发-创建模态框及保存数据的更多相关文章
- python测试开发django-197.django-celery-beat 定时任务
前言 django-celery-beat 可以支持定时任务,把定时任务写到数据库. 接着前面这篇写python测试开发django-196.python3.8+django2+celery5.2.7 ...
- python测试开发django-15.查询结果转json(serializers)
前言 django查询数据库返回的是可迭代的queryset序列,如果不太习惯这种数据的话,可以用serializers方法转成json数据,更直观 返回json数据,需要用到JsonResponse ...
- python测试开发django-41.crispy-forms设计标签式导航菜单（TabHolder）
前言 xadmin的详情页面主要是用form_layout布局,学会了完全可以不用写html代码,也能做出很好看的页面. xadmin的html页面是用的Bootstrap3框架设计的,layout布 ...
- python测试开发django-36.一对一(OneToOneField)关系查询
前言 前面一篇在xadmin后台一个页面显示2个关联表(OneToOneField)的字段,使用inlines内联显示.本篇继续学习一对一(OneToOneField)关系的查询. 上一篇list_d ...
- python测试开发django-16.JsonResponse返回中文编码问题
前言 django查询到的结果,用JsonResponse返回在页面上显示类似于\u4e2d\u6587 ,注意这个不叫乱码,这个是unicode编码,python3默认返回的编码 遇到问题 接着前面 ...
- 【python测试开发栈】python基础语法大盘点
周边很多同学在用python,但是偶尔会发现有人对python的基础语法还不是特别了解,所以帮大家梳理了python的基础语法(文中的介绍以python3为例).如果你已然是python大牛,可以跳过 ...
- 2019第一期《python测试开发》课程，10月13号开学
2019第一期<python测试开发>课程,10月13号开学! 主讲老师:上海-悠悠 上课方式:QQ群视频在线教学,方便交流 本期上课时间:10月13号-12月8号,每周六.周日晚上20: ...
- python测试开发django-rest-framework-63.基于函数的视图(@api_view())
前言 上一篇讲了基于类的视图,在REST framework中,你也可以使用常规的基于函数的视图.它提供了一组简单的装饰器,用来包装你的视图函数, 以确保视图函数会收到Request(而不是Djang ...
- Python测试开发必知必会-PEP
互联网发展了许多年,不仅颠覆了很多行业,还让很多职位有了更多的用武之地.产品发布迭代速度不断加快,让测试开发这个岗位简直火得不要不要的. Python语言,作为一种更接近人来自然语言的开发语言,以简洁 ...
随机推荐
- keras猫狗图像识别
这里,我们介绍的是一个猫狗图像识别的一个任务.数据可以从kaggle网站上下载.其中包含了25000张毛和狗的图像(每个类别各12500张).在小样本中进行尝试 我们下面先尝试在一个小数据上进行训练, ...
- 关于电脑识别不出自己画的板子上的USB接口问题
现在在画一个Cortex-A5的底板,现在已经完成,正在测试各个模块,发现USB插上后,电脑提示报错,如下: 网上查了很多,有的说是配置问题,有的说是走线问题,首先配置肯定没问题,因为同一台电脑,在买 ...
- HDU重现赛之2019CCPC-江西省赛
本人蒟蒻,5个小时过了5道,看到好几个大佬AK,%%%%%%% http://acm.hdu.edu.cn/contests/contest_show.php?cid=868 先放大佬的题解(不是我写 ...
- 四十二、LAMP与LNMP web架构深度优化实战-第一部
1.nginx.conf配置文件基本参数优化 1.1 隐藏nginx header内版本号信息 一些特定的系统及服务漏洞一般都和特定的软件版本号有关,我们应尽量隐藏服务器的敏感信息(软件名称及版本等信 ...
- python XML ElementTree的增删改查
import xml.etree.ElementTree as ET """ ElementTree.write() 将构建的XML文档写入(更新)文件. Element ...
- Android 自定义dialog类
首先定制style样式 styles.xml 加入自定义样式 <style name="CustomLoadingDialog"> <item name=&quo ...
- KMP匹配（模板）
先粘上我入门KMP时看的大佬的博客:orz orz 从头到尾彻底理解KMP 我觉得这篇已经讲的很详细了,希望大家能坚持看下去. 步骤 ①寻找前缀后缀最长公共元素长度对于P = p0 p1 ...pj- ...
- 52）PHP，加了单例模式的数据库代码
<?php class db { public $host ;//= "localhost";//定义默认连接方式 public $User;//= "root&q ...
- 吴裕雄--天生自然python学习笔记：python 用pygame模块制作 MP3 音乐播放器
利用 music 对象来制作一个 MP3 音乐播放器 . 应用程序总览 从歌曲清单中选择指定的歌曲,单击“播放”按钮可开始播放, 在播放 xxx 歌曲”的信息. 歌曲播放的过程中,可以暂停.停止,也可 ...
- 记忆化dp博弈
题:http://poj.org/problem?id=2068 题意: 有两个队伍A,B,每个队伍有N个人,交叉坐.即是A(1,3,5,7.....)B(2,4,6,8....).告诉你每个mi(1 ...