JSON server

☕ JSON server

📂 Установка пакета

npm install -g json-server

📦 База данных

Создадим папку ( например, test ) и поместим в нее файл db.json:

db.json

{
    "users": [
        {
            "id": 1,
            "name": "Владимир",
            "lastName": "Кононенко",
            "email": "vladimir.kononenko@gmail.com",
            "photoURL": "https://cdn.pixabay.com/photo/2016/03/31/19/58/avatar-1295429_960_720.png"
        },
        {
            "id": 2,
            "name": "Никита",
            "lastName": "Терещенко",
            "email": "nikita.tereshenko@gmail.com",
            "photoURL": "https://i.pinimg.com/originals/3d/47/4f/3d474f82ff71595e8081f9a120892ae8.gif"
        },
        {
            "id": 3,
            "name": "Tim",
            "lastName": "Wagner",
            "email": "timVagner@gmail.com",
            "photoURL": "https://vignette.wikia.nocookie.net/yogscast/images/8/8a/Avatar_Turps_2015.jpg"
        },
        {
            "id": 4,
            "name": "James",
            "lastName": "Bond",
            "email": "jamesBond@gmail.com",
            "photoURL": "https://vignette2.wikia.nocookie.net/yogscast/images/5/59/Avatar_Lewis_2015.png"
        }
    ],
    "posts": [
        {
            "userID": 2,
            "title": "My first post here",
            "body": "It's really wonder!",
            "id": 1
        },
        {
            "postId": 2,
            "id": 2,
            "title": "Автопробег",
            "body": "Завтра планируется автопробег. Участвовать могут все желающие"
        },
        {
            "userId": 2,
            "title": "*Бетономешалка",
            "body": "Это жесть. Собираюсь купить. Лучше, чем АК!",
            "id": 3
        },
        {
            "id": 4,
            "userId": 3,
            "title": "JS",
            "body": "Look here - there are some samples"
        },
        {
            "userId": 3,
            "title": "XMLHttpRequest",
            "body": "Method POST",
            "id": 8
        }
    ],
    "comments": [
        {
            "postId": 0,
            "id": 0,
            "userId": 1,
            "body": "wow!"
        },
        {
            "postId": 0,
            "id": 1,
            "userId": 2,
            "body": "Hi, I'm wonder!"
        },
        {
            "postId": 1,
            "id": 2,
            "userId": 3,
            "body": "It's really wonder!"
        },
        {
            "postId": 2,
            "id": 3,
            "userId": 2,
            "body": "Ударим автопробегом по бездорожью и разгильдяйству!"
        }
    ]
}

🚀 Запуск сервера

Запустим JSON Server с базой данных db.json

Перейдем в Bush:

$ json-server  --watch  <путь к файлу>/db.json

Можно использовать сокращение:

$ json-server  <путь к файлу>/db.json  -w

Поскольку мы установили json-server глобально,
корневой папкой сайта будет папка
для установки глобальных пакетов по умолчанию ( ~ )
Указывая <путь к файлу>, нужно задавать его относительно этой папки
В данном случае папка для установки глобальных покетов C:/Users/Irina

Файл users.json находится в папке z:/home/test
поэтому нужно указать полный путь к файлу:

json-server  z:/home/test/users.json –w

🚧 endpoints

Сервер сгенерировал нам endpoints:

http://localhost:3000/users
http://localhost:3000/posts
http://localhost:3000/comments

( ссылки на ресурсы users, posts, comments, описанные нами в базе данных users.json )

Теперь, пока сервер запущен ( т.е. пока вы не воспользуетесь Ctrl + C в консоли Bush ), можно записывать и вытягивать данные из базы данных, пользуясь указанными endpoints
( при этом в консоли Bush логируются все запросы )

fetch

Теперь проверим, как работают наши запросы, из консоли браузера

☕ 1️⃣ GET

fetch ( 'http://localhost:3000/comments' )
    .then ( response => response.json ()
        .then ( json => console.log ( json ) )
    )

☕ 2️⃣ GET

Теперь получим данные из базы данных в переменные users, posts и comments, используя асинхронную функцию getAllData

Наберем следущий код в консоли браузера:

function getData ( ref ) {
    return fetch ( 'http://localhost:3000/' + ref )
        .then ( response => response.json ()
            .then ( json => console.log ( json ) )
        )
}
async function getAllData () {
    var users = await getData ( "users" )
        .then ( response => response )
    var posts = await getData ( "posts" )
        .then ( response => response )
     var comments = await getData ( "comments" )
        .then ( response => response )
    console.log ( users, posts, comments )
}

getAllData ()

☕ 3️⃣ POST

Добавим новый комментарий:

fetch ( 'http://localhost:3000/comments', {
    method: 'POST',
    body: JSON.stringify ({
        "postId": 1,
      	"userID": 1,
      	"body": "Good for you!"
    }),
    headers: {
        "Content-type": "application/json"
    }
})
    .then ( response => {
        console.log ( 'response: ', response )
})

Обратите внимание, что поле id добавляемой записи вычисляется на стороне сервера
Вам не нужно устанавливать его значение
( но вы можете это делать, если будете отслеживать существующие значения, потому что в противном случае при попытке записи дублирующихся значений id будет сгенерировано исключение )

Вытащим добавленный коммент в консоли:

fetch ( 'http://localhost:3000/comments?postId=1&id=4' )
    .then ( response => response.json () )
        .then ( json => console.log ( json ) )

☕ 4️⃣ PUT

Изменим содержание первого поста :

fetch ( 'http://localhost:3000/posts/1', {
    method: 'PUT',
    body: JSON.stringify ({
        userID: 2,
      	title: "My first post here",
      	body: "It's really wonder!"
    }),
    headers: {
        "Content-type": "application/json"
    }
})
   .then ( response => {
       console.log ( 'response: ', response )
})

☕ 5️⃣ DELETE

Удалим первый комментарий

В консоли браузера наберем код:

fetch ( 'http://localhost:3000/comments/1', {
    method: 'DELETE',
    headers: {
        "Content-type": "application/json"
    }
})
   .then ( response => {
       console.log ( 'response: ', response )
})

---

XMLHttpRequest

function workWithData ( method, url, data ) {
    let request = new XMLHttpRequest ()
    request.onreadystatechange = function ( event ) {
        if ( this.readyState === 4 ) 
            if ( this.status === 200 || this.status === 201 )
                console.log ( this.responseText )
        request.open ( method, url )
        request.setRequestHeader ( 
            'Content-type', 'application/json; charset=utf-8' 
        )
        request.send ( data )
}

GET

workWithData (
    'GET',
    'http://localhost:3000/posts'
)

POST

workWithData (
    'POST', 
    'http://localhost:3000/posts',
    JSON.stringify ( {
        userId: 2,
        title: 'XMLHttpRequest',
        body: 'Method POST'
    } )
)

DELETE

workWithData (
    'DELETE',
    'http://localhost:3000/posts/7'
)

PUT

workWithData (
    'PUT', 
    'http://localhost:3000/posts/3', 
    JSON.stringify ( { 
        userId: 2,
        title: "*Бетономешалка",
        body: "Это жесть. Собираюсь купить. Лучше, чем АК!"
    } )
)