毕业设计管理系统——通知功能的实现

由秘书发布公告，并拥有对公告进行增删改的权限，学生、教师可查看通知

图 1 秘书发布公告界面
数据库：
字段名称 数据类型 长度 注释
id int 20 公告id
name varchar 255 公告标题
content longtext 文章内容
user varchar 255 发布作者
time varchar 255 发布时间

实现思路：集成markdown富文本编辑器，通过接口返回秘书输入的公告标题和内容，主要的难点在于图片插入，我们可以给富文本编辑器绑定一个imgADD事件，当检测到用户插入图片，立即将图片上传至服务器，服务器再返回图片的url替换到原来图片的位置

1.  // 绑定@imgAdd event
2.    imgAdd(pos, $file) {
3.      let $vm = this.$refs.md
4.      // 第一步.将图片上传到服务器.
5.      const formData = new FormData();
6.      formData.append('file', $file);
7.      axios({
8.        url: 'http://localhost:9090/file/upload',
9.        method: 'post',
10.        data: formData,
11.        headers: {'Content-Type': 'multipart/form-data'},
12.      }).then((res) => {
13.        // 第二步.将返回的url替换到文本原位置![...](./0) -> ![...](url)
14.        $vm.$img2Url(pos, res.data);
15.      })
16.    },