Рубрики
Без рубрики

Строительство API отдыха с узлом и экспресс

Остальные API – самая распространенная форма API в наши дни. В этой статье мы будем создавать простой API отдыха в JavaScript с использованием Node.js и Express.

Автор оригинала: Janith Kasun.

Вступление

В этом руководстве мы собираемся построить API отдыха для управления книгами с Node.js и Express. Чтобы начать с ним, я предполагаю, что у вас установлен Node.js, у вас есть опыт работы в JavaScript, а некоторые базовые знания HTML и Bootstrap.

Ради простоты мы не будем использовать базу данных, поэтому вам не нужен опыт, используя один. Мы будем использовать простой массив JavaScript для хранения наших данных вместо этого.

Что такое отдых API?

Re Презентация S Тейт T RANSFER (REST) – это набор методов, в которых клиенты HTTP могут запрашивать информацию с сервера через протокол HTTP. Мы получим немного глубже о HTTP-методах в дальнейшей этой статье.

На сборе данных, таких как книги, например, есть несколько действий, которые нам нужно будет выполнять часто, что кипятят до – Создать , Читать , Обновить и Удалить (Также известен как функциональность Crud ).

API на отдых используют различные методы HTTP-запроса, соответствующие ранее упомянутым действиям, для получения данных и манипулирования данными.

Что выражается?

Expressjs является одним из самых популярных библиотек HTTP-сервера для Node.js, которые отправляются с очень основными функциями. Тем не менее, это очень настраивается с использованием чего-то называемого «промежуточного программного обеспечения». Expressjs очень прост в использовании, установка и учиться.

Несмотря на то, что мы собираемся создать только API для отдыха в этой статье, Framework Expressjs не ограничивается только той тем, что – вы можете делать все виды таких вещей, как проведение статических файлов, выполнение рендеринга на стороне сервера или даже использовать его в качестве прокси сервер.

HTTP-запросы Типы

Есть несколько типов HTTP-методов, которые нам нужно знать, прежде чем создавать API отдыха. Это методы, которые соответствуют задачам CRUD:

  • Пост : Используется для представления данных, обычно используется для создать Новые объекты или редактирование уже существующих объектов
  • Получить : Используется для запроса данных с сервера, обычно используется для читать данные
  • Поставить : Используется для полного замены ресурса с представленным ресурсом, обычно используется для Обновить данные
  • Удалить : Используется для Удалить сущность с сервера

Примечание: Обратите внимание, что вы можете использовать либо Пост или Поставить редактировать сохраненные данные. Вы можете выбрать, даже хотите ли вы использовать Поставить Так как он может быть пропущен полностью. Хотя оставайтесь последовательными с помощью HTTP глаголов, которые вы используете. Если вы используете Пост Для создания и обновления, то не используйте Поставить Метод вообще.

Что мы собираемся построить

Теперь у нас есть базовое понимание того, что есть остальные и базовые HTTP-методы. Давайте создадим простое приложение для хранения информации о книгах. В этом приложении мы храним информацию о ISBN из книги, титула, автор, опубликованной датой, издателем и количеством страниц.

Я буду пользоваться Этот набор данных От github, чтобы получить некоторые образцы деталей о книгах.

Итак, давайте начнем создать наше приложение тогда.

Настройка проекта

Во-первых, давайте инициализируем новый проект Node.js:

$ npm init

Заполните запрошенную информацию вашим требованиям.

Теперь мы можем установить веб-каркас, запустив:

$ npm install --save express

Создание простой конечной точки

Теперь давайте начнем строить простое приложение «Hello World». Когда мы посещаем наше приложение в браузере, мы будем встретить простое сообщение.

Во-первых, создайте файл под названием Hello-World.js и импортировать экспресс-каркас:

const express = require('express');

Теперь давайте создадим приложение Express:

const app = express();

И установить наш порт:

const port = 3000;

