当前位置： 首页 > news >正文

用React给XXL-JOB开发一个新皮肤（一）：环境搭建和项目初始化

news 2026/2/9 0:38:21

目录

  • 一. 简述
  • 二. Fork 项目
  • 三. 搭建开发环境
  • 四. 初始化皮肤项目
  • 五. 添加相关依赖
  • 六. 预览

一. 简述

大名鼎鼎的 xxl-job 任务调度中心我们应该都使用过，项目地址：xxl-job。它是一个分布式任务调度平台，其核心设计目标是开发迅速、学习简单、轻量级、易扩展。
在这里插入图片描述
该项目中的页面是使用freemarker做页面渲染的。这里我们使用 React和Antd的技术栈实现一个管理平台的新皮肤。接下来跟着我一步步实现这个新皮肤吧！

二. Fork 项目

这里我们可以在码云上将 xxl-job 项目 fork 到自己的仓库。这里使用的是最新的分支 2.4.0；从这个分支作为分支起点，如下图：
在这里插入图片描述

三. 搭建开发环境

接下来我们先搭建一个 xxl-job 的开发环境。这里我们需要现在项目根目录创建一个 log目录（用来存放运行的日志文件）。这里我们需要修改下面几个文件：

  • doc/db/tables_xxl_job.sql：建表语句，在自己的数据库上执行该 SQL
  • xxl-job-admin/src/main/resources/application.properties：需要修改数据库文件
    ### xxl-job, datasource 修改自己数据库地址
spring.datasource.url=jdbc:mysql://192.168.110.107:3306/xxl_job?useUnicode=true&characterEncoding=UTF-8&autoReconnect=true&serverTimezone=Asia/Shanghai
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
  • xxl-job-admin/src/main/resources/logback.xml：修改存放日志路径
    <?xml version="1.0" encoding="UTF-8"?>
<configuration debug="false" scan="true" scanPeriod="1 seconds"><contextName>logback</contextName><property name="log.path" value="./log/xxl-job-admin.log"/><!-- 忽略其他部分 -->
</configuration>
  • xxl-job-executor-samples/xxl-job-executor-sample-springboot/src/main/resources/logback.xml：修改存放日志路径
    <?xml version="1.0" encoding="UTF-8"?>
<configuration debug="false" scan="true" scanPeriod="1 seconds"><contextName>logback</contextName><property name="log.path" value="./log/xxl-job-executor-sample-springboot.log"/><!-- 忽略其他部分 -->
</configuration>

接下来分别启动，xxl-job-admin的启动类和 xxl-job-executor-sample的 springboot 模块。
在这里插入图片描述
接着我们访问：http://localhost:8080/xxl-job-admin。输入账号：admin密码：123456。
在这里插入图片描述

这样开发环境就搞定了，这下来我们开始初始化皮肤的项目。

四. 初始化皮肤项目

这里我们在项目根目录中创建 xxl-job-web 目录，用来存放前端项目。
在这里插入图片描述
这里我们使用 vite 来初始化项目。选择 React 框架和 TS，创建完成执行执行 yarn install 安装依赖。
在这里插入图片描述

五. 添加相关依赖

这里添加我们需要的依赖，使用的依赖如下：

依赖版本描述
antd5.2.6前端 UI 组件库
axios1.6.5HTTP 请求库
@ant-design/icons5.2.6图标库
@ant-design/charts2.0.3charts 库
ahooks3.7.8hooks工具库
less4.2.0css 预处理库
less-loader11.1.4webpack 构建处理 less 库
react-router-dom6.21.1前端路由库
zustand4.4.7简单好用的状态管理库
@emotion/react11.11.3React 组件中样式的处理和管理功能库
@emotion/styled11.11.0提供了一种创建样式化组件的方式的库

这里 package.json如下：

