Visual Studio Code (Windows版) でAngular+Bootstrap（その２．JSON Server 編）

## はじめに
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. サブディレクトリを作成
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/10845d59-488e-d004-10b2-b55f864f2419.png)

#### 2. フォルダーを開く
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/60462d58-3609-3908-9991-a45db4cd72ba.png)

#### 3. 新規ファイルを作成する
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/983d0f69-db4b-3804-31b0-4ab4a39bbc8d.png)

#### 4. ファイルを編集し、セーブ(Ctrl-S)する　　（ファイル名脇の●が×に変わる）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/9775ab9b-bbd5-129f-1031-bf97f3a80479.png)

``` json: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
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/77d11e9e-4545-29c7-d597-10d272906c3b.png)

## ３．Read
URIを入力する

```
http://localhost:3000/users
```

取得したデータ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/9810dd12-25c4-c931-cd20-3e0a1efe9365.png)

json-serverでGETリクエストを確認
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/90249955-b4db-92a1-3946-d7e2ac9b6cb1.png)

## ４．Create
#### 1. htmlファイル作成
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/83e72784-353c-adf4-6b22-c48131fa7c63.png)
コード

``` 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. ブラウザで開いて、値を入力し、「送信する」ボタン押下
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/73909e94-6954-0602-ee3d-75fd6b4ec57a.png)

結果
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/0142a453-3cfd-33ba-918f-2c87a79be952.png)

json-serverでPOSTリクエストを確認
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/ff684e9b-da96-be07-8bf7-48ec698e261b.png)

ファイルに追加されていることを確認
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/c11fc9da-6150-c720-a5a9-6c5236f89bca.png)

## ５．Update
html の form は PUT / DELETE をサポートしていないのでajaxで行う
また、json形式に変換して送信する

#### 1. htmlファイル作成
コード

``` 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. ブラウザで開いて、値を入力し、「送信する」ボタン押下
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/a67ffffe-c012-f040-1572-79fe2d54a766.png)

結果
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/3c4faeb2-08e7-2a52-9c77-1dec0de0d51c.png)

json-serverでGETリクエストを確認
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/a03e0323-6118-5791-86c9-e0fecd2bf72d.png)


## ６．Delete
#### 1. ブラウザで開いて、値を入力し、「送信する」ボタン押下
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/3146d320-5448-8acb-26ef-74716c846cff.png)

結果
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/20133a69-7ff0-bb8e-9df4-9f8bd2ab448d.png)

json-serverでGETリクエストを確認
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/7c1a6cdc-7cc6-4160-f390-d1107f813665.png)