前后端本地启动

一、后端启动

1. 项目导入

目标：将后端代码从远程仓库（GitHub）导入到开发工具中（例如 IntelliJ IDEA），方便我们对项目进行编辑和运行。

步骤：

打开 IntelliJ IDEA（下文简称 IDEA）。
在欢迎界面，点击 "Get from VCS"（从版本控制系统获取）。
在弹出的界面中：
- URL：输入后端项目的 GitHub 地址（形如 https://github.com/xxx/project-name.git）。
- Directory：选择将项目克隆到本地的文件夹路径。
点击 Clone，等待项目下载完成。

原因与说明：

Git 是一个常用的版本控制工具，远程仓库（例如 GitHub）存储了项目代码。
IDEA 提供了集成 Git 的功能，方便直接拉取项目代码。
克隆到本地后，IDEA 会自动将代码导入到开发环境中。

2. 依赖管理

目标：通过 Maven 下载并配置项目所需的第三方依赖库，让项目能够正确运行。

步骤：

在 IDEA 左侧的项目结构中，找到项目的 pom.xml 文件（这是 Maven 项目的配置文件）。
双击打开 pom.xml，IDEA 会自动解析文件中的依赖信息。
如果 IDEA 没有自动下载依赖库：
- 在界面右侧，找到 Maven 工具窗口。
- 点击 "Reload All Maven Projects" 按钮，强制下载依赖。

原因与说明：

Maven 是 Java 项目常用的依赖管理工具。依赖库是项目运行所需的外部代码包，例如数据库连接工具、Web 框架等。
pom.xml 文件中会列出所有依赖库的信息。Maven 通过解析这个文件，自动从中央仓库下载对应的代码包。
如果依赖没有下载成功，项目可能无法编译或运行。

提示：

如果下载速度较慢，可以更换 Maven 的镜像源。例如，将 Maven 配置文件中的中央仓库地址更换为国内的阿里云镜像源。

3. 运行环境配置

目标：设置项目运行环境，激活 test 环境配置，确保项目在开发过程中能加载正确的参数。

步骤：

打开 IDEA 的运行配置：
- 在 IDEA 的顶部工具栏中，点击 "Edit Configurations..."（编辑配置）。
添加环境变量：
- 找到项目对应的运行配置项。
- 在 "Environment Variables"（环境变量）部分，点击右侧的编辑按钮。
- 添加一个名为 spring.profiles.active 的变量，值设为 test。
- 原因：Spring Boot 使用 spring.profiles.active 来控制环境配置，通过设置为 test，项目会加载 application-test.properties 文件中的配置。
检查配置文件：
- 打开项目的 src/main/resources 文件夹。
- 确认是否存在 application-test.properties 文件。
- 作用：此文件包含了针对测试环境的数据库连接、服务端口等配置。
保存并运行项目：
- 点击运行按钮（绿色箭头）启动项目。
- 如果控制台输出与 test 环境相关的信息，说明配置生效。

4. 测试号配置

目标：完成微信公众号测试号的配置，替换相关参数，让系统能够与公众号对接。

步骤：

申请测试号：
- 打开微信公众号测试号的官网（微信公众平台）。
- 登录微信账号，完成测试号申请。
获取测试号信息：
- 在测试号后台，找到以下信息：
  - AppID
  - AppSecret
  - Token
  - Callback URL
- 作用：
  - AppID 和 AppSecret：标识和验证应用身份。
  - Token：用于微信消息接口的验签。
  - Callback URL：微信将用户操作的事件推送到此地址。
在项目中替换参数：
- 打开项目的配置文件（例如 application-test.properties 或其他包含微信配置的文件）。
- 替换以下参数：
  - wechat.callback：替换为测试号后台配置的回调地址。
  - wechat.appID 和 wechat.appSecret：填写申请测试号时获取的信息。
  - wechat.token：填写对应的 Token 值。
更改用户网页授权回调域名：
- 在测试号后台，找到 "网页授权" 配置。
- 将授权回调页面域名设置为你的公网地址（例如通过内网穿透工具生成的地址）。
- 注意：不要填写 http://，只需要输入域名部分。
验证配置：
- 运行项目后，检查是否可以接收到微信推送的事件消息。
- 在浏览器上访问回调地址，确认授权页面可以正常加载。

5. 内网穿透配置

目标：为本地启动的后端项目生成一个公网地址，供微信公众号调用。

步骤：

选择工具：
- 推荐使用以下内网穿透工具：
  - Ngrok：简单易用。
  - 花生壳：国内稳定服务。
  - cPolar：支持免费使用。