{"name": "xxl-job-web","description": "xxl-job新皮肤","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "tsc && vite build","lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","preview": "vite preview"},"dependencies": {"@ant-design/charts": "^2.0.3","@ant-design/icons": "^5.2.6","@emotion/react": "^11.11.3","@emotion/styled": "^11.11.0","ahooks": "^3.7.8","antd": "^5.12.8","axios": "^1.6.5","less": "^4.2.0","less-loader": "^11.1.4","react": "^18.2.0","react-dom": "^18.2.0","react-router-dom": "^6.21.1","zustand": "^4.4.7"},"devDependencies": {"@types/node": "^20.10.7","@types/react": "^18.2.43","@types/react-dom": "^18.2.17","@types/react-router-dom": "^5.3.3","@typescript-eslint/eslint-plugin": "^6.14.0","@typescript-eslint/parser": "^6.14.0","@vitejs/plugin-react": "^4.2.1","eslint": "^8.55.0","eslint-plugin-react-hooks": "^4.6.0","eslint-plugin-react-refresh": "^0.4.5","typescript": "^5.2.2","vite": "^5.0.8"}
}

六. 预览

这里我们将vite 初始化的文件整理下，移除一些不需要的文件。仅留下 App.tsx和 main.tsx 文件。
在这里插入图片描述
这里我们在 index.html文件中修改 title 标签内容。

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>任务调度中心</title></head><body><div id="root"></div><script type="module" src="/src/main.tsx"></script></body>
</html>

将 main.tsx 文件修改为如下：

import React from 'react'
import ReactDOM from 'react-dom/client'
import Application from './App.tsx'ReactDOM.createRoot(document.getElementById('root')!).render(<React.StrictMode><Application /></React.StrictMode>,
)

将 App.tsx 文件修改为如下：

const Application = () => <h1>任务调度中心</h1>export default Application

接着我们启动项目：yarn dev
在这里插入图片描述
好了，现在我们项目已经初始化完成，下一篇文章将介绍配置 vite、规划项目目录、配置路由。

相关文章：

用React给XXL-JOB开发一个新皮肤（一）：环境搭建和项目初始化

目录 一. 简述二. Fork 项目三. 搭建开发环境四. 初始化皮肤项目五. 添加相关依赖六. 预览 一. 简述 大名鼎鼎的 xxl-job 任务调度中心我们应该都使用过&#xff0c;项目地址&#xff1a;xxl-job。它是一个分布式任务调度平台&#xff0c;其核心设计目标是开发迅速、学习简单…...

编程日记 2024/1/14 12:46:45

华为常用的命令——display，记得点赞收藏！

华为设备提供了多条display命令用于查看硬件部件、接口及软件的状态信息。通常这些状态信息可以为用户故障处理提供定位思路。 常用的故障信息搜集的命令如下&#xff1a; 路由器常用维护命令表 交换机常用的故障信息搜集 关注 工 仲 好&#xff1a;IT运维大本营&#xff0c;获…...

编程日记 2024/1/14 12:44:44

Costco攻入山姆大本营

01 Costco深圳店开业火爆 “我今天不去Costco&#xff0c;早上还没开业&#xff0c;路上就已经堵车了&#xff0c;看来今天人很多&#xff0c;过几天再去”&#xff0c;原本计划在Costco开业当天去逛逛的张芸&#xff08;化名&#xff09;无奈只能放弃。 家住在Costco深圳店旁…...

编程日记 2024/1/14 12:43:43

什么是常量？如何区分常量和变量？

一、问题 什么是常量&#xff0c;什么是变量&#xff1f;怎样区分⼆者&#xff1f; 二、解答 1. 常量与变量 &#xff08;1&#xff09;常量即其值在程序运⾏的过程中是不可以改变的&#xff0c;如123&#xff0c;-4567 为数值常量&#xff1b; &#xff08;2&#xff09;变量…...

编程日记 2024/1/14 12:41:41

uniapp返回上一页并刷新数据

在uniapp中&#xff0c;返回页面时onLoad是不会触发的 如果只需要在特定情况下返回上一页才需要刷新数据 可以使用$emit和$no去解决 例如&#xff1a;注册完成后返回到首页并隐藏注册按钮&#xff0c;register.vue和index.vue register.vue <template><view clic…...

编程日记 2024/1/14 12:39:40

LeetCode 0083.删除排序链表中的重复元素：模拟

