用React给XXL-JOB开发一个新皮肤(二):目录规划和路由初始化

这篇具有很好参考价值的文章主要介绍了用React给XXL-JOB开发一个新皮肤(二):目录规划和路由初始化。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

  • 一. 简述
  • 二. 目录规划
  • 三. Vite 配置
    • 3.1. 配置路径别名
    • 3.2. 配置 less
  • 四. 页面
    • 4.1. 入口文件
    • 4.2. 骨架文件
    • 4.3. 普通页面
  • 五. 路由配置
  • 六. 预览启动

一. 简述

上一篇文章我们介绍了项目初始化,此篇文章我们会先介绍下当前项目的目录规划,接着对vite 配置以便我们后续的开发,最后会根据 xxl-job 的页面创建我们项目的页面并配置路由信息。

二. 目录规划

一般来说前端项目可以分为下面几个部分:页面、路由、状态管理、静态资源、工具方法。结合我们的项目我调整了下项目的目录结构如下:

  • api:存放 api 定义
  • assets:存放静态文件
  • components:公共组件
  • hooks:公共的 React Hooks
  • pages:存放页面
  • router:路由信息
  • store:存放状态管理文件
  • types:定义的接口交互的接口
  • utils:常用的一些工具类
    用React给XXL-JOB开发一个新皮肤(二):目录规划和路由初始化,用React给XXL-JOB开发一个新皮肤,前端,Vue add React,React Hooks,TS,antd,xxl-job

如果有其他的目录结构设计,可以评论区交流!

三. Vite 配置

上面我们规划了项目的目录结构,接着我们配置下 vite

3.1. 配置路径别名

配置路径别名之后可以省去写冗长的相对路径。
用React给XXL-JOB开发一个新皮肤(二):目录规划和路由初始化,用React给XXL-JOB开发一个新皮肤,前端,Vue add React,React Hooks,TS,antd,xxl-job
我们只需要在vite.config.ts 中添加如下配置:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
      "@assets": path.resolve(__dirname, "src/assets"),
      "@pages": path.resolve(__dirname, "src/pages"),
      "@store ": path.resolve(__dirname, "src/store"),
      "@images ": path.resolve(__dirname, "src/assets/images"),
    },
  }
})

另外还需要修改 tsconfig.json,否者引入路径会飘红。

{
  "compilerOptions": {
    
    ...
    
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  ...
}

3.2. 配置 less

我们在项目中使用less 做样式管理,需要在vite.config.ts中配置如下:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  
  ... 忽略
  
  css: {
    preprocessorOptions: {
      less: {
        // 全局变量
        modifyVars: {},
        javascriptEnabled: true,
      },
    },
  },
})

后续我们在实现切换主题的功能的时候还会在配置这个地方,现在先放一放。

四. 页面

xxl-job 的任务调度中心有登录页面和管理页面组成,而管理页面也是我们常规管理系统的页面结构(结构如下)。
用React给XXL-JOB开发一个新皮肤(二):目录规划和路由初始化,用React给XXL-JOB开发一个新皮肤,前端,Vue add React,React Hooks,TS,antd,xxl-job
所以菜单栏、头部、尾部相当于管理页面的骨架,内容部分是需要切换路由动态展示的。做过管理系统的同学们应该很快就可以大体规划出页面模块。下面看一下我在pages 目录下定义的页面模块如下:

  • course:使用教程
  • dispatch:调度日志
  • exception:异常页面
  • executor:执行器管理
  • layout:页面骨架
  • login:登录页面
  • task:任务管理
  • user:用户管理
  • index.tsx:入口文件

日常开发建议:在定义模块目录的时候,最好见名知意,路由表也最好和模块名称对应(遇到 BUG可以最快的定位到问题页面)。主打一个不防御编程。

4.1. 入口文件

在 index.tsx 中,我们会配置引入定义的路由和 antd 的配置组件,内容如下:

import {ConfigProvider} from "antd";
import { RouterProvider, createBrowserRouter } from "react-router-dom";
import RouterSpace from "@/router";
import zhCN from "antd/lib/locale/zh_CN";
import routers = RouterSpace.routers;

