一、前言
大家好！我是小马，今天我们正式开启 “mypet 宠物服务平台” 实战系列。
这个项目聚焦 “用户 - 商家 - 宠物服务” 全链路交互，涵盖宠物医疗预约、用品购买、社区日志分享等核心功能，技术栈采用 后端 SSM+MyBatis-Plus+MySQL/Druid、前端 Uni-App（跨端开发）+Vue+Element UI（后台管理） 。
无论你是零基础还是刚入门编程，只要了解基础 Java/JavaScript 语法，我们都会从最基础的环境搭建开始，手把手带你掌握前后端分离开发逻辑。
项目本地路径：C:\Users\Downloads\my-pet-custom\mypet（代码在Gitee或者GitHub上）。
二、今日教学目标
- 完成项目所需全部开发工具的安装（JDK、MySQL、IDEA、HBuilder X、微信开发者工具）；
- 解决 “工具版本不兼容”“HBuilder X 不识别.vue 文件” 等常见环境问题；
- 验证每个工具的安装效果，确保后续开发无环境障碍。
三、前置准备
1. 硬件 / 软件基础要求
- 操作系统：Windows 10+（你的当前系统：win32 10.0.19045，符合要求）；
- 内存：至少 4GB（避免运行多工具时卡顿）；
- 网络：稳定网络（用于下载工具和插件）。
2. 工具下载与安装步骤
按 “后端→前端→数据库→辅助工具” 顺序安装，每步均附验证方法：
（1）JDK 8（后端运行核心）
- 下载：官网下载 JDK 8 社区版（需注册 Oracle 账号，或用国内镜像）；
- 安装：双击安装包，选择安装路径（建议默认，如 C:\Program Files\Java\jdk1.8.0_xxx），避免中文路径；
- 环境变量配置：
① 右键 “此电脑”→“属性”→“高级系统设置”→“环境变量”；
② 系统变量新增 JAVA_HOME，值为 JDK 安装路径（如 C:\Program Files\Java\jdk1.8.0_202）；
③ 编辑 “Path” 变量，新增 %JAVA_HOME%\bin 和 %JAVA_HOME%\jre\bin；
- 验证：打开命令提示符（Win+R→输入cmd），输入 java -version，显示 “1.8.x” 即成功。
（2）MySQL 8（数据库）
- 下载：官网下载 MySQL 8 社区版（选择 “MySQL Installer for Windows”）；
- 安装：
① 双击安装包，选择 “Custom” 自定义安装，勾选 “MySQL Server 8.0”；
② 配置环节，设置 root 密码（建议简单值如 “123456”，方便测试）；
③ 勾选 “Start the MySQL Server at System Startup”（开机启动服务）；
- 验证：命令提示符输入 mysql -uroot -p，输入密码后进入 MySQL 命令行（显示 “mysql>”）即成功。
（3）IDEA（后端 IDE）
- 下载：官网下载 IntelliJ IDEA 社区版（免费，足够支撑项目开发）；
- 安装：双击安装包，勾选 “64-bit launcher”“Add launchers dir to PATH”，其余默认；
- 验证：打开 IDEA，能正常进入欢迎界面即成功（首次启动需配置 JDK，选择已安装的 JDK 8 路径）。
（4）HBuilder X（前端 IDE，支持 Uni-App）
- 下载：官网下载 HBuilder X App 开发版（选择 “Windows 版”，支持跨端开发插件）；
- 安装：解压压缩包即可（建议放在非 C 盘，如 D:\HBuilderX），无需安装步骤；
- 关键步骤：安装 Uni-App 插件（解决 “不识别.vue 文件” 问题）：
① 打开 HBuilder X→点击顶部菜单栏 “工具”→“插件安装”；
② 在插件列表搜索 “Uni-App Compiler” 和 “Uni-App 语法提示”，点击 “安装”；
③ 安装完成后重启 HBuilder X，插件生效；
- 验证：重启后能看到顶部菜单栏 “运行”→“运行到小程序模拟器” 即成功。
（5）微信开发者工具（测试小程序端）
- 下载：官网下载 微信开发者工具；
- 安装：双击安装包，勾选 “添加到桌面快捷方式”，其余默认；
- 配置：打开工具→登录微信账号→进入 “设置”→“安全设置”，勾选 “服务端口”（允许 HBuilder X 连接）；
- 验证：能正常登录并创建空白小程序项目即成功。
四、代码实现（环境配置）
1. 后端环境：IDEA 导入项目
① 打开 IDEA→点击 “File”→“Open”→选择项目路径 C:\Users\骆\Downloads\my-pet-custom\mypet；
② 等待 IDEA 加载 Maven 依赖（首次加载较慢，需联网），Maven 会自动读取 pom.xml（路径：mypet\pom.xml）；
③ 关键依赖说明：pom.xml 第 11 行配置 Spring 版本 <spring.version>5.0.0.RELEASE</spring.version>（Spring 是后端核心框架，提供依赖注入、事务管理等功能）；
④ 加载完成后，IDEA 左侧 “Project” 面板能显示项目目录（如 src/main/java、src/main/resources）即成功。
2. 前端环境：HBuilder X 创建 Uni-App 项目
① 打开 HBuilder X→点击 “File”→“New”→“Project”；
② 选择 “Uni-App”→输入项目名称 “mypet-front”→选择模板 “默认模板”→点击 “创建”；
③ 项目创建后，左侧 “项目管理器” 能显示 .vue 文件（如 pages/index/index.vue）即成功（插件已生效）。
3. 数据库初始化：执行 SQL 脚本
① 打开 MySQL Workbench（MySQL 自带的可视化工具）→登录 root 账号；
② 点击 “File”→“Open SQL Script”→选择项目中的 db.sql（路径：C:\Users\骆\Downloads\my-pet-custom\mypet\db.sql）；
③ 点击 “执行” 按钮（闪电图标），执行脚本创建项目所需表（如 users（用户表）、chongwuxinxi（宠物信息表））；
④ 执行完成后，刷新 “Schemas” 面板，能看到新增的表即成功。
五、效果验证
1. 后端验证
① 在 IDEA 右侧 “Maven” 面板→展开 “mypet”→“Lifecycle”→双击 “compile”；
② 等待编译完成，控制台显示 “BUILD SUCCESS”（无报错）即成功。
2. 前端验证
① 在 HBuilder X 左侧选中 “mypet-front” 项目→点击顶部 “运行”→“运行到浏览器”→选择 “Chrome”；
② 浏览器打开空白项目页面（显示 “Hello uni-app”）即成功。
3. 跨端预览验证
① 在 HBuilder X 顶部 “运行”→“运行到小程序模拟器”→“微信开发者工具”；
② 自动打开微信开发者工具并加载项目，模拟器显示 “Hello uni-app” 即成功（跨端连接正常）。
六、常见问题与解决方案
| 问题描述 | 解决方案 |
|---|---|
| “JDK 版本不匹配”：IDEA 提示 “Invalid JDK” | 1. 确认 java -version 显示 1.8.x；2. IDEA 中配置 JDK：File→Project Structure→SDKs→添加 JDK 8 路径 |
| “HBuilder X 不识别.vue 文件” | 1. 检查是否安装 “Uni-App Compiler” 插件；2. 重启 HBuilder X；3. 若仍无效，重新安装插件 |
| “MySQL 连接失败”：命令行输入密码后提示 “Access denied” | 1. 检查 MySQL 服务是否启动（Win+R→输入services.msc→找到 “MySQL”，确保状态为 “正在运行”）；2. 确认密码正确（安装时设置的 root 密码）；3. 若忘记密码，参考 MySQL 重置密码教程 |
| “HBuilder X 无法连接微信开发者工具” | 1. 打开微信开发者工具→设置→安全设置→勾选 “服务端口”；2. 重启 HBuilder X 和微信开发者工具 |
七、工具类 / 框架特性拓展
HBuilder X 是 Uni-App 官方推荐的 IDE，相比 VS Code 等工具，它的核心优势在于：
- 原生支持跨端开发：无需手动配置多端编译环境，一键运行到 H5 / 小程序 / App；
- 插件生态完善：“Uni-App 语法提示” 插件能自动补全 .vue 文件代码，降低初学者语法错误率；
- 调试效率高：直接连接微信开发者工具，无需手动导入项目，节省跨端调试时间。
实际开发中，优先使用官方 IDE 能避免 80% 以上的跨端兼容问题。
八、结语
大家在安装 HBuilder X 插件或配置跨端预览时，有没有遇到 “插件安装失败”“微信开发者工具连接超时” 等问题？欢迎在评论区留言分享你的解决方案或疑问，我们一起讨论排查！
小马绿泡泡：Niuma4G
下期预告
Day2：后端初始化（用 Maven 搭建 SSM+MyBatis-Plus 框架，配置核心 XML 文件，实现第一个查询接口）。
