Рубрики
Без рубрики

Nodejs и Express Crud

Теперь мы собираемся научиться создавать Nodejs и Express Crud-приложение. Приложение Crud … Теги с WebDev, JavaScript, Node, программированием.

Теперь мы собираемся научиться создавать Nodejs и Express Crud-приложение. Приложение CRUD – это самое простое веб-приложение, которое мы можем создать. Термин Crud исходит от «Создания» «Читать», «Обновить» и «Удалить». Мы создаем приложения Cruds, используя HTTP глаголов. В этом руководстве мы также собираемся научиться подключаться и использовать базу данных MongoDB в приложении Nodejs. В этом руководстве мы предполагаем, что у вас есть некоторые JavaScript знание. Мы также предполагаем, что вы прочитали что-то о Монгодб . Вы можете взять этот учебник как вторую часть для наших Nodejs и Express Руководство. Теперь давайте начнем учиться.

Что мы собираемся построить?

В этом руководстве мы собираемся построить простейшие Nodejs и Express Application. Такие приложения служат частью более сложных приложений. Приложение будет список пользователей, в которых мы можем прочитать список, добавлять пользователей, обновлять пользователей и удалять пользователей. Похож на один ниже. Помимо NODEJS и Express, мы также используем некоторую загрузку для целей стиля. Давайте начнем строить наше новое приложение.

Http глагол

ПОЛУЧАТЬ Метод получения перенаправляет вас на новый URL
СООБЩЕНИЕ Почтовый метод создает новый файл
ПОМЕЩАТЬ Метод PUT служит для обновления файлов
ПЛАСТЫРЬ Метод патча также служит для обновления файлов
УДАЛЯТЬ Метод удаления удаляет файлы

Настройка нашего приложения

Как вы уже можете знать, мы настроили все приложения Nodejs в нашем терминале. Мы можем создать нашу папку и назвать ее, как мы хотим. После создания папки введите команду NPM init, чтобы создать наш package.json. Как только у нас есть наш Package.json Мы создаем нашу app.js или index.js. Затем мы переходим к установке наших зависимостей. Зависимости, которые мы используем в этом уроке, являются экспресс, EJS, Mongoose, а также у Nodemon в качестве зависимости разработки.

Изображение выше показывает вам терминал после ввода команды NPM INIT. После того, как вы будете следовать инструкциям, вы можете открыть папку, которую вы только что создали в вашем любимом текстовом редакторе. Мы используем Visual Studio Code. Затем вы можете добавить зависимости в ваш Package.json. После добавления зависимостей вы приступаете к созданию файла App.js. Это называется index.js по умолчанию; Но я предпочитаю называть это App.js. Как мы уже говорили, прежде чем мы собираемся использовать три зависимости. Они экспресс, мангусты и EJS. Мы можем разместить их в нашем Package.json, тогда наш Package.json должен выглядеть как тот, который мы показываем на картинке ниже.

Установка зависимостей

Мы только что добавили три зависимости в нашу package.json; Но они не установлены. Если вы вспомните введение в учебное пособие в Nodejs, вы знаете, есть два способа установки их. Мы можем установить каждого из них индивидуально, либо установить все они одновременно с помощью команды установки NPM. Как мы используем звездочку (*), после того, как мы устанавливаем их, они станут последней версией. Мы также собираемся установить другую зависимость индивидуально. Эта зависимость – это узел. Мы собираемся установить его индивидуально, потому что мы собираемся установить его как зависимость разработки. Приведенный ниже пример показывает, как установить зависимости и зависимости «dev».

npm install

npm install -D nodemon

Вы можете увидеть команды, которые мы можем использовать для установки зависимостей и зависимостей Dev. Существует также образ, который показывает вам, как это сделать в реальной жизни. Теперь наш Package.json должен выглядеть как тот, который мы показываем вам на следующем изображении. Вы также можете увидеть, что Package.lock.json был создан.

Создание нашего приложения

