若依框架前后端分离新增自定义项目

### 若依框架前后端分离架构中添加自定义项目的教程 #### 创建新模块 为了在若依框架的Vue版本中创建新的功能模块，需遵循其目录结构和编码规范。假设要增加一个名为`customProject`的新模块。 - **前端部分** 首先，在`src/views/custom-project/`下建立文件夹并构建基本视图组件： ```bash src/ └── views/ ├── custom-project/ │ ├── index.vue # 主页入口 │ ├── components/ # 组件存放位置 ``` `index.vue` 文件内容可以简单设计成如下形式: ```html <!-- src/views/custom-project/index.vue --> <template> <div class="app-container"> <el-card shadow="never"> <h3>欢迎来到自定义项目</h3> <p>这里是您新增加的功能页面。</p> </el-card> </div> </template> <script> export default { name: 'CustomProject', data() { return {}; }, }; </script> <style scoped lang="scss"> .app-container { padding: 20px; } </style> ``` - **后端部分** 对应地，在服务器端也需要准备相应的API接口来支持这个新特性。通常是在Spring Boot应用里新建控制器类，并配置好对应的业务逻辑处理方法[^1]。 ```java // com.ruoyi.project.customproject.controller.CustomProjectController.java @RestController @RequestMapping("/api/v1/custom-project") public class CustomProjectController { private final Logger logger = LoggerFactory.getLogger(this.getClass()); /** * 获取自定义项目列表数据. */ @GetMapping(value = "/list") public AjaxResult getList(@RequestParam Map<String, Object> params) { try { List<CustomProjectVo> result = customService.getList(params); return R.ok().put("data", result); } catch (Exception e) { logger.error(e.getMessage(), e); throw new RuntimeException(e); } } /* 更多CRUD API... */ } ``` #### 路由注册与权限控制 为了让新加入的内容能够被正确访问，还需要更新路由表以及设定必要的权限验证机制。通过V-hasPermi指令实现基于角色或菜单级别的细粒度授权管理[^3]。 ```javascript // router/modules/custom-project.js { path: '/custom-project', component: Layout, redirect: 'noRedirect', alwaysShow: true, // will always show the root menu meta: { title: '自定义项目', icon: 'example' }, children: [ { path: 'index', component: () => import('@/views/custom-project/index'), name: 'CustomProjectIndex', meta: { title: '首页', noCache: false, affix: true, permission: ['admin'] }, // 设置所需权限 } ] } ``` 最后一步就是把上述定义好的子路由追加到全局路由配置当中去，确保整个应用程序能识别这些路径映射关系。 #### 测试与部署 完成以上开发工作之后，务必进行全面测试以确认各项功能正常运作无误。接着按照官方文档指引进行打包发布流程即可让改动生效。