🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 前台 拿审计模块来说:audit下分多个大模块(相当于菜单中的一级菜单)。大模块下主要分成四层controller、model、view、store ![](https://box.kancloud.cn/58a664c573ce6008821ffb6671fe4fd9_269x313.png) ![](https://box.kancloud.cn/42648c6a29c9ec0f77e0d8677b8e419e_200x330.png) base 文件夹下为主要的基础组件 ### 步骤一 在model/文件夹下新建业务的文件夹如productPara(第一个字母小写,采用峰值命名),在productPara文件夹下面新建ProductPara.js文件(文件名称尽量保持峰值命名) ![](https://box.kancloud.cn/4484959e23009a6f4e5a99155571cef5_477x381.png) url:url为后台ProductParaControl文件的RequestMapping值 ![](https://box.kancloud.cn/2837d17c2a83fd7ecbd1b2a0d55c22e3_554x158.png) Field:里面的name数据主要是为了读取后台的数据进行分装,若名称与后台传过来的数据不一致,则需要Mapping方法进行去再次组装 ### 步骤二 在controller/文件夹下新建业务的文件夹如productPara(第一个字母小写,采用峰值命名),在productPara文件夹下面新建ProductParaController.js文件(文件名称尽量保持峰值命名,末尾以XXController结尾) Alias:主要取别名格式为‘controller.XX’ Requires引入相关的model和view文件 ![](https://box.kancloud.cn/f669f76100430ccdd61ed29f6dd7f02c_554x163.png) ### 步骤三 在view/文件夹下新建业务的文件夹如productPara(第一个字母小写,采用峰值命名),在productPara文件夹下面新建ProductPara.js文件(文件名称尽量保持峰值命名) Extend:继承Base文件夹下的BaseList Model:与步骤一的新建的Model相同 Controller:与步骤二的新建的controller的别名相同 ![](https://box.kancloud.cn/1ed56c428e489bc3c09f7aa63376bf50_554x193.png) Searchs: name字段是与数据库字段对应 ![](https://box.kancloud.cn/5fa37ea53cce7db9110d07f9e2070821_325x337.png) ![](https://box.kancloud.cn/d9293246c2e12cc3f2bec4fd1b6e17d3_394x448.png) A类是主要为下拉菜单控件,因为有xtype:’formCombobox’,这个控件的显示值是从数据库中的数据字典中查询出来的,resKey的值是项目的资源菜单里面的资源key值,所以需要在资源菜单里面配置key值。 B类主要是不写xtype和resKey,则默认为输入框形式的搜索。 ![](https://box.kancloud.cn/f48af1a00f6bce497c8bf68fc56e8f8c_554x124.png) C类搜索显示控件还有一个直接与后台交互的,如下图,listUrl为后台的请求地址。 ![](https://box.kancloud.cn/a87f42428c347fc07fe5ea1035d603f3_434x206.png) 搜索的界面效果图就是: ![](https://box.kancloud.cn/3fa6114a4e3db347b27793f194063578_658x45.png) Colums:这个是显示主页面的grid列表,里面的dataIndex需要与步骤一建立的Model里面的Field对应,这样数据值才能封装显示出来。Renderer主要是对于dataIndex是Id值,但是需要显示的是展示值不同的时候,需要用Renderer规范,如下图,BUSSINESS_LINE是在项目的资源菜单里面的资源key值,所以需要在资源菜单里面配置key值。 ![](https://box.kancloud.cn/109160da6694bb7cf0298faf12e56147_661x123.png) ![](https://box.kancloud.cn/fd191b72244a4af9b98ea6d426cbd6d8_643x217.png) Grid展示效果图是: ![](https://box.kancloud.cn/c6f1caa3b93f5e60726ac38d5e2a8fc9_614x89.png) updateWin:该属性主要是针对新增修改的界面。里面的bind主要是针对上图column下面的dataIndex里面的值,需要新增哪些字段。里面存在着下拉框,数值显示因为有xtype:’formCombobox’,这个控件的显示值是从数据库中的数据字典中查询出来的,resKey的值是项目的资源菜单里面的资源key值,所以需要在资源菜单里面配置key值。 下图的截图代码不够完整,参照请看源码 ![](https://box.kancloud.cn/f2cbf9bd5496bc392dd699c2791ba065_350x439.png) 新增修改的对话框界面 ![](https://box.kancloud.cn/0b6c6ab101e9777915b787375f5771bc_554x123.png) ### 步骤四 在菜单中添加该页面的控制器和主页的全路径,如下图 ![](https://box.kancloud.cn/b7e590c759a3787d10a1728a17c035c5_300x166.png) 添加菜单时需要先在SVN中的“现场审计平台/12其他/00.开发登记”下的“菜单登记.xls”文件中登记