Мы просто устанавливаем наше приложение в предыдущих разделах. Теперь мы собираемся создать наше приложение. Вы знаете, что мы создали файл App.js. Для того, чтобы создать наши приложения, нам нужно ввести какой-код в нем. Как вы уже должны знать, мы впервые начните пакеты, которые мы установили в нашем файле App.js. Мы добавляем следующий код в файл.

let express = require('express');
let mongoose = require('mongoose');

let app = express(); // The express application 

let PORT = process.env.PORT || 3000;

app.listen(PORT, ()=>{
    console.log(`Connected on ${PORT}`);
});

Подключение нашего приложения к базе данных

Прежде чем вы увидели, что мы установили три зависимости; Но мы только требуем двух. Мы требовали экспресс, потому что это рамки для нашего приложения. Кроме того, мы требуем мангуста. Это потому, что мы собираемся использовать мангуст как наш MongoDB ODM. Для того, чтобы подключить наше приложение в нашу базу данных, нам нужно только использовать функцию Mongoose.connect (). Затем мы используем порт по умолчанию MongoDB, который составляет 27017 вместе с нашим локальным хостом в качестве строки подключения. Мы также добавляем имя, которое мы хотим для нашей базы данных. Ниже приведен код, как подключить базу данных MongoDB к вашему экспресс-приложению.

mongoose.connect('mongodb://localhost:27017/crud');    //crud is the name of the database 

let db = mongoose.connection;

db.on('connected', ()=>{
    console.log('connected to Database');
});

db.on('error', ()=>{
    console.log('Database error');
});

Код выше показывает, как подключить базу данных MongoDB к локальному установленному MongoDB. Вы также можете использовать любую строку MongoDB ATLAS в качестве строки подключения. Мы показываем вам в нашем учебном пособии MongoDB Как настроить Mongodb Atlas. Примеры в этом уроке показывают только базу данных на локально установленной базы данных. Если вы установили среду Mongodb Atlas, вы можете работать с ним. Теперь ваш файл App.js должен выглядеть как тот, который вы видите ниже.

Тестирование приложения в консоли

Вы можете увидеть, что приложение все еще пустое. Мы стремимся начать тестирование нашего приложения с самого начала. Как мы установили Nodemon, нам просто нужно печатать на нашей консоли и увидеть результаты. Помните, что у нас еще нет никаких маршрутов или видов; Но если ваш результат похож на изображение ниже, вы знаете, что ваше приложение работает и готово к подключению к вашей базе данных.

Добавление скриптов в наш Package.json Файл ###

Изображение выше показывает, как проверить ваше приложение с помощью команды Nodemon. В руководстве введения мы покажем вам, как использовать скрипты; Так что лучше создавать несколько сценариев для легкостей и развертывания. Две сценарии, которые мы собираемся добавить, являются Dev и начните. После добавления этих сценариев вам нужно только ввести работу NPM и имя сценария в вашем терминале. Затем скрипты будут работать. Сценарий разработки собирается начать приложение через Nodemon; Хотя сценарий запуска собирается запустить приложение с помощью приложения узла. Как только мы добавим скрипты, наш Package.json должен выглядеть следующим.

Установка двигателя просмотра

Как вы уже знаете, третья зависимость, которую мы добавили, была EJS. Из учебного пособия введения мы можем видеть, что EJS используется в качестве двигателя зрения. Теперь мы можем настроить наш просмотр двигателя в нашем файле App.js. Нам нужно только добавить следующий код в наш файл.

app.set('view engine', 'ejs');
app.set('views', 'views');

Код, который вы только что добавили в свое App.js, это установить папку View Engine и Views. После создания вашего просмотра двигателя вы продолжаете создать папку.

Создание вашей общедоступной папки

