Создание приложения ToDo с полным стеком MEVN (часть 2)
Если вы хотите следовать этому руководству с самого начала, вы можете найти первую часть здесь. В нем мы настраиваем проект, включая клиент Vue, серверную часть Node / Express и Axios для связи между клиентом и сервером.
С возвращением - у вас уже есть набросок проекта и, вероятно, вы просто хотите, чтобы я пропустил введение и сразу приступил к внедрению MongoDB в наш стек MEVN. Никаких жалоб - меньше писали для меня.
Создание MongoDB на MongoAtlas
MongoDB запускает простую службу облачной базы данных под названием Mongo Atlas. Я думаю, что это очень просто, предлагает уровень бесплатного пользования и намного лучше, чем просто разместить всю базу данных локально. Итак, сначала зарегистрируйтесь в своей учетной записи здесь.
Следуйте инструкциям по установке, чтобы получить уровень бесплатного пользования, выбрав поставщика, который сообщает, что уровень бесплатного пользования доступен, а также выбрав кластер M0, который можно использовать бесплатно навсегда. После его создания нам нужно будет создать вашего первого пользователя в кластере. Перейдите на вкладку «Безопасность», нажмите «Добавить нового пользователя» и создайте пользователя со следующими настройками.
Затем вам нужно будет внести свой IP-адрес в белый список, чтобы предоставить ему доступ. Атлас делает за вас большую часть работы. Находясь на вкладке «Безопасность», нажмите подзаголовок «Белый список IP-адресов» и нажмите кнопку «Добавить IP-адрес». Во всплывающем окне просто нажмите «Разрешить доступ из любого места» и нажмите «Подтвердить». После того, как вы ближе познакомитесь со своей программой, вы сможете более точно указать свой IP-адрес в белом списке.
Наконец, пришло время подключиться к вашему кластеру. На левой боковой панели нажмите «Кластеры». Откроется панель управления кластера. Оттуда нажмите Подключиться.
Во всплывающем окне выберите «Подключить приложение» в качестве метода подключения. В следующем окне выберите «Короткая строка подключения SRV» и скопируйте адрес SRV. Это понадобится вам на следующем шаге, так что не потеряйте его.
Подключение вашего сервера к MongoDB
Теперь, когда у нас настроена база данных Mongo Atlas, мы можем добавить ее на наш сервер. Во-первых, нам нужно установить пакет npm для mongodb в папку нашего сервера, поэтому перейдите в папку вашего сервера и выполните команду
npm install —-save mongodbЗатем в server/src/app.js нам нужно будет импортировать mongodb, настроить соединение, а затем фактически подключиться. Это делается с помощью следующего кода.
const mongo = require('mongodb')
const MongoClient = mongo.MongoClient
const uri = YOUR_CONNECTION_STRING
var client;
var mongoClient = new MongoClient(uri, { reconnectTries :
Number.MAX_VALUE, autoReconnect : true, useNewUrlParser : true })
mongoClient.connect((err, db) => { // returns db connection
if (err != null) {
console.log(err)
return
}
client = db
})
Теперь, когда у нас есть подключение к нашему кластеру, давайте приступим к чтению и записи в коллекцию.
Создание коллекции
Вернувшись в Mongo Atlas, давайте сделаем нашу первую коллекцию. На вкладке «Обзор» кластера нажмите кнопку «Коллекции». Оттуда нажмите большую кнопку «Создать базу данных». Чтобы упростить задачу, я назвал базу данных test, а коллекцию todos.
Примечание. Если вы присвоите базе данных другое имя, кроме
test, вам придется изменить строку подключения. Просто заменитеtestв строке uri на имя вашей базы данных.
Теперь в нашей todos базе данных нажмите «Вставить документ» и вставьте свой первый документ с полем title, представляющим задачу.
Доступ к коллекции в узле
Теперь вернемся к нашему app.js file и загрузим этот документ. Поскольку наша база данных настроена, мы можем вернуть задачи из базы данных вместо жесткого кодирования тестовых данных, как это было раньше. В следующем коде используется соединение с базой данных, которое мы настроили для запроса нашей коллекции задач, и он возвращает результаты.
app.get('/todo', (req, res) => {
const collection = client.db("test").collection("todos")
collection.find().toArray(function (err, results) {
if (err) {
console.log(err)
res.send([])
return
}
res.send(results)
})
})
В http://localhost:8080/#/todo мы должны увидеть, как наша коллекция отображается в нашем списке.
Запись в базу данных
Это требует нескольких разных частей. Во-первых, нам нужно добавить компонент ввода в наш HTML. Затем мы должны использовать axios, чтобы передать ввод в app.js файл нашего сервера. Наконец, нам нужно будет использовать пакет mongodb для записи данных в базу данных. Давай перейдем к делу.
Во-первых, мы должны отредактировать ToDo.vue, чтобы включить форму и поместить ее ввод в наш ToDoAPI. В ToDo.vue
После добавления ввода, который привязан к переменной данных, в html шаблона, мы использовали обработку событий Vue, чтобы связать событие отправки с нашей функцией addTodo. Затем мы снова используем axios для вызова push-вызова, который мы определим дальше. Затем мы добавляем ответ в наш список задач и очищаем ввод, чтобы пользователь мог легко добавить другие задачи.
Теперь нам нужно определить функцию addTodo(todo) в нашем services/ToDoAPI.js file. Просто добавьте следующее поле.
addTodo (todo) {
return API().push('addTodo', {
todo: todo // add our data to the request body
})
}
Затем нам действительно нужно определить маршрут на стороне сервера. Давай сделаем это через server/src/app.js
app.post('/addTodo', (req, res) => {
const collection = client.db('test').collection('todos')
var todo = req.body.todo // parse the data from the request's body
collection.insertOne({title: todo}, function (err, results) {
if (err) {
console.log(err)
res.send('')
return
}
res.send(results.ops[0]) // returns the new document
})
})
Хороший! Когда мы отправляем форму, мы должны видеть, что наш список дел обновляется с нашим вводом. Кроме того, если мы проверим нашу базу данных Mongo Atlas, мы увидим, что данные добавляются в базу данных.
Проверка Todos
Итак, у нас есть много приложений, которые уже работают - мы можем добавлять задачи в список с помощью MongoDB, но у нас не может быть списка задач, если мы не сможем отметить их после выполнения и удалить их из базы данных.
По сути, этот процесс будет противоположным их добавлению. Мы преобразуем каждый элемент в списке во вход для флажка, и как только они будут отмечены, мы будем использовать axios и node, чтобы удалить элемент из списка. Единственное отличие состоит в том, что нам нужно будет использовать ObjectID документа, чтобы удалить его. Это хорошая практика, потому что нередко бывает несколько задач с одинаковым заголовком, поэтому удаление по заголовку может не привести к удалению нужного элемента.
В Todo.vue мы должны заменить теги span, которые перечисляют задачи, на входы флажков, которые вызывают метод после щелчка.
<li v-for='todo in todos' :key='todo._id'> <input type='checkbox' @click='deleteTodo(todo._id)'> {{todo.title}} </li>
Затем мы должны определить метод deleteTodo, который удаляет флажок из отображаемого списка задач и использует axios для отправки запроса на наш сервер.
deleteTodo (todoID) {
ToDoAPI.deleteTodo(todoID)
// remove the array element with the matching id
this.todos = this.todos.filter(function (obj) {
return obj._id !== todoID
})
}
Еще раз, давайте отредактируем наш services/ToDoAPI.js файл для обработки функции deleteTodo и вызова нашего сервера.
deleteTodo (todoID) {
return API().post('deleteTodo', {
todoID: todoID // add our data to the request body
})
}
Наконец, давайте отредактируем наш серверный файл, чтобы фактически удалить элемент из базы данных. Здесь важно отметить, что todoID передается как строка, и если мы хотим использовать ее для запроса нашей базы данных, мы должны преобразовать ее в ObjectID.
Это оно!
У нас есть рабочий список задач, который работает с использованием стека MEVN! Все данные хранятся в MongoDB. Стек MEVN - отличный модульный способ создания веб-приложения.
Пока все работает полностью, остается последний шаг.
Сделай это красивее
Никому не нравится смотреть на входные данные по умолчанию, дизайн внешнего интерфейса может иметь огромное значение. Я не собираюсь тратить слишком много времени на объяснение того, что я делаю - я думаю, что вы, ребята, знаете, как использовать CSS (и у вас будут другие вкусы, чем у меня), поэтому я просто покажу вам конечный продукт и позволю вам посмотрите мой CSS на Github.
Все готово
Поздравляю! Вы знаете основы настройки стека MEVN - продолжайте и создавайте сколько душе угодно. Если у вас есть вопросы, оставьте их ниже. Удачного программирования!
