From abf51a7c96dd465d1d2d46a495d85818343af71a Mon Sep 17 00:00:00 2001 From: localuser Date: Sat, 8 Nov 2025 21:04:11 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=86=E5=89=8D=E5=90=8E?= =?UTF-8?q?=E7=AB=AF=E7=9A=84=E4=BB=A3=E7=A0=81=EF=BC=8C=E9=9B=86=E6=88=90?= =?UTF-8?q?=E6=89=93=E5=8C=85=E9=85=8D=E7=BD=AE=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 70 +++++++++++++++++++++++++++++++++ docs/前后端整合.md | 52 ++++++++++++++++++++++++ 技术文档.md => docs/技术文档.md | 0 frontend/package.json | 1 + frontend/src/styles/index.scss | 8 ++-- frontend/tailwind.config.js | 2 +- pom.xml | 61 ++++++++++++++++++++++++++++ 7 files changed, 189 insertions(+), 5 deletions(-) create mode 100644 docs/前后端整合.md rename 技术文档.md => docs/技术文档.md (100%) diff --git a/.gitignore b/.gitignore index b4bd40c..d5bd64e 100644 --- a/.gitignore +++ b/.gitignore @@ -32,3 +32,73 @@ build/ ### VS Code ### .vscode/ +src/main/resources/static/favicon.ico +src/main/resources/static/index.html +src/main/resources/static/assets/401-88639a9f.js +src/main/resources/static/assets/401-a61ddb94.gif +src/main/resources/static/assets/401-d244ab29.css +src/main/resources/static/assets/404_cloud-98e7ac66.png +src/main/resources/static/assets/404-7ca1fe28.css +src/main/resources/static/assets/404-7d365cf6.js +src/main/resources/static/assets/404-538aa4d7.png +src/main/resources/static/assets/BarChart-4fa92581.js +src/main/resources/static/assets/BarChart.vue_vue_type_script_setup_true_lang-2e88c556.js +src/main/resources/static/assets/editor-1fcae90e.js +src/main/resources/static/assets/editor-501cf061.css +src/main/resources/static/assets/FunnelChart-54cd9c1c.js +src/main/resources/static/assets/index-0c0fc4d5.js +src/main/resources/static/assets/index-0c6de5c4.css +src/main/resources/static/assets/index-0e353610.js +src/main/resources/static/assets/index-0fdbb0c3.css +src/main/resources/static/assets/index-2a2e686f.js +src/main/resources/static/assets/index-2d8a94de.js +src/main/resources/static/assets/index-3c8b576d.js +src/main/resources/static/assets/index-3e4e0c0c.css +src/main/resources/static/assets/index-3ea31a03.css +src/main/resources/static/assets/index-4a40522c.js +src/main/resources/static/assets/index-4af6c095.js +src/main/resources/static/assets/index-4b2c54eb.css +src/main/resources/static/assets/index-4e9a4a3c.css +src/main/resources/static/assets/index-4e36f11e.css +src/main/resources/static/assets/index-5b909b30.js +src/main/resources/static/assets/index-6cfbc6e9.js +src/main/resources/static/assets/index-6d369684.js +src/main/resources/static/assets/index-9cdf102e.js +src/main/resources/static/assets/index-013c92bf.css +src/main/resources/static/assets/index-45b24ee3.js +src/main/resources/static/assets/index-58b7edbc.css +src/main/resources/static/assets/index-97e2e5d7.js +src/main/resources/static/assets/index-336eb0cd.js +src/main/resources/static/assets/index-1124a30a.js +src/main/resources/static/assets/index-5736aae9.js +src/main/resources/static/assets/index-23665d45.js +src/main/resources/static/assets/index-35744cd0.css +src/main/resources/static/assets/index-49408471.js +src/main/resources/static/assets/index-a7bce641.css +src/main/resources/static/assets/index-adef366f.js +src/main/resources/static/assets/index-dd0c8cf0.css +src/main/resources/static/assets/index-dd267244.js +src/main/resources/static/assets/index-de40e6e9.css +src/main/resources/static/assets/index-f9a887b2.css +src/main/resources/static/assets/index1-f104bedb.js +src/main/resources/static/assets/index2-8960589f.js +src/main/resources/static/assets/indicator-5b15d0d1.png +src/main/resources/static/assets/lbcz_sc-0ed76926.js +src/main/resources/static/assets/lbcz_td-b5984317.js +src/main/resources/static/assets/lbcz_xg-aaaefba0.js +src/main/resources/static/assets/logo-03d6d6da.png +src/main/resources/static/assets/page.vue_vue_type_script_setup_true_lang-b61c9f0c.js +src/main/resources/static/assets/personalCenter-035ae2fa.js +src/main/resources/static/assets/personalCenter-ad68cb91.css +src/main/resources/static/assets/PieChart-24d7f015.js +src/main/resources/static/assets/PieChart.vue_vue_type_script_setup_true_lang-d4bdc783.js +src/main/resources/static/assets/RadarChart-f3f7d950.js +src/main/resources/static/assets/RadarChart.vue_vue_type_script_setup_true_lang-c1ab7800.js +src/main/resources/static/assets/resize-76420810.js +src/main/resources/static/assets/rsaEncrypt-96cab0ea.js +src/main/resources/static/assets/sortable.esm-be94e56d.js +src/main/resources/static/assets/tagsView-23de2998.js +src/main/resources/static/assets/top_tx-3cab94c6.png +src/main/resources/static/assets/u287-9a3328bc.gif +src/main/resources/static/assets/uploader-769f4f98.js +src/main/resources/static/assets/uploader-ccfd78f9.css diff --git a/docs/前后端整合.md b/docs/前后端整合.md new file mode 100644 index 0000000..4bab797 --- /dev/null +++ b/docs/前后端整合.md @@ -0,0 +1,52 @@ +# 前后端一体化构建与打包说明 + +本文档说明如何在 Maven 构建流程中，先编译前端（pnpm），再编译后端（Java），并在 `package` 阶段将两者一起打包，使生成的可运行 `jar/war` 直接可以访问前端首页 `index.html`。 + +## 前置要求 +- 已安装 JDK（推荐 17+）和 Maven（3.6.3+）。 +- 已安装 Node.js（推荐 18+）与 pnpm（全局）：`npm i -g pnpm`。 +- 当前项目结构： + - 后端（Spring Boot）：`app/pom.xml`，源码在 `app/src/main/java` 与资源在 `app/src/main/resources`。 + - 前端（Vite/Vue）：位于 `app/frontend`，构建输出目录默认是 `app/frontend/dist`。 + +## 构建流程概览 +在 `pom.xml` 中集成了以下步骤： +1. `generate-resources` 阶段：进入 `frontend` 目录，执行 `pnpm install --frozen-lockfile` 与 `pnpm run build`。 +2. `process-resources` 阶段：将前端构建产物从 `frontend/dist` 复制到后端资源目录 `src/main/resources/static`。 +3. 随后执行后端 Java 编译与打包，最终产出可运行的 `jar/war`。 + +这样在运行后端时，Spring Boot 会从类路径的 `static` 目录自动提供 `index.html` 作为欢迎页入口（访问根路径 `/` 即可看到前端页面）。 + +## 关键 POM 配置（摘要） +已经在 `app/pom.xml` 的 `` 中加入： +- `exec-maven-plugin`：在 Java 编译前执行 pnpm 安装与构建。 +- `maven-resources-plugin`：复制前端构建产物到 `src/main/resources/static`。 + +无需手动改动目录，只需按下述命令执行即可。 + +## 常用命令 +- 开发运行（跳过测试）：`mvn -DskipTests spring-boot:run` + - 如需指定开发配置：`mvn -DskipTests -Dspring-boot.run.profiles=dev spring-boot:run` +- 构建打包（跳过测试）：`mvn -DskipTests package` + - 构建过程中会自动执行前端构建并拷贝到后端资源。 + +## 运行与访问 +- 运行可执行包（以 `war` 为例，`artifactId=platform`，`version=1.0`）： + - 默认运行：`java -jar target/platform-1.0.war` + - 指定 dev 配置：`java -Dspring.profiles.active=dev -jar target/platform-1.0.war` +- 访问： + - 若启用 `dev` 配置并端口为 `8093`：`http://localhost:8093/` + - 若使用默认端口（例如 `18080`）：`http://localhost:18080/` + +> 说明：Spring Boot 会自动将 `classpath:/static/index.html` 作为欢迎页，访问根路径即可进入前端入口页面。 + +## 注意事项 +- 请确保 `pnpm` 可在构建机/开发机的环境变量中直接调用。 +- 若前端构建输出目录（`dist`）有自定义，请同步更新 POM 中的复制路径。 +- 如前端使用路由的 `history` 模式并期望后端兜底到 `index.html`，可按需添加后端控制器或使用前端服务器侧配置（当前方案以静态欢迎页为主）。 + +## 故障排查 +- 构建失败（找不到 `pnpm`）：确认已安装并可在命令行执行 `pnpm -v`。 +- 页面乱码：已在 POM 配置统一 JVM 编码为 `UTF-8`；在 Windows PowerShell 终端也应设置为 `UTF-8`。 + +完成上述配置后，只需使用 Maven 的标准命令，即可实现前后端一体化构建和打包运行。 \ No newline at end of file diff --git a/技术文档.md b/docs/技术文档.md similarity index 100% rename from 技术文档.md rename to docs/技术文档.md diff --git a/frontend/package.json b/frontend/package.json index b552b9e..7b20367 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -4,6 +4,7 @@ "scripts": { "dev": "vite serve --mode development", "build:prod": "vue-tsc --noEmit && vite build --mode production", + "build:mvn": "vite build --mode production", "serve": "vite preview", "lint": "eslint src/**/*.{ts,js,vue} --fix", "prettier": "prettier --write ." diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss index bbc3895..e0fa2bc 100644 --- a/frontend/src/styles/index.scss +++ b/frontend/src/styles/index.scss @@ -1,7 +1,7 @@ -@use 'src/styles/variables.module' as *; -@use 'src/styles/element-plus' as *; -@use './sidebar.scss' as *; -@use './tailwind.scss' as *; +@import 'src/styles/variables.module'; +@import 'src/styles/element-plus'; +@import './sidebar.scss'; +@import './tailwind.scss'; html,body,#app{ height: 100%; diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 90ab1d5..5b86b53 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -1,6 +1,6 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], + purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], darkMode: 'class', theme: { diff --git a/pom.xml b/pom.xml index 2d23523..4ef3598 100644 --- a/pom.xml +++ b/pom.xml @@ -317,6 +317,67 @@ + + + org.codehaus.mojo + exec-maven-plugin + 3.1.0 + + + frontend-install + generate-resources + + exec + + + npm + ${project.basedir}/frontend + + install + + + + + frontend-build + generate-resources + + exec + + + npm + ${project.basedir}/frontend + + run + build:mvn + + + + + + + + org.apache.maven.plugins + maven-resources-plugin + 3.3.1 + + + copy-frontend + process-resources + + copy-resources + + + ${project.basedir}/src/main/resources/static + + + ${project.basedir}/frontend/dist + false + + + + + + org.asciidoctor asciidoctor-maven-plugin