【LetMeFly】83.删除排序链表中的重复元素&#xff1a;模拟 力扣题目链接&#xff1a;https://leetcode.cn/problems/remove-duplicates-from-sorted-list/ 给定一个已排序的链表的头 head &#xff0c; 删除所有重复的元素&#xff0c;使每个元素只出现一次 。返回 已排序的…...

编程日记 2024/1/14 12:37:38

Javaweb之SpringBootWeb案例新增部门的详细解析

2.3 删除部门 查询部门的功能我们搞定了&#xff0c;下面我们开始完成删除部门的功能开发。 2.3.1 需求 点击部门列表后面操作栏的 "删除" 按钮&#xff0c;就可以删除该部门信息。 此时&#xff0c;前端只需要给服务端传递一个ID参数就可以了。 我们从接口文档中也…...

编程日记 2024/1/14 12:35:36

基于微信小程序的音乐平台 开源项目

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、系统展示 四、核心代码4.1 查询单首音乐4.2 新增音乐4.3 新增音乐订单4.4 查询音乐订单4.5 新增音乐收藏 五、免责说明 一、摘要 1.1 项目介绍 基于微信小程序JAVAVueSpringBootMySQL的音乐平台&#xff0c;包含了音乐…...

编程日记 2024/1/14 12:33:33

uniapp 微信小程序跳转外部链接

一、背景&#xff1a; 开发小程序时&#xff0c;跳转到内部路径通常会使用&#xff1a;uni.navigateTo&#xff0c;uni.redirectTo&#xff0c;uni.reLaunch&#xff0c;uni.switchTab等方法&#xff0c;可以跳转到pages.json中已经注册的页面 uni.navigateTo(OBJECT) | uni-…...

编程日记 2024/1/14 12:32:32

【STM32】FLASH闪存

1 FLASH闪存简介 本节所指STM32内部闪存&#xff0c;即下载程序的时候&#xff0c;程序存储的地方。&#xff08;非易失性&#xff09; STM32F1系列的FLASH包含程序存储器、系统存储器&#xff08;bootloader&#xff0c;不允许修改&#xff09;和选项字节三个部分&#xff0…...

编程日记 2024/1/14 12:30:31

滴水内存地址堆栈

两个十六进制数 刚好是一个字节刚好 DC这的一个字节数据为E4 一个内存地址 后面表示四个字节的数据 所以有八个十六进制的数 BASE是高地址 所以放入一个四字节后就 -4...

编程日记 2024/1/14 12:25:26

Laravel中的lockForUpdate悲观锁

lockForUpdate 是悲观锁&#xff0c;测试就不写了 注意的事项 lockForUpdate 必须在事务中lockForUpdate 被阻塞的查询必须是同样添加了lockForUpdate的语句查询语句走索引&#xff0c;则使用行锁&#xff0c;否则使用表锁 现在举例说明第一项和第二项 开启事务并添加锁 pub…...

编程日记 2024/1/14 12:24:25

BikeDNA（八）外在分析：OSM 与参考数据的比较2

BikeDNA&#xff08;八&#xff09;外在分析&#xff1a;OSM 与参考数据的比较2 1.数据完整性 见链接 2.网络拓扑结构 见链接 3.网络组件 本节仔细研究两个数据集的网络组件特征。 断开连接的组件不共享任何元素&#xff08;节点/边&#xff09;。 换句话说&#xff0c;…...

编程日记 2024/1/14 12:23:23

28 星际旋转

效果演示 实现了一个太阳系动画&#xff0c;其中包括了地球、火星、金星、土星、水星、天王星、海王星以及火卫二号等行星的动画效果。太阳系的行星都被放在一个固定的容器中&#xff0c;并使用CSS动画来实现旋转和移动的效果。当太阳系的行星绕着太阳运行时&#xff0c;它们会…...

编程日记 2024/1/14 12:20:20

测试人员必备基本功（3）

