はじめに
Angular + Bootstrap のサンプルプログラムをVisual Studio Codeで作ってみよう。
環境構築の次は、「JSON Server」の動作確認です。
CRUDリクエストを確認します。
C : Create 追加
R : Read 参照
U : Update 更新
D : Delete 削除
開発環境
Windows 10 Pro 1709(16299.192)
Visual Studio Code (Windows版) 1.31.1
Node.js 10.15.1
JSON Server 0.14.2
Angular CLI 7.3.1
Bootstrap 4.2.1
手順
１．データ作成
２．「JSON Server」起動
３．Read
４．Create
５．Update
６．Delete
１．データ作成
1. サブディレクトリを作成
2. フォルダーを開く
3. 新規ファイルを作成する
4. ファイルを編集し、セーブ(Ctrl-S)する （ファイル名脇の●が×に変わる）
users.json
{
"users": [
{
"id": 1,
"name": "Hanako",
"email": "Hanako@xxx.com"
},
{
"id": 2,
"name": "Ken",
"email": "Ken@xxx.com"
},
{
"id": 3,
"name": "Taro",
"email": "Taro@xxx.com"
}
]
}
２．「JSON Server」起動
コマンド
json-server --watch users.json
３．Read
URIを入力する
http://localhost:3000/users
取得したデータ
json-serverでGETリクエストを確認
４．Create
1. htmlファイル作成
コード
add.html
<form method="post" action="http://localhost:3000/users">
<p>name : <input type="text" name="name" size="30"></p>
<p>email: <input type="text" name="email" size="30"></p>
<p>
<input type="submit" value="送信する">
<input type="reset" value="リセット">
</p>
</form>
2. ブラウザで開いて、値を入力し、「送信する」ボタン押下
結果
json-serverでPOSTリクエストを確認
ファイルに追加されていることを確認
５．Update
html の form は PUT / DELETE をサポートしていないのでajaxで行う
また、json形式に変換して送信する
1. htmlファイル作成
コード
sample.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>json-server CRUD</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#param").html("Param Values");
$("#response").html("Response Values");
$("#button").click( function(){
var url = $("#url_post").val();
var method = $("#method").val();
var JSONdata = {
name: $("#name").val(),
email: $("#email").val()
};
$("#param").html(JSON.stringify(JSONdata));
$.ajax({
type : method,
url : url,
data : JSON.stringify(JSONdata),
contentType: 'application/JSON',
dataType : 'JSON',
scriptCharset: 'utf-8',
success : function(data) {
// Success
$("#response").html("Success : "+JSON.stringify(data));
},
error : function(data) {
// Error
$("#response").html("Error : "+JSON.stringify(data));
}
});
})
})
</script>
</head>
<body>
<h1>json-server CRUD</h1>
<p>METHOD :
<select id="method" name="method">
<option value="GET" selected>GET</option>
<option value="POST">POST</option>
<option value="PUT">PUT</option>
<option value="DELETE">DELETE</option>
</select>
</p>
<p>URL : <input type="text" id="url_post" name="url" size="80" value="http://localhost:3000/users"></p>
<p>name : <input type="text" id="name" size="30"></p>
<p>email: <input type="text" id="email" size="30"></p>
<textarea id="param" cols=80 rows=3 ></textarea>
<p><button id="button" type="button">submit</button></p>
<textarea id="response" cols=80 rows=10 ></textarea>
</body>
</html>
2. ブラウザで開いて、値を入力し、「送信する」ボタン押下
結果
json-serverでGETリクエストを確認
６．Delete
1. ブラウザで開いて、値を入力し、「送信する」ボタン押下
結果
json-serverでGETリクエストを確認
