帮助你简易起步一个BLOG（博客搭建）项目

Blog项目

后端
- 项目结构
- 1. 项目初始化
- 2. 详细步骤
- 3.postman测试
前端
- 1. 项目初始化
- 2. 详细步骤

本章节是为了帮助你起步一个完整的前后端分离项目。
前端技术栈： react、vite、mantine、tailwind CSS、zustand、rxjs、threejs

后端技术栈：nodemon、nodejs、vite

后端

项目结构

blog-backend/
│
├── server/
│   ├── index.js
│   └── routes/
│       └── posts.js
├── package.json
└── vite.config.js

1. 项目初始化

创建项目文件夹并初始化 Node.js 项目。
安装必要的依赖项。

2. 详细步骤

创建项目文件夹并初始化 Node.js 项目

mkdir blog-backend
cd blog-backend
npm init -y

安装必要的依赖项
安装 Express.js 作为我们的 web 框架，安装 Nodemon 作为开发依赖，用于监控文件变化并自动重启服务器。

npm install express
npm install --save-dev nodemon

创建 Express.js 服务器
在 server 文件夹中创建 index.js 入口文件。

// server/index.js
const express = require('express');
const path = require('path');
const postsRouter = require('./routes/posts');const app = express();
const PORT = process.env.PORT || 3000;// 中间件
app.use(express.json());
app.use(express.urlencoded({ extended: true }));// 路由
app.use('/api/posts', postsRouter);// 启动服务器
app.listen(PORT, () => {console.log(`Server is running on http://localhost:${PORT}`);
});

创建路由文件
在 server/routes 文件夹中创建 posts.js 路由文件。

// server/routes/posts.js
const express = require('express');
const router = express.Router();// 模拟的博客帖子数据
let posts = [{ id: 1, title: 'First Post', content: 'This is the first post.' },{ id: 2, title: 'Second Post', content: 'This is the second post.' }
];// 获取所有博客帖子
router.get('/', (req, res) => {res.json(posts);
});// 获取单个博客帖子
router.get('/:id', (req, res) => {const post = posts.find(p => p.id === parseInt(req.params.id));if (post) {res.json(post);} else {res.status(404).json({ message: 'Post not found' });}
});// 创建新的博客帖子
router.post('/', (req, res) => {const newPost = {id: posts.length + 1,title: req.body.title,content: req.body.content};posts.push(newPost);res.status(201).json(newPost);
});// 更新博客帖子
router.put('/:id', (req, res) => {const post = posts.find(p => p.id === parseInt(req.params.id));if (post) {post.title = req.body.title || post.title;post.content = req.body.content || post.content;res.json(post);} else {res.status(404).json({ message: 'Post not found' });}
});// 删除博客帖子
router.delete('/:id', (req, res) => {posts = posts.filter(p => p.id !== parseInt(req.params.id));res.status(204).end();
});module.exports = router;

更新 package.json 脚本
在 package.json 中更新脚本，以便在开发过程中使用 Nodemon 监控文件变化。

{"name": "blog-backend","version": "1.0.0","description": "A blog backend using Node.js and Express.js","main": "server/index.js","scripts": {"start": "node server/index.js","dev": "nodemon server/index.js"},"dependencies": {"express": "^4.17.1"},"devDependencies": {"nodemon": "^2.0.7"}
}

运行项目
运行以下命令启动开发服务器：

npm run dev

通过以上步骤，我们已经创建了一个基本的博客后端项目，使用 Node.js 和 Express.js 提供 API 接口。这个后端支持获取、创建、更新和删除博客帖子。你可以在前端使用任何框架或工具与这个 API 进行交互。
a. 为这些 API 添加单元测试来验证其功能。
b. 增加用户认证和授权，以保护博客帖子数据。

3.postman测试

3.1 获取所有博客帖子

方法: GET
URL: http://localhost:3000/api/posts

点击 “Send” 按钮，你应该会看到类似下面的响应：

[{ "id": 1, "title": "First Post", "content": "This is the first post." },{ "id": 2, "title": "Second Post", "content": "This is the second post." }
]

3.2. 获取单个博客帖子

方法: GET
URL: http://localhost:3000/api/posts/1

点击 “Send” 按钮，你应该会看到类似下面的响应：

{ "id": 1, "title": "First Post", "content": "This is the first post." }

3.3. 创建新的博客帖子

方法: POST
URL: http://localhost:3000/api/posts

Body: 选择 raw 和 JSON，然后输入以下内容：

{"title": "New Post","content": "This is a new post."
}

点击 “Send” 按钮，你应该会看到类似下面的响应：

{"id": 3,"title": "New Post","content": "This is a new post."
}

