目录
- [一. 简述](#一. 简述 "#%E4%B8%80-%E7%AE%80%E8%BF%B0")
- [二. Fork 项目](#二. Fork 项目 "#%E4%BA%8C-Fork-%E9%A1%B9%E7%9B%AE")
- [三. 搭建开发环境](#三. 搭建开发环境 "#%E4%B8%89-%E6%90%AD%E5%BB%BA%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83")
- [四. 初始化皮肤项目](#四. 初始化皮肤项目 "#%E5%9B%9B-%E5%88%9D%E5%A7%8B%E5%8C%96%E7%9A%AE%E8%82%A4%E9%A1%B9%E7%9B%AE")
- [五. 添加相关依赖](#五. 添加相关依赖 "#%E4%BA%94-%E6%B7%BB%E5%8A%A0%E7%9B%B8%E5%85%B3%E4%BE%9D%E8%B5%96")
- [六. 预览](#六. 预览 "#%E5%85%AD-%E9%A2%84%E8%A7%88")
一. 简述
大名鼎鼎的 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
:需要修改数据库文件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<?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<?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
安装依赖。
五. 添加相关依赖
这里添加我们需要的依赖,使用的依赖如下:
依赖 | 版本 | 描述 |
---|---|---|
antd | 5.2.6 | 前端 UI 组件库 |
axios | 1.6.5 | HTTP 请求库 |
@ant-design/icons | 5.2.6 | 图标库 |
@ant-design/charts | 2.0.3 | charts 库 |
ahooks | 3.7.8 | hooks工具库 |
less | 4.2.0 | css 预处理库 |
less-loader | 11.1.4 | webpack 构建处理 less 库 |
react-router-dom | 6.21.1 | 前端路由库 |
zustand | 4.4.7 | 简单好用的状态管理库 |
@emotion/react | 11.11.3 | React 组件中样式的处理和管理功能库 |
@emotion/styled | 11.11.0 | 提供了一种创建样式化组件的方式的库 |
这里 package.json
如下:
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
标签内容。
html
<!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
文件修改为如下:
react
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
文件修改为如下:
react
const Application = () => <h1>任务调度中心</h1>
export default Application
接着我们启动项目:yarn dev
好了,现在我们项目已经初始化完成,下一篇文章将介绍配置 vite
、规划项目目录、配置路由。