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

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

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

字典管理如上图所示，字典管理，就一个表格的增删该查，相对而言，最容易模仿。但是，一开始，并不着急写这个新闻管理的页面，因为，这个是权限管理系统，首先要在菜单管理里面，加资源。

 

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

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

 

所以，新闻管理的菜单设置，就应该是：

代码结果就应该是：

 

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

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

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

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

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

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

 

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

其中，在news-edit里面，利用ref将父组件的值，传递到子组件的方法中：

表格中，每一行的record为改行的所有数据，将record数据传递到news-edit的setFormValues里面了

为常规的input输入框赋值

 

为时间选择器赋值

为富文本编辑器赋值

实现效果：

 

整体实现效果：

页面显示：

 

该看改行数据：

修改新闻：

新增新闻：

系统主页显示新闻：