const Application = () => {
  return <ConfigProvider locale={zhCN}>
    <RouterProvider router={createBrowserRouter(routers)} />
  </ConfigProvider>
}

export default Application;

这里我们使用 ConfigProvider全局化配置:https://ant-design.antgroup.com/components/config-provider-cn,方便我们使用国际化和配置组件样式等,具体可以看文档。

其中<RouterProvider router={createBrowserRouter(routers)} />,是通过createBrowserRouter 创建一个路由表,然后通过RouterProvider向下传递。

这里需要注意下BrowerserRouterHashRouter的区别:

  • BrowerserRouter:利用H5 history API实现url地址改变,并通过 pushStatereplaceState 改变 URL,但不会触发浏览器的刷新。这使得单页应用程序可以像多页应用程序一样具有多个路由;虽然此路由更加自然、美观,但是刷新页面的时候请求服务器,可能会导致 404错误;
  • HashRouter:使用window.location.hash 属性和window.onhashchange事件。可以监听浏览器hash值得变化,去执行相应的Js切换网页。使用 URL 中的 hash#)部分来进行路由管理;正是因为路由信息是存储在 URL 的哈希部分,不会出发服务器请求,但是哈希符号,影响美观;

所以在正常项目中我们都是需要和服务端配置使用的,建议使用BrowerserRouter就可以,在一些涉及到登录认证、菜单权限的权限的时候BrowerserRouter会它的妙用。

4.2. 骨架文件

骨架文件是为了定义公共组件部分,并提取出动态组件部分,代码如下:

import {Link, Outlet} from "react-router-dom"

const LayoutPage = () => {
  return <div>
    {/* 菜单 */}
    <div>
      <Link to={'/xxl-job/report'}>运行报表</Link>
      <br/>
      <Link to={'/xxl-job/task'}>任务管理</Link>
      <br/>
      <Link to={'/xxl-job/dispatch'}>调度日志</Link>
      <br/>
      <Link to={'/xxl-job/executor'}>执行器分管理</Link>
      <br/>
      <Link to={'/xxl-job/user'}>用户管理</Link>
      <br/>
      <Link to={'/xxl-job/course'}>使用教程</Link>
      <br/>
      <Link to={'/login'}>退出登录</Link>
    </div>
    {/* 内容 */}
    <div>
      {/* 头 */}
      <div></div>
      {/* 内容 */}
      <div>
        <Outlet />
      </div>
    </div>
  </div>
}

export default LayoutPage

Outlet 是一个用于渲染子路由的组件。它通常与 Route 配合使用,用于在父路由中指定子路由的渲染位置。Outlet 充当了子路由渲染的占位符,告诉 React Router 在当前组件中的哪里渲染子路由。

LinkReact Router 提供的组件之一,用于在应用中创建导航链接。它通常用于代替传统的 <a> 标签,提供了一种在单页面应用(SPA)中进行客户端路由导航的方式,而无需进行页面的完整刷新。

下一篇文章会介绍 css 组件如何使用。

4.3. 普通页面

除了骨架和入口文件,其他模块暂时都是简单的普通页面,如下图:
用React给XXL-JOB开发一个新皮肤(二):目录规划和路由初始化,用React给XXL-JOB开发一个新皮肤,前端,Vue add React,React Hooks,TS,antd,xxl-job
这些模块都如 task 目录下的 index.tsx 文件内容都是类似,内容如下:

const TaskPage = () => {
  return <div>任务管理</div>
}

export default TaskPage;

这里需要注意函数名称的命名规则,在定义导出函数名称的时候,最好是模块 + Page,这样可以很好的区别其他组件和页面组件。

五. 路由配置

我们在入口文件中通过createBrowserRouter(routers)创建路由表,这里面的 routers 就是我们需要定义的路由表结构信息。

