Navicat操作指南：MySQL数据库配置与Todo应用部署

Navicat操作指南：MySQL数据库配置与Todo应用部署

📖 前言

本文档详细记录了使用Navicat管理MySQL数据库，并配置Todo应用的完整操作步骤。适用于使用Navicat作为MySQL管理工具的开发者。

🎯 操作目标

• 启动MySQL服务
• 使用Navicat连接MySQL数据库
• 创建todoapp数据库
• 配置Todo应用环境变量
• 验证应用正常运行

---

🚀 步骤一：启动MySQL服务

Windows用户

方法1：通过Windows服务管理器（推荐）

1. 打开服务管理器

   • 按 Win + R 打开运行对话框
   • 输入 services.msc 并按回车

2. 找到MySQL服务

   • 在服务列表中找到 “MySQL” 或 “MySQL80”
   • 服务名称可能因版本而异（如MySQL57、MySQL80等）

3. 启动服务

   • 如果服务状态不是"正在运行"
   • 右键点击服务名称 → 选择"启动"
   • 等待状态变为"正在运行"

方法2：通过命令行

1. 以管理员身份打开命令提示符

   • 按 Win + X → 选择"命令提示符(管理员)"
   • 或搜索"cmd" → 右键"以管理员身份运行"

2. 启动MySQL服务

   # 启动MySQL服务（服务名可能不同）
   net start mysql# 或者
   net start mysql80# 检查服务状态
   sc query mysql
   

方法3：通过XAMPP控制面板

如果你安装的是XAMPP：

1. 打开XAMPP控制面板
2. 在MySQL行点击 “Start” 按钮
3. 状态变为绿色表示启动成功

Mac用户

使用Homebrew安装的MySQL

# 启动MySQL服务
brew services start mysql# 检查MySQL服务状态
brew services list | grep mysql# 停止MySQL服务（如果需要）
brew services stop mysql

使用MySQL官方安装包

1. 打开"系统偏好设置"
2. 找到"MySQL"图标（在最下方）
3. 点击"Start MySQL Server"按钮
4. 等待状态变为"Running"

验证MySQL服务启动

通过命令行验证：

# 测试MySQL连接
mysql -u root -p# 如果能正常登录，说明服务启动成功
# 输入密码后应该看到MySQL提示符：mysql>

---

🔗 步骤二：使用Navicat连接MySQL

创建新的MySQL连接

1. 启动Navicat

   • 打开Navicat for MySQL软件

2. 创建新连接

   • 点击工具栏的"连接"按钮
   • 选择"MySQL"
   • 或者点击左上角"连接" → “MySQL”

3. 配置连接参数

   连接名：本地MySQL开发环境
   主机名或IP地址：localhost
   端口：3306
   用户名：root
   密码：[你安装MySQL时设置的密码]
   

4. 高级设置（可选）

   • 点击"高级"标签
   • 设置字符集：UTF-8 Unicode (utf8mb4)
   • 保持其他设置为默认值

测试数据库连接

1. 点击"测试连接"按钮

   • 如果显示"连接成功"，说明配置正确
   • 如果连接失败，检查以下几点：
     • MySQL服务是否已启动
     • 用户名和密码是否正确
     • 端口号是否正确（默认3306）

2. 常见连接问题及解决方案

   问题1：连接超时

   错误代码：2003
   Can't connect to MySQL server on 'localhost'
   

   解决方案：

   • 确认MySQL服务已启动
   • 检查防火墙设置
   • 确认端口3306未被其他程序占用

   问题2：访问拒绝

   错误代码：1045
   Access denied for user 'root'@'localhost'
   

   解决方案：

   • 确认用户名密码正确
   • 尝试重置MySQL root密码

3. 保存连接

   • 测试成功后，点击"确定"保存连接
   • 连接会出现在Navicat左侧的连接列表中

打开数据库连接

1. 双击连接名称

   • 在左侧连接列表中双击刚创建的连接
   • 状态栏显示"已连接"表示连接成功

2. 查看现有数据库

   • 展开连接节点
   • 可以看到MySQL系统自带的数据库：
     • information_schema
     • mysql
     • performance_schema
     • sys

---

🗄️ 步骤三：创建todoapp数据库

方法1：使用图形界面创建（推荐）

1. 右键点击连接名称

   • 在左侧连接树中右键点击连接
   • 选择"新建数据库"

2. 配置数据库信息

   数据库名：todoapp
   字符集：utf8mb4
   排序规则：utf8mb4_unicode_ci
   

