“

大家好，我是雄雄，歡迎關(guān)注微信公眾號：雄雄的小課堂。

”

前言

一個(gè)功能寫了大半天，主要是數(shù)據(jù)表設(shè)計(jì)的有點(diǎn)復(fù)雜，且這個(gè)項(xiàng)目是10月份就寫的放那的，里面有些東西都忘記了……先看數(shù)據(jù)庫結(jié)構(gòu)，然后理思路，最后實(shí)現(xiàn)功能。

效果如下：

其實(shí)現(xiàn)在看看，也不是很難。

實(shí)現(xiàn)思路

項(xiàng)目背景：大致就是給教練用的系統(tǒng)，這個(gè)消息功能就是XXX運(yùn)動員完成了XX方案時(shí)，該系統(tǒng)就會實(shí)時(shí)通知（對了，忘記加定時(shí)了，，，發(fā)完文章之后就去加…）。

方案表有一個(gè)方案的完成狀態(tài)，通過該字段做判斷，在前臺展示消息。

方案表新加了個(gè)更改時(shí)間字段，為了在前臺展示完成該方案的時(shí)間。

實(shí)現(xiàn)思路是將完成了的方案，封裝成消息公告對象，最后添加在消息表中，展示在前臺。每次去查詢方案表中已完成了的方案時(shí)，都會執(zhí)行添加消息的方法，這樣就會造成添加重復(fù)，不管完成了的方案有沒有被添加過，都會重新添加一次，所以又在方案表中新加了個(gè)作為區(qū)分的字段。

在前臺實(shí)現(xiàn)遍歷消息公告表，遍歷展示在指定位置。

代碼實(shí)現(xiàn)

項(xiàng)目中用的是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+"已經(jīng)完成了"+data[i].content+"訓(xùn)練方案";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:"",}},

單擊公告時(shí)，將狀態(tài)修改為已讀：

//單擊時(shí)，修改狀態(tài)為已完成handleClick(item){var?id?=?item.id;//根據(jù)編號修改信息updateNew(id).then(()?=>?{this.$message({type:?"success",message:?"已讀!"});done();this.getNoticeList();},?error?=>?{window.console.log(error);loading();});},

notice.js中的方法如下：

/***?獲取消息（已完成的，根據(jù)機(jī)構(gòu)編號）*?@param?id*?@returns?{*}*/ export?const?getNoticeStsteByDeptId?=?()?=>?{return?request({url:?'/api/blade-desk/notice/getNoticeStsteByDeptId',method:?'get',}) }/***?修改狀態(tài)，原來的那個(gè)看不懂……*?@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()?{//獲取當(dāng)前用戶所在的部門Long?deptId?=?Long.parseLong(WebUtil.getCookieVal("dept_id"));//根據(jù)部門和狀態(tài)查詢信息List<Programme>?programmeList?=?programmeService.getPaogramStateBydeptId(2,deptId,0);//遍歷方案集合，得到方案的修改時(shí)間、方案名稱，完成方案的人，添加到公告表中for(Programme?programme?:?programmeList){//方案民稱String?programName?=?programme.getPnme();//時(shí)間Date?updatetime?=?programme.getUpdateTime();Athletes?athletes?=?new?Athletes();athletes.setId(programme.getPaid());Athletes?detail?=?athletesService.getOne(Condition.getQueryWrapper(athletes));String?athName?=?detail.getAname();//調(diào)用添加公告的方法Notice?notice?=?new?Notice();notice.setContent(programName);notice.setCreateTime(updatetime);notice.setTitle(athName);//公告狀態(tài)，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，今天記錄完畢！

總結(jié)

以上是生活随笔為你收集整理的avue中实现消息的实时展示的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。