Pythonのテスト開発 - モーダルボックスを作成し、データを保存します
モーダルボックスとは何ですか？
モードは、親フォームのサブフォームの上に重ねたフレームを指します。インタラクティブに使用することができ、我々は最終的には、多くの場合、ログオンするために使用モーダルボックスを参照してください、というように判断するには、このポップアップの効果を達成する方法で、ブートストラップは、私たちのために対応するコンポーネントを提供してきました。
1、インターフェイスプロトタイプ
モーダルボックスを開き、[追加]をクリックし、
テスター、メッセージ：こんにちは、ユーザーを入力してください。下の図1：
▲1
[保存]をクリックし、次にデータベースがリストのユーザインタフェースを表示するために、上記入力されたデータに格納され、図2に示すように、試験装置を示します。
図2▲
2、開発プロセス
次に、上記の例では、ステップバイステップでは、コードを書くことを教えます。
まず、その上良いPython環境--python3、django2、mysqlの、pycharmを構築し、。
Pythonのデータモデルmodels.py、データを格納するデータベーステーブルを作成します
clasTest（models.Model）：
名前= models.CharField（ '名称'、MAX_LENGTH = 200）
メッセージ= models.CharField（ '消息'、MAX_LENGTH = 200）
デフ__str __（自己）：
戻りself.name
2つのロジックのpythonビューview.py、ユーザのリストを表示するためのテスト機能は、SaveDataを保存機能は、データブロックが保存モードをクリックして起動するために使用されます。
DEF試験（リクエスト）：
ユーザー= Test.objects.all（）
リターンレンダリング（リクエスト、 'test.htmlという'、{ "ユーザー"：ユーザー}）
DEF SaveDataを（要求）：
もしrequest.method == "POST"：
名= request.POST.get（ '名前'、 ''）
メッセージ= request.POST.get（ 'メッセージ'、 ''）
test_info =テスト（名前=名前、メッセージ=メッセージ）
test_info.save（）
の戻りはHttpResponse（ '成功を救います！'）
相関関数とページのための3つのpythonリンクurl.py、
経路（ 'テスト/'、app_uitest_views.test）、
パス（ 'SaveDataを/'、app_uitest_views.savedata）
四フロントエンドテンプレートページtest.htmlというは、フロントエンドは、ユーザのリストを表示し、jsはモーダルボックスをトリガし、データを保存します
<！DOCTYPE HTML>
<HTML LANG = "ZH-CN">
<HEAD>
<メタのcharset = "UTF-8">
<META HTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ">
<メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1">
<タイトル>ブートストラップモーダル</ TITLE>
<リンクのrel = "スタイルシート"のhref = "http://cdn.bootcss.com /bootstrap/3.3.5/css/bootstrap.min.css ">
</ HEAD>
<BODY>
<DIV CLASS ="パネルパネル-デフォルト">
<DIV CLASS ="パネルの見出し">用户列表</ div>
<DIV CLASS =「パネル体」>
<ボタンタイプ=「ボタン」クラス=「リスト基項目」データトグル=」モーダル」データターゲット= "＃exampleModal">添加</ボタン>
<DIV CLASS = "リスト基"役割= "グループ" ARIAラベル= "用户列表">
{ユーザ％におけるユーザの％}
<ボタンタイプ= "ボタン"クラス= "リスト基項目"データトグル= "モーダル"データターゲット= "＃exampleModal"> {{user.name}} </ボタン>
{％ENDFOR％}
</ DIV>
</ DIV>
</ DIV>
<DIV CLASS = "モーダルフェード" ID = "exampleModal" でtabindex = " - 1" ロール= "ダイアログ" ARIA-labelledbyの= "exampleModalLabel">
<DIV CLASS = "モーダルダイアログ"ロール= "文書"スタイル= "幅：680px;">
<DIV CLASS = "モーダル・コンテンツ">
<DIV CLASS = "モーダル体">
<divのスタイル= "高さ：300ピクセル、オーバーフロー：自動;">
で<br>
<Pスタイル= "整列：センター">
用户<入力スタイル= "整列：センター"タイプ= "テキスト"名前= "名前" ID = "名前"必要= "必須" /> </ P>
<BR>
<Pスタイル= "整列：センター">
消息<入力スタイル= "整列：センター"必要なタイプ= "テキスト"名前= "メッセージ" ID = "メッセージ" = "必須" /> </ P>
<BR>
</ DIV>
</ DIV>
<DIV CLASS =」モーダル・フッタ」>
<ボタンタイプ= "ボタン"クラス= "BTN BTN-デフォルト" = "モーダル"データ・却下>关闭</ button>を
<ボタンタイプ= "ボタン"クラス= "BTN BTNプライマリ"データ却下= "モーダル"のhref = "javascriptの：無効（0）"のonclick = "SaveDataを（）">保存</ボタン>
</ div>
< / DIV>
</ DIV>
</ div>
<スクリプトSRC = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </ SCRIPT>
<スクリプトSRC = "のhttp： //cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js "> </ SCRIPT>
ます。<script type =" text / javascriptの">
関数SaveDataを（）{
VAR名= $（ '＃名「）.val（）;
。VARメッセージは= $（ '＃メッセージ'）のval（）;
$アヤックス（{
URL： "/ SaveDataを/"、
contentType：「アプリケーション/ x-www-form-urlencodedで。charset = UTF-8' 、
タイプ： "POST"、
成功：関数（結果）{
//はconsole.log（）。
}、
失敗：関数（結果）{
デバッガ
}
}）。
}
</ SCRIPT>
</ body>
</ HTML>
キーコードの概要のフロントエンドは、以下の
（赤いマークされたコードは、ボタン、フィールド、モーダルボックスID、機能間の関連付けを表すことに留意されたいです）
1モーダルボックスを作成します。
<ボタンタイプ=「ボタン」クラス=「リスト基項目」データトグル=「モーダル」データターゲット=「＃exampleModal」>添加</ボタン>
2モーダルボックスの内容：
<DIV CLASS = "モーダルフェード" ID = "exampleModal" でtabindex = " - 1" ロール= "ダイアログ" ARIA-labelledbyの= "exampleModalLabel">
用户<inputstyle = "整列：中央" 必須TYPE = "text" の名= "名前" ID = "名" = "必要" /> </ P>
消息<入力スタイル= "整列：中央" 必須TYPE = "text" の名= "メッセージ" ID = "メッセージ" = "必須" /> </ P>
<ボタンタイプ= "ボタン" クラス= "BTN BTN-デフォルト" = "モーダル" データ・却下>关闭</ button>を
<ボタンタイプ= "ボタン" クラス= "BTN BTNプライマリ" データ却下= HREF "モーダル" = "ジャバスクリプト：ボイド（0）" のonclick = "SaveDataを（）">保存</ボタン>
3つのJsとJSの機能：
<リンクのrel = "スタイルシート" の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>
関数SaveDataを（）
{
。VAR名= $（ '＃名'）のval（）;
。VARメッセージは= $（ '＃メッセージ'）のval（）;
$アヤックス（{
URL： "/ SaveDataを/"、
データ： "名前=" +名+ "＆メッセージ=" +メッセージ、
ヘッダー：{ 'X-CSRFToken'： '{{csrf_token}}} // CSRF
contentType：「アプリケーション/ x-www-form-urlencodedで。文字セット= UTF-8' 、
タイプ： "POST"、
成功：機能（結果）{
//にconsole.log（）;
}、
失敗：関数（結果）{
デバッガ
}
}）;
}
3、終了。