Фон к проекту 🔎
Потратив некоторое время на моем bootcamp, работая на JavaScript и реагирует, нам дали некоторое время, чтобы исследовать наш собственный путь на основе того, что заинтересовало нас большинство. Для меня это имело смысл начать смотреть на спину, с целью потенциально создавать мой первый полный сайт стека.
Сначала мне нужно было решить, какой стек фокусируется, и после немного исследований я поселился на Мернге (MongoDB, Express, React и Nodejs). Это было самым смыслом, как у меня уже был опыт реагирования.
Проект 📅.
Пример, используемый в этой статье, относится к проекту планирования урока, который имеет аналогичную функциональность для сайта блога. Как только основные функции установлены, она может быть адаптирована для многих целей. Пользователь сможет завершить с деталями своего урока, получить доступ к запланированным урокам, чтобы просмотреть и обновлять их.
Шаг один – Настройка переднего конца 🚪
Я собираюсь сосредоточиться на заднем конце в этой статье, поэтому я не собираюсь подробно по поводу реагированной части этого проекта здесь. Первый шаг – завершить передний конец – при использовании REACT Вам понадобятся ваши компоненты, состояние и маршрутизатор.
Шаг 2 – Настройка сервера 🖥️
Теперь настроен передний конец, пришло время сделать наш сервер с помощью узла и экспресс. Затем мы создадим серию конечных точек HTTP, чтобы покрыть запросы Get и Post. Мы будем использовать их для доступа к списку уроков, определенного урока, а также для обновления текущего урока.
Узел – это среда сервера с открытым исходным кодом, которая позволяет нам запустить JavaScript на бэкэнде.
Чтобы инициализировать нашу бэкэнду, нам нужно создать новую папку, в этом случае под названием Backend с папкой Server.js внутри (я поместил это за пределы фронтальной папки).
Как только это сделано, мы создадим файл package.json, используя следующую команду в терминале:
$ npm init -y
Затем нам нужно будет установить следующие пакеты:
$ npm install express cors mongoose
Экспресс это веб-каркас для Node.js CORS Предоставляет экспресс-промежуточное программное обеспечение, которое помогает нам включить CORS различными вариантами (здесь она позволит запросы от нашего клиентского домена в наш домен серверов) мангуст Является ли структура Node.js, которая позволяет нам получить доступ к MongoDB (где мы создадим нашу базу данных) в объектно-ориентированном способе.
Последний пакет нам понадобится установить, это узел:
npm install -g nodemon
Каждый раз, когда мы начинаем запустить сервер, мы будем использовать команду Nodemon Server И это будет означать, что любые изменения, которые мы делаем, будут учтены, как только они будут сохранены. Использование Установить -G означает, что он устанавливается во всем мире на нашу систему.
Теперь у нас есть все наши зависимости, пришло время настроить наш сервер в нашем файле Server.js. Мы создадим экземпляр экспресс-сервера, требуют промежуточного программного обеспечения CORS и настроить порт 4000 для сервера для прослушивания:
const express = require('express');
const app = express();
const cors = require('cors');
const PORT = 4000;
app.use(cors());
app.listen(PORT, function() {
console.log("Server is running on Port: " + PORT);
});
Запуск сервера с Nodemon Server Теперь следует показать сервер журнала консоли «Сервер работает на порт: 4000», и мы знаем, что наш сервер работает и работает!
Шаг 3 – Настройка нашей базы данных MongoDB с MongoDB ATLAS 🗂️
Mongodb – это облачная база данных и может быть легко настроена с бесплатной учетной записью. Этот руководство FreeCodeCamp дает отличный обзор на создании базы данных.
Как только наша база данных будет настроена, нам нужно подключить базу данных на нашем сервере. На странице кластеров щелкните кнопку CONNECT для вашего кластера, а затем выберите опцию «Подключить ваше приложение» в всплывающем меню. Скопируйте URI, данные, поскольку нам понадобится в нашем коде.
Чтобы подключить базу данных на нашем сервере, нам нужен следующий код:
const dbURI =
"**insert your URI from MongoDB here, remembering to replace the password and database info for your specific database**";
mongoose
.connect(dbURI, { useNewUrlParser: true, useUnifiedTopology: true })
.then(() => {
app.listen(PORT);
console.log("Server is running on Port: " + PORT);
})
.catch((err) => {
console.log(err);
});
Если вы можете увидеть оба консольных журнала, то вы знаете, что база данных была подключена правильно!
Предоставление Mongodb с схемой 📓
Прежде чем мы начнем отправлять данные в нашу базу данных, нам нужно, чтобы она была приблизительной идеей о том, что ожидать первых, они приходят в виде схем мангусты.
В вашей папке Backend создайте yourdata. .model.js файл. Например, приложение моего урока имеет файл схемы roseon.model.js. Схема должна описывать общую форму данных, и какие типы данных должны быть включены. Вот моя схема урока:
const mongoose = require("mongoose");
const Schema = mongoose.Schema;
let Lesson = new Schema({
lesson_name: {
type: String,
},
lesson_date: {
type: String,
},
lesson_time: {
type: String,
},
lesson_details: {
type: String,
},
});
module.exports = mongoose.model("Lesson", Lesson);
Конечные точки сервера 🔚.
Вернуться в Server.js, теперь нам нужно настроить конечные точки сервера, используя Express:
app.use("/lessons", lessonRoutes)
Это означает, что маршрутизатор будет управлять всеми HTTP-запросами, которые начинаются с пути/уроков. Вы заметите, что res.json () или аналогично появляется где-то в каждом запросе. Отказ Это гарантирует, что наши результаты возвращаются в формате JSON.
Мы будем использовать здесь методы Get и Post.
Маршрут 1 – Получить все предметы из базы данных:
lessonRoutes.route('/').get(function(req, res) {
Lesson.find(function(err, lessons) {
if (err) {
console.log(err);
} else {
res.json(lessons);
}
});
});
Маршрут 2 – Получить отдельный элемент из базы данных:
lessonRoutes.route('/:id').get(function(req, res) {
let id = req.params.id;
Lesson.findById(id, function(err, lesson) {
res.json(lesson);
});
});
Маршрут 3 – Опубликовать новый товар в базу данных:
lessonRoutes.route("/add").post(function (req, res) {
let lesson = new Lesson(req.body);
lesson
.save()
.then((lesson) => {
res.status(200).json({ lesson: "lesson added successfully" });
})
.catch((err) => {
res.status(400).send("adding new lesson failed");
});
});
Маршрут 4 – Обновите существующий урок с постом:
lessonRoutes.route("/update/:id").post(function (req, res) {
Lesson.findByIdAndUpdate(
{ _id: req.params.id },
{
lesson_name: req.body.lesson_name,
lesson_date: req.body.lesson_date,
lesson_time: req.body.lesson_time,
lesson_details: req.body.lesson_details,
},
function (err, result) {
if (err) {
res.send(err);
} else {
res.send(result);
}
}
);
});
Это немного более независимо, так как он включает в себя извлечение идентификатора текущего урока, затем публикующий новые значения на схему.
На этом этапе можно использовать инструмент, такой как почтальон, мог бы использоваться для проверки запросов GET и POST – нам нужно, чтобы они работали должным образом, прежде чем двигаться дальше.
Использование Axios, чтобы связать передний конец на бэкэнду 🔗
Теперь пришло время подключить передний конец к задней части. Библиотека AXIOS позволяет нам отправлять наш HTTP-запрос от передней части на нашу выбранную конечную точку на сервере. Чтобы установить AXIOS, используйте следующую команду:
npm install axios
Теперь мы готовы писать наши запросы в свои компоненты по мере необходимости. Используйте следующее оператор импорта в верхней части компонента:
import axios from "axios;
Запрос на получение AXIOS сделано путем вызова axios.get () Отказ Запрос принимает один параметр, – URI для соответствующей конечной точки.
Вот полученные запросы, используемые в планировщике урока:
axios
.get("http://localhost:4000/lessons/" + id)
.then((response) => {
const lessonData = response.data;
updateSpecificLesson(lessonData);
})
.catch(function (error) {
console.log(error);
});
axios
.get("http://localhost:4000/lessons/")
.then((response) => {
const allData = response.data;
updateLessonList(allData);
})
.catch(function (error) {
console.log(error);
});
Запрос на аксиос Post производится путем вызова Axios.post () Отказ Запрос принимает два параметра – URI для соответствующей конечной точки, а данные для передачи в базу данных (объект).
Вот почтовые запросы, используемые в планировщике урока:
axios.post("http://localhost:4000/lessons/add", newLesson).then(
(response) => {
console.log(response);
updateFormData(initialFormData);
window.location = "/";
},
(error) => {
console.log(error);
}
);
};
axios.post("http://localhost:4000/lessons/add", newLesson).then(
(response) => {
console.log(response);
updateFormData(initialFormData);
window.location = "/";
},
(error) => {
console.log(error);
}
);
};
Используемые ресурсы 📖.
Узел Netninja. JS Курс Учебное пособие Mern CodingTheSmartwaysmartway Руководство FreeCodeCamp для использования Axios в реакции
Код 🖱️.
Репо GitHub для финального проекта можно найти здесь
Окончательные мысли 💭.
Я надеюсь добавить больше функций в этот проект в будущем, например, более подробную форму для создания урока, возможность удаления урока и иметь представление календаря, где пользователь может увидеть запланированные уроки. Держите глаза очищенными! 👀
Если вы получили это далеко, спасибо за чтение моей первой статьи Dev 🎉
Если вы обнаружите какие-либо ошибки или есть какие-либо вопросы, пожалуйста, дайте мне знать в комментариях!
Оригинал: “https://dev.to/natpinnock/how-to-set-up-a-node-js-server-and-mongodb-database-318b”