更新记录

0.0.1-alpha.25（2024-07-10） 下载此版本

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

平台兼容性

api-render-vue

一个 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 依赖属性

2. defineApiRender 结果属性

3. defineApiTemplates 结果属性