- 若依是个不错的框架,下面是我用他写的一个简单demo,以后会在此基础上进行进一步的开发,下面是整合的过程。我在整合的过程中可谓是一波三折,大家如果不想走弯路,那么这篇文章将对你很有帮助。
首先 项目代码地址先列出来,方便大家下载使用
这是整理后的代码
https://gitee.com/schjava/heros_separ.git
启动项目 访问localhost(默认80端口)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201212150722843.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTA3NjIwMw==,size_16,color_FFFFFF,t_70)
配置测试用户
先创建角色
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201212150832375.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTA3NjIwMw==,size_16,color_FFFFFF,t_70)
为角色分配权限菜单
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201212150909858.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTA3NjIwMw==,size_16,color_FFFFFF,t_70)
创建角用户,指定部门,我创建了test用户 属于研发部门
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201212150942972.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTA3NjIwMw==,size_16,color_FFFFFF,t_70)
创建测试菜单 ,这一步很关键,我在这里入坑了好几次
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201212151116998.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTA3NjIwMw==,size_16,color_FFFFFF,t_70)
特别注意这里的配置,组件路径对应前端项目 src/views下面 index.vue是生成页面放的位置
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201212151432417.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTA3NjIwMw==,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201212151331422.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTA3NjIwMw==,size_16,color_FFFFFF,t_70)
创建表 p_hero,在页面导入
表结构
导入表
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201212151800938.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTA3NjIwMw==,size_16,color_FFFFFF,t_70)
这里的配置一定要配置好再点生成代码的按钮!!!
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201212154248400.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTA3NjIwMw==,size_16,color_FFFFFF,t_70)
字典配置这里,你要确定关联的是字典的哪个类型,否则数据展示不出来另外这里创建字典后,设置值需要点击 字典类型 设置具体的字典值,我在这里栽了个跟头。![在这里插入图片描述](https://img-blog.csdnimg.cn/20201212152021110.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTA3NjIwMw==,size_16,color_FFFFFF,t_70)
字典值当然要和表中字段值对应,这样才能解析。也就是说你只要配置好,就不用担心数据的转换问题,确实省了不少时间。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201212152145979.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTA3NjIwMw==,size_16,color_FFFFFF,t_70)
字典设置后一定要清空缓存,不然数据无法渲染
![在这里插入图片描述](https://img-blog.csdnimg.cn/2020121215233210.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTA3NjIwMw==,size_16,color_FFFFFF,t_70)
登陆test账号,点开菜单后,大功告成
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201212152724392.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTA3NjIwMw==,size_16,color_FFFFFF,t_70)
在这里插入图片描述
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201212153044984.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTA3NjIwMw==,size_16,color_FFFFFF,t_70)
- 基本上我们不用改什么了,能满足绝大多数的需求,是不是很方便呢?