月木学途开发 4.公告模块

2023-09-21 14:42:15

概述

效果图

数据库设计

DROP TABLE IF EXISTS `announcement`;
CREATE TABLE `announcement` (
  `announcementId` int(11) NOT NULL AUTO_INCREMENT,
  `announcementTitle` varchar(255) DEFAULT NULL,
  `announcementTime` varchar(255) DEFAULT NULL,
  `announcementContent` longtext,
  PRIMARY KEY (`announcementId`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4;

实体类设计

/**
 * 公告
 */
@Data
public class Announcement implements Serializable {
    @TableId
    private Integer announcementId;
    private String announcementTitle;//标题
    private String announcementTime;//时间
    private String announcementContent;//内容
}

Mapper层开发

public interface AnnouncementMapper extends BaseMapper<Announcement> {
}

Service层开发

AnnouncementService
package jkw.service;

import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import jkw.pojo.Announcement;

import java.util.List;

public interface AnnouncementService {
    void add(Announcement announcement);

    void update(Announcement announcement);

    void delete(Integer id);

    Announcement findById(Integer id);

    List<Announcement> findAll();

    Page<Announcement> search(String search, int page, int size);
}

AnnouncementServiceImpl
package jkw.service.impl;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import jkw.mapper.AnnouncementMapper;
import jkw.pojo.Announcement;
import jkw.service.AnnouncementService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

@Service
@Transactional
public class AnnouncementServiceImpl implements AnnouncementService {
    @Autowired
    private AnnouncementMapper announcementMapper;

    @Override
    public void add(Announcement announcement) {
        announcementMapper.insert(announcement);
    }

    @Override
    public void update(Announcement announcement) {
        announcementMapper.updateById(announcement);
    }

    @Override
    public void delete(Integer id) {
        announcementMapper.deleteById(id);
    }

    @Override
    public Announcement findById(Integer id) {
        return announcementMapper.selectById(id);
    }

    @Override
    public List<Announcement> findAll() {
        return announcementMapper.selectList(null);
    }

    @Override
    public Page<Announcement> search(String search, int page, int size) {
        QueryWrapper queryWrapper = new QueryWrapper();
        if (search != null) {

        }
        return announcementMapper.selectPage(new Page<>(page, size), queryWrapper);
    }

}

控制层开发

AnnouncementCon
package jkw.controller.back;

import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import jkw.pojo.Announcement;
import jkw.service.AnnouncementService;
import jkw.vo.BaseResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@CrossOrigin
@RequestMapping("/back/announcement")
public class AnnouncementCon {

    @Autowired
    private AnnouncementService announcementService;

    /**
     * 新增
     *
     * @param announcement
     * @return
     */
    @PostMapping("/add")
    @PreAuthorize("hasAnyAuthority('/website/announcement')")
    public BaseResult add(Announcement announcement) {
        announcementService.add(announcement);
        return BaseResult.ok();
    }

    /**
     * 修改
     *
     * @param announcement
     * @return
     */
    @PostMapping("/update")
    @PreAuthorize("hasAnyAuthority('/website/announcement')")
    public BaseResult update(Announcement announcement) {
        announcementService.update(announcement);
        return BaseResult.ok();
    }

    /**
     * 删除
     *
     * @param announcementId
     * @return
     */
    @DeleteMapping("/delete")
    @PreAuthorize("hasAnyAuthority('/website/announcement')")
    public BaseResult delete(Integer announcementId) {
        announcementService.delete(announcementId);
        return BaseResult.ok();
    }

    /**
     * 根据id查询
     *
     * @param announcementId
     * @return
     */
    @GetMapping("/findById")
    @PreAuthorize("hasAnyAuthority('/website/announcement')")
    public BaseResult findById(Integer announcementId) {
        Announcement announcement = announcementService.findById(announcementId);
        return BaseResult.ok(announcement);
    }

    /**
     * 查询所有
     *
     * @return
     */
    @GetMapping("/findAll")
    @PreAuthorize("hasAnyAuthority('/website/announcement')")
    public BaseResult findAll() {
        List<Announcement> all = announcementService.findAll();
        return BaseResult.ok(all);
    }

    /**
     * 分页查询
     *
     * @param page
     * @param size
     * @return
     */
    @GetMapping("/search")
    @PreAuthorize("hasAnyAuthority('/website/announcement')")
    public BaseResult search(String search, int page, int size) {
        Page<Announcement> brandPage = announcementService.search(search, page, size);
        return BaseResult.ok(brandPage);
    }
}

后台ui设计

<template>
  <div class="data-container">
    <!--添加 start-->
    <div class="data-header">
      <el-input class="input" @keyup.enter="searchHandle" v-model="searchInfo" size="large"
                placeholder="请输入关键字"></el-input>
      <el-button @click="searchHandle" class="button" size="large" type="primary" plain>搜索</el-button>
      <el-button round @click="addHander" size="large" type="primary">
        <el-icon>
          <DocumentAdd/>
        </el-icon>
        <span>新增</span>
      </el-button>
    </div>
    <!--添加 end-->
    <!--表格数据展示 start-->
    <div class="data-table">
      <el-table :data="dataList.list" style="width: 700px;">
        <el-table-column show-overflow-tooltip label="标题" prop="announcementTitle" align="center"></el-table-column>
        <el-table-column align="center" :formatter="value => detaFormater(Number(value.announcementTime))" prop="announcementTime" label="时间" width="100"/>
        <el-table-column label="操作" align="center" width="220">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页 start-->
      <div class="page">
        <el-pagination background
                       layout="prev,pager,next,jumper"
                       :default-page-size="defaultPageSize"
                       :total="totalData"
                       @current-change="currentChangeHaddler"></el-pagination>
      </div>
      <!--分页 end-->
    </div>
    <!--表格数据展示 end-->
    <!--添加对话框 start-->
    <el-dialog draggable destroy-on-close v-model="dialogAddVisible" title="添加" width="70%" center>
      <el-form inline :model="addFormInfo" label-width="150px">
        <el-form-item label="标题">
          <el-input v-model="addFormInfo.announcementTitle"></el-input>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker value-format="x" v-model="addFormInfo.announcementTime" type="date"></el-date-picker>
        </el-form-item>
        <el-form-item label="内容">
          <el-input type="textarea" rows="6" style="width: 800px" v-model="addFormInfo.announcementContent"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogAddVisible = false">取消</el-button>
                <el-button type="primary" @click="sureHandler">确定</el-button>
            </span>
      </template>
    </el-dialog>
    <!--添加对话框 end-->
    <!--编辑对话框 start-->
    <!--destroy-on-close:每次关闭对话框时直接销毁对话框，没有缓存-->
    <el-dialog
        draggable
        destroy-on-close
        v-model="dialogEditorVisible"
        title="编辑"
        width="70%"
        center>
      <el-form inline :model="editorFormInfo" label-width="150px">
        <el-form-item label="标题">
          <el-input v-model="editorFormInfo.announcementTitle"></el-input>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker value-format="x" v-model="editorFormInfo.announcementTime" type="date"></el-date-picker>
        </el-form-item>
        <el-form-item label="内容">
          <el-input type="textarea" rows="6" style="width: 800px" v-model="editorFormInfo.announcementContent"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogEditorVisible = false">取消</el-button>
                <el-button type="primary" @click="sureEditorHandler">确定</el-button>
            </span>
      </template>
    </el-dialog>
    <!--编辑对话框 end-->
  </div>
</template>

<script setup>
import axios from "../../api/index.js"
import {onMounted, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import {detaFormater} from "@/utils/utils.js"
//初始化分页查询数据
const dataList = reactive({
  list: []
})
//初始化总条数
const totalData = ref(0)
//当前页
const currentPage = ref(1)
//初始化分页显示条数
const defaultPageSize = ref(10)
//搜索初始化状态
const searchInfo = ref("")
//添加添加对话框控制器
const dialogAddVisible = ref(false)
//初始化添加对话框状态
const addFormInfo = reactive({
  announcementTitle: "",
  announcementTime: "",
  announcementContent:''
})
//编辑对话框控制器
const dialogEditorVisible = ref(false)
//初始化编辑对话框状态
const editorFormInfo = reactive({
  announcementId: '',
  announcementTitle: "",
  announcementTime: "",
  announcementContent:''
})
/**
 * 网路请求：分页查询
 *  */
const http = (search, page, size) => {
  axios.announcement_search({
    search: search,
    page: page,
    size: size
  }).then(res => {
    if (res.data.code == 200) {
      dataList.list = res.data.data.records
      totalData.value = res.data.data.total
    } else {
      ElMessage.error(res.data.message)
    }

  })
}
onMounted(() => {
  http(searchInfo.value, currentPage.value, defaultPageSize.value)
})
/**
 * 分页
 */
const currentChangeHaddler = (nowPage) => {
  http(searchInfo.value, nowPage, defaultPageSize.value)
  currentPage.value = nowPage
}
/**
 * 搜索按钮
 */
const searchHandle = () => {
  http(searchInfo.value, currentPage.value, defaultPageSize.value)
}
/**
 * 添加对话框弹出事件
 */
const addHander = () => {
  dialogAddVisible.value = true
}
/**
 * 添加对话框 确定事件
 */
const sureHandler = () => {
  axios.announcement_add({
    announcementTitle: addFormInfo.announcementTitle,
    announcementTime: addFormInfo.announcementTime,
    announcementContent: addFormInfo.announcementContent,
  }).then(res => {
    if (res.data.code == 200) {
      dialogAddVisible.value = false
      http(searchInfo.value, currentPage.value, defaultPageSize.value)
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**
 * 编辑对话框 弹出事件
 *  */
const handleEdit = (index, row) => {

  dialogEditorVisible.value = true
  axios.announcement_findById({
    announcementId: row.announcementId
  }).then(res => {
    if (res.data.code == 200) {
      editorFormInfo.announcementId = res.data.data.announcementId;
      editorFormInfo.announcementTitle = res.data.data.announcementTitle;
      editorFormInfo.announcementTime = res.data.data.announcementTime;
      editorFormInfo.announcementContent = res.data.data.announcementContent;
    } else {
      ElMessage.error(res.data.data.message)
    }
  })

}
/**
 * 编辑对话框 确定事件
 */
const sureEditorHandler = () => {
  axios.announcement_update({
    announcementId: editorFormInfo.announcementId,
    announcementTitle: editorFormInfo.announcementTitle,
    announcementTime: editorFormInfo.announcementTime,
    announcementContent: editorFormInfo.announcementContent,
  }).then(res => {
    if (res.data.code == 200) {
      dialogEditorVisible.value = false
      http(searchInfo.value, currentPage.value, defaultPageSize.value)
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**删除 */
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '确定删除么',
      '删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    //确认删除
    axios.announcement_delete({
      announcementId: row.announcementId
    }).then(res => {
      if (res.data.code == 200) {
        ElMessage({
          type: 'success',
          message: "删除成功！！！",
        })
        //刷新
        http(searchInfo.value, currentPage.value, defaultPageSize.value)
      } else {
        ElMessage({
          type: 'error',
          message: res.data.message,
        })
      }
    })
  }).catch(error => {
    ElMessage({
      type: 'info',
      message: "取消删除",
    })
  })


}
</script>
<style scoped>
.data-container {
  background: linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -o-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -ms-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -moz-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -webkit-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  height: 800px;
}

.data-header {
  padding: 20px;
}

.data-header .input {
  width: 300px;
}

.data-table {
  padding: 20px;
}

.page {
  position: fixed;
  right: 10px;
  bottom: 10px;
}
</style>

更多推荐

最大限度节省采购成本的七种方法

当前经济环境下，降低成本比以往任何时候都更受到企业的重视。降低成本通常是指在采购过程中节省的成本，但其实远不止于此。它还包括通过重新谈判合同条款和条件、改进管理和运营流程，以及数据和技术的智能使用而节省的成本。节省采购成本的七种方法虽然采购成本不可能完全消除，但采购专业人员可以采用一些技巧和方法来减少这些支出。1.重新

【前端知识】Three 学习日志（一）—— Three.js 的简单尝试

Three学习日志（一）——Three.js的简单尝试Three.js是一个使用JavaScript编写的轻量级3D图形库，它可以在浏览器中渲染出3D场景。在学习Three.js的过程中，建立基本场景是一个重要的第一步。通过设置相机、场景和渲染器等组件，可以创建一个简单的3D场景。在建立基本场景之后，可以通过添加模型、

软件需求怎么写？

前言：一般来说，软件产品的需求人员的主要输出物就是软件需求，如果这个软件产品就XX系统，人们口中的“系统需求”和“软件需求”就没有什么区别了。在车企行业，推行这ASPICE体系，在这个体系中明确申请了系统域和软件域，分别定义了系统需求和软件需求，那两者就有一些区别的。笔者作为一个开发转岗的软件需求，下文主要是在项目实战

MyBatis配置文件（mybatis-config.xml）

MyBatis配置文件的结构如下<?xmlversion="1.0"encoding="utf-8"?><!DOCTYPEconfigurationPUBLIC"-//mybatis.org//DTDConfig3.0//EN""http://mybatis.org/dtd/mybatis-3-config.dtd">

xxl-job

xxl-job:定时任务框架：导入xxl-job框架，然后创建一个springboot项目在里面，然后在配置类中写入配置（可以参考xxl-job自带的xxl-job-executor-sample-springboot）,然后这里需要手动在web端中的执行器管理中添加（项目名，地址等）bean型:是根据容器中的bean

java 工程管理系统源码+项目说明+功能描述+前后端分离 + 二次开发

Java版工程项目管理系统SpringCloud+SpringBoot+Mybatis+Vue+ElementUI+前后端分离功能清单如下：首页工作台：待办工作、消息通知、预警信息，点击可进入相应的列表项目进度图表：选择（总体或单个）项目显示1、项目进度图表2、项目信息施工地图：1、展示当前角色权限下能看到的施工地图（

DeepWalk实战---Wiki词条图嵌入可视化

DeepWalk是2014年提出的一种Graph中的Node进行Embedding的算法，是首次将自然语言处理领域NLP中的word2vec拓展到了graph。万事万物皆可embedding，所以DeepWalk我感觉在图机器学习中具有非常强的应用价值。1.首先打开AnacondaPrompt(Anaconda)，创建

springboot集成kafka

创建工程父工程pom父工程做了子工程管理和包管理<?xmlversion="1.0"encoding="UTF-8"?><projectxmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instanc

R 语言的安装教程

一、下载相关软件1、R下载官网：R:TheRProjectforStatisticalComputing找到中国镜像，下载快历史版本点击这里2、Rtools下载进入镜像后，点击这里然后选择与上面下载的R版本相对应的版本即可3、Rstudio下载官网：Posit|TheOpen-SourceDataScienceComp

R语言ggpubr包优雅绘制带统计数据的箱线图

ggpubr包是个很经典的R包，能绘制专业的论文绘图，它是对ggplot2进行了加强，R包的说明也是介绍用于创建和自定义基于“ggplot2”的出版物绘图，就是个为SCI而生的R包呀，今天咱们使用ggpubr绘制专业的论文需要的带统计数据的箱线图下面咱们开始，先导入R包和数据，使用R软件自带的ToothGrowth数据

Python进阶复习-Pandas库

目录使用场合对象创建Series对象DataFrame对象Numpy与DataFrame处理缺失值分组groupby()函数apply（）函数透视表使用场合Pandas库是基于Numpy库建立的为数据添加标签、处理缺失值、分组和透视表方面Pandas更高效对象创建Series对象Series是带标签的【默认是从0开始的

热文推荐
  1. 邮件数据安全案例 | 有一种遇见，叫相见恨晚

    Mr.赵回忆和联通相遇的时刻，他说，用一句诗来形容恰如其分，“众里寻他千百度，蓦然回首，那人却在，灯火阑珊处”。中国联合网络通信集团有限公司在国内31个省（自治区、直辖市）和境外多个国家和地区设有分支机构，以及130多个境外业务接入点，拥有覆盖全国、通达世界的现代通信网络和全球客户服务体系。“大联接”用户规模超过9亿。

  2. 智慧云图书馆： 能支撑智慧图书馆服务体系的图书馆管理与服务平台

    一、开源项目简介柏拉图PLATO智慧云图书馆：能支撑智慧图书馆服务体系的图书馆管理与服务平台。二、开源协议未使用主流开源协议三、界面展示四、功能概述平台优势总分馆架构：不再是信息的孤岛，而是共享信息的平台。友好的界面：通过简洁易用的平台界面，提高工作效率。智能的平台：不仅仅是管理平台，更是智能的连接和服务平台。服务大数

  3. Tomcat部署及优化

    Tomcat部署及优化一、Tomcat1.Tomcat简介2.Tomcat核心组件2.1什么是servlet2.2什么是JSP3.Tomcat的作用4.Tomcat组件结构4.1Container结构分析5.Tomcat请求过程二、Tomcat服务部署1.安装JDK1.2设置JDK环境变量2.安装启动Tomcat2.1

  4. 【转载保存】词性还原和词干的区别

    词形还原（lemmatization），是把一个任何形式的语言词汇还原为一般形式（能表达完整语义），而词干提取（stemming）是抽取词的词干或词根形式（不一定能够表达完整语义）。词形还原和词干提取是词形规范化的两类重要方式，都能够达到有效归并词形的目的，二者既有联系也有区别现将共同点和联系总结为以下４方面：（１）目

  5. python教程：使用gevent实现高并发并限制最大并发数

    嗨喽~大家好呀，这里是魔王呐❤~!python更多源码/资料/解答/教程等点击此处跳转文末名片免费获取importtimeimportgeventfromgevent.poolimportPoolfromgeventimportmonkey#一，定义最大并发数p=Pool(20)#二，导入gevent猴子补丁，没有它，

  6. 玩转Nginx

    Nginx是什么Nginx（enginex）是一款的Web服务器、反向代理服务器，能够实现前端Web应用的部署、请求反向代理及负载均衡处理等功能。特点轻量，占用内存少高可靠高并发、高性能可扩展性好支持热部署BSD许可证(开源、可修改再发布)反向代理（ReverseProxy）客户端请求某个网络资源。这个请求会发送到反向

  7. 基于Kintex UltraScale系列FPGA KU060/KU115高性能PCIe数据预处理载板（5GByte/s带宽）

    PCIE702是一款基于PCIE总线架构的高性能数据预处理FMC载板，板卡具有1个FMC+（HPC）接口，1路PCIex8主机接口、1个RJ45千兆以太网口、2个QSFP+40G光纤接口。板卡采用Xilinx的高性能KintexUltraScale系列FPGA作为实时处理器，实现FMC接口数据的采集、处理、以及背板接口

  8. Stability AI推出Stable Audio；ChatGPT：推荐系统的颠覆者

    🦉AI新闻🚀StabilityAI推出StableAudio，用户可以生成个性化音乐片段摘要：StabilityAI公司发布了一款名为StableAudio的工具，用户可以根据自己的文本内容自动生成音乐或音频。免费版可生成最长20秒音乐片段，Pro订阅用户可生成最长90秒的音频内容。该公司希望这款工具能够激发音乐爱

  9. JS Set和Map数据结构

    Set和Map数据结构1.Set数据结构1.1Set增删改查1.1.1add()方法1.1.2delete()1.1.3has()1.1.4clear()1.1.5size1.2Set遍历方法1.2.1keys()1.2.2values()1.2.3entries()1.2.3forEach()2.Map数据类型2.1