Разработка блога с использованием MERN: Полное руководство
MERN — это популярный стек технологий для разработки полноценных веб-приложений, включающий четыре основных компонента:
MongoDB — база данных NoSQL для хранения данных;
Express.js — серверный фреймворк для создания API;
React.js — библиотека для разработки пользовательского интерфейса;
Node.js — среда выполнения JavaScript на сервере.
В этом руководстве мы разработаем простое приложение блога, где пользователи смогут просматривать и добавлять посты. Приложение будет включать фронтенд на React, бэкенд на Express и базу данных MongoDB для хранения постов блога. Также будет использован Node.js для серверной логики.
Шаг 1: Настройка среды
Создание проекта:
Для начала нужно установить Node.js и npm. Убедитесь, что у вас установлена последняя версия Node.js.
В корневой директории создайте новую папку для проекта и инициализируйте его с помощью npm:
mkdir mern-blog
cd mern-blog
npm init -y
Установка необходимых зависимостей: Установим основные пакеты для бэкенда:
npm install express mongoose cors dotenv
Дополнительно установим nodemon для автоматического перезапуска сервера при изменениях в коде:
npm install --save-dev nodemon
Создание структуры папок: Структура нашего проекта будет выглядеть следующим образом:
mern-blog/
├── backend/ // Бэкенд приложение
│ ├── models/ // Модели MongoDB
│ ├── routes/ // API маршруты
│ ├── .env // Конфигурационные переменные
│ ├── server.js // Основной серверный файл
└── frontend/ // React-приложение
├── src/ // Исходники React
└── public/ // Публичные файлы
Шаг 2: Настройка бэкенда
1. Конфигурация MongoDB
Для подключения к MongoDB используйте сервис MongoDB Atlas или локальную установку MongoDB. Создайте файл .env в папке backend и добавьте строку подключения:
MONGO_URI=mongodb+srv://<username>:<password>@cluster.mongodb.net/myBlogDB?retryWrites=true&w=majority
2. Модели и маршруты
Создадим модель для поста блога.
backend/models/Post.js:
javascript
const mongoose = require('mongoose');
const postSchema = new mongoose.Schema({
title: {
type: String,
required: true,
},
content: {
type: String,
required: true,
},
createdAt: {
type: Date,
default: Date.now,
},
});
module.exports = mongoose.model('Post', postSchema);
Теперь добавим маршруты для API.
backend/routes/posts.js:
const express = require('express');
const Post = require('../models/Post');
const router = express.Router();
// Получение всех постов
router.get('/', async (req, res) => {
try {
const posts = await Post.find();
res.json(posts);
} catch (err) {
res.status(500).json({ message: err.message });
}
});
// Создание нового поста
router.post('/', async (req, res) => {
const post = new Post({
title: req.body.title,
content: req.body.content,
});
try {
const newPost = await post.save();
res.status(201).json(newPost);
} catch (err) {
res.status(400).json({ message: err.message });
}
});
module.exports = router;
3. Настройка сервера
Создадим основной файл сервера, который будет запускать наше Express-приложение.
backend/server.js:
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const dotenv = require('dotenv');
const postsRouter = require('./routes/posts');
dotenv.config();
const app = express();
app.use(cors());
app.use(express.json());
mongoose.connect(process.env.MONGO_URI, {
useNewUrlParser: true,
useUnifiedTopology: true,
});
const db = mongoose.connection;
db.on('error', (error) => console.error(error));
db.once('open', () => console.log('Подключено к базе данных'));
app.use('/api/posts', postsRouter);
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Сервер запущен на порту ${PORT}`));
Для удобства работы с сервером, добавим скрипт в package.json:
"scripts": {
"start": "nodemon backend/server.js"
}
Теперь можно запустить сервер:
npm start
Шаг 3: Настройка фронтенда
Создание React-приложения: В папке mern-blog создайте React-приложение с помощью команды create-react-app:
npx create-react-app frontend
Установка Axios: Для взаимодействия с API на стороне фронтенда установим axios:
cd frontend
npm install axios
Создание компонентов: Добавим компоненты для отображения списка постов и создания нового поста.
frontend/src/components/PostList.js:
import React, { useEffect, useState } from 'react';
import axios from 'axios';
function PostList() {
const [posts, setPosts] = useState([]);
useEffect(() => {
axios.get('/api/posts').then((response) => {
setPosts(response.data);
});
}, []);
return (
<div>
<h1>Посты блога</h1>
{posts.map((post) => (
<div key={post._id}>
<h2>{post.title}</h2>
<p>{post.content}</p>
</div>
))}
</div>
);
}
export default PostList;
frontend/src/components/PostForm.js:
import React, { useState } from 'react';
import axios from 'axios';
function PostForm() {
const [title, setTitle] = useState('');
const [content, setContent] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
axios
.post('/api/posts', { title, content })
.then(() => {
setTitle('');
setContent('');
})
.catch((error) => {
console.error('Ошибка создания поста:', error);
});
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Заголовок"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
<textarea
placeholder="Контент"
value={content}
onChange={(e) => setContent(e.target.value)}
/>
<button type="submit">Добавить пост</button>
</form>
);
}
export default PostForm;
Интеграция компонентов в приложение:
frontend/src/App.js:
import React from 'react';
import PostList from './components/PostList';
import PostForm from './components/PostForm';
function App() {
return (
<div className="App">
<PostForm />
<PostList />
</div>
);
}
export default App;
Запуск фронтенда: В терминале выполните команду для запуска React-приложения:
npm start
Шаг 4: Настройка прокси для API
Для того чтобы запросы с фронтенда перенаправлялись на сервер, добавьте в frontend/package.json следующее:
"proxy": "http://localhost:5000"
Теперь при запросах на /api/posts React-приложение будет обращаться к нашему серверу.
Заключение
Мы создали базовый блог с помощью стека MERN, где пользователи могут просматривать и добавлять посты. Этот проект является отличной основой для дальнейшего развития и добавления новых функций, таких как авторизация, редактирование постов и комментарии.