更新记录

0.0.1-alpha.25(2024-07-10)

  1. 测试阶段
  2. 支持数据缓存、过期清理
  3. 支持 API 定义、获取、渲染
  4. 支持统一模版定义、渲染

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

api-render-vue

License Latest npm release

一个 api 数据渲染组件,通过定义 api 项及各项配置,可实现自动异步获取 api 数据,然后通过值匹配名称渲染到页面,实现前端字典的统一管理,且不仅仅是字典

目前不支持 Vue2,且推荐使用自建 npm 项目,并通过 npm 安装,加上 ts 的语法提示,能够事半功倍!

优点

  1. 组件化,使用简单,通过 vue 组件传入 api 的 id 及 value 即可自动异步获取数据且渲染
  2. 统一模版,通过配置统一模版可实现在页面中自动渲染指定组件,支持数据的双向绑定,实现组件统一配置,统一管理
  3. 数据缓存,每次使用数据优先使用缓存数据(相当于状态数据,不会保存到浏览器本地,如果浏览器刷新,则会重新获取),可配置缓存有效期,超期重新获取,或者手动刷新缓存
  4. 统一配置,可自定义各项配置及 api 项,便于维护

安装

npm 安装

npm i api-render-vue -S

yarn 安装

yarn add api-render-vue -S

pnpm 安装

pnpm i api-render-vue -S

简单使用

apiRender 通过配置 apiOption 来完成 api 的统一配置,然后根据 apiKey 来渲染出最终结果

1. 配置 apiOption

创建 apiRenders.ts

import axios from "axios";
import {getUserType} from "@/api/userType";
import {defineApiRender} from "api-render-vue";

export const apiRenders = defineApiRender({
    getUserType,
    getUser: {
        api: async () => {
            const res = await axios.get('http://localhost:8080/common/getData')
            return res.data
        },
        labelKey: 'name'
    }
})

如上,你可以直接传入一个返回 Promise 的方法,也可以配置更多配置项,指定 labelKey 或 valueKey 等,这些配置也都可以在 setApiRenderConfig 中统一指定

如果你想将不同的 api 放到不同的文件中,可以指定 id

export const userApiRender = defineApiRender('user', {
    // api 配置
})

2. 页面使用

在 vue 页面中使用该 api 渲染

<template>
  <!-- 通过 value 渲染名称 -->
  <api-render :id="apiRenders.ids.getUser" value="20"></api-render>
</template>

<script lang="ts" setup>
import ApiRender from "api-render-vue";
import {apiRenders} from "@/apiRenders";
</script>

如上,我们通过 api-render 组件,传入 getUser 的 apiKey,指定 value 即可自动匹配数据项,然后渲染 label 字段

每定义一个 apiRender,返回的结果中都会包含 ids 属性,这是 api 项 id 的映射,如果你不想使用它(实际上推荐使用前者,方便维护,且避免出现因 id 不正确而导致的不必要问题),可以直接传入 getUser,但如果你使用了 id 来定义 apiRender,则需要额外添加 id 值,通过 # 来间隔项 id,如:user#getUser

统一模版

通过匹配统一模版,可以将相同的组件代码统一配置,然后指定渲染,实现组件的统一配置、统一维护,避免大量的类似组件,且便于维护

1. 定义统一模版

创建 apiRenderTemplates.tsx

import {defineApiTemplates} from "api-render-vue";
import {h} from "vue";
import {ElOption, ElSelect} from "element-plus";

export const apiRenderTemplates = defineApiTemplates({
    elSelect: ({data, modelValue, modelBack}) => {
        const childs = []
        if (data) {
            for (let datum of data) {
                childs.push(h(ElOption, {
                    label: datum.name,
                    value: datum.value,
                    key: datum.value
                }))
            }
        }
        return h(ElSelect, {
            modelValue: modelValue,
            onChange: (val) => {
                modelBack && modelBack(val)
            }
        }, {
            default: () => childs
        })
    },
    elSelect2: function (params: { data: IUser[], modelValue: string, modelBack: (value: string) => any }) {
        const {data, modelValue, modelBack} = params;
        return (
            <ElSelect modelValue={modelValue} onChange={(e: string) => modelBack && modelBack(e)}>
                {
                    data ?
                        data.map((item: any) => (
                            <ElOption key={item.value} value={item.value} label={item.name}></ElOption>
                        )) : ''
                }
            </ElSelect>
        )
    }
})

如上,通过 defineApiTemplates 定义了两个模版,这两个模版其实效果是一样的,一个使用 h 函数,一个使用 jsx,看个人习惯

当然,你可以指定 id 来划分不同模版

export const selectApiTemplates = defineApiTemplates('select', {
    // 模版配置...
})

2. 页面中使用

<template>
  <div class="home">
    <!-- 按模版渲染 -->
    <api-render
      :id="apiRenders.ids.getUser"
      :template-name="apiRenderTemplates.ids.elSelect"
      v-model="selectValue">
    </api-render>
  </div>
</template>
<script lang="ts" setup>
import {ref} from "vue";
import ApiRender from "api-render-vue";
import apiRenders from "@/apiRenders";
import apiRenderTemplates from "@/apiRenderTemplates"

const selectValue = ref('')
</script>

如上,在使用 api-render 组件时,指定 templateName 属性,即可渲染指定模版内容(这里的 ids 与简单使用中的 ids 相同)

属性

可见 API文档

1. api-render-vue 依赖属性

属性 参数 描述
default apiRender 组件
defineApiRender id:定义的 id 值(可选),当定义多个 api 项时,用以区分,否则将会覆盖,options:定义的 api 项 定义 api 项,使用组件时,可传入 apiKey 来自动获取数据
reloadApiRenderCache apiKeys:要加载的 api 缓存的 key 重新加载 api 缓存
setApiRenderConfig config:配置项 设置全局配置项
getApiRenderConfig 获取配置
defineApiRenderTemplates templates:模板 定义统一模板,传入组件对应的 name 可渲染模板函数返回的内容

2. defineApiRender 结果属性

属性 参数 描述
ids api 项的 id 映射
renderApiValue apiKey: api 的 option 关键字,param: value 要匹配的 value 值,valueKey: 要匹配的数据 value 关键字,labelKey: 返回的 label 关键字 解析 api 数据,匹配值,返回 label
renderApiOptions apiKey: api 的 option 关键字,options: 配置项 解析 api 数据为选择项数据
renderApiTree apiKey: api 的 option 关键字,options: 配置项 解析 api 数据为树结构数据
reloadApiData apiKeys 要重载的 api 项 key 重新加载 api 项数据

3. defineApiTemplates 结果属性

属性 参数 描述
ids 模版项 id 映射

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问