Создайте приложение CRUD с несколькими строками кода для разработки приложения FE.

Хотите сначала увидеть источник? Я создал суть!

Будь то личный проект или новая задача на работе, иногда нам нужно создавать что-то с помощью бэкэнд-сервисов. Для этого нам, очевидно, нужен сервер, который может перехватывать http-запросы с ответом.

Если серверная часть еще не готова, нам нужно использовать какой-либо фиктивный серверный сервис или онлайн-инструменты или что-то еще, чтобы иметь возможность обрабатывать http-вызовы.

Некоторое время назад я создавал некоторый бэкэнд, например API, для имитации http-сервисов, используя угловой сервис $httpBackend. Справедливости ради, в то время это сработало! Мы могли бы создавать различные сценарии состояния приложения, чтобы генерировать ошибки http или извлекать данные на основе пользовательских событий. Недостатком было большое количество кода, который нужно было поддерживать, и ограничения на HTTP-ответы.

Лучший способ: мы можем просто создать настоящий бэкенд, подключенный к базе данных, чтобы начать создание нашего внешнего приложения, и мы можем сделать это с помощью нескольких строк кода!

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

Node.js в качестве внутреннего сервера.
Express будет основой для создания нашего приложения Node.
MongoDb — это база данных, которую мы будем использовать.
MongoDB Compass — это графический интерфейс для MongoDB, который поможет нам легко контролировать нашу базу данных.
Mongoose будет использоваться для структурирования нашей модели данных и взаимодействия с базой данных.

Прежде чем мы начнем писать наше серверное приложение, мы устанавливаем MongoDB из здесь и Compass из здесь.

Если для запуска установлен mongoDb, просто выполните:

sudo mongod

Когда mongoDB запустится, вы увидите на терминале следующее:

MongoDB включен! Прежде чем мы подключимся к нему из нашей серверной службы, давайте создадим реальную базу данных и коллекцию через графический интерфейс.

Запустите MongoDB Compass, и вот что вы увидите:

Просто нажмите «Подключиться» и вы в игре!

Нажав создать базу данных, введите имя базы данных как todo-list и название коллекции как todos. Коллекция будет местом, где мы будем хранить наши json-документы (todos).

База данных готова… Если вы хотите создать какие-то данные, просто используйте insert document. Теперь управлять некоторыми данными довольно просто и понятно.

Теперь мы можем продолжить работу с нашим серверным сервисом!

Во-первых, мы устанавливаем необходимые зависимости.

npm i -D express mongoose body-parser

… мы готовы к работе!

Настройка сервера:

// call the dependencies
const app = require('express')();
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
// We will be parsing json incoming req bodies
app.use(bodyParser.json());
// Fire our backend server
app.listen(3000, () => console.log('server is running on 3000'));

Мангуст

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

/* 
 * Connect to our local database:
 * mongoDB will start on port 27017 as default.
 * After the port we simple give our database. "todo-list"
*/
mongoose.connect('mongodb://localhost:27017/todo-list');

При использовании мангуста нам нужно определить нашу модель данных как новую схему мангуста:

// Create a mongoose schema to determine how our db will look like
const Schema = mongoose.Schema;
// Insert a todo with title and status property
const todoShema = new Schema({ 
    title: { type: String },
    status: { type: Boolean }
});
// Declare our Todo data model
const Todo = mongoose.model('Todo', todoShema);

Теперь мы можем создавать конечные точки с помощью экспресс-маршрутизации.

Маршрутизация означает определение того, как приложение отвечает на запрос клиента к определенной конечной точке, которая представляет собой URI (или путь) и определенный метод HTTP-запроса (GET, POST, и так далее).

Для примера; мы можем создать базовый маршрут GET method как таковой:

/*
 * We create first an express app instance.
 * With .get method we expect an http get request on 
 * '/endPoint' uri/path/endpoint.
 * Anytime a get call is made to the '/endPoint'
 * 'The sun is shining!' response will be sent back.
*/
const app = require('express')();
app.get('/endPoint', (req, res) => res.send('The sun is shining!'));

Подробнее об экспресс-маршрутах можно узнать здесь.

Чтобы выставить все созданные задачи из нашей базы данных, нам нужно указать наш API списка задач:

// todo-list api to fetch all todos
app.get('/rest/todo-list', (req, res) => {
    
    /* Use mongoose find method to get our db data
     * {} will query all the documents in the databse
    */
    Todo.find({}, (err, todos) => {
        if (err) return res.send(err);
    
        return res.json(todos);
    });
});

Теперь мы можем просто сделать клиентский вызов http get, чтобы получить все задачи!

Чтобы завершить наше CRUD-приложение, мы также создаем методы публикации, размещения и удаления, а API-интерфейсы серверной части будут выглядеть следующим образом:

app.get('/rest/todo-list', (req, res) => {
    
    Todo.find({}, (err, todos) => {
        if (err) return res.send(err);
        return res.json(todos);
    });
});
app.post('/rest/todo-list', (req, res) => {
   
    Todo.create(req.body, (err, todos) => {
        if (err) return res.send(err);
        return res.json(todos);
    });
});
app.put('/rest/todo-list/:id', (req, res) => {
    
    Todo.findByIdAndUpdate(req.params.id,req.body, (err, todos) => {
        if (err) return res.send(err); 
        return res.json(todos);
    });
});
app.delete('/rest/todo-list/:id', (req, res) => {
     Todo.remove({_id: req.params.id}, (err, todos) => {
          if (err) return res.send(err);
          return res.json(todos);
     });
});

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

В целом

const app = require('express')();
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.listen(3000, () => console.log('server is running on 3000'));
mongoose.connect('mongodb://localhost:27017/todo-list');
const Schema = mongoose.Schema; 
const todoShema = new Schema({ 
    title: { type: String },
    status: { type: Boolean }
}); 
const Todo = mongoose.model('Todo', todoShema);
app.get('/rest/todo-list', getTodos);
app.post('/rest/todo-list', createTodo);
app.put('/rest/todo-list/:id', updateTodo);
app.delete('/rest/todo-list/:id', removeTodo);
function getTodos(req, res) {
    Todo.find({}, createResponse.bind(null, res));
}
function createTodo(req, res) {
    Todo.create(req.body, createResponse.bind(null, res));
}
function updateTodo(req, res) {
    Todo.findByIdAndUpdate(req.params.id, req.body, createResponse.bind(null, res));
}
function removeTodo(req, res) {
    Todo.remove({_id: req.params.id}, createResponse.bind(null, res));
}
function createResponse(res, err, todos) {
    if (err) return res.send(err);
    
    return res.json(todos);
}

Сводка

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

Ваше здоровье!

Создайте приложение CRUD с несколькими строками кода для разработки приложения FE.

Вопросы по теме