{"draftJsState":{"blocks":[{"data":{"image":{"id":"66f149c8e5af255ef4284031"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разработка простого блога с использованием MERN (Mongodb,Express, React, Node)","type":"atomic:image","key":"100p0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"71dqg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":180,"style":"BOLD"},{"length":11,"offset":229,"style":"BOLD"}],"text":"Разработка блога с использованием MERN: Полное руководство\nMERN — это популярный стек технологий для разработки полноценных веб-приложений, включающий четыре основных компонента:\n\nMongoDB — база данных NoSQL для хранения данных;\nExpress.js — серверный фреймворк для создания API;\nReact.js — библиотека для разработки пользовательского интерфейса;\nNode.js — среда выполнения JavaScript на сервере.\nВ этом руководстве мы разработаем простое приложение блога, где пользователи смогут просматривать и добавлять посты. Приложение будет включать фронтенд на React, бэкенд на Express и базу данных MongoDB для хранения постов блога. Также будет использован Node.js для серверной логики.\n","type":"unstyled","key":"ag4gi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\nШаг 1: Настройка среды","type":"header-three","key":"2ffgh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\nСоздание проекта:\n\nДля начала нужно установить Node.js и npm. Убедитесь, что у вас установлена последняя версия Node.js.\nВ корневой директории создайте новую папку для проекта и инициализируйте его с помощью npm:\n\n\nmkdir mern-blog\ncd mern-blog\nnpm init -y\nУстановка необходимых зависимостей: Установим основные пакеты для бэкенда:\n\n\n\nnpm install express mongoose cors dotenv\nДополнительно установим nodemon для автоматического перезапуска сервера при изменениях в коде:\n\n\n\nnpm install --save-dev nodemon\nСоздание структуры папок: Структура нашего проекта будет выглядеть следующим образом:\n\nmern-blog/\n├── backend/ // Бэкенд приложение\n│ ├── models/ // Модели MongoDB\n│ ├── routes/ // API маршруты\n│ ├── .env // Конфигурационные переменные\n│ ├── server.js // Основной серверный файл\n└── frontend/ // React-приложение\n ├── src/ // Исходники React\n └── public/ // Публичные файлы","type":"unstyled","key":"ftndm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\nШаг 2: Настройка бэкенда","type":"header-three","key":"9lu6l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":342,"style":"BOLD"},{"length":24,"offset":720,"style":"BOLD"},{"length":18,"offset":1507,"style":"BOLD"},{"length":110,"offset":744,"style":"ITALIC"},{"length":181,"offset":881,"style":"ITALIC"},{"length":288,"offset":1089,"style":"ITALIC"},{"length":24,"offset":1379,"style":"ITALIC"},{"length":243,"offset":1527,"style":"ITALIC"},{"length":347,"offset":1771,"style":"ITALIC"},{"length":53,"offset":2254,"style":"ITALIC"}],"text":"\n1. Конфигурация MongoDB\nДля подключения к MongoDB используйте сервис MongoDB Atlas или локальную установку MongoDB. Создайте файл .env в папке backend и добавьте строку подключения:\n\nMONGO_URI=mongodb+srv://:@cluster.mongodb.net/myBlogDB?retryWrites=true&w=majority\n2. Модели и маршруты\nСоздадим модель для поста блога.\n\nbackend/models/Post.js:\n\njavascript\n\nconst mongoose = require('mongoose');\n\nconst postSchema = new mongoose.Schema({\n title: {\n type: String,\n required: true,\n },\n content: {\n type: String,\n required: true,\n },\n createdAt: {\n type: Date,\n default: Date.now,\n },\n});\n\nmodule.exports = mongoose.model('Post', postSchema);\nТеперь добавим маршруты для API.\n\nbackend/routes/posts.js:\n\nconst express = require('express');\nconst Post = require('../models/Post');\nconst router = express.Router();\n\n// Получение всех постов\nrouter.get('/', async (req, res) => {\n try {\n const posts = await Post.find();\n res.json(posts);\n } catch (err) {\n res.status(500).json({ message: err.message });\n }\n});\n\n// Создание нового поста\nrouter.post('/', async (req, res) => {\n const post = new Post({\n title: req.body.title,\n content: req.body.content,\n });\n try {\n const newPost = await post.save();\n res.status(201).json(newPost);\n } catch (err) {\n res.status(400).json({ message: err.message });\n }\n});\n\nmodule.exports = router;\n3. Настройка сервера\nСоздадим основной файл сервера, который будет запускать наше Express-приложение.\n\nbackend/server.js:\n\n\nconst express = require('express');\nconst mongoose = require('mongoose');\nconst cors = require('cors');\nconst dotenv = require('dotenv');\nconst postsRouter = require('./routes/posts');\n\ndotenv.config();\nconst app = express();\napp.use(cors());\napp.use(express.json());\n\nmongoose.connect(process.env.MONGO_URI, {\n useNewUrlParser: true,\n useUnifiedTopology: true,\n});\n\nconst db = mongoose.connection;\ndb.on('error', (error) => console.error(error));\ndb.once('open', () => console.log('Подключено к базе данных'));\n\napp.use('/api/posts', postsRouter);\n\nconst PORT = process.env.PORT || 5000;\napp.listen(PORT, () => console.log(`Сервер запущен на порту ${PORT}`));\nДля удобства работы с сервером, добавим скрипт в package.json:\n\"scripts\": {\n \"start\": \"nodemon backend/server.js\"\n}\nТеперь можно запустить сервер:","type":"unstyled","key":"bnbpm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":1,"style":"BOLD"}],"text":"\nnpm start","type":"unstyled","key":"9bq4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\nШаг 3: Настройка фронтенда","type":"header-three","key":"9mdoo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":220,"style":"ITALIC"},{"length":262,"offset":386,"style":"ITALIC"},{"length":212,"offset":650,"style":"ITALIC"},{"length":24,"offset":864,"style":"ITALIC"},{"length":37,"offset":347,"style":"BOLD"}],"text":"\nСоздание React-приложения: В папке mern-blog создайте React-приложение с помощью команды create-react-app:\n\nnpx create-react-app frontend\nУстановка Axios: Для взаимодействия с API на стороне фронтенда установим axios:\n\ncd frontend\nnpm install axios\nСоздание компонентов: Добавим компоненты для отображения списка постов и создания нового поста.\n\nfrontend/src/components/PostList.js:\n\n\nimport React, { useEffect, useState } from 'react';\nimport axios from 'axios';\n\nfunction PostList() {\n const [posts, setPosts] = useState([]);\n\n useEffect(() => {\n axios.get('/api/posts').then((response) => {\n setPosts(response.data);\n });\n }, []);\n\n return (\n