3. 字符集说明

   • utf8mb4：支持完整的UTF-8字符集，包括emoji
   • utf8mb4_unicode_ci：不区分大小写的Unicode排序规则

4. 点击"确定"创建数据库

方法2：使用SQL命令创建

1. 新建查询

   • 双击连接打开数据库
   • 点击工具栏"查询" → “新建查询”
   • 或按快捷键 Ctrl + Q

2. 编写SQL命令

   -- 创建数据库
   CREATE DATABASE todoapp 
   CHARACTER SET utf8mb4 
   COLLATE utf8mb4_unicode_ci;-- 查看创建结果
   SHOW DATABASES;
   

3. 执行SQL命令

   • 点击"运行"按钮或按 F5
   • 查看执行结果，确认数据库创建成功

验证数据库创建

1. 刷新连接

   • 右键连接名称 → “刷新”
   • 或按 F5 刷新

2. 查看数据库列表

   • 展开连接节点
   • 应该能看到新创建的 todoapp 数据库

3. 进入数据库

   • 双击 todoapp 数据库
   • 此时该数据库下应该没有表（表文件夹为空）

---

⚙️ 步骤四：配置Todo应用环境变量

找到项目环境变量文件

1. 打开项目目录

   • 导航到 my-todo-app/backend/ 文件夹
   • 找到 .env 文件

2. 编辑.env文件
   使用任何文本编辑器（如VS Code、记事本）打开 .env 文件

配置数据库连接参数

更新 .env 文件内容：

# MySQL数据库配置
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=123456
DB_NAME=todoapp# 服务器配置
NODE_ENV=development
PORT=5000

参数说明

参数	说明	示例值
DB_HOST	数据库主机地址	localhost
DB_USER	数据库用户名	root
DB_PASSWORD	数据库密码	123456
DB_NAME	数据库名称	todoapp
NODE_ENV	运行环境	development
PORT	服务器端口	5000

安全提醒

⚠️ 重要提醒：

• .env 文件包含敏感信息，不要提交到版本控制系统
• 确保 .gitignore 文件中已包含 .env
• 生产环境使用强密码

---

🚀 步骤五：启动Todo应用

使用VS Code启动应用

1. 打开VS Code

   • 启动VS Code
   • File → Open Folder → 选择 my-todo-app 文件夹

