手把手教你！全栈Blog应用实战：从零搭建到本地部署

友友们，大家好呀。今天我给大家带来的是花费不少时间带来的一篇实战文章。手把手教大家，搭建自己的Blog（博客）应用。我将从项目获取、环境搭建、后端初始化、数据库交互直至前端展示，写出实战的完整流程。当然了，期间，我也会加入一些碰到的常见且棘手的问题，比如前端静态资源加载异常等等一些问题，提供从“简单处理”到“长效优化”的解决方案。希望大家有所收获，多多点赞哦。下面正式开始吧。

一、所需技术栈介绍及模块划分

前端:

1. HTML5, CSS3, 原生JavaScript (ES6+)
2. Axios (用于与后端通信)
3. http-server (用于本地开发)
4. Vite + TailwindCSS

前端的这些相信大家都不陌生。就不多介绍了

后端:

1. Node.js
2. Express.js (作为Web框架)
3. Mongoose (MongoDB的ODM库)
4. dotenv (管理环境变量)
5. cors (处理跨域资源共享)

数据库:

1. MongoDB

数据库，另一个版本是mysql的，这篇就先用MongoDB。

系统模块划分

1. 用户模块：注册/登录/个人信息管理
2. 文章模块：CRUD操作+分类标签
3. 评论模块：文章评论功能
4. 公共模块：分页/搜索/错误处理

二、安装，配置并启动后端服务

1. 安装

1. Node.js: 下载地址(建议使用LTS版本)
2. MongoDB: 确保服务已安装并正在运行。
3. 数据库管理工具 (推荐): Robo 3T, MongoDB Compass。本文以Robo 3T为例。
4. 代码编辑器: Visual Studio Code (推荐)

2.数据库与环境配置

首先，我们需要配置后端应用与数据库的连接。

进入后端目录:cd backend

创建环境变量文件: 项目中提供了一个.env.example文件作为模板。我们复制它并重命名为.env。

编辑.env文件: 打开.env文件，填入MongoDB数据库信息。

# .env
DB_URI=mongodb://localhost:27017/blogapp
PORT=5000

3.安装依赖并启动服务

# 在backend目录下运行
npm install
# 在backend目录下运行
npm start

三、数据库的创建与交互

数据是应用的命脉。我们在后端启动后，需要确保数据库和集合都已就绪。

1. 创建数据库

后端应用需要一个名为blogapp的数据库。您可以使用Robo 3T或命令行创建它。 使用Robo 3T:

1. 打开Robo 3T并连接到您的本地MongoDB服务器。
2. 右键点击“Databases”，选择“Add Database”。
3. 输入数据库名blogapp，点击“OK”。

2. 自动化的集合创建

这个项目的后端代码非常智能，它会在启动时自动检查所需的集合是否存在，如果不存在，则会自动创建。您无需手动创建集合结构。

3. 查看数据库信息

当您在前端发布了几篇博客后，有多种方法可以查看数据库中的信息。 方法一：使用Robo 3T图形界面（推荐）

1. 打开Robo 3T并连接到您的本地MongoDB服务器。
2. 在左侧的数据库列表中，找到并双击打开blogapp数据库。
3. 展开blogapp数据库，您会看到一个名为“Collections”的分类。
4. 双击posts集合。
5. 之后，您应该能在一个表格中看到刚刚发布的博客记录。

方法二：使用MongoDB命令行 如果您更习惯使用命令行，可以按照以下步骤操作：

四、前端应用

1. 初始化项目

npm create vite@latest blog-frontend -- --template react-ts
cd blog-frontend
npm install react-router-dom axios react-query @heroicons/react tailwindcss
npm install --save-dev @types/react-router-dom
npx tailwindcss init -p

2.配置TailwindCSS (tailwind.config.js)

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

3.项目结构

src/
├── components/       # 可复用组件
├── context/          # 状态管理
├── hooks/            # 自定义hook
├── pages/            # 页面组件
├── services/         # API服务
├── types/            # 类型定义
├── App.tsx           # 主应用
└── main.tsx          # 入口文件

4.路由配置 (App.tsx)

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import Home from './pages/Home';
import Register from './pages/Register';
import Login from './pages/Login';
import Dashboard from './pages/Dashboard';

const App: React.FC = () => {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/register" element={<Register />} />
        <Route path="/login" element={<Login />} />
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </Router>
  );
};

export default App;

API和用户组件的相关代码先贴了，有点多（“——”）

5. 前端启动

1. 创建.env文件（可选，用于生产环境配置）
2. 启动前端服务：

cd blog-frontend
npm run dev

6. 访问应用

打开浏览器访问 http://localhost:3000，你将看到博客应用界面

五、常见问题

“静态资源加载失败”的错误?

根本原因:

1. 协议不同: 浏览器将file://协议和后端服务所在的http://协议视为不同的“源”(Origin)。
2. 安全策略: 出于安全考虑，浏览器默认禁止跨源的资源加载。
3. 代码逻辑错误: 我们项目index.html中的某些静态资源引用可能依赖于localhost，导致在file://协议下无法正确加载。

解决方案:

1.可以修改静态资源的引用路径，使其在file://协议下也能工作

2.前端和后端都通过http协议提供服务，它们属于不同的端口，但后端配置了cors中间件，允许来自任何源的请求。

其他问题：

1. CORS问题：确保后端配置了正确的CORS中间件
2. JWT验证：创建中间件验证请求中的token
3. MongoDB连接：检查连接字符串和网络访问权限
4. TypeScript类型错误：确保所有接口和类型定义完整