springboot+vue 实现系统公告页面

springboot+vue 实现系统公告页面 前言

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

1. 公告录入

   ---

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

2. 公告发布

   ---

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

    

    

    

    

    

    

3. 公告查询

   ---

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

4. 详情公告页

   ---

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

   前端vue代码

   ---

   
   
   
   
     @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;
     }
   

    java后端代码

   ---

   Controller的发布和查询部分

   	 @RequestMapping(value = "/doRelease", method = RequestMethod.GET)
   	 public Result doRelease(@RequestParam(name="id",required=true) String id, HttpServletRequest request) {
   		 Result result = new Result();
   		 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;
   
   	 }
   	 
   	 @RequestMapping(value = "/doReovke", method = RequestMethod.GET)
   	 public Result doReovke(@RequestParam(name="id",required=true) String id, HttpServletRequest request) {
   		 Result result = new Result();
   		 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 queryWrapper = new QueryWrapper<>();
   		 QueryWrapper queryWrapper = QueryGenerator.initQueryWrapper(ctNotice, req.getParameterMap());
   		 queryWrapper.eq("send_status","1");
   		 queryWrapper.orderByDesc("senddate");
   		 Page page = new Page(pageNo, pageSize);
   		 IPage pageList = ctNoticeService.page(page, queryWrapper);
   		 System.out.println(pageList);
   		 return Result.OK(pageList);
   
   	 }