1. 项目概述与核心价值最近在折腾一个前后端分离的项目前端用的是Vue 3 Vite后端是Spring Boot。项目初期最头疼的不是业务逻辑而是那一堆繁琐的初始化配置前端要配路由、状态管理、UI库、请求拦截后端要配数据源、MyBatis-Plus、JWT、全局异常处理……每次新建一个模块或者启动一个新项目都得把这些轮子重新造一遍费时费力还容易出错。直到我在GitHub上发现了0xckpark/nililia-bootstrap这个项目。它不是一个具体的业务系统而是一个企业级项目脚手架或者更准确地说是一个前后端一体化的项目初始化模板。它的核心价值在于将前后端开发中那些通用、重复、但又至关重要的基础架构和最佳实践预先集成并配置好打包成一个“开箱即用”的种子项目。开发者拿到手只需要git clone下来改改项目名和数据库配置就能立刻投入到核心业务功能的开发中极大地提升了项目启动效率和开发体验。这个项目名为“nililia-bootstrap”其中“bootstrap”直译为“引导程序”非常形象。它就像火箭发射的助推器帮你平稳、快速地度过项目从0到1的“起飞”阶段。对于中小型团队、个人全栈开发者或者需要快速验证想法的场景这类脚手架的价值是巨大的。它不仅仅是代码的堆砌更是架构思想、工程规范和团队协作流程的载体。接下来我将从项目架构、技术栈选型、核心模块解析、以及如何基于它进行二次开发等几个方面为你深度拆解这个“生产力工具”。1.1 核心需求与解决的问题在深入代码之前我们首先要理解nililia-bootstrap试图解决哪些痛点。根据我的经验一个标准的全栈项目在初始化阶段通常会面临以下挑战技术栈选型与集成复杂度高前端框架Vue/React/Angular、构建工具Vite/Webpack、UI库Element Plus/Ant Design、状态管理Pinia/Redux、路由、HTTP客户端Axios等每一个都需要单独安装、配置和联调。后端同样如此Spring Boot版本、ORM框架MyBatis-Plus/JPA、安全框架Spring Security、数据库连接池、API文档工具Knife4j/Swagger等集成过程充满细节。项目结构标准化缺失新项目应该采用什么样的目录结构Controller、Service、Mapper如何分层前端组件、页面、工具函数如何组织没有统一标准会导致后期维护困难团队成员上手成本高。通用功能重复开发用户登录/注册、JWT令牌管理、权限验证、全局异常处理、统一响应格式、分页查询、文件上传、日志记录……这些功能几乎每个项目都需要但每次都要从头写一遍。开发与生产环境配置繁琐如何管理不同环境dev/test/prod的配置文件如何配置跨域如何打包部署这些工程化问题在项目初期容易被忽视但后期会带来巨大麻烦。团队协作基础薄弱缺乏统一的代码风格检查ESLint/Prettier、提交规范Commitlint、以及基础的Git忽略文件配置。nililia-bootstrap正是瞄准了这些痛点提供了一个预设的、经过验证的解决方案。它不是一个“玩具”项目从其技术选型和配置细节来看目标是服务于有一定复杂度、需要长期维护的真实业务项目。1.2 技术栈全景与选型逻辑让我们先一览这个脚手架集成的技术栈并分析其选型背后的逻辑后端 (Spring Boot 3.x)核心框架: Spring Boot 3.x Spring MVC。选择Spring Boot 3意味着拥抱了Java 17的特性并获得了更好的性能和新特性支持。数据层: MyBatis-Plus。这是一个非常务实的选择。相比JPAMyBatis-Plus在国内开发者中受众更广它保留了原生SQL的灵活性又通过强大的CRUD封装和条件构造器极大地提升了开发效率。对于复杂查询和已有数据库表结构的项目尤其友好。安全与权限: Spring Security JWT。这是实现无状态API认证授权的标准组合。Spring Security提供了强大的安全过滤链而JWT则用于在客户端安全地携带用户身份信息。API文档: Knife4j。它是Swagger的增强版提供了更美观、功能更强大的UI界面非常适合国内开发团队生成和查看API文档。其他工具: Hutool国产工具类库提高开发效率、Lombok减少样板代码、MapStruct优雅的对象转换。前端 (Vue 3)核心框架: Vue 3 Composition API script setup语法。这代表了Vue生态的最新和推荐实践提供了更好的TypeScript支持和逻辑复用能力。构建工具: Vite。毫无疑问的现代选择。相比WebpackVite的启动速度和热更新速度有质的飞跃开发体验极佳。UI框架: Element Plus。基于Vue 3的组件库组件丰富、文档齐全、生态成熟是中后台管理系统的首选之一。状态管理: Pinia。Vue官方推荐的状态管理库相比VuexAPI更简洁对TypeScript的支持更友好且取消了冗长的mutations。路由: Vue Router 4。HTTP客户端: Axios并配置了请求/响应拦截器、统一错误处理等。工具链: TypeScript、ESLint Prettier代码规范、Pinia Plugin Persistedstate状态持久化等。选型逻辑总结 这个技术栈组合体现了“稳健 高效 开发者友好”的原则。没有盲目追求最新最炫的技术而是选择了在各个领域经过大量实践验证、社区活跃、中文资料丰富的方案。例如选择MyBatis-Plus而非JPA更贴合国内多数开发者的习惯和项目现状选择Element Plus和Vite则保证了前端的开发效率和体验。这套组合拳打下来足以支撑起一个中等复杂度企业应用的基础。2. 项目结构深度解析一个优秀的脚手架其项目结构本身就能传达出清晰的架构思想。我们来分别看看前后端的目录布局。2.1 后端项目结构剖析克隆项目后后端通常是一个标准的Maven或Gradle项目。其核心包结构可能如下所示根据常见实践推断com.example.nililia ├── NililiaApplication.java // 主启动类 ├── config // 配置类包 │ ├── MyBatisPlusConfig.java // MP配置分页插件等 │ ├── SecurityConfig.java // Spring Security配置 │ ├── WebMvcConfig.java // 跨域、拦截器等Web配置 │ └── Knife4jConfig.java // API文档配置 ├── controller // 控制层 │ └── api │ ├── AuthController.java // 认证相关接口 │ └── ... // 其他业务控制器 ├── service // 业务逻辑层 │ ├── impl // 实现类 │ └── ... // 服务接口 ├── mapper // 数据访问层MyBatis Mapper接口 ├── entity // 实体类对应数据库表 ├── dto // 数据传输对象Data Transfer Object ├── vo // 视图对象View Object用于接口返回 ├── common // 通用模块 │ ├── constant // 常量定义如状态码 │ ├── exception // 自定义异常类及全局异常处理器 │ ├── result // 统一响应结果封装如ResultT │ └── utils // 工具类如JWT工具、加密工具 └── interceptor // 拦截器如认证拦截器 └── JwtAuthenticationInterceptor.java结构设计亮点清晰的分层严格遵循Controller-Service-Mapper的三层架构职责分离明确。对象分类精细区分了Entity、DTO、VO。Entity纯粹对应数据库表用于ORM操作DTO用于接收前端传入的参数可能包含验证注解VO用于封装返回给前端的数据可以灵活组合字段。这避免了用一个对象贯穿全程带来的耦合和安全隐患。通用模块集中管理将异常处理、统一响应、常量、工具类等抽离到common包使得业务代码更加纯净也便于统一维护。配置外置所有配置类集中在config包与业务代码分离符合Spring Boot的约定。注意在实际使用中如果项目模块增多可以考虑按业务域进行垂直拆分如user、order包每个包内包含自己的controller、service、mapper等而不是水平分层。nililia-bootstrap提供的是一种基础范式你可以根据项目规模灵活调整。2.2 前端项目结构剖析前端项目基于Vite创建结构同样体现了现代Vue项目的组织方式src ├── api // 所有API请求封装 │ ├── modules // 按模块划分的API文件 │ │ ├── auth.ts // 认证相关API │ │ └── ... │ └── index.ts // 统一导出或Axios实例配置 ├── assets // 静态资源图片、字体等 ├── components // 公共组件 │ ├── common // 全局通用组件如分页器 │ └── ... // 其他业务组件 ├── composables // Vue 3组合式函数逻辑复用 ├── layout // 布局组件如顶部导航、侧边栏 ├── router // 路由配置 │ └── index.ts ├── stores // Pinia状态管理仓库 │ ├── modules // 按模块划分的store │ │ ├── user.ts // 用户信息store │ │ └── ... │ └── index.ts // Pinia实例创建 ├── styles // 全局样式 ├── utils // 工具函数 │ ├── request.ts // Axios请求封装拦截器、错误处理 │ ├── auth.ts // 认证相关工具token存取 │ └── ... ├── views // 页面组件 │ ├── login // 登录页 │ ├── dashboard // 主页/仪表盘 │ └── ... ├── App.vue // 根组件 └── main.ts // 应用入口结构设计亮点API层独立封装将所有的网络请求集中到api目录管理并按业务模块划分。这样做的最大好处是前后端协作清晰。后端接口一旦定义前端就可以在对应的API文件中实现调用修改和维护都非常方便。request.ts中的拦截器统一处理了添加Token、处理响应错误等逻辑。状态管理模块化使用Pinia并按模块modules组织store。例如用户信息、应用配置、标签页状态等可以分别放在不同的store文件中通过Pinia的useStore()组合式函数在组件中按需引入逻辑清晰且易于维护。组合式函数复用逻辑composables目录用于存放可复用的组合式函数。例如可以有一个useTable函数封装了表格数据的获取、分页、搜索等通用逻辑在各个列表页面中复用。路由与视图分离router目录专注路由配置views目录专注页面UI。对于中后台项目路由通常需要与权限动态绑定这个结构为后续实现动态路由留下了扩展空间。3. 核心模块实现与配置详解了解了整体结构我们深入到几个最关键、最体现脚手架价值的模块看看它们是如何实现的。3.1 后端统一响应与异常处理这是保证API友好性和一致性的基石。在common/result包下通常会定义一个ResultT类Data public class ResultT implements Serializable { private Integer code; // 状态码如200成功500失败 private String message; // 提示信息 private T data; // 响应数据 // 成功静态方法 public static T ResultT success(T data) { ResultT result new Result(); result.setCode(200); result.setMessage(操作成功); result.setData(data); return result; } // 失败静态方法 public static T ResultT error(Integer code, String message) { ResultT result new Result(); result.setCode(code); result.setMessage(message); return result; } }在common/exception包下定义业务异常类如BusinessException并创建一个全局异常处理器GlobalExceptionHandler使用RestControllerAdvice注解RestControllerAdvice public class GlobalExceptionHandler { ExceptionHandler(BusinessException.class) public ResultVoid handleBusinessException(BusinessException e) { // 记录日志... return Result.error(e.getCode(), e.getMessage()); } ExceptionHandler(Exception.class) public ResultVoid handleException(Exception e) { // 记录详细的错误日志... return Result.error(500, 系统繁忙请稍后再试); } }这样做的价值所有Controller的方法成功时返回Result.success(data)抛出业务异常时会被全局处理器捕获并返回Result.error(...)。前端永远收到结构一致的JSON只需判断code是否为200即可错误信息在message中。这极大地简化了前后端的联调。3.2 JWT认证与Spring Security集成这是实现无状态登录的关键。流程通常是用户登录成功后端生成一个JWT令牌包含用户ID、角色等信息返回给前端。前端后续请求在HTTP Header通常是Authorization: Bearer token中携带此令牌。后端通过过滤器或拦截器验证令牌的合法性和有效性并从中提取用户信息存入SecurityContext。在nililia-bootstrap中可能会选择用拦截器Interceptor而非复杂的Security过滤器链来实现简单的JWT校验以降低复杂度。在JwtAuthenticationInterceptor中Component public class JwtAuthenticationInterceptor implements HandlerInterceptor { Autowired private JwtUtil jwtUtil; // 自定义的JWT工具类 Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { // 1. 从请求头获取token String token request.getHeader(Authorization); if (StrUtil.isBlank(token) || !token.startsWith(Bearer )) { // 可以放行公开接口这里简单抛出异常 throw new BusinessException(401, 未提供有效的认证信息); } token token.substring(7); // 去掉Bearer 前缀 // 2. 验证token if (!jwtUtil.validateToken(token)) { throw new BusinessException(401, 认证信息已过期或无效); } // 3. 解析token获取用户信息如userId String userId jwtUtil.getUserIdFromToken(token); // 4. 可以将用户信息存入请求属性方便后续Controller使用 request.setAttribute(currentUserId, userId); // 或者更规范的做法是存入SecurityContext如果集成了Spring Security // UsernamePasswordAuthenticationToken authentication ...; // SecurityContextHolder.getContext().setAuthentication(authentication); return true; } }然后在WebMvcConfig中注册这个拦截器并配置需要拦截的路径如/api/**排除登录等公开路径。实操心得对于简单的后台管理系统使用拦截器实现JWT验证完全够用且更直观。但如果权限模型复杂需要角色、权限点细粒度控制或者需要集成OAuth2等那么完整集成Spring Security的过滤器链是更强大和标准的选择。脚手架提供了基础你可以根据需求升级。3.3 MyBatis-Plus的优雅实践MyBatis-PlusMP是后端开发效率的倍增器。脚手架中通常会进行以下配置分页插件配置在MyBatisPlusConfig中启用分页插件这是MP的“灵魂”功能之一。Configuration public class MyBatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); // 分页插件 interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); // 乐观锁插件如果需要 // interceptor.addInnerInterceptor(new OptimisticLockerInnerInterceptor()); return interceptor; } }实体类与MapperUser实体类继承MP的Model类或使用TableName注解。UserMapper接口继承BaseMapperUser立刻拥有了全套单表CRUD方法。Data TableName(sys_user) public class User { TableId(type IdType.AUTO) // 主键自增 private Long id; private String username; private String password; // ... 其他字段 } public interface UserMapper extends BaseMapperUser { // 可以在此定义自定义的复杂SQL方法 // Select(SELECT * FROM sys_user WHERE ...) // ListUser selectCustom(); }Service层封装创建IUserService接口继承MP的IServiceUserUserServiceImpl实现类继承ServiceImplUserMapper, User并实现IUserService。这样Service层也自动拥有了大量便捷方法。public interface IUserService extends IServiceUser { // 定义自定义业务方法 User login(String username, String password); } Service public class UserServiceImpl extends ServiceImplUserMapper, User implements IUserService { Override public User login(String username, String password) { // 使用lambda查询 User user lambdaQuery() .eq(User::getUsername, username) .one(); if (user ! null passwordEncoder.matches(password, user.getPassword())) { return user; } throw new BusinessException(401, 用户名或密码错误); } }使用MP的优势你几乎不用写简单的增删改查SQLservice.save(user),service.updateById(user),service.page(pageQuery)等方法开箱即用。对于复杂的多表查询依然可以使用XML或注解写自定义SQL灵活性得以保留。3.4 前端请求封装与状态管理前端utils/request.ts是网络通信的核心。它创建了一个配置好的Axios实例import axios from axios; import { ElMessage } from element-plus; import { useUserStore } from /stores/modules/user; const service axios.create({ baseURL: import.meta.env.VITE_APP_API_BASE_URL, // 从环境变量读取 timeout: 10000, }); // 请求拦截器 service.interceptors.request.use( (config) { const userStore useUserStore(); if (userStore.token) { config.headers[Authorization] Bearer ${userStore.token}; } return config; }, (error) { return Promise.reject(error); } ); // 响应拦截器 service.interceptors.response.use( (response) { const res response.data; // 假设后端统一返回 { code, message, data } if (res.code 200) { return res.data; // 直接返回业务数据 } else { // 业务错误如参数错误、权限不足 ElMessage.error(res.message || 请求失败); return Promise.reject(new Error(res.message || Error)); } }, (error) { // 网络错误或HTTP状态码非2xx if (error.response?.status 401) { // token过期或未登录跳转到登录页 ElMessage.error(登录已过期请重新登录); const userStore useUserStore(); userStore.logout(); window.location.href /login; } else { ElMessage.error(error.message || 网络请求失败); } return Promise.reject(error); } ); export default service;在api/modules/auth.ts中我们这样使用它import request from /utils/request; export function login(data: { username: string; password: string }) { return request.post(/auth/login, data); } export function getUserInfo() { return request.get(/auth/userInfo); }在Pinia的store中stores/modules/user.ts管理用户状态和登录逻辑import { defineStore } from pinia; import { login, getUserInfo } from /api/modules/auth; export const useUserStore defineStore(user, { state: () ({ token: localStorage.getItem(token) || , userInfo: {} as any, }), actions: { async loginAction(loginForm: { username: string; password: string }) { const res await login(loginForm); this.token res.token; // 假设返回了token localStorage.setItem(token, this.token); // 获取用户信息 await this.getUserInfoAction(); }, async getUserInfoAction() { const res await getUserInfo(); this.userInfo res; }, logout() { this.token ; this.userInfo {}; localStorage.removeItem(token); }, }, });这样设计的好处网络请求、状态管理、UI组件完全解耦。组件只需调用store的actionstore调用封装好的API函数API函数使用统一的request实例。Token自动管理错误统一处理代码非常清晰。4. 从零开始基于脚手架启动新项目理论讲了很多现在我们来实战一下如何利用nililia-bootstrap快速启动你自己的项目。4.1 环境准备与项目克隆确保本地环境后端JDK 17、Maven 3.6 或 Gradle、MySQL 5.7/8.0。前端Node.js 16、npm 或 yarn 或 pnpm。获取脚手架代码git clone https://github.com/0xckpark/nililia-bootstrap.git your-project-name cd your-project-name克隆后建议立即将远程仓库origin修改为你自己的仓库地址以便后续提交。修改项目标识后端在IDE中打开项目修改pom.xml或build.gradle中的groupId、artifactId、name、description为你自己的项目信息。修改主启动类所在的包名这是一个重命名包的操作IDE如IntelliJ IDEA支持Refactor - Rename Package。前端修改package.json中的name、description等字段。4.2 数据库与基础配置创建数据库在你的MySQL中创建一个新的数据库例如nililia_db。修改配置文件找到后端的配置文件通常是application.yml或application.properties修改数据源连接信息spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/nililia_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: yourpassword执行初始化SQL检查脚手架是否提供了数据库初始化脚本可能在sql/目录下。如果有在MySQL中运行它创建必要的表结构和初始数据如管理员账号。如果没有项目可能会使用Flyway或Liquibase这样的数据库迁移工具或者依赖MyBatis-Plus的自动建表功能需要配置你需要根据项目说明操作。4.3 启动与验证启动后端找到主启动类如NililiaApplication直接运行。观察控制台日志确保没有报错并且看到类似“Started ... in X seconds”的提示。打开浏览器访问http://localhost:8080/doc.htmlKnife4j文档地址你应该能看到自动生成的API文档页面这证明后端基础服务已正常启动。启动前端cd frontend # 进入前端项目目录 npm install # 或 pnpm install 或 yarn npm run dev根据控制台输出访问开发服务器地址通常是http://localhost:5173。你应该能看到登录页或主页。尝试使用初始化SQL中提供的账号密码登录。联调测试在前端登录页输入账号密码点击登录。打开浏览器开发者工具的“网络(Network)”选项卡查看登录请求是否成功响应是否包含token。登录成功后尝试访问一个需要认证的页面如用户管理查看请求头是否自动带上了Authorization: Bearer token。如果以上步骤都顺利恭喜你一个具备完整认证、基础架构的全栈项目已经跑起来了接下来就可以开始你的业务开发了。5. 二次开发指南与最佳实践脚手架提供了地基盖什么样的楼取决于你。以下是一些二次开发的建议和最佳实践。5.1 如何添加一个新的业务模块假设我们要增加一个“产品管理(Product)”模块。后端步骤数据库创建产品表product。实体类在entity包下创建Product.java定义字段使用MP注解TableName,TableId。Mapper接口在mapper包下创建ProductMapper.java继承BaseMapperProduct。Service接口与实现在service包下创建IProductService继承IServiceProduct和ProductServiceImpl继承ServiceImplProductMapper, Product并实现IProductService。Controller在controller/api下创建ProductController.java使用RestController和RequestMapping(/api/product)注解注入IProductService编写增删改查接口。DTO/VO根据需要在dto包下创建ProductDTO用于接收创建/更新参数在vo包下创建ProductVO用于返回列表或详情数据。务必不要直接用Entity接收前端参数或直接返回这涉及安全性如暴露敏感字段和灵活性。前端步骤API在src/api/modules/下创建product.ts定义调用后端ProductController接口的函数。Store (可选)如果产品数据需要在多个组件间共享可以在src/stores/modules/下创建product.ts定义Pinia store来管理产品列表状态、加载函数等。页面与组件在src/views/下创建product目录里面放置List.vue列表页、Detail.vue详情页、Form.vue表单页等组件。路由在src/router/index.ts中添加产品管理相关的路由配置并考虑将其与权限管理关联。5.2 权限控制进阶脚手架可能只提供了基础的JWT认证。对于更细粒度的权限控制如基于角色的访问控制RBAC你需要数据库设计添加sys_role角色表、sys_menu菜单/权限表、sys_user_role用户角色关联表、sys_role_menu角色权限关联表。后端实现在JWT中不仅包含userId还可以包含roleIds或permissions权限标识列表。创建自定义注解如PreAuthorize(hasAuthority(product:add))结合Spring Security的方法级安全控制。或者在拦截器中根据请求路径和用户权限进行校验。前端实现动态路由用户登录后根据其角色或权限从后端获取有权限访问的路由菜单配置然后通过router.addRoute()动态添加到路由实例中。这需要将路由定义从静态文件router/index.ts中部分或全部转移到后端或前端根据权限过滤。按钮级权限创建一个全局指令或工具函数如v-permissionproduct:add在组件渲染时判断用户是否拥有该权限没有则隐藏或禁用按钮。5.3 部署与优化注意事项后端部署打包使用mvn clean package -DskipTests生成可执行的JAR文件。生产配置使用application-prod.yml文件通过spring.profiles.activeprod激活。确保生产环境的数据库连接、Redis连接、文件上传路径等配置正确。进程管理推荐使用系统服务如systemd或容器Docker来运行JAR并配置好日志轮转、健康检查等。数据库连接池检查并优化HikariCP连接池配置如最大连接数、超时时间。前端部署构建运行npm run build生成静态文件在dist目录。Web服务器将dist目录下的文件部署到Nginx或Apache等Web服务器。反向代理在Nginx中配置反向代理将/api路径的请求转发到后端服务地址以解决跨域问题。缓存与压缩配置Nginx对静态资源JS、CSS、图片进行Gzip压缩和设置长期缓存Cache-Control。通用优化API设计遵循RESTful风格合理设计URL和HTTP方法。分页查询列表接口务必支持分页避免一次性加载过多数据。敏感信息密码等敏感信息必须加密存储使用BCryptPasswordEncoder切勿明文。日志记录使用SLF4J Logback合理设置日志级别记录关键操作日志和异常信息便于排查问题。代码规范前后端都启用ESLint/Checkstyle并在CI/CD流程中加入代码检查。6. 常见问题排查与技巧在实际使用和开发过程中你可能会遇到以下问题问题1前端请求后端接口出现CORS跨域错误。排查检查后端WebMvcConfig或使用CrossOrigin注解是否配置了允许前端的源Origin。开发环境下Vite的代理配置vite.config.ts中的proxy也能解决此问题。解决确保后端CORS配置正确或在前端开发环境中配置代理。问题2登录成功但后续请求提示“认证失败”或“Token无效”。排查检查前端request.ts的请求拦截器是否正确将token添加到了Authorization头格式是否为Bearer token。检查后端拦截器或Security配置是否从正确的请求头中读取token。检查JWT令牌的密钥、有效期配置前后端是否一致。使用在线JWT解码工具如jwt.io检查token内容是否正常是否过期。解决对照检查以上环节确保token的生成、传递、验证流程一致。问题3MyBatis-Plus插入或更新时字段值为null的也被更新到数据库。原因MP默认的更新策略是更新所有字段。解决在实体类字段上使用TableField注解并设置策略TableField(updateStrategy FieldStrategy.IGNORED)表示忽略该字段即使为null也更新NOT_NULL表示非null才更新NEVER表示永不更新。更常见的做法是使用UpdateWrapper进行更新或使用saveOrUpdate方法时传入一个不包含null值的DTO对象。问题4前端打包后访问页面空白或资源加载404。排查检查vite.config.ts中的base配置。如果前端应用不是部署在域名根路径下例如http://example.com/admin/需要将base设置为/admin/。解决正确配置base并确保Nginx等服务器的路由配置与之匹配。同时检查路由模式是history还是hash部署到非根路径时history模式需要服务器额外配置。问题5如何高效地进行分页查询后端Controller接收pageNum和pageSize参数Service层使用PageUser page new Page(pageNum, pageSize);和page(page, queryWrapper)方法。前端使用Element Plus的Pagination组件将current-page、page-size、total与Pinia store或组件数据绑定在翻页时触发新的API请求。个人经验之谈善用代码片段在IDE中为创建Entity、Mapper、Service、Controller设置Live Template可以极大提升开发速度。接口文档先行在开发新模块前可以先用Knife4j的注解如Api,ApiOperation把Controller的接口概要描述清楚这既是文档也能帮助理清思路。前端组件抽象对于常见的表格表单弹窗的CRUD界面可以尝试抽象一个高阶组件或组合式函数将数据获取、分页、表单验证、提交等逻辑封装起来不同业务页面只需配置列和表单项即可。关注依赖更新定期检查pom.xml和package.json中的依赖版本关注官方发布的安全更新和重要特性。可以使用npm outdated或Maven Versions Plugin来辅助。