Хотя мы используем модуль зрения, это очень хорошая практика для настройки общего папки. Это полезно для добавления скриптов и таблиц стилей. Несмотря на то, что в этом руководстве мы будем использовать только «CDN Bootstrap», – это хорошая практика, а затем общую папку. Если вы хотите добавить больше стилей или более функций в ваше приложение, вы можете добавить некоторые в вашей общедоступной папке. Как вы можете знать из руководства введения; Очень хорошо добавить в наше app.js express.json, а также настройки для кодировки URL. По этой причине мы добавляем следующие строки кода в наше приложение.

// express.json() and url encoding
app.use(express.json());
app.use(express.urlencoded({extended: true}));


//static folder
app.use(express.static('public')); 

После того, как мы добавим все эти изменения в наше приложение. Наш файл должен выглядеть как тот, который мы показываем на следующей картинке. Если вы используете Visual Studio Code, вы также можете увидеть на стороне представления и общие папки, которые мы недавно создали.

Создание маршрутов

Руководство по введению также показывает, как создавать маршруты в Express. Теперь мы собираемся добавить несколько маршрутов для операций CRUD. Нам сначала нужно добавить маршруты в нашем файле App.js. Мы собираемся добавить домашний путь (/) и маршрут (/пользователей). Как только мы добавим маршруты, мы создаем папку маршрутов и его файлы. Мы собираемся работать больше с маршрутом/пользователями/пользователями в этом руководстве. Это потому, что мы собираемся создать «список пользователей». «Нам сначала нужно добавить следующий код в нашу файл App.js. Затем мы создаем наши маршруты папки и его файлы.

app.use('/', require('./routes/index')); //index route

app.use('/users', require('./routes/users')); //users route

Код выше показывает вам маршруты (/) Это домашний маршрут и другой маршрут (/пользователи), который является маршрут пользователей. Теперь мы создаем папку, называемую маршрутами. В папке мы создаем два файла; Один из них называется users.js и другой под названием index.js. Вы можете создать столько файлов маршрута, как вы хотите; Но в этом руководстве мы используем только два. Вы также можете увидеть, что мы используем функцию требуемой () в качестве функции обратного вызова; требует файлов маршрутов.

Использование экспресс-маршрутизатора

После создания маршрутов и файлов для вашего App.js нам нужно разместить какой-код в наших файлах. Мы собираемся начать сначала с помощью index.js. В этом файле мы только собираемся создать домашний маршрут (/). Для того, чтобы создать домашний маршрут, мы сначала вызовите Express и Express. Маршрутизатор () Затем мы создаем маршрут. После создания маршрута мы экспортируем маршрутизатор, как вы можете видеть в следующем коде.

let express = require('express');
let router = express.Router();

router.get('/', (req, res)=>{
    res.render('index');

});

module.exports = router;

Вы можете увидеть, что мы создали роутер и получите маршрут домой. Домашний маршрут перенаправляет вас на точку зрения, называемый index.ejs. К настоящему времени вы можете создать этот вид и добавить желаемое желаемое сообщение; Это ваш домашний экран. Теперь мы собираемся добавить несколько маршрутов к нашим файлам users.js. Мы собираемся добавить пользователей Crud Marross. Также мы собираемся создать просмотры Crud для нашего приложения. Ниже приведен код, как мы можем добавить маршруты Crud к файлу users.js.

let express = require('express');
let router = express.Router();

//CRUD Routes

router.get('/create', (req, res)=>{
    res.render('users/create');   
});



router.get('/list', (req, res)=>{
    res.render('users/list');
});

router.get('/update', (req, res)=>{
    res.render('/users/update');
});



module.exports = router;

Теперь вы создали некоторые из маршрутов CRUD и их взгляды. К настоящему времени вы можете добавить основные данные HTML на свои представления. Мы собираемся работать с видами за несколько минут. Мы создали мнение Crud в другой папке, называемые пользователями, которые находится внутри видов. Вот почему мы редаем в формате («/пользователям/представлениях»), если вы хотите пропустить эту папку до вас. Вы можете создать свои взгляды прямо в папку Views. В случае этого вам нужно только сделать сам по себе View Res.render («View»). Теперь порядок ваших файлов должен выглядеть как изображение ниже. Обратите внимание, что мы установили тему значков в Visual Studio Code; С этой темой легче видеть каждую папку и файл в нашем проекте.

