プラグイン

28556 ワード
テキストリンク
jspはサーバに依存する.
ajaxはサーバとは独立しています.[スムーズ接続]
restful API
特定のアドレスを送信すると、サーバはjsonデータ(xml)を送信します(サーバ設計に従います).
規格化->urlを送ってもらうと、jsonデータなどのドキュメントを送ります.
依存性が低下すれば、以前Springとして開発された製品をNode js/ハンドヘルド/Pythonとして開発することができる.
アドレスに結果値を決めさえすれば、いつでも切り替えることができます.
フロントをhtml/css/javascriptやc#/qt/android/iphoneなどに開発できます.つまり,どんな開発をしても,アドレスを送信し,結果値を受け取って送信すればよい.
frontとbackは結果値を1つ指定するだけで、置換時にも問題ありません.
  • テーブル
    • <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	table{
		width:400px;
		border:1px solid black;
		border-collapse:collapse;
	}
	td, th{
		border:1px solid black;
		text-align:center;
	}
	table > thead > tr{
		color:yellow;
		background-color:purple;
	}
</style>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://www.jsviews.com/download/jsrender.js"></script>

<!-- 1) 데이터 영역
		- 서버로부터 json 데이터 가져오기
		- 데이터와 viewTemplate을 결합하여 UI영역에 표현하기
 -->
<script>
	$(document).ready(function(){
		$.get("/Contact/list.do", function(data){
			//data가 string이었기때문에 js object로 바꾼다.
			var obj = JSON.parse(data);
			// script에서 쓰라고 만들어놓은 template 
			var tmpl = $.templates("#contact_template");	// viewTemplate
			// 테이블에 렌더링 (js render)
			// data 안에는 no name tel address라는 프로퍼티가 있으니까 그것들을 뿌려준다.
			var str = tmpl.render(obj.contacts);	// 데이터+viewTemplate=html UI
			$("#container").html(str);	// UI영역에 html UI 표시
		});
	});
</script>

<!-- 2) viewTemplate(데이터가 들어오면 표현될 UI 템플릿) -->
<script id="contact_template" type="text/x-jsrender">
	<tr>
		<td>{{:no}}</td>
		<td>{{:name}}</td>
		<td>{{:tel}}</td>
		<td>{{:address}}</td>
	</tr>
</script>
</head>
<body>
	<table id="list">
		<thead>
			<tr>
				<th>번호</th>
				<th>이름</th>
				<th>전화번호</th>
				<th>주소</th>
			</tr>
		</thead>
		
		<!-- UI가 출력될 영역 -->
		<tbody id="container">
		</tbody>
	</table>
</body>
</html>
  • モデル銃
    • <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	body{
		font-size:75%;
	}
	input.text{
		margin-bottom:12px;
		width:95%;
		padding:.4em;
	}
</style>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/humanity/jquery-ui.css"/>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
	// Dialog 팝업창을 띄운다
	$(document).ready(function(){
		// dialog_new div를 가져와서 전체를 팝업창으로 띄워라 
		$("#dialog-new").dialog({
			modal : true,
			autoOpen : true,
			buttons : {
				"저장" : function(){
					$(this).dialog("close");
					alert("저장 완료");
				},
				"취소" : function(){
					$(this).dialog("close");
				}
			}
		});
	});
</script>
</head>
<body>
	<!-- 다이얼로그(모달) 창에 표현할 구성 요소들 -->
	<div id="dialog-new" title="새 연락처 추가하기">
		<form>
			<label for="name">이름</label>
			<input type="text" name="name" id="name"
				class="text ui-widget-content ui-cornet-all">
			<label for="tel">전화번호</label>
			<input type="text" name="tel" id="tel"
				class="text ui-widget-content ui-cornet-all">
			<label for="address">주소</label>
			<input type="text" name="address" id="address"
				class="text ui-widget-content ui-cornet-all">
		</form>
	</div>
</body>
</html>
    Deep Learning day 7 CIFAR 10のパフォーマンス向上
    設計権限管理システム(十三)