springboot+vue 实现系统公告页面

前言

近期根据工作需求做了一个系统公告页面，这里我们通过springboot+vue实现这个系统公告页面，主要设计的功能有

公告录入

这一块就是一个数据新增页面，前端获取的数据通过后端存储到数据库
公告发布

公告录入时默认状态为未发布，即通过状态码实现公告的发布和实现 0:未发布，1：发布，2：撤销，页面上添加一个发布按钮，根据公告发布状态的值选择是否显示这个按钮，发布即执行数据更新操作，即将状态码更新为1
公告查询

根据公告数据状态查询已发布数据，按时间排序，页面实现查询和分页

详情公告页

这页面是通过通用详情页模板，传递参数实现公告详情展示

前端vue代码

<template><a-card :bordered="false"><div class="page-recerive"><div  class="common_nav" ><h1  class="nav_title" >通知公告</h1></div><div class="content" ><div class="title"><h2 >通知公告浏览</h2></div><!--查询--><div data-v-47fc369c="" class="tool" style="margin-left: 25px;"><div  class="search" style="position: relative;float: left;"><input data-v-47fc369c="" type="text" v-bind:value="title" placeholder="请输入标题" @change="TitleInput" style="height: 36px;color: black;font-weight: bolder;"></div><div  class="el-select " style="float: left;line-height: 34px;margin-left: 15px;  display: inline-block;position: relative;"><a-date-picker  @change="DateInput" v-bind:value="time" style="color: black;font-weight: bolder;"/></div><div style="float: left;line-height: 34px;margin-left: 25px;    display: inline-block;position: relative;"><a-button  style="background-color: #1a3c8e;border-color: #1a3c8e;" type="primary" @click="searchQuery" icon="search">查询</a-button><a-button style="background-color: #1a3c8e; margin-left: 15px;border-color: #1a3c8e;" type="primary" @click="searchReset" icon="reload" >重置</a-button></div></div><!--数据--><div class="result" ><table><thead class="row-title" ><td style="width: 40%">公告标题</td><td style="width: 20%">发布部门</td><td style="width: 10%">发布时间</td></thead><tbody v-for="item in dataList"><tr class="row-body" ><td ><router-link  style="color:black" target="_blank" :to="{path:'../CtNoticeDetail',query:{id:item.id,company:item.company_dictText}}"><span class="box">♦</span>{{item.title}}</router-link></td><td><p class="company" >{{item.company_dictText}}</p></td><td><p class="senddate" >{{item.senddate}}</p></td></tr></tbody></table></div><!--数据分页--><div class="page-bar" style="margin:40px auto;margin-top: 50px;"><ul><li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li><li v-if="cur==1"><a class="banclick">上一页</a></li><li v-for="index in indexs" v-bind:class="{ 'active': cur == index}"><a v-on:click="btnClick(index)">{{ index }}</a></li><li v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一页</a></li><li v-if="cur == all"><a class="banclick">下一页</a></li><li><a>共<i>{{all}}</i>页</a></li></ul></div></div></div></a-card>
</template><script>import '@/assets/less/TableExpand.less'import { mixinDevice } from '@/utils/mixin'import { JeecgListMixin } from '@/mixins/JeecgListMixin'import CtNoticeModal from './modules/CtNoticeModal'import {filterMultiDictText} from '@/components/dict/JDictSelectUtil'import {doRelease, doReovke} from '@/api/api'     //.set('@api', resolve('src/api')) 表示@api指的是“src/api”import {getAction} from "@/api/manage";export default {name: 'CtNoticeList',mixins:[JeecgListMixin, mixinDevice],components: {CtNoticeModal},data () {return {title:'',time:'',params:{pageNo: 1,pageSize: 10,title:"",senddate:"",},description: '公告查询页面',release_url:"/ctms/ctNotice/ReleaveData"  ,//公告地址dataList:"",all:"",  //总页数cur:"",  //当前页数totalpage:"" ,//当前条数url: {list: "/ctms/ctNotice/ReleaveData"},dictOptions:{},superFieldList:[],}},methods: {//请求数据loadData(){getAction(this.release_url,this.params).then((res)=>{this.dataList=[];for(let i=0;i<res.result.records.length;i++){this.dataList.push(res.result.records[i])}this.all = res.result.pages;this.cur = res.result.current;this.totalpage = res.result.total;})},searchReset(){this.params.senddate='';this.params.title = '';this.params.pageNo = 1;this.params.pageSize = 10;this.title = '';this.time = '';getAction(this.release_url,this.params).then((res)=>{this.dataList=[];for(let i=0;i<res.result.records.length;i++){this.dataList.push(res.result.records[i])}this.all = res.result.pages;this.cur = res.result.current;this.totalpage = res.result.total;})},//查询值TitleInput(value){this.params.title = value.target.value;this.title = value.target.value;},//查询值DateInput(date, dateString){this.params.senddate = dateString;this.time = dateString;},//分页btnClick: function(data){//页码点击事件if(data != this.cur){this.cur = data}//根据点击页数请求数据this.params.pageNo = this.curthis.loadData();},pageClick: function(){//根据点击页数请求数据this.params.pageNo = this.curthis.loadData();}},computed: {
//分页indexs: function(){var left = 1;var right = this.all;var ar = [];if(this.all>= 5){if(this.cur > 3 && this.cur < this.all-2){left = this.cur - 2right = this.cur + 2}else{if(this.cur<=3){left = 1right = 5}else{right = this.allleft = this.all -4}}}while (left <= right){ar.push(left)left ++}return ar}},created() {//调用方法this.loadData();},}
</script>
<style scoped>@import '~@assets/less/common.less';/*公告浏览页面*/.page-recerive{width: 80%;height:650px;margin-left:10%;box-sizing: border-box;background: #fff;box-shadow: 0 0 20px;}/*右侧*/.common_nav{width: 165px;height: 100%;float: left;background: #393b5d;}.nav_title{padding: 30px 0 24px 24px;font-size: 20px;font-weight: 400;color: #fff;border: 0;background: #4b4d6e;outline: none;}.content{padding-bottom: 30px;margin-left: 170px;padding: 10px;height: 98%;position: relative;}.content .title h2{font-size: 16px;margin-top: 20px;font-weight: bold;}.content .result{height: calc(100% - 170px);margin-top: 5%;}.content .result .row-title{font-size: 18px;font-weight: bold;color: #1a3c8e;text-align: left;padding: 0 10px;line-height: 40px;border-bottom: 0.5px solid #1a3c8e;}.content .result .row-body{margin-left: 30px;color: black;font-size: 16px;border-bottom: 0.5px solid #ececec;align-items: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;background: #f3f6f9;margin-bottom: 6px;font-style: normal;}.content .result .row-body .box{color: #fff;display: inline-block;background: #5487c7;width: 24px;height: 24px;line-height: 24px;text-align: center;margin-right: 6px;}/*分页*/.page-bar{margin:40px auto;margin-top: 150px;}ul,li{margin: 0px;padding: 0px;}li{list-style: none}.page-bar li:first-child>a {margin-left: 0px}.page-bar a{border: 1px solid #ddd;text-decoration: none;position: relative;float: left;padding: 6px 12px;margin-left: -1px;line-height: 1.42857143;color: #5D6062;cursor: pointer;margin-right: 20px;}.page-bar a:hover{background-color: #eee;}.page-bar a.banclick{cursor:not-allowed;}.page-bar .active a{color: #fff;cursor: default;background-color: #1a3c8e;border-color: #1a3c8e;}.page-bar i{font-style:normal;color: #1a3c8e;margin: 0px 4px;font-size: 12px;}
</style>

java后端代码

Controller的发布和查询部分

/***   更新发布操作* @param id* @return*/@RequestMapping(value = "/doRelease", method = RequestMethod.GET)public Result<CtNotice> doRelease(@RequestParam(name="id",required=true) String id, HttpServletRequest request) {Result<CtNotice> result = new Result<CtNotice>();CtNotice ctNotice = ctNoticeService.getById(id);if (ctNotice == null) {result.error500("未找到对应实体");} else {ctNotice.setSendStatus(CommonSendStatus.PUBLISHED_STATUS_1);//发布中ctNotice.setSenddate(new Date());String currentUserName = JwtUtil.getUserNameByToken(request);ctNotice.setCreateBy(currentUserName);boolean ok = ctNoticeService.updateById(ctNotice);if (ok) {result.success("公告发布成功");}}return result;}/***     更新撤销操作* @param id* @return*/@RequestMapping(value = "/doReovke", method = RequestMethod.GET)public Result<CtNotice> doReovke(@RequestParam(name="id",required=true) String id, HttpServletRequest request) {Result<CtNotice> result = new Result<CtNotice>();CtNotice ctNotice = ctNoticeService.getById(id);if(ctNotice==null) {result.error500("未找到对应实体");}else {ctNotice.setSendStatus(CommonSendStatus.REVOKE_STATUS_2);//撤销发布
//           ctNotice.setCancelTime(new Date());boolean ok = ctNoticeService.updateById(ctNotice);if(ok) {result.success("公告撤销成功");}}return result;}//    //获取已发布数据@RequestMapping(value = "/ReleaveData",method = RequestMethod.GET)public Result<?> testData(CtNotice ctNotice,@RequestParam(name="pageNo", defaultValue="1") Integer pageNo,@RequestParam(name="pageSize", defaultValue="10") Integer pageSize,HttpServletRequest req) {
//       QueryWrapper<CtNotice> queryWrapper = new QueryWrapper<>();QueryWrapper<CtNotice> queryWrapper = QueryGenerator.initQueryWrapper(ctNotice, req.getParameterMap());queryWrapper.eq("send_status","1");queryWrapper.orderByDesc("senddate");Page<CtNotice> page = new Page<CtNotice>(pageNo, pageSize);IPage<CtNotice> pageList = ctNoticeService.page(page, queryWrapper);System.out.println(pageList);return Result.OK(pageList);}

springboot+vue 实现系统公告页面相关推荐

SpringBoot+Vue+Mybatis-plus 博客（一）：完成博客后台前端登录页面、后端登录接口
SpringBoot+Vue+Mybatis-plus 博客:个人博客介绍及效果展示 SpringBoot+Vue+Mybatis-plus 博客(一):完成博客后台前端登录页面.后端登录接口 Spr ...
Springboot+vue前后端分离考试系统
作者主页:编程指南针简介:Java领域优质创作者.CSDN博客专家 Java项目.简历模板.学习资料.面试题库.技术互助文末获取源码项目编号:BS-XX-104 指南针考试系统是一个多角色在线 ...
SpringBoot+vue实现前后端分离的简历系统
文末获取源码开发语言:Java 开发工具:IDEA /Eclipse 数据库:MYSQL5.7 应用服务:Tomcat7/Tomcat8 使用框架:springboot+vue JDK版本:jdk1 ...
Java基于springboot+vue的电子相册管理系统前后端分离node
智能电子相册是一个可以永久保留记忆的东西,用户可以讲自己美好的一面展示在网络上,人更多的人了解到自己的生活,为此我们通过Java语言并结合springboot+vue开发了本次的电子相册管理系统,希望 ...
Springboot+vue项目人事管理系统
开发语言:Java 开发工具:IDEA /Eclipse 数据库:MYSQL5.7 应用服务:Tomcat7/Tomcat8 使用框架:springboot+vue JDK版本:jdk1.8 文末获取 ...
java农机收割机租赁预约系统springboot+Vue
农机电招平台系统的主要功能展示了首页,农机,系统公告,个人中心,后台管理等,用户可根据权限进行相应操作农机,在农机页面可以查看品牌,型号,农机类型,日租价,机主账号,机主姓名,手机号等内容,并进行预 ...
添加数据功能java,SpringBoot+Vue实现数据添加功能
一.添加代码生成器用来自动为数据库映射类建立:mapper.service.controller package com.hanmh.utils; import com.baomidou.mybat ...
使用Gradle整合SpringBoot+Vue.js-开发调试与打包
为什么80%的码农都做不了架构师?>>> 非常感谢两位作者: kevinz分享的文章<springboot+gradle+vue+webpack 组合使用> 首席卖 ...
SpringBoot + Vue + nginx项目一起部署
SpringBoot + Vue + nginx项目一起部署 SpringBoot + Vue 一起部署到 nginx 1.后端项目部署: (1) Java项目打包上传到服务器,开启服务 java ...

springboot+vue 实现系统公告页面

前言

前端vue代码

java后端代码

springboot+vue 实现系统公告页面相关推荐

最新文章

热门文章