import {Navigate, RouteObject} from "react-router-dom";
import LoginPage from "@/pages/login";
import TaskPage from "@/pages/task";
import ReportPage from "@/pages/report";
import DispatchPage from "@/pages/dispatch";
import ExecutorPage from "@/pages/executor";
import UserPage from "@/pages/user";
import CoursePage from "@/pages/course";
import LayoutPage from "@/pages/layout";
import NotFoundPage from "@/pages/exception/404.tsx";

namespace RouterSpace {

  export const routers: RouteObject[] = [
    { path: '/login', element: <LoginPage /> },
    {
      path: '/xxl-job',
      element: <LayoutPage />,
      children: [
        { path: 'report', element: <ReportPage /> },
        { path: 'task', element: <TaskPage /> },
        { path: 'dispatch', element: <DispatchPage /> },
        { path: 'executor', element: <ExecutorPage /> },
        { path: 'user', element: <UserPage /> },
        { path: 'course', element: <CoursePage /> },
        { path: '404', element: <NotFoundPage /> },
        { path: "*", element: <Navigate to={'/xxl-job/404'} /> }
      ]
    },
  ]
}

export default RouterSpace;

后面我们会优化这块路由表,改为 lazy 加载。

这里我们需要注意下RouteObject,现阶段我们只使用了 pathelementchildren 三个属性,这里面还有很多重要的属性可以参看文档:https://reactrouter.com/en/main/route/route#type-declaration。

interface RouteObject {
  path?: string; // 指定路由的路径
  index?: boolean; // 默认子路由ßß
  children?: React.ReactNode; // 定义子路由,是一个包含其他RouteObject的数组。子路由的路径会相对于父路由的路径。
  caseSensitive?: boolean; // 表示路由是否区分大小写,默认为false
  id?: string; // 为路由指定唯一的标识符
  loader?: LoaderFunction; // 一个异步加载函数,用于动态加载路由组件。鉴权的时候使用
  action?: ActionFunction; // 定义路由的生命周期函数,用于在路由渲染前或渲染后执行一些操作
  element?: React.ReactNode | null; // 指定路由匹配时要渲染的 React 元素
  hydrateFallbackElement?: React.ReactNode | null;
  errorElement?: React.ReactNode | null; // 在发生错误时渲染的元素
  Component?: React.ComponentType | null;
  HydrateFallback?: React.ComponentType | null;
  ErrorBoundary?: React.ComponentType | null;
  handle?: RouteObject["handle"];
  shouldRevalidate?: ShouldRevalidateFunction; // 一个函数,用于定义路由是否应该重新验证
  lazy?: LazyRouteFunction<RouteObject>; // 用于懒加载路由的函数
}

其他属性的使用可以参考我的另一个开源项目:https://gitee.com/molonglove/go-react-admin.git,里面有关于动态路由、权限等与路由相关的使用。

这里还有注意点:{ path: "*", element: <Navigate to={'/xxl-job/404'} /> },这个路由定义需要放在最后,意味着如果路由匹配失败会跳转的路由地址。

六. 预览启动

执行 yarn dev查看执行效果,就可以看到如下的效果!
用React给XXL-JOB开发一个新皮肤(二):目录规划和路由初始化,用React给XXL-JOB开发一个新皮肤,前端,Vue add React,React Hooks,TS,antd,xxl-job
下一篇文章我们将介绍借助 antd 实现登录页面和管理页面的Layout骨架。文章来源地址https://www.toymoban.com/news/detail-806747.html

