05. 开发系统公告管理功能

254 字约 1 分钟读完416 次阅读

在线的代码生成器

http://124.223.63.127:9999/

本地复制代码的工具类

https://gitee.com/xqnode/CopyUtils/blob/master/CopyUtils.java

SQL

CREATE TABLE `notice` (
  `id` int NOT NULL AUTO_INCREMENT COMMENT '主键ID',
  `title` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '标题',
  `content` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '内容',
  `time` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '发布时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='系统公告';

开发后端接口

Notice.java

package com.example.entity;

public class Notice {

    /**主键ID */
    private Integer id;
    /**标题 */
    private String title;
    /**内容 */
    private String content;
    /**发布时间 */
    private String time;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    public String getTime() {
        return time;
    }

    public void setTime(String time) {
        this.time = time;
    }
}

NoticeMapper.xml

开发前端页面

Notice.vue

Home.vue

<template>
  <div>

    <div class="card" style="margin-bottom: 10px">
      <div>欢迎您，<b>{{ data.user.name }}</b> 祝您今天过得开心！</div>
    </div>
    <div class="card" style="line-height:30px; margin-bottom: 10px">
      <div>B站UP：<a style="color: #1890ff" href="https://space.bilibili.com/402779077">程序员青戈</a> 出品，感谢大家的支持~</div>
      <div>从0开始带你做一套完整的前后端分离项目，<b style="color: red">完全免费</b>，大家多多三连支持一波噢~</div>
      <div>获取项目资料请访问：<a style="color: #1890ff; font-weight: bold" href="https://javaxm.cn">https://javaxm.cn</a></div>
        <a style="color: #1890ff; font-weight: bold" href="https://codenice.cn">https://codenice.cn</a></div>
    </div>

    <div class="card" style="padding: 20px">
      <div style="font-size: 20px; font-weight: 400; margin-bottom: 20px">系统公告</div>
      <el-timeline style="max-width: 600px">
        <el-timeline-item
            placement="top"
            v-for="(notice, index) in data.noticeList"
            :key="index"
            color="#0bbd87"
            :timestamp="notice.time"
        >
          <div style="margin-bottom: 10px; font-size: 18px">{{ notice.title }}</div>
          <div style="color: #666">{{ notice.content }}</div>
        </el-timeline-item>
      </el-timeline>
    </div>


  </div>
</template>

<script setup>
import { reactive } from "vue";
import request from "@/utils/request";

const data = reactive({
  user: JSON.parse(localStorage.getItem('system-user') || '{}'),
  noticeList: []
})

request.get('/notice/selectAll').then(res => {
  data.noticeList = res.data
})
</script>