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

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

news 2026/3/26 15:03:57

目录

  • 一. 简述
  • 二. 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

高效安全备份QQ空间历史说说：GetQzonehistory全方位使用指南

高效安全备份QQ空间历史说说&#xff1a;GetQzonehistory全方位使用指南 【免费下载链接】GetQzonehistory 获取QQ空间发布的历史说说 项目地址: https://gitcode.com/GitHub_Trending/ge/GetQzonehistory 功能价值&#xff1a;为什么选择GetQzonehistory&#xff1f; …...

编程新知 2026/3/26 14:03:15

汉字拼音转换工具选型与实战指南：用pinyinjs解决多场景字符处理难题

汉字拼音转换工具选型与实战指南&#xff1a;用pinyinjs解决多场景字符处理难题 【免费下载链接】pinyinjs 一个实现汉字与拼音互转的小巧web工具库&#xff0c;演示地址&#xff1a; 项目地址: https://gitcode.com/gh_mirrors/pi/pinyinjs 在数字化产品开发中&#xf…...

编程新知 2026/3/26 13:40:59

用2万小时人类视频预训练机器人，一场豪赌还是必经之路？

先说结论核心验证了“人类数据缩放定律”&#xff1a;在灵巧操作任务上&#xff0c;模型性能随人类预训练数据量对数线性增长&#xff0c;为数据策略提供了可预测的依据。成功的关键在于“两阶段迁移”设计&#xff1a;用大规模、廉价但“嘈杂”的人类数据奠基通用结构&#xf…...

编程新知 2026/3/26 13:26:57

通义千问多模态检索系统：图文视频混合输入全解析

通义千问多模态检索系统&#xff1a;图文视频混合输入全解析 1. 多模态检索的行业痛点与解决方案 在信息爆炸的时代&#xff0c;传统文本检索系统面临三大核心挑战&#xff1a; 跨模态匹配失效&#xff1a;用户用文字描述"红色跑车在沙漠驰骋"&#xff0c;系统却返…...

编程新知 2026/3/26 13:26:57

利用快马平台快速生成javascript交互原型：以动态待办列表为例

利用快马平台快速生成JavaScript交互原型&#xff1a;以动态待办列表为例 最近在尝试快速验证一个待办事项应用的交互设计&#xff0c;发现用传统方式从零开始写代码太耗时了。正好试用了InsCode(快马)平台&#xff0c;只需要描述功能需求&#xff0c;就能自动生成可运行的Jav…...

编程新知 2026/3/26 13:24:57

别再只盯着采样率了！用STM32H723的ADC做高精度FFT分析，这些坑我帮你踩过了

STM32H723高精度FFT实战&#xff1a;从ADC采样到频谱分析的工程化实现 频谱分析在工业振动监测、音频处理、电力系统谐波检测等领域有着广泛应用。STM32H723系列凭借其高性能ADC和浮点运算单元&#xff0c;为嵌入式实时频谱分析提供了硬件基础。但实际工程中&#xff0c;从ADC…...

编程新知 2026/3/26 13:14:56

打破单模态壁垒：SillyTavern多模态交互功能深度解析

打破单模态壁垒&#xff1a;SillyTavern多模态交互功能深度解析 【免费下载链接】SillyTavern LLM Frontend for Power Users. 项目地址: https://gitcode.com/GitHub_Trending/si/SillyTavern 当你尝试向AI描述一幅复杂的场景&#xff0c;却发现文字难以捕捉光影的微妙…...

编程新知 2026/3/26 12:58:49

像素时装锻造坊企业落地：游戏公司美术部门像素资产标准化生产流程再造

像素时装锻造坊企业落地&#xff1a;游戏公司美术部门像素资产标准化生产流程再造 1. 项目背景与价值 在游戏美术制作领域&#xff0c;像素艺术资产的生产一直面临效率瓶颈。传统手工绘制方式需要美术师逐帧绘制&#xff0c;耗时耗力且难以保持风格统一。像素时装锻造坊(Pixe…...

编程新知 2026/3/26 12:56:49

淘宝任务自动化：让每天25分钟的重复操作变成5分钟的智能管理

淘宝任务自动化&#xff1a;让每天25分钟的重复操作变成5分钟的智能管理 【免费下载链接】taojinbi 淘宝淘金币自动执行脚本&#xff0c;包含蚂蚁森林收取能量&#xff0c;芭芭农场全任务&#xff0c;解放你的双手 项目地址: https://gitcode.com/gh_mirrors/ta/taojinbi …...

编程新知 2026/3/26 9:53:05

Pixel Fashion Atelier效果实测：在RTX 4090上单图生成耗时稳定在3.2秒内

Pixel Fashion Atelier效果实测&#xff1a;在RTX 4090上单图生成耗时稳定在3.2秒内 1. 测试环境与配置 1.1 硬件配置 本次测试使用的硬件平台为高端游戏工作站&#xff1a; 显卡&#xff1a;NVIDIA RTX 4090 (24GB GDDR6X)处理器&#xff1a;Intel i9-13900K内存&#xff…...

编程新知 2026/3/26 9:26:52