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

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

news 2025/12/8 20:50:56

目录

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

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2025/12/8 17:54:07

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/10/24 14:20:29

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/9/18 19:34:22

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

编程新知 2025/10/19 5:14:05

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

编程新知 2025/11/25 4:59:47

成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

编程新知 2025/12/3 18:37:53

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/7/25 1:21:53

return this；返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

编程新知 2025/10/16 22:41:12

Docker拉取MySQL后数据库连接失败的解决方案

在使用Docker部署MySQL时&#xff0c;拉取并启动容器后&#xff0c;有时可能会遇到数据库连接失败的问题。这种问题可能由多种原因导致&#xff0c;包括配置错误、网络设置问题、权限问题等。本文将分析可能的原因&#xff0c;并提供解决方案。 一、确认MySQL容器的运行状态 …...

编程新知 2025/11/3 20:21:04

Sklearn 机器学习 缺失值处理 获取填充失值的统计值

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 使用 Scikit-learn 处理缺失值并提取填充统计信息的完整指南 在机器学习项目中，数据清…...

编程新知 2025/12/7 11:47:53