Посты блога

\n {posts.map((post) => (\n

{post.title}

{post.content}

\n ))}\n

\n );\n}\n\nexport default PostList;","type":"unstyled","key":"13ms8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":1,"style":"BOLD"},{"length":463,"offset":39,"style":"ITALIC"},{"length":394,"offset":504,"style":"ITALIC"},{"length":24,"offset":900,"style":"ITALIC"}],"text":"\nfrontend/src/components/PostForm.js:\n\nimport React, { useState } from 'react';\nimport axios from 'axios';\n\nfunction PostForm() {\n const [title, setTitle] = useState('');\n const [content, setContent] = useState('');\n\n const handleSubmit = (e) => {\n e.preventDefault();\n axios\n .post('/api/posts', { title, content })\n .then(() => {\n setTitle('');\n setContent('');\n })\n .catch((error) => {\n console.error('Ошибка создания поста:', error);\n });\n };\n\n return (\n

\n setTitle(e.target.value)}\n />\n setContent(e.target.value)}\n />\n \n \n );\n}\n\nexport default PostForm;","type":"unstyled","key":"92uci"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\nИнтеграция компонентов в приложение:","type":"unstyled","key":"ffkv2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":1,"style":"BOLD"},{"length":231,"offset":21,"style":"ITALIC"},{"length":19,"offset":254,"style":"ITALIC"}],"text":"\nfrontend/src/App.js:\n\nimport React from 'react';\nimport PostList from './components/PostList';\nimport PostForm from './components/PostForm';\n\nfunction App() {\n return (\n

\n \n \n

\n );\n}\n\nexport default App;","type":"unstyled","key":"1j0e9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":80,"style":"ITALIC"},{"length":34,"offset":228,"style":"ITALIC"}],"text":"\nЗапуск фронтенда: В терминале выполните команду для запуска React-приложения:\n\nnpm start\nШаг 4: Настройка прокси для API\nДля того чтобы запросы с фронтенда перенаправлялись на сервер, добавьте в frontend/package.json следующее:\n\n\"proxy\": \"http://localhost:5000\"","type":"unstyled","key":"9nt40"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\nТеперь при запросах на /api/posts React-приложение будет обращаться к нашему серверу.\n","type":"unstyled","key":"fs4o6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\nЗаключение","type":"header-three","key":"2ku4d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\nМы создали базовый блог с помощью стека MERN, где пользователи могут просматривать и добавлять посты. Этот проект является отличной основой для дальнейшего развития и добавления новых функций, таких как авторизация, редактирование постов и комментарии.","type":"unstyled","key":"e0aak"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"jbJ8xHP5LkF6qMaQ3UNT"}],"entityMap":{}},"mentions":[]}