Привет мир
Изучив основы создания 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 или нет.
Конец — пока.
На этом я закончу статью, так как столкнулся с серьезной ошибкой в контроллерах и маршрутах. Я полагаю, что это может иметь какое-то отношение к разнице в именах базы данных и конструктора. Это связано с моим незнанием именования классов и объектов. Я действительно должен снова взяться за книги.
Но до тех пор оставайтесь последовательными!