Теперь мы можем создать простой Получить конечная точка. Когда пользователь попадает в конечную точку, появится сообщение «Hello World, из Express». Мы хотели бы установить его на домашней странице, поэтому URL для конечной точки – / :

app.get('/', (req, res) => {
    res.send('Hello World, from express');
});

На данный момент давайте начнем наших клиентов:

app.listen(port, () => console.log(`Hello world app listening on port ${port}!`))

Давайте запустим приложение и посетите единственную конечную точку у нас через наш браузер:

$ node hello-world.js
Hello world app listening on port 3000!
Узел JS REST API Endpoint Результат

Экспресс промежуточное ПО

Как уже упоминалось выше – ExpressJS – это простой HTTP-сервер, и он не поставляется с большим количеством функций из коробки. Промежуточное программное обеспечение действует практически как расширения для Express Server и предоставляет дополнительные функции в «середине» запроса. Есть третьительные расширения, такие как Морган для регистрации, Малтер Для обработки загруженных файлов и т. Д.

На данный момент, чтобы начать, нам нужно установить промежуточное программное обеспечение под названием Тело-парсер , что помогает нам декодировать тело из HTTP-запроса:

$ npm install --save body-parser

Поскольку мы называем API из разных местоположений, ударяя конечные точки в браузере. Мы также должны установить промежуточное программное обеспечение CORS.

Если вы еще не знакомы с Распределение ресурсов с перекрестным происхождением Теперь все в порядке. Давайте просто установим промежуточное программное обеспечение и настроить его:

$ npm install --save cors

Создание API

Добавление книг

Теперь мы можем начать строить наше приложение. Создайте новый файл под названием Книга-API.JS :

const express = require('express')
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
const port = 3000;

// Where we will keep books
let books = [];

app.use(cors());

// Configuring body parser middleware
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.post('/book', (req, res) => {
    // We will be coding here
});

app.listen(port, () => console.log(`Hello world app listening on port ${port}!`));

Как видите, мы можем настроить Тело-парсер импортируя его и передаю его на app.use Метод, который позволяет это промежуточным программом для Express приложение пример.

Мы будем использовать Книги Массив для хранения нашей коллекции книг, моделирование базы данных.

Есть несколько типов HTTP-запросов типов кузова. Например, Приложение/X-WWW-Form-urlencoded это тип тела по умолчанию для форм, тогда как Приложение/JSON Это то, что мы будем использовать при запросе ресурса с использованием клиента jQuery или Backenc.

Что такое Тело-парсер промежуточное программное обеспечение, схватывая HTTP-тело, декодируя информацию и добавив ее в req .body Отказ Оттуда мы можем легко получить информацию из формы – в нашем случае информации о книге.

Внутри app.post Метод Давайте добавим книгу на книжный массив:

app.post('/book', (req, res) => {
    const book = req.body;

    // Output the book to the console for debugging
    console.log(book);
    books.push(book);

    res.send('Book is added to the database');
});

Теперь давайте создадим простую форму HTML с полями: ISBN, заголовок, автор, опубликованная дата, издательство и количество страниц в новом файле, скажем, new-book.html Отказ

Мы будем отправлять данные на API, используя эту форму HTML Действие атрибут:


Create New Book


Здесь наш <ФОРМА> Атрибут TAG соответствует нашей конечной точке, и информация, которую мы отправляем с Отправить Кнопка – это информация наш метод анализирует и добавляет к массиву. Обратите внимание, что Метод Параметр это Пост , как в нашем API.

Вы должны увидеть что-то подобное, когда вы открываете страницу:

Узел JS PORT API Форма API

Нажав «Отправить», мы встречаемся с нашими приложениями console.log (книга) утверждение:

{ isbn: '9781593275846',
  title: 'Eloquent JavaScript, Second Edition',
  author: 'Marijn Haverbeke',
  publish_date: '2014-12-14',
  publisher: 'No Starch Press',
  numOfPages: '472' }

