CMS模块

内容管理系统

1.动态公告

数据表设计

create table notification
(
    id         bigint  							comment 'id' primary key,
    title      varchar(255)                       not null comment '公告标题',
    content    varchar(2048)                      not null comment '公告内容',
    startTime  datetime                           null comment '开始时间',
    endTime    datetime                           null comment '结束时间',
    status     tinyint  default 0                 not null comment '0: 关闭，1: 启用',
    domain     varchar(255)                       null comment '域名',
    createTime datetime default CURRENT_TIMESTAMP null comment '创建时间',
    updateTime datetime default CURRENT_TIMESTAMP null on update CURRENT_TIMESTAMP,
    creater     bigint                            null comment '创建者',
    updater     bigint                            null comment '修改者',
    isDelete   tinyint  default 0                 not null comment '是否删除'
);

实现说明

后台：通知信息管理

前台：前端SDK构建，调用后台接口获取通知弹窗

创建vite项目进行构建：npm create vite@latest 根据提示初始化项目，然后选择一个第三方弹窗库实现效果，参考网站BootCDN

选择一个体积比较小、样式精美的组件库，此处选用swaeetalert2

​ npm create vite@latest，创建一个react项目，配置细节参考Vite官方文档

​ 创建完成更新依赖并启动项目npm install、npm run dev

​

import Swal from "sweetalert2";

document.addEventListener("DOMContentLoaded", function () {
  /**
   * 后端地址（本地）
   */
  const BACKEND_HOST_LOCAL = "http://localhost:8101";

  /**
   * 后端地址（线上）
   */
  const BACKEND_HOST_PROD = "http://xxx.xxx";

  function getNotificationVoUsingGet(params) {
    const url = `http://localhost:8101/api/notification/get/vo`;
    // const url = `${BACKEND_HOST_PROD}/api/notification/get/vo`;

    return fetch(url + "?" + new URLSearchParams(params))
      .then((response) => {
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        return response.json();
      })
      .then((data) => data)
      .catch((error) => {
        // 处理错误
        console.error("Fetch request error:", error);
        throw error;
      });
  }

  const fetchNotification = function (domain) {
    // 发起请求获取通知信息的逻辑
    getNotificationVoUsingGet({ domain })
      .then((response) => {
        const data = response.data;
        const id = data.id;
        const updateTime = data.updateTime;
        if (
          !localStorage.getItem(id + updateTime) &&
          data.title &&
          data.content
        ) {
          // 使用 SweetAlert2 显示弹窗
          Swal.fire({
            title: data.title,
            text: data.content,
            icon: "info",
            confirmButtonText: "知道了",
          });

          // 存储到 localStorage
          localStorage.setItem(id + updateTime, "id");
        }
      })
      .catch((error) => {
        console.error("Fetch request error:", error);
      });
  };

  const url = new URL(location.href);
  const domain = url.hostname;
  fetchNotification(domain);
});

2.主页轮播管理

字段名称	字段类型	字段默认值	是否允许为空	字段描述	索引	字段数据示例
platform	char(30)	pc	否	所属平台（pc PC网站, h5 H5手机网站, ios 苹果APP, android 安卓APP, alipay 支付宝小程序, weixin 微信小程序, baidu 百度小程序）	普通索引	pc
event_type	tinyint(2)	-1	否	事件类型（0 WEB页面, 1 内部页面(小程序或APP内部地址), 2 外部小程序(同一个主体下的小程序appid), 3 打开地图, 4 拨打电话）	无索引	-1
event_value	char(255)		否	事件值	无索引
images_url	char(255)		否	图片地址	无索引
yesapi_shopxo_s_slide_name	char(60)		否	别名	无索引
bg_color	char(30)		否	css背景色值	无索引
is_enable	tinyint(1)	1	否	是否启用（0否，1是）	普通索引	1
sort	tinyint(3)	0	否	排序	普通索引	0
upd_time	int(11)	0	否	更新时间	无索引	0

CREATE TABLE `yesapi_shopxo_s_slide` (
    `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
    `platform` char(30) NOT NULL DEFAULT 'pc' COMMENT '所属平台（pc PC网站, h5 H5手机网站, ios 苹果APP, android 安卓APP, alipay 支付宝小程序, weixin 微信小程序, baidu 百度小程序）',
    `event_type` tinyint(2) NOT NULL DEFAULT '-1' COMMENT '事件类型（0 WEB页面, 1 内部页面(小程序或APP内部地址), 2 外部小程序(同一个主体下的小程序appid), 3 打开地图, 4 拨打电话）',
    `event_value` char(255) NOT NULL COMMENT '事件值',
    `images_url` char(255) NOT NULL COMMENT '图片地址',
    `yesapi_shopxo_s_slide_name` char(60) NOT NULL COMMENT '别名',
    `bg_color` char(30) NOT NULL COMMENT 'css背景色值',
    `is_enable` tinyint(1) NOT NULL DEFAULT '1' COMMENT '是否启用（0否，1是）',
    `sort` tinyint(3) NOT NULL DEFAULT '0' COMMENT '排序',
    `upd_time` int(11) NOT NULL DEFAULT '0' COMMENT '更新时间',
    KEY `platform` (`platform`),
    KEY `is_enable` (`is_enable`),
    KEY `sort` (`sort`),
    PRIMARY KEY (`id`)
) ENGINE=InnoDB COMMENT 'ShopXO商城-轮播图片';

2.日志管理

3.友链表

字段名称	字段类型	字段默认值	是否允许为空	字段描述	索引	字段数据示例
name	varchar(60)		否	名称	无索引
url	varchar(150)		否	url链接	无索引
target	smallint(2)	0	否	跳转方式，0_blank，1_self，2_parent，3_top，4framename	无索引	0
group	int(5)	0	否	分组	无索引	0
listorder	int(11)	50	否	排序	无索引	50
status	tinyint		否	友链状态
isDelete	tinyint			是否删除
createTime				创建时间
updateTime				修改时间

CREATE TABLE `yesapi_fl_friendlink` (
    `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
    `name` varchar(60) NOT NULL COMMENT '名称',
    `url` varchar(150) NOT NULL COMMENT 'url链接',
    `target` smallint(2) NOT NULL DEFAULT '0' COMMENT '跳转方式，0_blank，1_self，2_parent，3_top，4framename',
    `group_id` int(5) NOT NULL DEFAULT '0' COMMENT '分组ID',
    `listorder` int(11) NOT NULL DEFAULT '50' COMMENT '排序',
    PRIMARY KEY (`id`)
) ENGINE=InnoDB COMMENT 'CMS建站系统-友情链接表';