到了这里,关于用React给XXL-JOB开发一个新皮肤(二):目录规划和路由初始化的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【xxl-job】分布式任务调度系统xxl-job搭建

    XXL-JOB是一个轻量级分布式任务调度平台,其核心设计目标是开发迅速、学习简单、轻量级、易扩展、开箱即用。 更多介绍,请访问官网:分布式任务调度平台XXL-JOB 前提条件:任务调度中心(xxl-job admin)依赖于 mysql,所以必须要安装mysql才行!安装mysql有2种方式:docker部署或

    2024年02月16日
    浏览(50)
  • XXL-JOB详细说明

    单机:Timer、ExectorService、spring@scheduled 分布式:xxl-job、quartz、elastic-job 由调度中心和执行器组成,调度中心提供一个web管理配置任务和执行器,调度中心通过rpc触发执行器 1、简单:支持通过Web页面对任务进行CRUD操作,操作简单,一分钟上手; 2、动态:支持动态修改任务状

    2024年02月10日
    浏览(69)
  • XXL-JOB任务分片

    单个任务:一个任务实例便可完成 单机单任务:单机模式下任何路由模式都只有一个实例执行 集群单任务:由路由策略(广播模式除外)选择其中一个实例完成 分片任务:集群部署,每个实例都同时执行一部分数据。分片方式:取模分片,范围分片 单机多任务分片:单机模式

    2024年02月08日
    浏览(60)
  • xxl-Job基础配置

    介绍: XXL-JOB是一个轻量级分布式任务调度平台,其核心设计目标是开发迅速、学习简单、轻量级、易扩展。现已开放源代码并接入多家公司线上产品线,开箱即用。 几个特性: 1、简单:支持通过Web页面对任务进行CRUD操作,操作简单,一分钟上手; 2、动态:支持动态修改

    2024年02月09日
    浏览(37)
  • Docker-compose搭建xxl-job(并配置Python3环境xxl-job执行器)

    注意:a.文件内IP替换成自己本机IP; b.数据库连接、用户密码根据自己情况修改; 注意:根据自己Python脚本需要添加python3第三方包; 注意:xxl-job-executor-sample-springboot-2.2.0.jar 为xxl-job的执行器jar包 可从github上拉取源码打包成jar 这里提供该文件csdn下载地址:https://download.csdn.

    2024年02月14日
    浏览(44)
  • 【分布式任务调度平台 XXL-JOB 急速入门】从零开始将 XXL-JOB 接入到自己的项目

                                    💧 分布式任务调度平台 X X L − J O B 急速入门:从零开始将 X X L − J O B 接入到自己的项目 color{#FF1493}{分布式任务调度平台 XXL-JOB 急速入门:从零开始将 XXL-JOB 接入到自己的项目} 分布式任务调度平台 XX L − J OB 急速入门:从零

    2024年02月14日
    浏览(46)
  • XXL-JOB深入浅出

    由于我们部门分布式任务调动框架使用的是xxl-job,在平时的开发过程中使用的频次也比较多,但是目前使用的模式比较单一,有些小伙伴可能还不清楚其架构及执行原理(希望同事看到别打我),这节将带大家一起认识一下xxl-job。 在介绍分布式任务调度之前,我们先看看实

    2024年02月04日
    浏览(34)
  • xxl-job服务化

    xxl-job作为服务,之前使用都是每个服务配置信息,采用方法的形式,xxl-job作为服务的话,只需要进行配置 配置信息 xxl-job创建任务 xxl-job相关输入 clientClass 实现类 clientMethod 调用的方法 加参数,比如用户为张三,年龄18 ,\\\"name\\\":\\\"张三\\\",\\\"age\\\":18 JobHandler:CommonXxlJobHandler 任务参数:

    2024年02月06日
    浏览(42)
  • xxl-job重复执行问题

    一,xxl-job服务 集群部署(两台) 二,问题描述 有一个job1min执行一次,查询一个中间表数据,循环发生esb,得到结果,更新表。当数据量比较大时,会出现数据重复发送了esb,推测job重复执行了,业务耗时比较长,超过了1min,下一个job时间到了,再次查询,取到了同样的数

    2023年04月09日
    浏览(46)
  • XXL-JOB的基本使用

    目录 1、执行器 1.1下边配置执行器 1.2、执行任务 2、 分片广播 作业分片适用哪些场景呢? 2.1、下边测试作业分片: 2.2、在调度中心添加任务 3、作业分片方案 3、1 保证任务不重复执行 下边配置执行器,执行器负责与调度中心通信接收调度中心发起的任务调度请求。 1、首

    2024年02月05日
    浏览(27)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包