Настройка серверной части
В Части 1 мы узнали, как настроить интерфейс для загрузки изображений. Теперь мы можем приступить к настройке нашей серверной части. Перейдите в основной каталог вашего приложения и введите в терминал следующую команду:
mkdir back-end && cd back-end
Находясь в серверной папке, введите команду npm init и заполните соответствующие поля. Когда вы дойдете до раздела точки входа, убедитесь, что вы ввели server.js. Это файл, который мы будем использовать в качестве точки доступа к нашему внутреннему серверу. Вы можете назвать его как хотите.
Поскольку это приложение MERN, мы будем использовать MongoDB в качестве нашей базы данных. Если вы еще не создали учетную запись, перейдите на www.mlab.com и создайте бесплатную учетную запись. Выберите Песочница (которая бесплатна) в качестве типа плана. Затем выберите Amazon Web Services в качестве поставщика и выберите соответствующий регион. В качестве альтернативы, я считаю, что если вы ранее не регистрировали учетную запись mlab, теперь вы можете использовать https://www.mongodb.com/cloud/atlas. Это почти то же самое, поэтому выполните те же действия.
Теперь давайте установим остальные библиотеки, которые нам понадобятся. Убедитесь, что вы находитесь в своей внутренней папке, а затем введите следующие команды:
npm install cloudinary multer express dotenv mongoose body-parser nodemon --save
Во-первых, давайте добавим в наш package.json следующий код для настройки nodemon. Добавьте это в раздел «Сценарии».
“start”: “node server.js”, “dev”: “nodemon server.js”
Теперь сохраните этот файл.
Nodemon - это пакет, который упрощает работу сервера. Каждый раз, когда мы сохраняем файл, сервер перезагружается без необходимости вручную перезагружать сервер, нажав «CTRL + C».
Теперь настроим наш server.js файл. Убедитесь, что вы находитесь в своей внутренней папке, и создайте server.js файл. Включите в свой server.js файл следующий код:
Теперь давайте подключим базу данных внутри вашей внутренней папки. Создайте .env файл. Это файл переменных среды, который используется для хранения нашей конфиденциальной информации. Здесь мы собираемся сохранить наш URL-адрес MongoDB. Также важно отметить, что вы должны удалить ‹› из dbuser и dbpassword, иначе он не будет подключаться при вводе ваших собственных учетных данных. Вам также необходимо создать пользователя для базы данных, который не является именем пользователя, которое вы использовали для входа в атлас mlab или MongoDB.
MONGODB = mongodb://<dbuser>:<dbpassword>@ds217438.mlab.com:17438/cloudinary-example
Модели
Давайте быстро добавим нашу модель мангуста. В этом примере нам нужны только три поля: Title, Image и ImageID. У них будет тип строка. ImageID и поле Image будут автоматически заполнены Cloudinary, как вы увидите, когда мы настроим наш маршрут Post. Не забудьте также включить свою модель в файл server.js, чтобы мы могли позже получить доступ к модели в маршруте публикации. Вот как выглядит мой файл модели:
Настройка Multer и Cloudinary
Теперь мы можем продолжить и настроить установленную нами библиотеку Multer и Cloudinary. Сначала давайте добавим наш ключ Cloudinary API и секрет API в наш .env файл. Теперь ваш .env файл должен выглядеть так.
MONGODB = mongodb://<dbuser>:<dbpassword>@ds217438.mlab.com:17438/cloudinary-example CLOUDINARY_API_KEY = YOUR API KEY CLOUDINARY_API_SECRET = YOUR API SECRET
Теперь добавьте следующий код в наш server.js файл для Multer и Cloudinary. По соглашению переменные также находятся в верхней части файла.
//IMAGE UPLOAD CONFIGURATION
const multer = require(“multer”);
const storage = multer.diskStorage({
filename: function(req, file, callback) {
callback(null, Date.now() + file.originalname);
}
});
const imageFilter = function(req, file, cb) {
// accept image files only
if (!file.originalname.match(/\.(jpg|jpeg|png|gif)$/i)) {
return cb(new Error(“Only image files are accepted!”), false);
}
cb(null, true);
};
const upload = multer({ storage: storage, fileFilter: imageFilter });
const cloudinary = require(“cloudinary”);
cloudinary.config({
cloud_name: “lthomas92”, //ENTER YOUR CLOUDINARY NAME
api_key: process.env.CLOUDINARY_API_KEY, // THIS IS COMING FROM CLOUDINARY WHICH WE SAVED FROM EARLIER
api_secret: process.env.CLOUDINARY_API_SECRET // ALSO COMING FROM CLOUDINARY WHICH WE SAVED EARLIER
});
Маршруты
Давайте закончим с нашим server.js файлом и продолжим добавлять маршруты. В более крупном приложении мы обычно разбиваем его на папку маршрутов и сохраняем там наши различные маршруты. Мы также могли бы использовать экспресс-маршрутизатор в этих файлах. Но, поскольку мы сохраняем простоту, мы можем хранить наши маршруты в файле server.js. Начнем с маршрута Post.
Я считаю, что наиболее сложной частью этого маршрута является понимание того, почему иногда req.file.path может возвращать ошибку типа «путь не определен», из-за чего я много раз вырывал себе волосы. Обычно это вызвано двумя причинами. Во-первых, upload.single должен совпадать с тем, как вы называете ввод в форме на стороне клиента. В противном случае будет возвращена ошибка. Кроме того, очень часто легко забыть encType=multipart/form-data в React или enctype=multipart/form-data в HTML. Это должно быть указано как свойство в вашей форме, иначе вы не сможете отправить изображение. BodyParser заботится о вводе текста за нас, но не может обрабатывать изображения, поэтому нам нужно использовать Cloudinary и Multer.
Изображение в Image.create использует модель Мангуста, которую мы создали ранее. Он создает объект в нашей базе данных MongoDB, который будет хранить значения для Title, Image и ImageID. Кроме того, MongoDB автоматически присвоит нам уникальный идентификатор.
Следующий маршрут довольно простой. Это будет просто маршрут GET.
Теперь мы закончили с нашей серверной частью. Проверьте код full server.js на GitHub, чтобы убедиться, что у вас нет ошибок.
Заполненная заявка
Вот наша заполненная заявка!
Спасибо за прочтение! Надеюсь, этот урок был вам полезен. Если у вас есть вопросы, оставьте, пожалуйста, комментарий. Я постараюсь помочь!
Найдите код на GitHub здесь