- 作用：这些工具可以将你本地的服务映射到一个公网地址，方便外部访问。
配置内网穿透：
- 以 Ngrok 为例：
  - 下载并安装 Ngrok 客户端。
  - 在终端中运行命令：
```
ngrok http 8080
```
  - 此命令会将本地的 8080 端口映射到一个公网地址（例如 http://xxxx.ngrok.io）。
替换微信配置中的回调 URL：
- 将生成的公网地址填入微信测试号后台的回调 URL 配置中。
- 例如：http://xxxx.ngrok.io/wechat/callback。
验证：
- 在浏览器中访问公网地址，确认能正常显示后端服务的内容。
- 微信公众平台的消息推送也会通过该地址调用后端接口。

二、前端启动

1.项目克隆

目标：将远程代码仓库的前端项目克隆到本地，方便后续开发和调试。

为什么需要克隆项目？

克隆项目的目的是将远程代码仓库中的所有文件和历史记录复制到本地，方便在本地进行代码修改和调试。这样可以避免直接修改远程代码，从而减少错误的风险。

操作步骤：

安装 VS Code
- 原因：VS Code 是一个轻量级但功能强大的代码编辑器，适合前端开发，可以直接集成 Git 工具。
- 操作：
  - 前往 VS Code 官方网站，下载并安装适合您系统的版本。
- 验证安装：
  - 安装完成后，打开 VS Code，确保运行正常。
安装 Git 工具
- 原因：Git 是一个版本控制工具，用于管理代码的历史版本。克隆代码仓库需要用到 Git。
- 操作：
  - 前往 Git 官方网站，下载安装 Git。
- 验证安装：
  - 打开终端或命令行，输入以下命令：
```
git --version
```
  - 如果显示类似以下结果，说明安装成功：
```
git version 2.x.x
```
获取代码仓库地址
- 原因：代码仓库地址是克隆项目的来源，通常由项目管理员或团队提供。
- 操作：
  - 登录 GitHub、GitLab 等代码托管平台。
  - 找到前端项目仓库，点击 "Clone" 或 "Code" 按钮。
  - 复制 HTTPS 地址，例如：
```
https://github.com/your-repo/frontend.git
```
克隆代码到本地
- 原因：将代码复制到本地，准备进行开发。
- 操作：
  - 打开 VS Code，按以下步骤操作：
    1. 点击 "View" > "Command Palette"。
    2. 在弹出的输入框中，输入并选择 "Git: Clone"。
    3. 粘贴刚刚复制的代码仓库地址。
    4. 选择一个本地文件夹作为保存路径。
  - 等待一段时间后，代码会下载到本地。
打开项目
- 原因：克隆完成后，需要打开项目文件夹才能查看和编辑代码。
- 操作：
  - 在 VS Code 中，点击 "File" > "Open Folder"。
  - 选择刚刚克隆的项目文件夹并打开。

完成标志：

项目代码已经成功显示在 VS Code 的左侧资源管理器中。
您可以查看项目的文件结构，例如 src 文件夹、package.json 文件等。

2.环境安装与配置

目标：安装 Node.js 环境，支持前端项目运行和依赖安装。

为什么需要 Node.js？

Node.js 是一个 JavaScript 运行时环境，前端项目通常依赖它来运行开发服务器和安装第三方依赖包。如果没有 Node.js，很多前端工具将无法运行。

操作步骤：

下载并安装 Node.js
- 原因：Node.js 提供了运行 JavaScript 的环境，同时附带 npm（Node 包管理工具），用于安装项目所需的依赖。
- 操作：
  - 前往 Node.js 官方网站。
  - 下载推荐的 LTS（长期支持）版本，适合大多数开发场景。
  - 按提示完成安装。
验证安装成功
- 原因：确保 Node.js 安装正确，版本无误。
- 操作：
  - 打开终端或命令行，输入以下命令：
```
node -v
```
  - 如果输出类似以下结果，则安装成功：
```
v16.x.x
```
- 同时检查 npm 是否安装成功：
```
npm -v
```
  如果输出版本号，说明 npm 工具安装正确。
更换 npm 的镜像源
- 原因：npm 默认的镜像源在国内访问较慢，切换为淘宝源可以大幅提升依赖包的下载速度。
- 操作：
  - 在终端中输入以下命令：
```
npm config set registry https://registry.npmmirror.com/
```
  - 验证是否生效：
```
npm config get registry
```
  - 输出 https://registry.npmmirror.com/ 表示配置成功。

完成标志：