容易被忽视的bug 第三章 查询列表容易被忽视的bug 文章目录 容易被忽视的bug第三章 查询列表容易被忽视的bug 前言1.查询角色2.接口设计 三、测试设计1.测试点2.容易发现bug的测试点如下&#xff1a; 总结 前言 一个WEB系统的所有功能模块&#xff0c;其实都是围绕“增、删、…...

编程日记 2024/1/14 12:17:17

记一次数据修复，需要生成十万条sql进行数据回滚

一、背景 数据回滚 二、难点 2.1 需要处理的数据涉及多达数万个用户&#xff0c;每个用户涉及的表达到10个 2.2 时间紧急&#xff0c;需要快速回滚,数据需要完整 2.3 数据存在重复或空缺问题 三、解决方案 3.1 数据多&#xff0c;使用分批处理&#xff0c;把大任务分割成若…...

编程日记 2024/1/14 12:15:15

[paddle]paddlehub部署paddleocr的hubserving服务

步骤如下&#xff1a; 第一步&#xff1a;首先需要安装好paddleocr环境已经paddlehub环境 第二步&#xff1a;下载paddleocr源码&#xff1a; git clone https://github.com/PaddlePaddle/PaddleOCR.git 然后切换到paddocr目录执行 新建个文件夹叫Inference把paddleocr模型…...

编程日记 2024/1/14 12:13:13

2024校招，网易互娱游戏测试工程师一面

前言 大家好&#xff0c;今天回顾一下&#xff0c;我前段时间参加的游戏测试工程师技术面试 两个面试官&#xff0c;一个提问&#xff0c;另一个负责记录 过程 自我介绍比赛经历介绍一下使用的博弈算法穷举算法对性能有什么影响怎么评估局面好坏出现的bug怎么解决的&#x…...

编程日记 2024/1/14 12:11:12

Linux Ubuntu搭建我的世界Minecraft服务器实现好友远程联机MC游戏

文章目录 前言1. 安装JAVA2. MCSManager安装3.局域网访问MCSM4.创建我的世界服务器5.局域网联机测试6.安装cpolar内网穿透7. 配置公网访问地址8.远程联机测试9. 配置固定远程联机端口地址9.1 保留一个固定tcp地址9.2 配置固定公网TCP地址9.3 使用固定公网地址远程联机 前言 Li…...

编程日记 2024/1/14 12:10:11

Springboot对接ceph集群以及java利用s3对象网关接口与ceph集群交互

springboot中引入相关依赖 <dependency><groupId>software.amazon.awssdk</groupId><artifactId>regions</artifactId><version>2.22.13</version></dependency><dependency><groupId>software.amazon.awssdk<…...

编程日记 2024/1/14 12:09:10

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

编程新知 2026/2/8 4:37:13

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

编程新知 2025/12/3 9:38:15

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

编程新知 2026/1/15 4:25:16

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

编程新知 2025/9/13 20:07:18

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

编程新知 2025/12/4 0:13:33

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

编程新知 2026/2/4 13:10:38

计算机基础知识解析：从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

编程新知 2026/1/31 9:44:27

MinIO Docker 部署：仅开放一个端口

MinIO Docker 部署：仅开放一个端口 在实际的服务器部署中，出于安全和管理的考虑，我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务，支持 Docker 部署，但默认情况下它需要两个端口：一个是 API 端口（用于存储和访问数据），另一个是控制台端口（用于管理界面…...

编程新知 2025/12/23 11:08:56

python爬虫——气象数据爬取

一、导入库与全局配置 python 运行 import json import datetime import time import requests from sqlalchemy import create_engine import csv import pandas as pd作用&#xff1a; 引入数据解析、网络请求、时间处理、数据库操作等所需库。requests&#xff1a;发送 …...

编程新知 2025/12/16 7:53:39

MFE(微前端) Module Federation：Webpack.config.js文件中每个属性的含义解释

以Module Federation 插件详为例&#xff0c;Webpack.config.js它可能的配置和含义如下&#xff1a; 前言 Module Federation 的Webpack.config.js核心配置包括&#xff1a; name filename&#xff08;定义应用标识&#xff09; remotes&#xff08;引用远程模块&#xff0…...

编程新知 2025/9/20 11:57:48