3.4. 更新博客帖子

方法: PUT
URL: http://localhost:3000/api/posts/1

Body: 选择 raw 和 JSON，然后输入以下内容：

{"title": "Updated First Post","content": "This is the updated first post."
}

点击 “Send” 按钮，你应该会看到类似下面的响应：

{"id": 1,"title": "Updated First Post","content": "This is the updated first post."
}

3.5. 删除博客帖子

方法: DELETE
URL: http://localhost:3000/api/posts/1

点击 “Send” 按钮，你应该会看到类似下面的响应：

{}

你已经使用 Postman 成功地测试了这个博客 API 的所有基本功能，包括获取所有帖子、获取单个帖子、创建新帖子、更新帖子和删除帖子。

a. 在 API 请求中添加身份验证以保护博客内容。

b. 为 API 添加更多的功能，例如评论功能或者用户管理功能

前端

1. 项目初始化

创建一个新的 Vite 项目并选择 React 作为框架。
安装必要的依赖项。

2. 详细步骤

创建项目文件夹并初始化 Vite 项目
首先，创建项目文件夹并初始化 Vite 项目：

mkdir blog-frontend
cd blog-frontend
npm init vite@latest

选择 react 作为模板：

# Project name: blog-frontend
# Select a framework: react
# Select a variant: react

然后安装项目依赖：

cd blog-frontend
npm install

安装必要的依赖项
安装 Mantine、Tailwind CSS、Zustand、RxJS 和 Three.js：

npm install @mantine/core @mantine/hooks @emotion/react @emotion/styled zustand rxjs three
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm install react-router-dom

配置 Tailwind CSS
编辑 tailwind.config.js 文件以包含所有文件：

/** @type {import('tailwindcss').Config} */
export default {content: ["./index.html","./src/**/*.{js,ts,jsx,tsx}",],theme: {extend: {},},plugins: [],
}

在 src 文件夹中创建 index.css 文件，并添加 Tailwind 的基本样式：

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

确保在 main.jsx 中导入 index.css 文件：

// src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);

创建主要组件和结构
在 src 文件夹中创建以下文件和文件夹结构：

src/
├── components/
│   ├── Header.jsx
│   ├── PostList.jsx
│   └── Post.jsx
├── hooks/
│   └── usePosts.js
├── pages/
│   ├── Home.jsx
│   └── PostDetail.jsx
├── App.jsx
└── main.jsx

App.jsx：

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { MantineProvider } from '@mantine/core';
import Home from './pages/Home';
import PostDetail from './pages/PostDetail';
import Header from './components/Header';function App() {return (<MantineProvider withGlobalStyles withNormalizeCSS><Router><Header /><Routes><Route path="/" element={<Home />} /><Route path="/post/:id" element={<PostDetail />} /></Routes></Router></MantineProvider>);
}export default App;

Header.jsx：

import React from 'react';
import { Link } from 'react-router-dom';function Header() {return (<header className="bg-blue-600 p-4 text-white"><nav className="container mx-auto"><Link to="/" className="text-lg font-bold">My Blog</Link></nav></header>);
}export default Header;

Home.jsx：

import React from 'react';
import PostList from '../components/PostList';function Home() {return (<div className="container mx-auto p-4"><h1 className="text-3xl font-bold mb-4">Blog Posts</h1><PostList /></div>);
}export default Home;

PostDetail.jsx：

import React from 'react';
import { useParams } from 'react-router-dom';function PostDetail() {const { id } = useParams();// Fetch post detail using idreturn (<div className="container mx-auto p-4"><h1 className="text-3xl font-bold mb-4">Post Detail</h1>{/* Render post detail here */}</div>);
}export default PostDetail;

PostList.jsx：

import React from 'react';
import { Link } from 'react-router-dom';
import usePosts from '../hooks/usePosts';function PostList() {const posts = usePosts();return (<div>{posts.map(post => (<div key={post.id} className="mb-4 p-4 border rounded"><h2 className="text-2xl font-bold"><Link to={`/post/${post.id}`}>{post.title}</Link></h2><p>{post.content}</p></div>))}</div>);
}export default PostList;

usePosts.js：

import { useEffect, useState } from 'react';function usePosts() {const [posts, setPosts] = useState([]);useEffect(() => {fetch('/api/posts').then(response => response.json()).then(data => setPosts(data));}, []);return posts;
}export default usePosts;

配置 Vite 代理
在 vite.config.js 文件中配置代理，以将 API 请求转发到后端服务器：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';export default defineConfig({plugins: [react()],server: {proxy: {'/api': 'http://localhost:3000'}}
});