Добрый день. В данной статье расскажу как сделать простой блог с загрузкой картинок, с авторизацией и регистрацией, с блоком комментариев и отправкой почты при получении комментариев. 😎
Начнем с самой простой вещи - это установки Nodejs на свой ПК для того, чтобы начать разработку. Итак, переходим на сайт и скачиваем рекомендованную версию. На момент написания статьи, версия была 18.17.0. Устанавливаем на свой ПК скачанный файл.
Открываем командную строку и пишем команду node -v для проверки установки NodeJS, должна появиться строка с версией установленного Node. Приступим теперь к созданию самого проекта.
Там же в командной строке пишем npx create-nuxt-app blogdzen (проект создастся в текущей папке в которой мы находимся в командной строке)
При установке попросят первым делам ввести имя проекта. Можем сразу нажать enter и имя проекта будет как и имя корневой папки, в данном случае blogdzen.
Далее выбираете язык javascript или typescript. В данной статье будет рассмотрен javascript.
Далее менеджер пакетов выбираем NPM. B UI framework выбираем tailwindCSS.
Дальше можете выбрать все как на картинке. Не забываем установить Axios на одном из шагов.
Далее переходим в папку blogdzen, чтобы посмотреть файлы и папки проекта.
Сразу внутри папки blogdzen создаем папку pages, если она не создалась при генерации проекта. И в корне папки pages создаем файл index.vue с таким содержимым:
<template>
<div><h1>Test</h1></div>
</template>
<script>
export default {};
</script>
Теперь сможем из командной строки запустить наш проект командой npm run dev и в браузере открыть страницу loclhost:3000.
Если на странице появилось слово Test, то пока все сделали правильно и идем дальше.
Теперь подключим базу Mongodb и создадим серверную часть нашего проекта.
Создаем в корне проекта папку api и в ней создаем файл index.js с таким содержимым:
const express = require('express')
const app = express()
const { Nuxt, Builder } = require('nuxt')
const mongoose = require('mongoose')
const config = require('../nuxt.config.js')
const bodyParser = require('body-parser')
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.json());
mongoose.connect('mongodb://127.0.0.1:27017/api', {
useNewUrlParser: true,
useUnifiedTopology: true
})
const db = mongoose.connection
db.on('error', error => console.error(error))
db.once('open', () => console.log('connected to database'))
module.exports = {
path: '/api',
handler: app
}
В коде нет ничего сложного, просто подключаем основные модули и настраиваем подключение нашей серверной части к базе данных.
В файле nuxt.config.js (который лежит у вас в корне проекта) добавляем такую строку (это и есть подключение серверной части к проекту):
serverMiddleware: [
'~/api/index.js'
],
В командной строке в корне проекта пишем команды:
npm i express mongoose
Теперь запускаем заново наш проект командой npm run dev и видим в консоли надпись connected to database. Значит все прошло успешно. База данных подключена. Далее, в следующей статье, мы сделаем авторизацию посредством модуля @nuxt/auth , будем записывать зарегистрированных пользователей в базу данных и хранить пароли в зашифрованном виде в базе.
Если понравилась статья, подписывайтесь на канал и ставьте лайки.