avue中实现消息的实时展示

a4265939b06faa2720878edcef4c42c8.png

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

前言

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

效果如下:

26f2384d8a02d1bce0ecf420b1d7ce7d.png

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

实现思路

  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,今天记录完毕!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/323777.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

发达国家与发展中国家编程语言技术的分布差异性

近日&#xff0c;Stack Overflow在官方博客上发布了一组统计数据&#xff0c;表明发达国家与发展中国家在编程语言技术的采用上存在较大的差异。Stack Overflow对2017年1月至8月期间的访问数据进行了分析&#xff0c;选取了64个技术标签&#xff0c;每个标签所包含问题的访问次…

两个map中的数据,按照相同键,将所对应的值相加方法

“大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂”前言最近写代码的时候遇到了个需求&#xff0c;刚开始想的时候&#xff0c;感觉不难&#xff0c;挺简单的&#xff0c;结果写的时候&#xff0c;各种思考、各种费脑&#xff0c;耗费了点…

publiccms中将推荐页的内容显示在页面片段中

遍历的代码如下&#xff1a; <#list page.list><ul><#items as a><li><figure><!-- ${a.itemType!} : ${a.itemId!} ,place/redirect:count and 301 jump to a.url,place/click:count and 302 jump to a.url--><a href"${site.dyn…

ASP.NET Core 运行原理解剖[3]:Middleware-请求管道的构成

在 ASP.NET 中&#xff0c;我们知道&#xff0c;它有一个面向切面的请求管道&#xff0c;有19个主要的事件构成&#xff0c;能够让我们进行灵活的扩展。通常是在 web.config 中通过注册 HttpModule 来实现对请求管道事件监听&#xff0c;并通过 HttpHandler 进入到我们的应用程…

publiccms实现首页菜单栏下拉的方法

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂。 今天接到了个需求&#xff0c;使用publiccms实现首页导航栏下拉的效果&#xff0c;效果如下&#xff1a; 目前我的思路如下&#xff1a; 采用分类的方法实现将左侧的项作为二级分类右边…

2017(深圳) .NET技术分享交流会(第二期)网络直播活动

.NET Core 2.0 已于2017年8月14日正式发布&#xff0c;2017(深圳) .NET技术分享交流会在公众号中发出2个小时后就被抢光了&#xff0c;受限于场地无法增加人数&#xff0c;这次如鹏网杨中科老师提供VIP级的网络直播支持&#xff0c;为了保证网络直播效果&#xff0c;另外开启网…

publiccms实现多层级选项卡效果

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂 前言 距离上次更新已经好久了~最近心有余而力不足。。 最近在学习freammarker标签&#xff0c;算是比较老的技术了&#xff0c;白天写&#xff0c;晚上做梦都在写&#xff0c;不吐槽了&am…

“雪花”项目:Microsoft探索在.NET中实现手工内存管理

来自Microsoft研究院、剑桥大学和普林斯顿大学的一些研究人员构建了一个.NET的分支&#xff0c;实现了在运行时中添加支持手工内存管理的API。研究方法的细节及所获得的性能提升发表在名为“Project Snowflake: Non-blocking Safe Manual Memory Management in .NET”&#xff…

publiccms按照指定显示的日期格式,格式化日期的写法

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂 前言 现在是2021年12月30日20:21:37&#xff0c;距离2021年结束仅仅不到2天的时间了&#xff0c;时间恍如白驹过隙&#xff01; 今天还是搞的publiccms,分享个简单的语法吧&#xff1a;在…

Orleans解决并发之痛(四):Streams

Orleans 提供了 Stream扩展编程模型。此模型提供了一套API&#xff0c;使处理流更简单和更健壮。Stream默认提供了两种Provider&#xff0c;不同的流类型可能使用不同的Provider来处理&#xff0c;Simple Message Stream Provider 和 Azure Queue Stream Provider。Stream Prov…