Создание схемы базы данных

Как вы уже знаете, мы работаем с MongoDB. Очень полезный MongoDB ODM – это мангуст. Мы уже установили Mongoose в качестве пакета NPM. Теперь пришло время начать работать с мангустом. Теперь мы собираемся создать другую папку под названием «модели». Внутри этой папки мы собираемся создать файл под названием «user.js». Обратите внимание, что мы используем заглавное письмо в файле. Это потому, что мы собираемся использовать его как модель пользователя. Теперь нам нужно создать схему мангусты в новом файле. После того, как мы создадим схему Mongoose, мы собираемся экспортировать ее как модель мангусты. Для достижения этой задачи нам нужно разместить следующий код в нашем файле.

let mongoose = require('mongoose');
let Schema = mongoose.Schema;

let userSchema = new Schema({

    firstName: String,
    lastName: String,
    age: Number,
    gender: String

});

let User = mongoose.model('User', userSchema);

module.exports = User;

Код выше показывает вам, как создать простую схему. Вы можете увидеть, что мы создали много полей в схеме. Эти поля являются теми, которые Mongodb будут иметь в коллекции, называемых пользователями в нашей базе данных. Мы назвали моделью пользователя, потому что MongoDB собирается создать коллекцию, плитализующую модель.

Импорт модели на наши маршруты

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

let User = require('../models/User');

Запуск операций CRUD

Как только вы импортируете модель на свои маршруты, пришло время начать операции CRUD. Теперь мы собираемся начать создавать пользователей в базе данных, используя наши маршруты. Система автоматически создаст базу данных и коллекцию. Мы собираемся создать только пользователей в нашем приложении. Теперь пришло время работать с видами, которые мы создали раньше. Если вы не создали их, вы можете создать их сейчас. Мы собираемся создать форму в наших пользователях/создании просмотра. Эта форма собирается создать пользователь. Поэтому нам нужно ввести следующий код в нашем файле create.ejs.



    
    
    
    Create User



    

Add Users

Теперь, если вы перейдете к своему браузеру и введите localhost: 3000/пользователи/create, вы можете увидеть следующую форму. Это форма, которую мы собираемся использовать для добавления пользователей в нашу базу данных. Убедитесь, что у вас есть атрибут имени для каждого ввода, а действие для формы. Действие – это перенаправления к функции, которую мы собираемся реализовать на стороне сервера. В этом случае мы собираемся создать пользователя.

Создание пользователей

Прямо сейчас эта форма не собирается ничего не создавать. Это потому, что нам нужно создать пользователей на стороне сервера. Поэтому нам нужно вернуться на наши маршруты и добавить метод для создания пользователей. Мы собираемся добавить метод Router.post для создания пользователя. Маршрутизатор. Метод, который у нас уже есть, только перенаправляют нас к форме. Теперь мы можем вернуться к нашим файлам users.js и добавить следующий код.

router.post('/create', (req, res)=>{

    let newUser = new User({

        firstName: req.body.firstname,
        lastName: req.body.lastname,
        age: req.body.age,
        gender: req.body.gender

    });

    newUser.save();
    res.redirect('/users/list');

});

Код, который мы только что добавили, создает новый пользователь Newuser от модели пользователя. Как вы можете видеть, мы использовали метод Post для создания пользователя. Ранее созданная форма имеет сообщение метода и его действие перенаправляет вас к этой функции. Вы видите, что мы используем метод req.body для получения данных из формы. Часть до того, как метод req.body – это поле на схеме мангусты. После получения данных из формы вы также можете увидеть, что мы использовали форму сохранения () для сохранения Newuser. Затем мы используем метод RES.REDIRECT () для перенаправления от нас в списке пользователей. Если вы уже создали список пользователей, теперь он будет пустым. Если вы не создали, система перенаправляет вас на страницу не могу получить.

