springboot+vue 实现系统公告页面

最新推荐文章于 2024-05-16 23:25:34 发布

KaTun_li

最新推荐文章于 2024-05-16 23:25:34 发布

阅读量1.8w

点赞数 13

分类专栏： springboot+vue 文章标签： vue.js spring boot 前端

本文链接：https://blog.csdn.net/qq_40923835/article/details/121019614

版权

本文档展示了如何使用SpringBoot后端和Vue前端实现一个系统公告管理页面。功能包括公告录入、发布、查询和详情展示。前端通过表单输入、日期选择器和分页组件实现数据交互，后端提供了更新发布和撤销的操作接口，以及已发布公告的查询接口，数据按时间排序并支持分页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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

最低0.47元/天解锁文章