مرحله 1: تنظیم محیط
اولین قدم، راه اندازی محیط توسعه است. شما باید Node.js، MongoDB و Express.js را نصب کنید. Node.js را می توانید از وب سایت رسمی و MongoDB را از وب سایت MongoDB دانلود کنید. Express.js را می توان با استفاده از مدیریت بسته npm نصب کرد. هنگامی که تمام اجزای لازم را نصب کردید، می توانید یک پوشه پروژه جدید ایجاد کنید و شروع به کار در وبلاگ خود کنید.
مرحله 2: ایجاد پایگاه داده
مرحله دوم ایجاد پایگاه داده است. شما باید سرور MongoDB را راه اندازی کنید و یک پایگاه داده جدید برای وبلاگ خود ایجاد کنید. می توانید این کار را با باز کردن یک پنجره ترمینال جدید و تایپ دستور زیر انجام دهید:
mongosh
use blog
با این کار یک پایگاه داده جدید به نام “blog” ایجاد می شود و به آن سوئیچ می شود. اکنون می توانید با استفاده از دستور زیر یک مجموعه جدید برای پست های وبلاگ خود ایجاد کنید:
db.createCollection('posts')
مرحله 3: راه اندازی Backend
مرحله سوم این است که پشتیبان وبلاگ خود را راه اندازی کنید. می توانید این کار را با ایجاد یک فایل جدید به نام “server.js” در پوشه پروژه خود انجام دهید. در این فایل، باید ماژول های لازم را وارد کرده و یک اپلیکیشن Express.js جدید ایجاد کنید. می توانید از کد زیر به عنوان نقطه شروع استفاده کنید:
const express = require('express');
const bodyParser = require('body-parser');
const MongoClient = require('mongodb').MongoClient;
const app = express();
const port = 3000;
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
MongoClient.connect('mongodb://localhost:27017/blog', (err, client) => {
if (err) throw err;
console.log('Connected to MongoDB');
const db = client.db('blog');
// Add routes here
app.listen(port, () => {
console.log(`Server listening on port ${port}`);
});
});
این کد یک برنامه Express.js را راه اندازی می کند و به پایگاه داده MongoDB متصل می شود. شما باید مسیرهایی را به برنامه اضافه کنید تا به درخواست‌های ظاهری رسیدگی کنید.
مرحله 4: اضافه کردن مسیرها
مرحله چهارم اضافه کردن مسیرها به برنامه است. می توانید یک فایل جدید به نام “routes.js” در پوشه پروژه خود ایجاد کنید و کد زیر را اضافه کنید:
const express = require('express');
const router = express.Router();
const MongoClient = require('mongodb').MongoClient;
router.get('/posts', (req, res) => {
const db = req.app.locals.db;
db.collection('posts').find().toArray((err, result) => {
if (err) throw err;
res.send(result);
});
});
router.post('/posts', (req, res) => {
const db = req.app.locals.db;
const post = {
title: req.body.title,
content: req.body.content,
};
db.collection('posts').insertOne(post, (err, result) => {
if (err) throw err;
res.send(result.ops[0]);
});
});
module.exports = router;
این کد دو مسیر را تعیین می کند: یکی برای دریافت همه پست های وبلاگ و دیگری برای ایجاد یک پست وبلاگ جدید. این مسیرها از درایور MongoDB برای تعامل با پایگاه داده استفاده می کنند.
مرحله 5: راه اندازی Frontend
گام آخر این است که صفحه اصلی وبلاگ خود را راه اندازی کنید. می توانید یک فایل HTML جدید به نام “index.html” در پوشه پروژه خود ایجاد کنید و کد زیر را اضافه کنید:
<!DOCTYPE html>
<html>
<head>
<title>My Blog</title>
</head>
<body>
<h1>My Blog</h1>
<form id="postForm">
<label for="title">Title:</label>
<input type="text" id="title" name="title">
<label for="content">Content:</label>
<textarea id="content" name="content"></textarea>
<button type="submit">Create Post</button>
</form>
<ul id="postsList"></ul>
<script>
const form = document.getElementById('postForm');
form.addEventListener('submit', event => {
event.preventDefault();
const title = document.getElementById('title').value;
const content = document.getElementById('content').value;
fetch('/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ title, content })
})
.then(response => response.json())
.then(post => {
const postsList = document.getElementById('postsList');
const li = document.createElement('li');
li.textContent = `${post.title}: ${post.content}`;
postsList.appendChild(li);
});
});
fetch('/posts')
.then(response => response.json())
.then(posts => {
const postsList = document.getElementById('postsList');
posts.forEach(post => {
const li = document.createElement('li');
li.textContent = `${post.title}: ${post.content}`;
postsList.appendChild(li);
});
});
</script>
</body>
</html>
این کد یک فرم HTML را برای ایجاد پست های وبلاگ جدید تنظیم می کند و همه پست های صفحه را نمایش می دهد. این فرم از fetch API برای ایجاد یک درخواست POST به API backend و درخواست GET برای دریافت همه پست ها و نمایش آنها در صفحه استفاده می کند.
خودشه! با این پنج مرحله ساده، می توانید با استفاده از MongoDB، Express.js و Node.js یک وبلاگ پایه ایجاد کنید. البته، این فقط یک نقطه شروع است و شما می توانید این وبلاگ را مطابق با نیاز خود سفارشی و گسترش دهید.
