Привет мир

Изучив основы создания REST API, который мог бы выполнять функции CRUD с использованием Node.js, Express и Mongoose, я решил попробовать заняться проектом, в котором используются эти три фреймворка и библиотеки. Во время поиска проектов я подумал, что было бы также полезно изучить внешнюю библиотеку, которая могла бы дополнить мои навыки работы с серверной частью и еще больше приблизить меня к направлению full-stack разработчика. В этом случае я буду изучать React.js. Все эти библиотеки дадут мне навыки в стеке MERN.

Стек MERN состоит из следующих технологий:

  • MongoDB: база данных с открытым исходным кодом на основе документов
  • Express: минималистичный веб-фреймворк для Node.js.
  • React.js: внешняя библиотека JavaScript для создания пользовательских интерфейсов.
  • Node.js: движок выполнения сервера JavaScript

Приложение, которое я буду создавать сегодня, — это список дел. Это приложение будет использовать операции CRUD для создания записей To-Do с использованием стека MERN. Поскольку я недавно изучил, как создать REST API с помощью Node.js, я сначала займусь внутренней работой.

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

Требование

Как и в случае с небольшим REST API до этого, мне понадобится следующее программное обеспечение:

  • Текстовый редактор
  • Почтальон
  • Node.js и диспетчер пакетов Node

И следующие пакеты, которые я буду использовать:

  • выражать
  • Мангуста
  • Анализатор тела
  • Корс

Дизайн

Внутренней работой будет простой REST API, который может запускать четыре функции CRUD:

  • POST запись в список дел
  • ПОЛУЧИТЬ весь список дел
  • ПОЛУЧИТЬ конкретный список дел на основе его id.
  • ПОСТАВЬТЕ обновление для определенной записи (изменив todo_completed с false на true)

Для самой базы данных я создам модель с помощью Mongoose. Схема должна выглядеть примерно так:

  • todo_description: держит задачу
  • todo_responsible : ответственный за задачу
  • todo_priority: насколько важна задача
  • todo_completed: задача завершена или нет

Поскольку этот проект представляет собой приложение с полным стеком, я создам отдельную папку backend внутри корневого каталога проекта. Итак, структура приложения должна выглядеть примерно так:

mern-todo
  -> backend (DIR)
    -> server.js
    -> db (DIR)
    -> models (DIR)
...

Не слишком беспокойтесь о структуре проекта. Важно то, что корневой каталог называется mern-todo, и вы должны создать отдельную папку backend для управления сегодняшней работой.

Код

Что касается самого раздела кодирования, я разделю эту задачу на четыре отдельные части: запуск веб-приложения Express, настройка моделей MongoDB, создание контроллеров и определение маршрутов. Разделение сегодняшнего задания на четыре части соответствует практике, которую я усвоил во вчерашней статье.

Запуск веб-приложения Express

Далее следует та же практика: импортировать любые пакеты, запустить экспресс-приложение, использовать любой из пакетов, создать порт и app.listen() к нему.

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const mongoose = require('mongoose');
const app = express();
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Connected to port: ${PORT}`);
}

Одна вещь, которую я нахожу интересной, это то, как автор учебника написал свой код app.liten(). Это выглядит примерно так:

app.listen(PORT, function() {
  console.log("Server is running on Port: " + PORT);
});

Как видите, именно здесь в игру вступают стрелочные функции; любимое изменение дизайна в EMCAScript2015, также известное как ES6. Поскольку вы можете переопределить функцию из:

var f = function(a, b){
  return a+b;
|

Вы можете написать это следующим образом:

const f = (a, b) => { return a + b; }

Теперь эту же теорию можно применить к команде app.listen(). Вместо записи function() вы можете использовать стрелочные функции с пустыми скобками (поскольку аргументы отсутствуют) и записать приведенный выше код следующим образом:

app.listen(PORT, () => {
  console.log("Server is running on Port: " + PORT);
});

Создайте схему мангуста

Теперь мы создадим схему Mongoose, которая придерживается дизайна, опубликованного выше. Для этого создайте новый каталог с именем models внутри папки backend и создайте файл с именем todo.model.js со следующим кодом:

const mongoose = require('mongoose');
const TodoSchema = new mongoose.Schema({
  todo_description: String,
  todo_responsible: String,
  todo_priority: String,
  todo_completed: Boolean
});
const Todo = mongoose.model('Todo', TodoSchema);
module.exports = Todo;

Теперь еще одно интересное здесь то, что автор учебника написал схему Mongoose по-другому. Вот как он это написал:

const mongoose = require('mongoose');
const Schema = mongoose.Schema;
let Todo = new Schema({
  todo_description: {
    type: String
  },
  todo_responsible: {
    type: String
  },
  todo_priority: {
    type: String
  },
  todo_completed: {
    type: Boolean
  }
});
module.exports = mongoose.model('Todo', Todo);

Следующим шагом будет настройка базы данных. Для этого создайте каталог db внутри вашего backend, запустите файл с именем db.config.js и напишите следующий код:

module.exports = {
  url: 'mongodb://localhost:27017/todo-db'
};

Следующий код настроит новую базу данных с именем todo-db.

Последним шагом будет инициализация базы данных MongoDB путем создания файла index.js внутри models. Файл должен иметь следующий код:

const dbConfig = require('../db/db.config.js');
const mongoose = require('mongoose');
mongoose.Promise = global.Promise;
const db = {};
db.mongoose = mongoose;
db.url = dbConfig.url;
db.tutorials = require('./todo.model.js')(mongoose);
module.exports = db;

Теперь нам нужно будет вызвать инициализированную базу данных в наш основной файл server.js, используя следующий код:

const db = require('./models');
db.mongoose
  .connect(db.url, {
    useNewUrlParser: true,
    useUnifiedTopology: true
  })
  .then(() => {
    console.log("Connected to the database.");
  })
  .catch(err => {
    console.log("An error occured while connecting to the database." err);
    process.exit();
});

Это зарегистрирует в консоли, успешно ли вы подключились к базе данных MongoDB или нет.

Конец — пока.

На этом я закончу статью, так как столкнулся с серьезной ошибкой в ​​контроллерах и маршрутах. Я полагаю, что это может иметь какое-то отношение к разнице в именах базы данных и конструктора. Это связано с моим незнанием именования классов и объектов. Я действительно должен снова взяться за книги.

Но до тех пор оставайтесь последовательными!