Первый Fullstack проект: создание простого блога. Пошаговое руководство.

Первый Fullstack проект

Первый Fullstack проект: создание простого блога. Пошаговое руководство.

Теория — это хорошо, но ничто не сравнится с практикой! В этой статье мы создадим простой блог, используя MERN stack. Это пошаговое руководство проведет вас через все этапы разработки, от настройки backend до создания frontend интерфейса. Приготовьтесь испачкать руки кодом!

Шаг 1: Настройка backend (Express.js и MongoDB)

1. Установка зависимостей:

content_copy Use code with caution.Bashnpm init -y
npm install express mongoose cors body-parser

1. Создание сервера:

content_copy Use code with caution.JavaScriptconst express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const bodyParser = require('body-parser');

const app = express();
const port = 5000;

app.use(cors());
app.use(bodyParser.json());

// Подключение к MongoDB mongoose.connect('mongodb://localhost:27017/myblog', { useNewUrlParser: true, useUnifiedTopology: true })
.then(() => console.log('Подключено к MongoDB'))
.catch(err => console.error('Ошибка подключения к MongoDB:', err));

// Модель для поста const PostSchema = new mongoose.Schema({
title: String,
content: String });
const Post = mongoose.model('Post', PostSchema);

// API endpoint для получения всех постов app.get('/api/posts', async (req, res) => {
try {
const posts = await Post.find();
res.json(posts);
} catch (err) {
res.status(500).json({ message: err.message });
}
});

// API endpoint для создания нового поста app.post('/api/posts', 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 });
}
});


app.listen(port, () => console.log(`Сервер запущен на порту ${port}`));

Шаг 2: Создание frontend (React)

1. Установка зависимостей:

content_copy Use code with caution.Bashnpx create-react-app client
cd client
npm install axios

1. Создание компонента для отображения постов:

content_copy Use code with caution.JavaScriptimport React, { useState, useEffect } from 'react';
import axios from 'axios';

function PostList() {
const [posts, setPosts] = useState([]);

useEffect(() => {
axios.get('/api/posts')
.then(res => setPosts(res.data))
.catch(err => console.error(err));
}, []);

return (
<div>
{posts.map(post => (
<div key={post._id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
))}
</div>
);
}

export default PostList;

1. Создание компонента для создания нового поста: (аналогично, используя axios.post)
2. Интеграция компонентов в приложение:

content_copy Use code with caution.JavaScript// ... в App.js import PostList from './PostList';
// ...
function App() {
return (
<div className="App">
<PostList />
{/* ... другие компоненты */}
</div>
);
}

Шаг 3: Запуск приложения

1. Запустите backend сервер: node server.js (или как вы назвали ваш серверный файл)
2. В другой консоли, в папке client, запустите frontend: npm start

Дополнительные шаги и улучшения:

• Валидация данных: Добавьте валидацию данных на frontend и backend.
• Аутентификация: Реализуйте аутентификацию пользователей.
• Стилизация: Используйте CSS фреймворк (например, Bootstrap или Material UI) для стилизации блога.
• Развертывание: Разверните ваше приложение на Heroku, Netlify или другой платформе.

Это упрощенный пример, но он демонстрирует основные принципы создания fullstack приложения с помощью MERN. Теперь у вас есть основа, которую можно расширять и улучшать. Экспериментируйте, добавляйте новые функции и создавайте свой уникальный блог!