Node.js 和 npm 均已正确安装，并且镜像源已切换为国内的淘宝源，确保后续依赖下载更加顺畅。

3.包管理工具

目标：安装 pnpm（高效的包管理工具）并优化下载源，确保依赖安装快速稳定。

为什么需要 pnpm？

pnpm 是一种更高效的包管理工具，与 npm 类似，但它使用了硬链接技术，避免重复下载相同依赖包，节省磁盘空间和安装时间。因此，许多前端项目现在优先推荐使用 pnpm。

操作步骤：

安装 pnpm
- 原因：默认情况下，Node.js 只自带 npm，但项目使用 pnpm 进行依赖管理，必须先手动安装。
- 操作：
  - 在终端中运行以下命令：
```
npm install -g pnpm
```
  - 解释：-g 参数表示全局安装，使 pnpm 命令可以在任意位置使用。
验证安装成功
- 原因：确保 pnpm 安装完成，可以正常使用。
- 操作：
  - 在终端中输入以下命令：
```
pnpm -v
```
  - 如果输出类似以下内容，则说明安装成功：
```
8.x.x
```
更换 pnpm 的下载源
- 原因：pnpm 默认依赖的镜像源在国内可能访问较慢，因此需要切换为国内的淘宝镜像源。
- 操作：
  - 在终端中运行以下命令：
```
pnpm config set registry https://registry.npmmirror.com/
```
  - 验证是否配置成功：
```
pnpm config get registry
```
  - 输出结果应该为：
```
https://registry.npmmirror.com/
```
检查全局依赖的安装目录（可选）
- 原因：有时全局依赖的安装路径可能导致权限问题，提前检查可以避免潜在问题。
- 操作：
  - 运行以下命令查看全局路径：
```
pnpm root -g
```
  - 确保路径可以正常访问，路径通常类似于：
```
/usr/local/lib/pnpm
```

完成标志：

pnpm 工具安装成功，并且镜像源切换至国内的淘宝源，保证后续依赖安装速度更快。

4.端口修改

目标：将前端项目的访问端口从线上环境的默认配置改为本地开发环境的端口（8080 和 8090），确保前后端通信正常。

为什么要更改访问端口？

前后端配合的需求：在本地开发时，后端服务通常运行在本地的 8080 端口。如果前端默认配置使用的是线上接口或其他端口，可能导致前端无法正确访问后端服务。
避免端口冲突：在开发环境中，不同服务可能需要监听不同的端口号，明确配置有助于避免冲突。

操作步骤：

定位前端项目的配置文件
- 原因：前端项目的端口通常配置在项目的环境文件中（如 .env 文件）或 Webpack/Vite 配置中。
- 操作：
  - 打开项目目录，在文件结构中找到可能的配置文件：
    - .env 或 .env.local
    - vite.config.js 或 webpack.config.js
  - 如果不确定文件位置，可以在项目根目录运行搜索命令：
```
grep -iR "port" .
```
  - 这会搜索文件中包含 port 的所有配置。
修改环境变量文件
- 原因：通过修改环境变量文件，可以快速调整前端服务监听的端口。
- 操作：
  - 打开 .env 文件（如果存在）。
  - 找到类似以下的配置：
```
VITE_PORT=3000
```
  - 将其改为：
```
VITE_PORT=8090
```
  - 保存文件。
检查 Vite 配置文件（如果使用 Vite）
- 原因：某些项目使用 Vite 作为构建工具，端口可能直接在 vite.config.js 中定义。
- 操作：
  - 打开 vite.config.js 文件。
  - 找到类似以下内容：
```
server: {port: 3000
}
```
  - 将其改为：
```
server: {port: 8090
}
```
  - 保存文件。
验证修改是否生效
- 原因：确保端口改动成功，防止旧配置文件或缓存导致的问题。
- 操作：
  - 启动前端项目：
```
pnpm run dev
```
  - 查看终端输出的访问地址，应类似以下内容：
```
Local: http://localhost:8090
Network: http://192.168.x.x:8090
```
  - 打开浏览器访问 http://localhost:8090，确认页面能正常加载。

完成标志：

前端项目已成功改用本地端口（8090），并能正常启动。

5.依赖安装

目标：使用 pnpm 安装项目所需的依赖包，确保项目能够正确运行。

为什么需要安装依赖？

依赖管理：前端项目通常依赖多个第三方库和工具（如 React、Vue、Axios 等）。这些依赖必须安装到本地环境中，才能确保项目功能正常。
使用 pnpm 进行管理：由于我们已经配置了 pnpm 作为包管理工具，使用 pnpm install 命令能够根据项目的配置文件（如 package.json）安装所有需要的依赖。