2. 打开集成终端

   • 快捷键：Ctrl + ` (反引号)
   • 或菜单：Terminal → New Terminal

3. 安装依赖

   # 进入后端目录
   cd backend# 安装Node.js依赖
   npm install
   

4. 启动后端服务

   # 启动开发服务器
   npm start
   

验证启动成功

成功启动后应该看到以下输出：

✅ MySQL数据库连接成功
✅ todos表检查/创建完成
🚀 服务器运行在端口 5000
📝 API文档: http://localhost:5000/api/health
💾 数据库: MySQL

测试API接口

1. 测试健康检查接口

   • 打开浏览器访问：http://localhost:5000/api/health
   • 应该返回JSON格式的响应：

   {"success": true,"message": "服务器运行正常","database": "MySQL连接正常","timestamp": "2025-07-15T10:30:00.000Z"
   }
   

2. 测试获取待办事项接口

   • 访问：http://localhost:5000/api/todos
   • 应该返回空数组（初始状态）：

   {"success": true,"data": []
   }
   

---

🎨 步骤六：启动前端应用

运行前端界面

1. 找到前端文件

   • 导航到 my-todo-app/frontend/ 目录
   • 双击 index.html 文件

2. 在浏览器中打开

   • 文件会在默认浏览器中打开
   • 应该看到漂亮的Todo应用界面

测试完整功能

1. 测试添加待办事项

   • 在输入框中输入"学习全栈开发"
   • 点击"添加"按钮
   • 应该看到新增的待办事项

2. 在Navicat中查看数据

   • 回到Navicat
   • 右键 todoapp 数据库 → “刷新”
   • 展开"表"节点，应该看到自动创建的 todos 表
   • 双击 todos 表，查看数据记录

3. 测试其他功能

   • 勾选复选框测试完成状态
   • 点击删除按钮测试删除功能
   • 每次操作后在Navicat中查看数据变化

---

📊 步骤七：在Navicat中监控数据

查看表结构

1. 打开表设计器

   • 右键 todos 表 → “设计表”
   • 查看完整的表结构

2. 表结构详情

   CREATE TABLE `todos` (`id` int NOT NULL AUTO_INCREMENT,`text` varchar(255) NOT NULL,`completed` tinyint(1) NOT NULL DEFAULT '0',`created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,`updated_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,PRIMARY KEY (`id`)
   )
   

实时监控数据变化

1. 打开数据查看器

   • 双击 todos 表
   • 或右键 → “打开表”

2. 实时刷新数据

   • 在前端应用中进行操作
   • 在Navicat中点击"刷新"按钮（F5）
   • 观察数据的实时变化

使用SQL查询数据

1. 新建查询窗口

   • 选中 todoapp 数据库
   • 点击"查询" → “新建查询”

2. 常用查询语句

   -- 查看所有待办事项
   SELECT * FROM todos ORDER BY created_at DESC;-- 查看已完成的事项
   SELECT * FROM todos WHERE completed = 1;-- 查看待完成的事项
   SELECT * FROM todos WHERE completed = 0;-- 统计总数
   SELECT COUNT(*) as total,SUM(completed) as completed,COUNT(*) - SUM(completed) as pending
   FROM todos;
   

---

🔧 常见问题排查

问题1：MySQL服务启动失败

错误现象：

• Windows服务管理器中无法启动MySQL
• 命令行报错：服务无法启动

排查步骤：

1. 检查端口占用

   netstat -ano | findstr :3306
   

2. 检查MySQL配置文件

   • 找到 my.ini 或 my.cnf 文件
   • 检查配置是否正确

3. 查看错误日志

   • Windows: C:\ProgramData\MySQL\MySQL Server 8.0\Data\
   • 查看 .err 文件

问题2：Navicat连接失败

错误1：连接超时

2003 - Can't connect to MySQL server on 'localhost'

解决方案：

• 确认MySQL服务已启动
• 检查防火墙设置
• 尝试使用 127.0.0.1 代替 localhost

错误2：访问拒绝

1045 - Access denied for user 'root'@'localhost'

解决方案：

• 确认用户名密码正确
• 重置MySQL root密码

问题3：Node.js应用启动失败

错误1：模块未找到

Error: Cannot find module 'mysql2'

解决方案：

cd backend
npm install mysql2

错误2：数据库连接失败

❌ 数据库连接失败: ER_ACCESS_DENIED_ERROR

解决方案：

• 检查 .env 文件中的数据库配置
• 确认数据库用户权限
• 验证数据库名称是否正确

问题4：前端无法访问后端

错误现象：

• 前端显示"网络连接失败"
• 浏览器控制台显示CORS错误

解决方案：

1. 确认后端服务正在运行

   • 访问 http://localhost:5000/api/health

2. 检查防火墙设置

   • 确保5000端口未被阻止

3. 清除浏览器缓存

   • 按 Ctrl + Shift + R 强制刷新

---

📋 完整操作检查清单

启动前检查

• MySQL服务已启动
• Navicat能正常连接MySQL
• todoapp 数据库已创建
• .env 文件配置正确
• Node.js和npm已安装

运行时检查

• 后端服务启动成功（端口5000）
• 健康检查接口返回正常
• 前端页面能正常打开
• 数据库表自动创建成功
• 前后端数据交互正常

功能测试检查

• 能添加新的待办事项
• 能标记事项为完成/未完成
• 能删除待办事项
• Navicat中能看到数据变化
• 页面刷新后数据保持不变

---

🎯 总结

通过以上详细步骤，你已经成功：

1. ✅ 启动了MySQL服务
2. ✅ 使用Navicat连接并管理数据库
3. ✅ 创建了todoapp数据库
4. ✅ 配置了Todo应用环境变量
5. ✅ 启动了完整的全栈应用
6. ✅ 验证了前后端数据交互

现在你拥有了一个完整的全栈Todo应用，可以：

• 通过前端界面进行用户交互
• 通过Navicat监控数据库变化
• 通过VS Code进行代码开发
• 为后续的部署和扩展奠定基础

📚 下一步学习建议

1. 学习更多SQL操作：在Navicat中练习复杂查询
2. 添加更多功能：用户认证、分类、优先级等
3. 学习部署：将应用部署到云平台
4. 优化性能：数据库索引、缓存策略等
5. 学习测试：编写单元测试和集成测试

---

适用环境： Windows/Mac + Navicat + MySQL + Node.js

💡 提示： 本文档基于实际操作编写，所有步骤均已验证可行。如遇问题，请仔细检查每个步骤的执行情况。