Если вам необходимо подтвердить создание пользователя на MongoDB после создания пользователя, вы можете перейти к Mongo Shell Mongosh и подтвердить его. Для этого примера мы создали пользователь с именем John Smith, используя нашу форму. Если у вас установлено Mongodb в вашей системе, результат будет похож на изображение ниже. Если вы используете кластер MongoDB ATLAS, вы можете перейти к вашему кластеру и подтвердить.

Чтение списка пользователей

Предыдущий раздел показывает, как создавать пользователей в базе данных MongoDB; Но это перенаправляет вас в пустой список. Вы можете подтвердить создание пользователя, идущего в вашу оболочку базы данных. Проблема с этим в том, что в реальных пользователях пользователей не имеют доступа к базе данных. По этой причине нам нужно работать над нашим списком пользователей. Для работы в списке наших пользователей нам нужно снова вернуться на наши маршруты и работать на маршруте/списке. Нам нужно изменять его следующим образом.

router.get('/list', async (req, res)=>{

    let users =  await User.find();

    res.render('users/list', {
        users: users

    });

});

Вы можете увидеть, что мы изменили наш/список маршрута. Код, который мы только что добавили, объявляет переменную под названием пользователей, которые являются объектом, который мы получаем с помощью функции Mongodb Find (). После того, как мы создали эту переменную, мы передали его нашим методом рендера в качестве объекта. Это приведет к росту объектов. Это потому что мы. Можете создать все пользователи, которые мы хотим использовать нашу форму, и все они будут переданы через этот объект. Вы также можете увидеть, что мы использовали JavaScript обещает слова Async, который создает асинхронную функцию, а ждут, что ждет результатов. Теперь пришло время создавать или изменить наш взгляд.

Изменение нашего взгляда

После того, как мы изменили наш маршрут для списка пользователей, мы можем изменить наше представление. Как вы уже можете знать, наш мотор зрения является EJS. Это похоже на HTML с разницей, которую мы можем встроить в него JavaScript. Мы собираемся создать таблицу, используя синтаксис таблицы HTML. После создания таблицы мы собираемся встроить каждого пользователя на строку таблицы





    
    
    
    Users List




  

List of Users

<% users.forEach(function(user){ %> <% });%>
First Name Last Name Gender Age
<%= user.firstName %> <%= user.lastName %> <%= user.gender %> <%= user.age %>

Перечислите результаты

После того, как вы измените свой представление, вы можете ввести адрес localhost: 3000/пользователей/список в вашем браузере. Тогда вы увидите результаты. Обратите внимание, что мы используем порт 3000 и локально установленный MongoDB. Результат будет такой же с кластером Mongodb Atlas. Результаты будут похожи на следующее изображение.

Обновление пользователей

В это время вы видели, как создавать пользователей в базе данных и прочитать их в вашем браузере. Мы собираемся узнать, как обновлять пользователей, используя функцию Mongodb UpdateOneOne (). Это легкая задача. Как вы уже можете знать, что нам нужно создать почтовый маршрут, чтобы обновить любой пользователь. У нас есть возможность создавать маршруты в экспресс; Но обновление проще с постпопулярными маршрутами, потому что метод формы представления – это метод Post. Теперь мы можем создать маршрут маршрутизатора.

router.get('/update/:id', async (req, res)=>{

    let user = await User.findById(req.params.id); 
    res.render('users/update', {
        user: user
    });


});



router.post('/update/:id', async (req, res)=>{

    let user = await User.findById(req.params.id); 
    await user.updateOne({
        firstName: req.body.firstname,
        lastName: req.body.lastname,
        gender: req.body.gender,
        age: req.body.age,
    });
    res.redirect('/users/list');


});

Создание формы обновления