Примечание: Обратите внимание, что, поскольку мы используем массив для хранения данных, мы потеряем их в нашем следующем перезапуске приложения.

Получить все книги

Теперь давайте создадим конечную точку, чтобы получить все книги из API:

app.get('/books', (req, res) => {
    res.json(books);
});

Перезагрузите сервер. Если сервер уже работает нажмите Ctrl + C остановить это первым. Добавить книги и открыть http://localhost: 3000/Книги в вашем браузере. Вы должны увидеть ответ JSON со всеми книгами, которые вы добавили.

Теперь давайте создадим HTML-страницу, чтобы отобразить эти книги только для пользователя.

На этот раз мы создадим два файла – Book-list.html Что мы будем использовать в качестве шаблона и Book-list.js Файл, который будет держать логику для обновления/удаления книг и отображение их на странице:

Давайте начнем с шаблона:


List of books


С помощью шаблона сделаны, мы можем реализовать фактическую логику для извлечения всех книг с помощью JavaScript на стороне браузера и нашего API для отдыха:

const setEditModal = (isbn) => {
    // We will implement this later
}

const deleteBook = (isbn) => {
    // We will implement this later
}

const loadBooks = () => {
    const xhttp = new XMLHttpRequest();

    xhttp.open("GET", "http://localhost:3000/books", false);
    xhttp.send();

    const books = JSON.parse(xhttp.responseText);

    for (let book of books) {
        const x = `
            
${book.title}
${book.isbn}
Author: ${book.author}
Publisher: ${book.publisher}
Number Of Pages: ${book.numOfPages}

` document.getElementById('books').innerHTML = document.getElementById('books').innerHTML + x; } } loadBooks();

В приведенном выше скрипте мы отправляем Получить Запрос к конечной точке http://localhost: 3000/Книги Чтобы получить книги, а затем создать карту Bootstrap для каждой книги, чтобы отобразить его. Если все работает правильно, вы должны увидеть что-то вроде этого на вашей странице:

Список книг API узла JS REST API

Вы, вероятно, заметили Редактировать и Создать Кнопки и их соответствующие методы. На данный момент давайте оставим их пустыми и внедряем их, как мы идем.

Получение книги по ISBN

Если бы мы хотели бы отобразить конкретную книгу для пользователя, нам понадобится способ получить его из базы данных (или массива в нашем случае). Это всегда делается ключевым конкретным для этого объекта. В большинстве случаев каждое сущность имеет уникальный ID Это помогает нам идентифицировать их.

В нашем случае каждая книга имеет ISBN, который уникален по своей природе, поэтому нет необходимости в другой ID значение.

Это обычно делается путем разбора параметра URL для ID и ищет книгу с соответствующими ID Отказ

Например, если ISBN является 9781593275846 URL будет выглядеть так, http://localhost: 3000/book/9781593275846 :

app.get('/book/:isbn', (req, res) => {
    // Reading isbn from the URL
    const isbn = req.params.isbn;
});

Здесь мы введены для параметризованных URL. Поскольку ISBN зависит от книги, здесь потенциально бесконечное количество конечных точек здесь. Добавляя толстую кишку ( : ) на путь, мы можем определить переменную, сопоставленную с переменной ISBN Отказ Итак, если пользователь посещает localhost: 3000/Книга/5 ISBN Параметр будет 5 Отказ

Вы можете принять более одного параметра в вашем URL, если он имеет смысл в вашем сценарии. Например /image/: ширина/: высота , а затем вы можете получить эти параметры, используя req.params.width и req.params.height Отказ

Теперь, используя нашу конечную точку, мы можем получить одну книгу:

app.get('/book/:isbn', (req, res) => {
    // Reading isbn from the URL
    const isbn = req.params.isbn;

    // Searching books for the isbn
    for (let book of books) {
        if (book.isbn === isbn) {
            res.json(book);
            return;
        }
    }

    // Sending 404 when not found something is a good practice
    res.status(404).send('Book not found');
});