操作步骤：

确保在项目根目录
- 原因：执行安装命令时，必须确保在项目的根目录下运行，才能正确找到 package.json 文件和依赖列表。
- 操作：
  - 打开终端，进入前端项目的根目录：
```
cd /path/to/your/project
```
  - 确保该目录下有 package.json 文件。
运行 pnpm install 安装依赖
- 原因：此命令会根据 package.json 文件中列出的所有依赖项，下载并安装到本地 node_modules 文件夹中。
- 操作：
  - 在终端中运行以下命令：
```
pnpm install
```
  - 解释：pnpm install 会解析 package.json 中的依赖，逐个下载并安装。安装过程可能需要一些时间，具体取决于依赖的数量和网络速度。
等待安装完成
- 原因：安装过程中，pnpm 会显示进度信息，安装完成后会提示 "Done" 或类似消息，说明依赖已经成功安装。
- 操作：
  - 等待直到终端显示如下消息（或类似消息）：
```
Packages successfully installed.
```
确认依赖是否安装成功
- 原因：确认依赖是否安装成功，避免由于依赖未安装完全导致项目运行失败。
- 操作：
  - 执行以下命令，查看 node_modules 文件夹是否已经创建：
```
ls node_modules
```
  - 如果该文件夹中包含所有依赖包，则说明安装成功。
解决可能的安装问题
- 原因：在安装依赖时，可能会遇到网络问题或包冲突。
- 操作：
  - 如果安装失败，可以尝试清空缓存并重新安装：
```
pnpm store prune
pnpm install
```
  - 这将清除 pnpm 的缓存，重新下载所有依赖。

完成标志：

所有前端项目依赖已成功安装，node_modules 文件夹已创建。

6.项目启动

目标：通过运行 pnpm run dev 启动前端开发服务器，确保前端应用可以在本地进行访问和测试。

为什么需要运行前端项目？

本地开发环境启动：通过运行前端项目，可以确保前端与后端的集成是否正常工作，模拟用户访问的真实场景。
调试与验证：启动项目后，可以通过浏览器访问前端页面，验证是否能正确显示，并在需要时进行调试。

操作步骤：

确保前端依赖已成功安装
- 原因：前端依赖必须安装完成，才能确保项目能够正确启动。
- 操作：
  - 确认前一步中的 pnpm install 已成功执行，没有错误提示。
运行开发服务器
- 原因：运行开发服务器能够启动前端项目，监听本地端口，允许开发者进行调试和测试。
- 操作：
  - 在项目根目录下，执行以下命令启动前端项目：
```
pnpm run dev
```
  - 解释：
    - pnpm run dev 命令是执行在 package.json 文件中定义的开发启动脚本，通常会启动一个开发服务器。
    - 如果是 Vite 或 Webpack 项目，开发服务器会启动在默认端口（如 3000 或 8080）上，但如果你在之前的步骤中更改了端口，则会使用新的端口（例如 8090）。
检查终端输出
- 原因：终端输出会显示项目启动的状态信息和本地访问的 URL，确认服务器是否成功启动。
- 操作：
  - 启动后，终端中会显示类似于以下内容：
```
VITE v2.0.0 dev server running at:
Local:   http://localhost:8090
Network: http://192.168.x.x:8090
```
  - 解释：
    - Local 地址是指本地电脑的访问地址，你可以在本地浏览器打开这个 URL 查看前端页面。
    - Network 地址是局域网中其他设备可以访问的地址，如果你需要在手机等其他设备上进行测试，可以用这个地址。
打开浏览器访问本地地址
- 原因：在浏览器中访问项目的本地开发地址，确保项目正确启动并能够正常加载页面。
- 操作：
  - 打开浏览器，输入终端中显示的 Local 地址（例如 http://localhost:8090），确认页面是否加载。
  - 如果页面能正常显示，表示前端服务已经启动成功。
测试功能
- 原因：测试功能确保前端页面和后端交互是否正常，且用户体验流畅。
- 操作：
  - 为了验证微信公众平台的集成，执行以下操作：
    - 将账号从应用中移除，重新进行注册。
    - 使用微信扫描二维码，触发公众号授权页面。
    - 在授权后，检查是否能够成功登录并跳转到正确的页面。
解决可能的问题
- 原因：有时启动过程中可能会遇到一些常见问题，如端口冲突、依赖问题等。
- 操作：
  - 如果浏览器无法访问，检查终端输出是否有错误信息，特别是端口是否被占用。
  - 如果端口冲突，可以修改前端端口（参考第四步），然后重新启动服务。
  - 如果遇到依赖问题或构建失败，可以尝试重新安装依赖：
