网站导航建设注意事项,最新热门事件,陕西公司网站建设,宝山品牌网站建设目录
一. 简述二. Fork 项目三. 搭建开发环境四. 初始化皮肤项目五. 添加相关依赖六. 预览
一. 简述
大名鼎鼎的 xxl-job 任务调度中心我们应该都使用过#xff0c;项目地址#xff1a;xxl-job。它是一个分布式任务调度平台#xff0c;其核心设计目标是开发迅速、学习简单…目录
一. 简述二. Fork 项目三. 搭建开发环境四. 初始化皮肤项目五. 添加相关依赖六. 预览
一. 简述
大名鼎鼎的 xxl-job 任务调度中心我们应该都使用过项目地址xxl-job。它是一个分布式任务调度平台其核心设计目标是开发迅速、学习简单、轻量级、易扩展。 该项目中的页面是使用freemarker做页面渲染的。这里我们使用 React和Antd的技术栈实现一个管理平台的新皮肤。接下来跟着我一步步实现这个新皮肤吧
二. Fork 项目
这里我们可以在码云上将 xxl-job 项目 fork 到自己的仓库。这里使用的是最新的分支 2.4.0从这个分支作为分支起点如下图
三. 搭建开发环境
接下来我们先搭建一个 xxl-job 的开发环境。这里我们需要现在项目根目录创建一个 log目录用来存放运行的日志文件。这里我们需要修改下面几个文件
doc/db/tables_xxl_job.sql建表语句在自己的数据库上执行该 SQLxxl-job-admin/src/main/resources/application.properties需要修改数据库文件### xxl-job, datasource 修改自己数据库地址
spring.datasource.urljdbc:mysql://192.168.110.107:3306/xxl_job?useUnicodetruecharacterEncodingUTF-8autoReconnecttrueserverTimezoneAsia/Shanghai
spring.datasource.usernameroot
spring.datasource.password123456
spring.datasource.driver-class-namecom.mysql.cj.jdbc.Driverxxl-job-admin/src/main/resources/logback.xml修改存放日志路径?xml version1.0 encodingUTF-8?
configuration debugfalse scantrue scanPeriod1 secondscontextNamelogback/contextNameproperty namelog.path value./log/xxl-job-admin.log/!-- 忽略其他部分 --
/configurationxxl-job-executor-samples/xxl-job-executor-sample-springboot/src/main/resources/logback.xml修改存放日志路径?xml version1.0 encodingUTF-8?
configuration debugfalse scantrue scanPeriod1 secondscontextNamelogback/contextNameproperty namelog.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 langenheadmeta charsetUTF-8 /link relicon typeimage/svgxml href/vite.svg /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title任务调度中心/title/headbodydiv idroot/divscript typemodule src/src/main.tsx/script/body
/html将 main.tsx 文件修改为如下
import React from react
import ReactDOM from react-dom/client
import Application from ./App.tsxReactDOM.createRoot(document.getElementById(root)!).render(React.StrictModeApplication //React.StrictMode,
)将 App.tsx 文件修改为如下
const Application () h1任务调度中心/h1export default Application接着我们启动项目yarn dev 好了现在我们项目已经初始化完成下一篇文章将介绍配置 vite、规划项目目录、配置路由。
