jeecgboot修改前端

### 如何在 JeecgBoot 项目中修改前端部分 JeecgBoot 是一款基于 Spring Boot 和 Vue 的开源低代码平台，其前端部分采用 Vue 技术栈构建。如果需要对前端进行自定义修改，可以通过以下方式实现。 #### 修改后台项目的访问路径 当需要更改默认的后台项目路径（如 `http://127.168.3.52:8080/jeecg-boot`），可以在后端配置文件中调整服务地址，并同步更新前端的 API 请求基础路径[^2]。具体操作如下： - **后端配置** 打开 `application.yml` 文件，定位到 `server.servlet.context-path` 配置项，将其更改为所需的路径。例如： ```yaml server: servlet: context-path: /your-custom-path ``` - **前端配置** 同步修改前端项目的请求基础路径，在 `src/config/api.config.js` 中调整 `baseUrl` 参数。例如： ```javascript export const baseUrl = '/your-custom-path'; ``` 完成上述两步后重启前后端服务即可生效。 --- #### 自定义前端组件 JeecgBoot 的前端组件封装位于 `src/components` 目录下，开发者可以根据需求扩展或重写现有组件[^3]。以下是具体的步骤： 1. 定位目标组件所在的目录结构。例如，表单组件通常存放在 `src/components/Form` 下。 2. 参考已有组件的代码逻辑，按照 Vue 组件的标准语法编写新的功能模块。 3. 将新创建的组件引入至页面或其他父级组件中。例如： ```vue <template> <div> <CustomComponent /> </div> </template> <script> import CustomComponent from '@/components/CustomComponent'; export default { components: { CustomComponent } }; </script> ``` 通过这种方式可以灵活定制界面交互效果。 --- #### 替换前端静态资源 对于一些固定的视觉元素（如图标、Logo 等），可以直接替换对应的静态文件[^4]。主要涉及以下几个方面： - **登录页图标** 路径为 `src/views/system/loginmini/MiniLogin.vue`，找到 `<img>` 标签并指定新的图片路径。例如： ```html <img src="@/assets/loginmini/icon/new-icon.png" alt="new-logo"> ``` - **刷新页 Logo** 替换 `public/resource/img/logo.png` 文件的内容为所需的新图像。 - **浏览器标签图标** 更新 `public/logo.png` 文件以改变网页顶部显示的小图标。 执行以上改动后记得清理缓存重新加载应用以便查看最新样式。 --- #### 新增业务逻辑方法 为了满足特定场景下的功能需求，可能还需要向现有的 JavaScript 方法库或者 Vuex store 添加额外处理流程。比如新增全局过滤器用于数据格式化转换： ```javascript // 在 main.js 中注册全局过滤器 Vue.filter('formatDate', function(value) { return value ? new Date(value).toLocaleDateString() : ''; }); ``` 随后便可在模板表达式里调用它来呈现日期字段。 --- ### 总结 通过对 JeecgBoot 前端源码的学习以及实际动手实践能够有效提升二次开发能力。无论是简单的 UI 更替还是复杂的算法嵌入都离不开扎实的基础知识积累与持续探索精神的支持。