```
pnpm install
```

完成标志：

前端项目已成功启动，浏览器可以正常访问并测试页面功能。

三、测试与验证

目标：确保前后端系统的联通性以及微信公众平台的集成功能正常工作。通过验证账号注册、授权登录、用户关注事件推送等功能，确保系统能够按预期运行。

1.账号验证

为什么需要进行账号验证？

目的：验证账号功能是否正常工作，包括注册、登录以及授权流程的正常执行。
原因：这是用户与系统交互的第一步，验证账号是否能正常注册并登录成功是系统是否能正常运行的关键。

操作步骤：

移除旧账号，重新注册
- 原因：如果之前的测试账号存在，可能会导致新的测试环境无法正常进行，因此我们先移除旧账号，确保从头开始进行新的测试。
- 操作：
  - 在前端应用或系统中，找到并删除现有的用户账号（如果已有）。
  - 执行重新注册的操作，通过填写注册表单或其他方式，确保可以成功创建一个新账号。
扫码后，微信公众号推送授权链接
- 为什么这么做：扫码操作是验证微信公众号的授权流程，确认用户是否能够通过扫描二维码正确跳转到授权页面，并能顺利进行授权。
- 操作：
  - 在浏览器中访问前端应用，点击登录按钮，系统会生成二维码。
  - 使用微信扫描二维码，触发微信公众号的授权页面。
  - 此时微信会推送授权链接，要求用户确认授权。
点击登录完成授权，验证功能正常
- 为什么这么做：点击登录并授权是整个认证过程的关键，确保用户能够成功登录并授权才能证明与微信公众平台的接口通信正常。
- 操作：
  - 用户点击授权登录按钮，进入微信授权页面。
  - 确认授权后，系统应该返回成功授权的提示，用户将被重定向到应用中的登录成功页面或首页。
  - 验证用户登录后是否能够访问系统中的相关功能，如个人主页、信息修改等。

完成标志：

账号注册与登录功能正常，用户能够完成扫码授权并成功登录。

2.功能交互测试

为什么需要进行功能交互测试？

目的：验证前后端之间的交互是否顺畅，确保前端页面能正确与后端系统进行数据交换。
原因：前后端交互是整个应用的核心，确保数据流动畅通无阻，功能正常，用户体验才会顺利。

操作步骤：

使用浏览器访问本地启动的前后端项目
- 为什么这么做：通过浏览器访问本地启动的前后端项目，可以直接测试前端与后端的通信是否正常。
- 操作：
  - 确保前后端项目都在本地启动，前端使用 pnpm run dev 启动，后端已经完成配置。
  - 在浏览器中输入本地服务器地址（如 http://localhost:8090）来访问前端页面。
验证前后端联通
- 为什么这么做：确保前端能够通过 API 与后端进行交互，处理用户请求并返回正确的数据。
- 操作：
  - 在浏览器中操作前端页面，检查是否能够正确展示从后端获取的数据。例如，点击登录后，是否能够显示用户信息，是否能够成功从数据库获取数据。
  - 如果数据正常加载，表明前后端联通无误。
验证用户关注事件推送
- 为什么这么做：用户关注事件推送是微信公众平台的一项关键功能，确保它能正常工作，用户关注公众号后，系统能够接收到并处理这些事件。
- 操作：
  - 在微信中关注公众号，模拟用户关注事件。
  - 确认系统是否能够接收到关注事件，并通过后端推送通知或其他方式进行处理。
  - 检查是否有正确的推送消息发送给用户，确保流程无误。
验证网页授权是否正常
- 为什么这么做：网页授权流程是与微信进行数据交换的一部分，必须确保前端能够正确调用微信的授权接口并获取用户数据。
- 操作：
  - 点击授权登录后，系统会跳转到微信的授权页面，用户同意授权后，前端会获取用户的基本信息（如昵称、头像等）。
  - 验证前端是否能够成功获取并显示这些信息，确保微信的授权功能正常运行。
验证数据交互是否正常
- 为什么这么做：数据交互是前后端系统的核心部分，确保从数据库获取的数据能够正确展示，用户输入的数据能够正确提交并保存。
- 操作：
  - 检查所有表单和输入框，确保用户提交的数据能够正确传输到后端，并成功保存到数据库。
  - 在前端页面检查是否能够正确显示数据库中的数据，如用户信息、历史记录等。