前言

                近期根据工作需求做了一个系统公告页面,这里我们通过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);
    
    	 }
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