如何编写更好的SQL查询:终极指南-第二部分

上一篇文章《如何编写更好的SQL查询&#xff1a;终极指南-第一部分》中&#xff0c;我们学习了 SQL 查询是如何执行的以及在编写 SQL 查询语句时需要注意的地方。 下面&#xff0c;我进一步学习查询方法以及查询优化。 基于集合和程序的方法进行查询 反向模型中隐含的事实是…

publiccms实现遍历多级分类下的不同样式内容

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂 前言 现在是2022年1月2日17:06:51,假期这两天都在做publiccms。 上篇文章遗留的问题&#xff0c;最终还是没有按照富文本去做&#xff0c;后期在看吧&#xff1b; 今天遇到了个问题&…

四张图带你了解Tomcat系统架构--让面试官颤抖的Tomcat回答系列

转载自 四张图带你了解Tomcat系统架构--让面试官颤抖的Tomcat回答系列 俗话说&#xff0c;站在巨人的肩膀上看世界&#xff0c;一般学习的时候也是先总览一下整体&#xff0c;然后逐个部分个个击破&#xff0c;最后形成思路&#xff0c;了解具体细节&#xff0c;Tomcat的结构…

.NET Core 2.0应用程序大小减少50%

.NET Core 2.0应用程序减小体积瘦身官方工具 IL Linker。 IL Linker 来源于mono的linker https://github.com/mono/linker&#xff0c;目前还是预览版本。 在一般的情况下&#xff0c;链接器可以将应用程序的大小减少50&#xff05;&#xff0c;大型应用程序的大小可能更有利…

Orleans解决并发之痛(五):Web API

通过前面几篇文章的介绍&#xff0c;可能会疑问怎么在实际开发中调用Grain&#xff0c;之前Demo的Client都是基于控制台应用程序&#xff0c;实际开发下可能是基于Web Form、Web API、MVC......&#xff0c;由于一时短路了&#xff0c;没有联想到控制台应用程序的方式怎么切到其…

ASP.Net Core WebApi几种版本控制对比

一、版本控制的好处&#xff1a; &#xff08;1&#xff09;有助于及时推出功能, 而不会破坏现有系统。 &#xff08;2&#xff09;它还可以帮助为选定的客户提供额外的功能。 API 版本控制可以采用不同的方式进行控制&#xff0c;方法如下&#xff1a; &#xff08;1&…

asp.net core策略授权

在《asp.net core认证与授权》中讲解了固定和自定义角色授权系统权限&#xff0c;其实我们还可以通过其他方式来授权&#xff0c;比如可以通过角色组&#xff0c;用户名&#xff0c;生日等&#xff0c;但这些主要取决于ClaimTypes&#xff0c;其实我们也可以自定义键值来授权&a…

Safari浏览器不支持let声明的解决方式

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂 前言 现在是2022年1月7日16:19:38,前几天用publiccms改了个网站&#xff0c;因为客户那边各种机型都有&#xff08;各PC端的分辨率也都不一样&#xff09;&#xff0c;所以导致页面呈现的效…

Executor 与 ExecutorService 和 Executors 傻傻分不清

转载自 Executor 与 ExecutorService 和 Executors 傻傻分不清 java.util.concurrent.Executor, java.util.concurrent.ExecutorService, java.util.concurrent. Executors 这三者均是 Java Executor 框架的一部分&#xff0c;用来提供线程池的功能。因为创建和管理线程非常心…

ASP.NET Core 2.0 自定义 _ViewStart 和 _ViewImports 的目录位置

在 ASP.NET Core 里扩展 Razor 查找视图目录不是什么新鲜和困难的事情&#xff0c;但 _ViewStart 和 _ViewImports 这2个视图比较特殊&#xff0c;如果想让 Razor 在我们指定的目录中查找它们&#xff0c;则需要耗费一点额外的精力。本文将提供一种方法做到这一点。注意&#x…