В указанном выше коде вы можете увидеть, что мы изменили метод получения и добавили идентификатор для пользователя. Мы также использовали функцию FindbyID () от MongOdb для создания пользовательской переменной. Затем мы добавили переменную на наш метод рендера. После этого мы создали почтовый маршрут для обновления нашего пользователя. Как вы можете видеть, мы также добавляем идентификатор пользователя, а затем мы используем метод req.body для получения значений из нашей формы EJ. Теперь мы можем изменить представления, чтобы обновить пользователей. Сначала мы собираемся изменить представление обновления, создавая форму обновления.





    
    
    
    Update User


    

Update User

Вы можете увидеть, что в форме обновления у нас есть атрибут Value. Это значение поля пользователя, которое мы собираемся обновлять. После создания формы обновления мы можем вернуться к представлению наш список и добавлять две ссылки для каждого из пользователей, которые мы добавляем. Эти две ссылки являются «Обновление» и ссылки «Удалить». Мы собираемся добавить их обоих; Но теперь мы работаем только с обновлением. Следующий код деталей, как добавить две ссылки.


            <%= user.firstName %>
            <%= user.lastName %>
            <%= user.gender %>
            <%= user.age %>
             Update
             Delete
 

Теперь, если вы перейдете к своему браузеру и введите SECT Localhost: 3000/Список Результат будет похож на тот, который вы видите на изображении ниже. Если вы нажмете ссылку «Обновить», ссылка собирается перенаправить вас в форму обновления, и вы можете обновить пользователь.

Как только вы нажмете на ссылку, вы можете увидеть форму обновления, аналогичную тем ниже. После этого вы можете изменить данные и снова проверять вашу базу данных MongoDB и увидите, что ваш пользователь был изменен. В этом примере мы собираемся обновить возраст до 35 лет.

Удаление пользователей

К настоящему времени вы видели, как создавать, прочитать и обновлять пользователей. Чтобы завершить наши операции Crud, мы сейчас собираемся учиться удалять пользователей из базы данных на вашем представлении. Метод удаления не собирается перенаправлять вас на любой другой вид; Это только снова перенаправить вас в список списков. Как только вы увидите представление списка, вы можете увидеть, что пользователь не будет там. Вы также можете проверить базу данных и увидеть, что пользователь не будет в базе данных; Это будет удалено. Нам нужно только добавить еще один маршрут на маршруты пользователей. Это будет с методом пост. Вы можете использовать метод удаления; Но это легче использовать метод пост, потому что мы будем использовать форму для удаления пользователей.

router.post('/delete/:id', async (req, res)=>{

    await User.deleteOne({ _id: req.params.id });


    res.redirect('/users/list');

});

Как только мы добавим вышеуказанный код, мы можем вернуться к представлению списка пользователей и заменить ссылку «Удалить», которую вы только что создали со следующей формой. Эта форма – пустая форма; У него только кнопка отправки. Мы изменили значение отправки на удаление. В таблице, которая будет только показать вам кнопку удаления. Мы также показываем вам комментарий «Удалить» метод в случае, если вы хотите использовать маршрут удаления вместо поста. Это зависит от вас, чтобы использовать метод, который вы хотите.

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

Добавление ссылок на маршрут и стили

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

Заключение

Мы только что создали простое приложение CRUD, используя Nodejs и Express. Это приложение является только простым списком пользователей. К настоящему времени вы можете увидеть это как простой список; Но он служит частью для более сложных приложений, которые вы можете создавать позже. Это только часть великих вещей, которые вы создаете, используя Nodejs Express и MongoDB. Мы надеемся, что вы многое узнали в этом руководстве. Вы можете найти больше информации о Express на их сайте. Есть также Express MDN который содержит отличную информацию. Вы также можете найти информацию о Мангуста и EJS на их сайтах. Если вам нужно получить исходный код для этого приложения, не стесняйтесь скачать его из его Репозиторий GitHub Отказ

Больше в Ссылка Мо

Оригинал: “https://dev.to/moreno8423/nodejs-and-express-crud-2g8j”