Приложение для простого списка дел с Node.js и MongoDB

В последней главе мы создали наш проект и применили методы GET и POST, мы также создали наши файлы .ejs, чтобы у нас было более удобное приложение.

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

Создание кластера

Для начала нам нужно создать учетную запись в mongoDB Atlas.

Затем нам нужно создать наш кластер

После создания нашего кластера давайте добавим нового пользователя, а затем наш IP-адрес в белый список.

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

Подключение к базе данных

Теперь мы можем подключиться к нашей базе данных.

Сначала давайте добавим следующий код в файл index.js, а затем создадим файл с именем .env, чтобы наша строка была в отдельном файле.

const dotenv = require(“dotenv”);
dotenv.config();

Добавьте следующий код в файл .env

DB_CONNECT = mongodb+srv://diogop:[email protected]/test?retryWrites=true

Не забудьте изменить строку подключения, добавив свое имя пользователя и пароль, которые мы создали ранее.

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

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

const mongoose = require("mongoose");

//connection to db
mongoose.set("useFindAndModify", false);
mongoose.connect(process.env.DB_CONNECT, { useNewUrlParser: true }, () => {
console.log("Connected to db!");
app.listen(3000, () => console.log("Server Up and running"));
});

Мы заменили наш app.listen, чтобы наш сервер запускался только после установления соединения. Мы также добавляем mongoose.set («useFindAndModify», false), чтобы избежать ошибки, которая может возникнуть в дальнейшем.

Если у вас есть сервер, работающий с nodemon, мы можем увидеть, сработали ли наши изменения после сохранения.

CRUD Операции

В папке нашего проекта создадим новую папку с именем models, а затем внутри нее новый файл с именем TodoTask.js.

Давайте добавим в файл TodoTask.js следующий код.

const mongoose = require('mongoose');
const todoTaskSchema = new mongoose.Schema({
content: {
type: String,
required: true
},
date: {
type: Date,
default: Date.now
}
})
module.exports = mongoose.model('TodoTask',todoTaskSchema);

Здесь мы создали схему нашей коллекции и экспортировали ее, чтобы использовать ее в файле index.js.

Теперь нам просто нужно, чтобы наша модель находилась в верхней части файла index.js.

//models
const TodoTask = require("./models/TodoTask");

Ваши файлы должны выглядеть так

CRUD (СОЗДАТЬ)

Давайте изменим наш метод POST, чтобы при нажатии кнопки добавления наше приложение вставляло данные в базу данных.

//POST METHOD
app.post('/',async (req, res) => {
const todoTask = new TodoTask({
content: req.body.content
});
try {
await todoTask.save();
res.redirect("/");
} catch (err) {
res.redirect("/");
}
});

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

CRUD (ЧИТАТЬ)

Теперь нам нужно прочитать данные из базы данных, чтобы при входе на страницу или при добавлении нового элемента мы могли видеть его в нашем приложении.

Сначала нам нужно изменить наш метод get, а затем файл todo.ejs, чтобы мы могли видеть наши данные.

// GET METHOD
app.get("/", (req, res) => {
TodoTask.find({}, (err, tasks) => {
res.render("todo.ejs", { todoTasks: tasks });
});
});

Измените следующий код в файле todo.ejs

<ul class="todo-list">
<% todoTasks.forEach(details => { %>
<li class="todo-list-item">
<div class="todo-list-item-name"><%= details.content %></div>
<a href="/edit/<%= details._id %>" class="edit">
<span class="fas fa-edit"></span>
</a>
<a href="/remove/<%= details._id %>" class="remove">
<span class="fas fa-times"></span>
</a>
</li>
<% }) %>
</ul>

Теперь мы можем видеть наши данные при загрузке страницы и при вставке нового элемента.

CRUD (ОБНОВЛЕНИЕ)

Сначала нам нужно создать новое представление в папке представлений. Я назову его todoEdit.ejs.

<!DOCTYPE html>
<head>
<title>Todo App</title>
<link rel="stylesheet" href="/static/stylesheets/style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai|Candal|Chewy&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
</head>
<body>
<div class="todo-container">
<h2>To-Do List</h2>
<div class="todo">
<form action="" method="POST" class="todo-header">
<input type="text" name="content">
<button type="submit"><span class="fas fa-plus"></span></button>
</form>
<ul class="todo-list">
<% todoTasks.forEach(details => { %>
<% if (details._id == idTask) { %>
<li class="todo-list-item">
<form action="/edit/<%= details._id %>" method="POST">
<input type="text" value="<%= details.content %>" name="content">
<button type="submit">Confirm</button>
<a href="/" class="cancel">Cancel</a>
</form>
</li>
<% } else { %>
<li class="todo-list-item">
<div class="todo-list-item-name"><%= details.content %></div>
<a href="/edit/<%= details._id %>" class="edit"> <span class="fas fa-edit"></span>
</a>
<a href="/remove/<%= details._id %>" class="remove"> <span class="fas fa-times"></span>
</a>
</li>
<% } %>
<% }) %>
</ul>
</div>
</div>
</body>

Затем мы создадим наш метод UPDATE в файле index.js.

//UPDATE
app
.route("/edit/:id")
.get((req, res) => {
const id = req.params.id;
TodoTask.find({}, (err, tasks) => {
res.render("todoEdit.ejs", { todoTasks: tasks, idTask: id });
});
})
.post((req, res) => {
const id = req.params.id;
TodoTask.findByIdAndUpdate(id, { content: req.body.content }, err => {
if (err) return res.send(500, err);
res.redirect("/");
});
});

Сначала мы находим наш идентификатор и визуализируем новый шаблон. Затем обновляем нашу задачу с помощью метода findByIdAndUpdate.

Если вы до сих пор все сделали правильно, вы можете видеть, что мы можем редактировать наши задачи.

CRUD (УДАЛИТЬ)

Чтобы завершить это руководство, нам просто нужно выполнить наш метод DELETE.

Для этого воспользуемся методом findByIdAndRemove.

//DELETE
app.route("/remove/:id").get((req, res) => {
const id = req.params.id;
TodoTask.findByIdAndRemove(id, err => {
if (err) return res.send(500, err);
res.redirect("/");
});
});

Как видите, теперь мы можем удалять задачи.

Вот и все, наше приложение готово.

Надеюсь, вы все сделали правильно и ваши приложения работают так, как должны.

Приложение для простого списка дел с Node.js и MongoDB - Глава 2