@hzab/data-model

1.0.2 • Public • Published

@hzab/data-model

组件模板

  • node@14.21

组件

示例

import DataModel, {
  // 设置 token 到 localStorage 及 cookie,可以设置 opt.hasCookie(setToken(token, { hasCookie: false })) 关闭设置 token 到 cookie 上
  setToken,
  // 从 cookie 或 localStorage 获取 token
  getToken,
  // 设置默认兜底的错误信息
  setDefaultErrMsg,
  // 设置 DataModel 中默认的 axios
  setDefaultAxios,
} from "@hzab/data-model";

const listDM = new DataModel({
  // query 参数
  query,
  // 新增接口 post url
  createApi,
  // 新增接口 post 入参枚举函数
  createMap,
  // 详情接口 get url
  getApi,
  // 详情接口 get 出参枚举函数
  getMap,
  // 详情接口 get url
  getListApi,
  // 列表接口 get 出参枚举函数
  getListMap,
  // 列表请求函数
  getListFunc,
  // 编辑接口 put url
  updateApi,
  // 编辑接口 put 入参枚举函数
  updateMap,
  // 删除接口 delete url
  deleteApi,
  // 批量删除接口 delete url
  multipleDeleteApi,
  // axios 实例对象
  axios,
  // axios 相关配置
  axiosConf,
  // 列表接口 get 入参枚举函数
  getListReqMap,
  // 列表接口 get 出参枚举函数
  getListResMap,
  // 详情接口 get 入参枚举函数
  getReqMap,
  // 详情接口 get 出参枚举函数
  getResMap,
  // 新增接口 post 入参枚举函数
  createReqMap,
  // 新增接口 post 出参枚举函数
  createResMap,
  // 编辑接口 put 入参枚举函数
  updateReqMap,
  // 编辑接口 put 出参枚举函数
  updateResMap,
  // 删除接口 delete 入参枚举函数
  deleteReqMap,
  // 删除接口 delete 出参枚举函数
  deleteResMap,
  // 批量删除接口 delete 入参枚举函数
  multipleDeleteReqMap,
  // 批量删除接口 delete 出参枚举函数
  multipleDeleteResMap,
});

// useDataModel,解决 hooks 写法 model 重复实例化导致 query 丢失的问题
function Demo({ orgId }) {
  // 第一个入参同 new DataModel,第二个参数为需要监听的动态参数数组
  const model = useDataModel(
    // 初始值
    {
      getListApi: "/getList",
      query: { orgId },
    },
    {
      // 动态的 params 数据
      effectParams: { orgId },
      // 动态 query 数据
      effectQuery: { orgId },
      // 动态数据监听的值
      effectTargets: [orgId],
    },
  );
  return <ListRender model={model} />;
}

DataModel

参数 类型 必填 默认值 说明
query Object - query 参数对象
createApi string - post 接口地址
getApi string - 详情 get 接口地址
getListApi string - 列表 get 接口地址
updateApi string - put 接口地址
deleteApi string - delete 接口地址
multipleDeleteApi string - 批量删除 delete 接口地址
createMap Function - createApi 接口提交前的处理函数
getMap Function - getApi 接口返回结果的处理函数
getListMap Function - getListApi 接口返回结果的处理函数
getListFunc Function - 自定义的列表请求函数,优先级高于 getListApi
updateMap Function - updateApi 接口提交前的处理函数
axios Object - axios 实例对象
axiosConf Object - axios 相关配置
getListReqMap Function - 列表接口 get 入参枚举函数
getListResMap Function - 列表接口 get 出参枚举函数
getReqMap Function - 详情接口 get 入参枚举函数
getResMap Function - 详情接口 get 出参枚举函数
createReqMap Function - 新增接口 get 入参枚举函数
createResMap Function - 新增接口 get 出参枚举函数
updateReqMap Function - 编辑接口 get 入参枚举函数
updateResMap Function - 编辑接口 get 出参枚举函数
deleteReqMap Function - 删除接口 get 入参枚举函数
deleteResMap Function - 删除接口 get 出参枚举函数
multipleDeleteReqMap Function - 批量删除接口 get 入参枚举函数
multipleDeleteResMap Function - 批量删除接口 get 出参枚举函数

useDataModel

参数 类型 必填 默认值 说明
initParams Object - 初始参数,通同 DataModel
opt Object - 配置参数
opt.effectTargets Object - 动态数据监听的目标
opt.effectParams Object - 动态的 params 数据,包含了 query
opt.effectQuery Object - 动态的 query 数据

组件开发流程

  • 在 config/webpack.config.js 中按需修改 library 配置的文件名
  • 在 config/webpack.config.js 中按需修改 alias 配置的包名,便于本地调试
  • 在 tsconfig.json 中按需修改 paths 配置的包名,解决 ts 报错问题
  • npm run dev

文件目录

  • example 本地开发测试代码
  • src 组件源码
  • lib 组件打包编译后的代码

命令

  • Mac 执行该命令,设置 pre-commit 为可执行文件

    • npm run mac-chmod
    • chmod +x .husky && chmod +x .husky/pre-commit
  • 生成文档:npm run docs

  • 本地运行:npm run dev

  • 打包编译:npm run build

发布

  • 注意:示例代码生效,但发布之后未生效。确认是否执行了编译!!!

  • 编译组件:npm run build

  • 命令:npm publish --access public

  • 发布目录:

    • lib
    • src

配置

配置文件

  • 本地配置文件:config/config.js

webpack 配置文件

  • config/webpack.config.js

Readme

Keywords

none

Package Sidebar

Install

npm i @hzab/data-model

Weekly Downloads

18

Version

1.0.2

License

ISC

Unpacked Size

22.6 kB

Total Files

7

Last publish

Collaborators

  • wzj_npm
  • caiyansong