随便取个名字_哈哈的gravatar头像
随便取个名字_哈哈 2021-12-10 20:31:01
记录一次使用vue+ant design + shiro +springboot +redis脚手架,开发项目的过程

我用的是vue+ant design + shiro +springboot +redis脚手架,地址是:https://gitee.com/MrHST/FEBS-Vue,我想开发出一个教务管理系统,目前,我把系统设置的数据已经初始化好了,并且,自己已经成功的做出来一个新闻管理模块,用到了quill富文本编辑框,接下来,简单记录一下,我的开发过程。

“依葫芦画瓢,从最简单的开始模仿”

我的计划是,先弄个最简单的新闻管理,由于我对这个项目还不熟,怎么办呢?找到最简单的模块开始模仿呗,哪个模块最简单呢?答案是:字典管理模块。

记录一次使用vue+ant design + shiro +springboot +redis脚手架,开发项目的过程字典管理如上图所示,字典管理,就一个表格的增删该查,相对而言,最容易模仿。但是,一开始,并不着急写这个新闻管理的页面,因为,这个是权限管理系统,首先要在菜单管理里面,加资源。

 

记录一次使用vue+ant design + shiro +springboot +redis脚手架,开发项目的过程

菜单管理如上图所示,菜单url是可以任意取的,因为是前端控制路由,所以可以任意取(但是,最好和字典管理这个一样,都是/system/xxx,这样统一一点),组件地址是组件所在代码的位置。

记录一次使用vue+ant design + shiro +springboot +redis脚手架,开发项目的过程

如上图字典管理所在的代码位置如图。

 

所以,新闻管理的菜单设置,就应该是:

记录一次使用vue+ant design + shiro +springboot +redis脚手架,开发项目的过程

代码结果就应该是:

记录一次使用vue+ant design + shiro +springboot +redis脚手架,开发项目的过程

 

接下来,就把Dict的代码赋值到News里,DictAdd代码复制到NewsAdd里面,DictEdit代码赋值到NewsEdit里面。

原来的Dict.vue就是显示字典管理界面的,使用fetch方法,去后台请求数据,那么需要自己该表fetch方法,把dict换成news,因为后台也涉及到权限,所以后台也要仿照dict的写法

记录一次使用vue+ant design + shiro +springboot +redis脚手架,开发项目的过程

另外,v-hasPermission后面的权限标识符,就是之前在菜单管理那里设置的按钮权限,只有拥有后面权限标识符的,才能看到这个按钮。

记录一次使用vue+ant design + shiro +springboot +redis脚手架,开发项目的过程

用本脚手架自带的工具生成实体类,dao,mapper,service,serviceImpl,controller

核心的注解是@RqquirePermissions("news:view"),一定要加上这个注解,要不然前端无法显示数据,因为没有权限。

记录一次使用vue+ant design + shiro +springboot +redis脚手架,开发项目的过程

后台返回数据给前端后,前端接受,使用dataIndex,确定是数据的那个字段。

记录一次使用vue+ant design + shiro +springboot +redis脚手架,开发项目的过程

 

在News.vue代码里,有两个组件,分别是news-add和news-edit组件

记录一次使用vue+ant design + shiro +springboot +redis脚手架,开发项目的过程其中,在news-edit里面,利用ref将父组件的值,传递到子组件的方法中:

记录一次使用vue+ant design + shiro +springboot +redis脚手架,开发项目的过程记录一次使用vue+ant design + shiro +springboot +redis脚手架,开发项目的过程表格中,每一行的record为改行的所有数据,将record数据传递到news-edit的setFormValues里面了

为常规的input输入框赋值

记录一次使用vue+ant design + shiro +springboot +redis脚手架,开发项目的过程

 

为时间选择器赋值记录一次使用vue+ant design + shiro +springboot +redis脚手架,开发项目的过程

为富文本编辑器赋值

记录一次使用vue+ant design + shiro +springboot +redis脚手架,开发项目的过程

实现效果:

记录一次使用vue+ant design + shiro +springboot +redis脚手架,开发项目的过程

 

整体实现效果:

页面显示:

记录一次使用vue+ant design + shiro +springboot +redis脚手架,开发项目的过程

 

该看改行数据:

记录一次使用vue+ant design + shiro +springboot +redis脚手架,开发项目的过程

记录一次使用vue+ant design + shiro +springboot +redis脚手架,开发项目的过程

修改新闻:

记录一次使用vue+ant design + shiro +springboot +redis脚手架,开发项目的过程

新增新闻:

记录一次使用vue+ant design + shiro +springboot +redis脚手架,开发项目的过程

系统主页显示新闻:

记录一次使用vue+ant design + shiro +springboot +redis脚手架,开发项目的过程

记录一次使用vue+ant design + shiro +springboot +redis脚手架,开发项目的过程


打赏

已有1人打赏

最代码官方的gravatar头像
最近浏览
galaxyforest  LV1 8月1日
暂无贡献等级
banzhenghao  LV7 5月21日
xyn54066 5月17日
暂无贡献等级
13232875251  LV14 5月17日
Ohh.  LV3 5月16日
王乐22222  LV10 5月13日
lwkjchen01 5月7日
暂无贡献等级
zjw1997 4月30日
暂无贡献等级
meyuso  LV9 4月13日
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友