全栈Todo应用实战：从零到一的本地部署与深度解析

全栈Todo应用实战：从零到一的本地部署与深度解析

📖 前言

在现代Web开发中，全栈应用已成为主流。本文将以一个经典的Todo（待办事项）应用为例，详细记录从项目下载、环境配置、后端启动、数据库交互到前端运行的完整流程。我们将深入探讨在此过程中遇到的一个典型问题——CORS与API请求失败，并提供从“快速修复”到“最佳实践”的解决方案。这不仅是一份操作指南，更是一次宝贵的实战经验总结。

你将从本博客中学到：

• 如何配置并运行一个基于Node.js和MySQL的全栈项目。
• 如何使用Navicat或命令行工具管理和查看数据库。
• 理解并解决因file:///协议导致的前后端通信失败问题。
• 掌握使用live-server等工具启动前端开发服务器的正确姿势。
• 一个完整的本地开发工作流。

---

🚀 技术栈概览

• 前端:
  • HTML5, CSS3, 原生JavaScript (ES6+)
  • Fetch API (用于与后端通信)
  • Live-server (用于本地开发)
• 后端:
  • Node.js
  • Express.js (作为Web框架)
  • mysql2 (高性能MySQL驱动)
  • dotenv (管理环境变量)
  • cors (处理跨域资源共享)
• 数据库:
  • MySQL

---

🛠️ 环境准备

在开始之前，请确保您的开发环境中已安装以下软件：

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

---

⚙️ 第一步：配置并启动后端服务

后端是整个应用的大脑，负责处理业务逻辑和数据存储。

1. 数据库与环境配置

首先，我们需要告诉后端应用如何连接到我们的数据库。

1. 进入后端目录: cd backend

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

3. 编辑.env文件: 打开.env文件，填入您的MySQL数据库信息。