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

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

news 2025/10/20 20:43:48

目录

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

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

编程新知 2025/10/18 12:38:29

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

编程新知 2025/10/18 14:46:44

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

编程新知 2025/10/19 12:22:56

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

编程新知 2025/10/18 20:59:49

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

编程新知 2025/10/7 0:04:52

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

编程新知 2025/9/29 16:38:22

Git常用命令完全指南：从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

编程新知 2025/10/3 0:40:01

Proxmox Mail Gateway安装指南：从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...

编程新知 2025/10/17 17:54:24

es6+和css3新增的特性有哪些

一&#xff1a;ECMAScript 新特性&#xff08;ES6&#xff09; ES6 (2015) - 革命性更新 1&#xff0c;记住的方法&#xff0c;从一个方法里面用到了哪些技术 1&#xff0c;let /const块级作用域声明2&#xff0c;**默认参数**&#xff1a;函数参数可以设置默认值。3&#x…...

编程新知 2025/9/30 4:32:03

Vue3中的computer和watch

computed的写法 在页面中 <div>{{ calcNumber }}</div>script中 写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...

编程新知 2025/9/13 4:12:41