springboot+vue 实现系统公告页面

前言

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

1. 公告录入

   ---

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

2. 公告发布

   ---

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

   

    

    

    

    

    

    

3. 公告查询

   ---

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

4. 详情公告页

   ---

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

   前端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.cur
           this.loadData();
         },
   
         pageClick: function(){
         //根据点击页数请求数据
           this.params.pageNo = this.cur
           this.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 - 2
               right = this.cur + 2
             }else{
               if(this.cur<=3){
                 left = 1
                 right = 5
               }else{
                 right = this.all
                 left = 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);
   
   	 }