原創(chuàng)： fin? 測試開發(fā)社區(qū)? 前天
什么是模態(tài)框翼雀？
? ? 模態(tài)框是指的在覆蓋在父窗體上的子窗體。可用來做交互编矾，我們經(jīng)常會看到模態(tài)框用來登錄熟史、確定等等，到底是怎么實現(xiàn)這種彈出效果窄俏，bootstrap已經(jīng)為我們提供了相應(yīng)的組件蹂匹。
1、界面原型
? ? 點擊添加凹蜈，彈出模態(tài)框限寞，
? ? 然后輸入 用戶：tester， 消息：你好仰坦。如下圖1所示：
圖1
? ? 再點擊保存履植，那么數(shù)據(jù)庫就存入了以上輸入的數(shù)據(jù)，查看界面的用戶列表會顯示tester悄晃，如下圖2所示：
圖2
2玫霎、開發(fā)過程
接下來根據(jù)以上實例，一步一步教你編寫代碼妈橄。
首先搭建好Python環(huán)境--python3庶近，django2，mysql眷蚓，pycharm鼻种，等。
一 python數(shù)據(jù)模型 models.py溪椎，用于創(chuàng)建數(shù)據(jù)庫表存儲數(shù)據(jù)
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函數(shù)用于顯示用戶列表，savedata函數(shù)用于模態(tài)框點擊保存時觸發(fā)保存數(shù)據(jù)校读。
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沼侣，用于函數(shù)和頁面的關(guān)聯(lián)
path('test/',app_uitest_views.test),
path('savedata/', app_uitest_views.savedata),
四 前端模板頁面 test.html，用于前端展示用戶列表及js觸發(fā)模態(tài)框然后數(shù)據(jù)保存
<!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">
</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">關(guān)閉</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>
前端關(guān)鍵代碼概覽如下
（注意紅色標示的代碼歉秫，代表了按鈕蛾洛，字段，模態(tài)框id雁芙，函數(shù)之間的關(guān)聯(lián)）
1 創(chuàng)建模態(tài)框:
<button type="button"class="list-group-item" data-toggle="modal"data-target="#exampleModal" > 添加</button>
2 模態(tài)框內(nèi)容:
<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">關(guān)閉</button>
<button type="button"class="btn btn-primary" data-dismiss="modal"href="javascript:void(0)" onclick="savedata()">保存</button>
3 Js及js函數(shù)：
<link rel="stylesheet"></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
? ? ? ? ? ? ? ? }
? ? ? ? ? });
? ? ? }