Снова перезагрузите сервер, добавьте новую книгу и откройте localhost/3000/{your_isbn} И приложение вернет информацию о книге.

Удаление книг

При удалении сущностей мы обычно удаляем их один за другим, чтобы избежать больших случайных потери данных. Чтобы удалить элементы, мы используем HTTP Удалить Способ и укажите книгу, используя ее номер ISBN, как мы его восстановили:

app.delete('/book/:isbn', (req, res) => {
    // Reading isbn from the URL
    const isbn = req.params.isbn;

    // Remove item from the books array
    books = books.filter(i => {
        if (i.isbn !== isbn) {
            return true;
        }
        return false;
    });

    res.send('Book is deleted');
});

Мы используем app.delete Метод принять Удалить Запросы. Мы также использовали массив Фильтр Способ отфильтрования книги с соответствующим ISBN, чтобы удалить его из массива.

Теперь давайте реализуем Deletebook Метод в Book-list.js файл:

const deleteBook = (isbn) => {
    const xhttp = new XMLHttpRequest();

    xhttp.open("DELETE", `http://localhost:3000/book/${isbn}`, false);
    xhttp.send();

    // Reloading the page
    location.reload();
}

В этом методе мы отправляем запрос Удалить при нажатии кнопки и перезагрузки страницы для отображения изменений.

Редактирование книг

Очень похоже на удаление объектов, обновление их требует от нас, чтобы вырвать конкретный, на основе ISBN, а затем отправить либо Пост или Поставить HTTP Call с новой информацией.

Давайте вернемся к нашему Книга-API.JS файл:

app.post('/book/:isbn', (req, res) => {
    // Reading isbn from the URL
    const isbn = req.params.isbn;
    const newBook = req.body;

    // Remove item from the books array
    for (let i = 0; i < books.length; i++) {
        let book = books[i]
        if (book.isbn === isbn) {
            books[i] = newBook;
        }
    }

    res.send('Book is edited');
});

При отправке Пост Запрос, направленный на конкретный ISBN, адекватная книга обновляется с новой информацией.

Поскольку мы уже создали модаль редактирования, мы можем использовать Сетдитмодал Метод собирать информацию о книге, когда нажмите кнопку «Редактировать».

Мы также установим форму Действие Параметр с URL Щелкнутой книги для отправки запроса:

const setEditModal = (isbn) => {
    // Get information about the book using isbn
    const xhttp = new XMLHttpRequest();

    xhttp.open("GET", `http://localhost:3000/book/${isbn}`, false);
    xhttp.send();

    const book = JSON.parse(xhttp.responseText);

    const {
        title,
        author,
        publisher,
        publish_date,
        numOfPages
    } = book;

    // Filling information about the book in the form inside the modal
    document.getElementById('isbn').value = isbn;
    document.getElementById('title').value = title;
    document.getElementById('author').value = author;
    document.getElementById('publisher').value = publisher;
    document.getElementById('publish_date').value = publish_date;
    document.getElementById('numOfPages').value = numOfPages;

    // Setting up the action url for the book
    document.getElementById('editForm').action = `http://localhost:3000/book/${isbn}`;
}

Чтобы проверить, работает ли функция обновления, редактируйте книгу. Форма должна быть заполнена существующей информацией о книге. Измените что-нибудь и нажмите «Отправить», после чего вы должны увидеть сообщение «Книга отредактирована».

Заключение

Вот так легко создать API для отдыха, используя Node.js и Express. Вы можете посетить официальный Экспресс документация Чтобы узнать больше о структурах, если вы заинтересованы.

Кроме того, код, который я предоставил, это только для учебника, вы никогда не должны использовать его в производственной среде. Убедитесь, что вы проверяете данные и следуете за лучшими практиками, когда вы пишете код для производства.

Как обычно, исходный код этого проекта можно найти на Github Отказ