应用资源

前端 pages 目录中每个目录既为一个模块应用，每个模块中可配置多级资源，每个资源对应的一套后端 curd 接口和菜单、权限等，使用应用资源您可轻松访问后台接口和定义菜单。

管理资源

定义资源

自定义一个资源，通过该方法我们可以创建多个管理层 (DuxRefine 已经定义 admin)。

资源需要在应用入口文件中的 init 方法进行初始化，并且在此处注册语言包，如下：

app.ts 

import { appContext, createApp } from '@duxweb/dux-refine'

const init = (context: appContext) => {

  // 将 locales 目录中的所有 json 文件注册为语言包
  const data = import.meta.glob('./locales/*.json', { eager: true })
  context.addI18ns(data)
  
  // 创建一个名为 admin 的管理层
  context.createApp('admin', createApp())
}

注册资源

资源需要在应用入口文件中的 register 方法进行注册资源等，如下：

app.ts 
import { appContext, createApp } from '@duxweb/dux-refine'

const register = (context: appContext) => {
  // 获取管理层对象
  const admin = context.getApp('admin')

  // 添加资源到管理层中
  admin.addResources([
    {
      name: 'exampleApp',                 // 资源名，全局唯一
      meta: {
        label: 'exampleApp',              // 菜单名称，对应语言包键名
        sort: 90,                         // 菜单优先级
        icon: 'i-tabler:tools',           // 菜单图标
      },
    },
    {
      name: 'example.example',            // 资源名，全局唯一，同时为后端接口名 (后续教程)
      list: 'example/example',            // 前端 url 路径
      listComponent: lazyComponent(() => import('../admin/example/list')),  // 列表页面组件
      meta: {
        label: 'exampleApp.example',       // 菜单名称，对应语言包键名
        icon: 'i-tabler:link',             // 菜单图标
        parent: 'exampleApp',              // 上级资源标识
      },
    },
  ])

}

资源参数

namestring
资源名，每个单一管理端需要有唯一的标识符。API 请求会自动将此标识符拼接到 URL 的一部分。
liststring
列表页面的路由，对应前端的路由路径。
listComponentReact.ReactNode | null
列表页面的组件
createstring
创建页面的路由，对应前端的路由路径。
createComponentReact.ReactNode | null
创建页面的组件，如果为弹窗则不受该处控制。
editstring
编辑页面的路由，对应前端的路由路径，可以通过 {id} 进行参数替换。
editComponentReact.ReactNode | null
编辑页面的组件，如果为弹窗则不受该处控制。
showstring
详情页面的路由，对应前端的路由路径，可以通过 {id} 进行参数替换。
showComponentReact.ReactNode | null
详情页面的组件，如果为弹窗则不受该处控制。
metaobject
资源的附加参数，默认需要配置 label 作为资源的标签名。在使用多语言时，该名称通常用作多语言翻译的变量。

获取资源

在资源绑定的页面组件中，可以使用 useResource 方法来获取资源的使用方法。它会获取当前的路由信息，并在使用数据请求方法时默认将资源设置为当前路由对应的资源。

import { useResource } from "@refinedev/core";

const { resource, action, id } = useResource();

资源与接口

每个资源有一个 name 用来表示资源名，同时该资源名也代表着后端 api 路径与权限名。

框架会自动把资源名用 . 进行分割，自动生成对应 curd 的 url 路径。

在资源对应的页面组件中可以针对该资源进行 api 请求，具体请求内容参考数据结构，如下：

// 资源名
example.example

// 自动转换为 url

// 列表请求
GET https://example.test/api/example/example

//详情请求
GET https://example.test/api/example/example/{id}

// 创建请求
POST https://example.test/api/example/example

// 编辑请求
PUT https://example.test/api/example/example

// 删除请求
DELETE https://example.test/api/example/example
数据结构
数据请求