“

大家好，我是雄雄，欢迎关注微信公众号：雄雄的小课堂。

”

前言

一个功能写了大半天，主要是数据表设计的有点复杂，且这个项目是10月份就写的放那的，里面有些东西都忘记了……先看数据库结构，然后理思路，最后实现功能。

效果如下：

其实现在看看，也不是很难。

实现思路

1. 项目背景：大致就是给教练用的系统，这个消息功能就是XXX运动员完成了XX方案时，该系统就会实时通知（对了，忘记加定时了，，，发完文章之后就去加…）。

2. 方案表有一个方案的完成状态，通过该字段做判断，在前台展示消息。

3. 方案表新加了个更改时间字段，为了在前台展示完成该方案的时间。

4. 实现思路是将完成了的方案，封装成消息公告对象，最后添加在消息表中，展示在前台。每次去查询方案表中已完成了的方案时，都会执行添加消息的方法，这样就会造成添加重复，不管完成了的方案有没有被添加过，都会重新添加一次，所以又在方案表中新加了个作为区分的字段。

5. 在前台实现遍历消息公告表，遍历展示在指定位置。

代码实现

项目中用的是avue，HTML中的代码如下：

<avue-notice @click="handleClick":data="noticeList":option="option"@page-change="pageChange"></avue-notice>

methods中的代码如下：（主要是用来遍历消息）

getNoticeList(){getNoticeStsteByDeptId().then(res => {const data  = res.data.data;for (let i = 0; i < data.length; i++) {let listInfo ={title: '',subtitle: '',tag: '',status: 0,id:0,};listInfo.subtitle = data[i].createTime;listInfo.tag = "查看";listInfo.title = data[i].title+"已经完成了"+data[i].content+"训练方案";listInfo.status = data[i].status;listInfo.id = data[i].id;if(data[i].status===1) {this.weiduNoticeCount += 1;}this.noticeList.push(listInfo);}this.xiaoxiLabel = "消息("+this.weiduNoticeCount+")";});},

声明的变量：

data () {return {activeName: 'second',option: {props: {img: 'img',title: 'title',subtitle: 'subtitle',tag: 'tag',status: 'status',id:'id'},},//公告信息noticeList: [],//未读的公告weiduNoticeCount:0,//消息的文本xiaoxiLabel:"",}},

单击公告时，将状态修改为已读：

//单击时，修改状态为已完成handleClick(item){var id = item.id;//根据编号修改信息updateNew(id).then(() => {this.$message({type: "success",message: "已读!"});done();this.getNoticeList();}, error => {window.console.log(error);loading();});},

notice.js中的方法如下：

/*** 获取消息（已完成的，根据机构编号）* @param id* @returns {*}*/
export const getNoticeStsteByDeptId = () => {return request({url: '/api/blade-desk/notice/getNoticeStsteByDeptId',method: 'get',})
}/*** 修改状态，原来的那个看不懂……* @returns {*}* @param id*/
export const updateNew = (id) => {return request({url: '/api/blade-desk/notice/updateNew',method: 'get',params: {id}})
}

最后就是后台控制器中的代码：

/*** 获取已完成的消息*/@GetMapping("/getNoticeStsteByDeptId")@ApiOperationSupport(order = 1)@ApiOperation(value = "详情", notes = "传入notice")public R<List<Notice>> getNoticeStsteByDeptId() {//获取当前用户所在的部门Long deptId = Long.parseLong(WebUtil.getCookieVal("dept_id"));//根据部门和状态查询信息List<Programme> programmeList = programmeService.getPaogramStateBydeptId(2,deptId,0);//遍历方案集合，得到方案的修改时间、方案名称，完成方案的人，添加到公告表中for(Programme programme : programmeList){//方案民称String programName = programme.getPnme();//时间Date updatetime = programme.getUpdateTime();Athletes athletes = new Athletes();athletes.setId(programme.getPaid());Athletes detail = athletesService.getOne(Condition.getQueryWrapper(athletes));String athName = detail.getAname();//调用添加公告的方法Notice notice = new Notice();notice.setContent(programName);notice.setCreateTime(updatetime);notice.setTitle(athName);//公告状态，4已读.1未读，notice.setStatus(1);//添加noticeService.save(notice);}//查询公告里面的信息List<Notice> noticeList = noticeService.list();return R.data(noticeList);}/*** 修改信息*/@GetMapping("/updateNew")@ApiOperation(value = "修改", notes = "传入notice")public R updateNew(Long id) {Notice notice = noticeService.getById(id);notice.setStatus(4);return R.status(noticeService.updateById(notice));}

OK，今天记录完毕！