VueJS 2.0 Nodejs Tutorial - главная тема сегодняшнего дня. NodeJS в настоящее время является вирусной платформой из-за своих функций, а Express - это веб-платформа, построенная на основе Node.js. Это прекрасный пример Как использовать VueJS с NodeJS.
Одна из возможных причин, по которой я пишу это, - продемонстрировать, как Node.js, Express Framework, MongoDB и современные клиентские платформы Javascript (Vue.js с Webpack) могут хорошо работать. вместе. Express по-прежнему остается доминирующей веб-платформой Node.js.
Шаг 1. Создайте каталог для этого проекта.
Сначала нам нужно создать каталог, который будет содержать обе папки Client и Server.
mkdir Vueexpress
Шаг 2: Создайте подпапку сервера.
Теперь создайте одну папку под названием Сервер, потому что все наши серверные функции будут храниться в этой папке.
Установить экспресс-генератор
Теперь мы собираемся установить Express, фреймворк, который берет Node из простого приложения и превращает его во что-то, что больше похоже на веб-серверы, с которыми мы все привыкли работать. Нам нужно начать с Express-Generator, который на самом деле отличается от самого Express… это приложение-каркас, которое создает каркас для сайтов, управляемых экспрессом. В командной строке введите следующее:
npm install -g express-generator
Эта команда установит экспресс-генератор глобально, поэтому давайте воспользуемся нашим генератором для создания каркаса для веб-сайта.
express server
Теперь у нас есть некоторая базовая структура, но мы еще не закончили. Обратите внимание, что экспресс-генератор создал файл с именем package.json в каталоге вашего сервера, который представляет собой базовый файл JSON, описывающий наше приложение и его зависимости.
Прямо сейчас нам нужно установить наши зависимости, выполнив эту команду
npm install
Он собирается распечатать тонну материала. Это потому, что при чтении файла JSON мы просто устанавливаем все, что указано в объекте зависимостей.
Теперь у вас есть полнофункциональное приложение, готовое и ожидающее запуска, так что давайте протестируем наш веб-сервер! Введите следующее:
npm start
Все работает? Потрясающие! Откройте браузер и перейдите на http: // localhost: 3000, где вы увидите приветственную страницу Express.
Создавайте модели продуктов и категорий.
Теперь нам нужно создать одну папку в корне под названием models, которая будет содержать два файла js для схемы продуктов и схемы категорий .
Подключение к MongoDB
Mongoose требует подключения к базе данных MongoDB. Вы можете require() и подключиться к локальной базе данных с помощью mongoose.connect(), как показано ниже.
//Import the mongoose module const mongoose = require('mongoose'); //Set up default mongoose connection const mongoDB = 'mongodb://127.0.0.1/my_database'; mongoose.connect(mongoDB);// Get Mongoose to use the global promise library mongoose.Promise = global.Promise;//Get the default connection const db = mongoose.connection; //Bind connection to error event (to get notification of connection errors) db.on('error', console.error.bind(console, 'MongoDB connection error:'));
Использование Faker.js
Теперь нам нужно добавить много данных в наши модели продуктов и категорий, для этого мы хотим использовать faker.js для получения случайных данных.
Давайте начнем с создания папки в каталоге routes под названием сидер, который будет содержать файл products.js, в котором будут храниться некоторые случайные данные о товарах и категориях.
Теперь нам нужно импортировать этот файл в app.js и использовать его как промежуточное ПО.
const seeder = require('./routes/seeder/products');
app.use(‘/seeder’, seeder);
Чтобы получить случайные данные, вам просто нужно перейти по адресу:
http://localhost:3000/seeder
Как мы видим, у нас есть две коллекции: одна для категорий, а другая для продуктов с некоторыми случайными данными.
Товары и категории маршрутов:
Во-первых, нам нужно настроить маршруты продуктов и категорий.
Как мы видим, мы создали два маршрута для продуктов: один для отображения продуктов с разбивкой на страницы, а другой - для отображения определенного продукта.
То же самое и с маршрутами категорий:
Итак, теперь нам просто нужно импортировать его в файл app.js и использовать в качестве промежуточного программного обеспечения.
app.use('/products', products);
app.use('/categories', categories);
Ага!! он работает, попробуйте, проверив этот URL "localhost: 3000 / products"
Наконец, мы настроили все, что нам нужно для бэкэнда, поэтому теперь мы собираемся проверить наш интерфейс с помощью Vuejs2.
