4.2 前端高级特性

相关推荐

• Oinone 7天入门到精通

  3.2.3 应用中心

  在App Finder 中点击应用中心可以进入oinone的应用中心，可以看到oinone平台所有应用列表、应用大屏、以及技术可视化。 一、应用列表 标准版本不支持在线安装，只能通过boot工程的yml文件来配置安装模块。在 www.oinone.top 官方SaaS平台客户可以在线管理应用生命周期如：安装、升级、卸载。同时针对已安装应用可以进行无代码设计（前提安装了设计器），针对应用类的模块则可进行收藏，收藏后会在App Finder中的我收藏的应用中出现。在应用列表中可以看到我们已经安装的应用以及模块，我们oinoneDemo工程也在其中。 图3-2-35 Oinone的应用列表 图3-2-36 应用收藏后会在App Finder的【我收藏的应用】中出现 二、应用大屏 但我们的测试应用没有设置应用类目，则无法在应用大屏中呈现。 图3-2-37 未设置应用类目则无法在应用大屏中呈现 三、技术可视化 在技术可视化页面，出展示已经安装模块的元数据，并进行分类呈现 图3-2-38 云数据分类呈现

  史, 昂

  2024年5月23日

  1.6K000
• Oinone 7天入门到精通

  4.2.7 框架之翻译工具

  一、说明 Oinone目前的默认文案是中文，如果需要使用其他语言，Oinone也提供一系列的翻译能力。 二、定义语言文件 在src/local下新增一个名为zh_cn.ts文件: 图4-2-7-1 语言文件 编辑zh_cn.ts文件，增加以下内容： const zhCN = { demo: { test: '这是测试' } } export default zhCN 图4-2-7-2 语言内容格式示意 在mian.ts注册语言资源： import { LanguageType, registryLanguage} from '@kunlun/dependencies'; import Zh_cn from './local/zh_cn' registryLanguage(LanguageType['zh-CN'], Zh_cn); 图4-2-7-3 注册语言 三、Vue模板使用 <template> <div class="petFormWrapper"> <form :model="formState" @finish="onFinish"> <a-form-item :label="translate('demo.test')" id="name" name="kind" :rules="[{ required: true, message: '请输入品种种类!', trigger: 'focus' }]"> <a-input v-model:value="formState.kind" @input="(e) => onNameChange(e, 'kind')" /> <span style="color: red">{{ getServiceError('kind') }}</span> </a-form-item> <a-form-item label="品种名" id="name" name="name" :rules="[{ required: true, message: '请输入品种名!', trigger: 'focus' }]"> <a-input v-model:value="formState.name" @input="(e) => onNameChange(e, 'name')" /> <span style="color: red">{{ getServiceError('name') }}</span> </a-form-item> </form> </div> </template> <script lang="ts"> import { defineComponent, reactive } from 'vue'; import { Form } from 'ant-design-vue'; export default defineComponent({ // 引入translate props: ['onChange', 'reloadData', 'serviceErrors', 'translate'], components: { Form }, setup(props) { const formState = reactive({ kind: '', name: '', }); const onFinish = () => { console.log(formState); }; const onNameChange = (event, name) => { props.onChange(name, event.target.value); }; const reloadData = async () => { await props.reloadData(); }; const getServiceError = (name: string) => { const error = props.serviceErrors.find(error => error.name === name);…

  史, 昂

  2024年5月23日

  901000
• Oinone 7天入门到精通

  企业个性化配置

  平台除了帮助企业快速解决业务需求外，还提供了企业文化、风格个性化能力，本章节详细介绍个性化配置。包括：登陆页配置、企业形象配置、系统风格配置。 系统配置 配置入口 配置入口：右上角登陆账号——系统配置——全局配置——登陆页配置、企业形象配置、系统风格配置。 登陆页配置 用户自定义登陆页的主题，一共有六个主题可选择，分别为： 图一：左侧是图片，右侧是登录输入框，Logo在左上角； 图二：右左侧是图片，右侧是登录输入框，Logo在左上角； 图三：底图是图片，登录输入框浮在页面左侧，Logo在左上角； 图四：底图是图片，登录输入框浮在页面中间，Logo在左上角； 图五：底图是图片，登录输入框浮在页面右侧，Logo在左上角； 图六：底图是图片，登录输入框浮在页面中间，Logo在登录框上方。 页面背景 上传登录页背景，支持上传jpg、png格式的图片或mp4、mov、avi格式视频。尺寸建议为1920*1080px，文件大小不超过50MB。 登录页logo：指配置登录页左上角的logo图标。 预览：配置后可在右侧电脑中点击全屏预览效果。 配置示例 企业形象配置 企业形象配置：可设置企业信息、业务应用导航栏logo、浏览器logo，设置完成之后，点击发布之后设置生效。 系统风格配置 系统风格配置，可设置主题（浅色、深色）、尺寸（大、中、小），配置后可全屏预览，发布后即可更换成对应的风格。 下载代码可进行自定义风格。

  史, 昂

  2024年6月20日

  1.1K000

• 梅丛银

  认识陈鹏程及数式核心团队同学已经有一段时间了，在我们多次的交流讨论中时常会谈及：未来中国哪家软件企业能在互联网云原生时代走出来超越传统软件企业？史昂说这是他的梦想，也是他们团队这么多年坚持技术和产品研发与应用优先思考之路。史昂及数式核心团队面向企业应用市场历经三年的潜心研发和实战交付，推出Oinone产品及配套的低代码平台工具：对比国内外应用软件平台在开放生态和云原生均有它的继承性和独特性，特别是将技术平台赋予企业各种业务领域属性，便于企业客户和开发伙伴的二次开发并能快速搭建各类企业核心应用场景是Oinone的最大亮点。Oinone的内在特点之一是参考了全球最大开源ERP Odoo的元数据模型设计，同时基于业务中台架构和云原生技术，形成了自己一套国际化的快速开发平台、建模规范和应用产品，通过自己进场落地很多品牌企业的应用中台化不断迭代升级，走出了一条具有显著特色的新应用软件之路。史昂及团队特点谦卑、善于思考，善于吸收他山之精华，这是创业团队难能可贵之点，由此能善于与生态伙伴合作也是能够走的更远更长的基础基因。最后希望和祝愿Oinone能为中国企业在云时代数字化实践做出更多的贡献，为软件产业构建强大的应用生态和开发社区，真正树立起Oinone自己的软件品牌形象。 资深IT咨询专家&浩鲸云智能专家学院院长：梅丛银

  史, 昂

  Oinone 7天入门到精通 2024年5月23日

  1.2K001
• Oinone 7天入门到精通

  3.5.7.5 自定义动作

  动作是什么 动作（action)描述了终端用户的各种操作。这些操作可以涉及多个层面，包括但不限于： 页面间的跳转：用户可以通过动作从一个页面跳转到另一个页面。 业务交互：动作可以触发与后端服务的交互，例如提交表单、请求数据等。 界面操作：动作可以用于打开模态对话框、抽屉（侧边栏）等界面元素。 作用场景 Oinone 平台内置了一系列的基础动作，默认实现了常见的功能，如页面跳转、业务交互和界面操作等。这些内置动作旨在满足大多数标准应用场景的需求，简化开发过程，提高开发效率。以下是一些常见的内置动作示例： 页面跳转：允许用户在不同页面间导航。 业务交互：支持与后端服务的数据交互，如提交表单。 界面操作：提供动态返回上一页、校验表单、关闭弹窗等。 自定义动作的需求场景 尽管内置动作覆盖了许多常规需求，但在某些复杂或特定的业务场景中，可能需要更加个性化的处理。这些场景可能包括： 特殊的业务逻辑：需要执行不同于标准流程的特定业务操作。 个性化的用户界面：标准的 UI 组件无法满足特定的设计要求。 高级交互功能：需要实现复杂的用户交互和数据处理。 扩展和定制动作 为了满足这些特定需求，Oinone 平台支持通过继承和扩展来自定义动作。开发者可以通过以下步骤实现自定义动作： 继承基类：从平台提供的动作基类继承，这为自定义动作提供了基础框架和必要的接口。 实现业务逻辑：在继承的基础上，添加特定的业务逻辑实现。 自定义界面：根据需要调整或完全重写界面组件，以符合特定的UI设计。 集成测试：确保自定义动作在各种情况下的稳定性和性能。 最佳实践 明确需求：在进行扩展之前，清楚地定义业务需求和目标。 重用现有功能：尽可能利用平台的内置功能和组件。 保持一致性：确保自定义动作与平台的整体风格和标准保持一致。 充分测试：进行全面的测试，确保新动作的稳定性和可靠性。 案例分析 假设有一个场景，需要一个特殊的数据提交流程，该流程不仅包括标准的表单提交，还涉及复杂的数据验证和后续处理。在这种情况下，可以创建一个自定义动作，继承基础动作类并实现特定的业务逻辑和用户界面。 自定义动作 自定义跳转动作 示例工程目录 以下是需关注的工程目录示例，main.ts更新导入./action，action/index.ts更新导出./custom-viewactioin： 图3-5-7-24 自定义跳转动作工程目录示例 步骤 1: 创建自定义动作类 首先，您创建了一个名为 CustomViewAction 的类，这个类继承自 RouterViewActionWidget。这意味着自定义动作是基于路由视图动作的，这通常涉及页面跳转或导航。 import {ActionWidget, RouterViewActionWidget, SPI} from '@kunlun/dependencies'; import CustomViewActionVue from './CustomViewAction.vue'; @SPI.ClassFactory( ActionWidget.Token({ model: 'resource.ResourceCity', name: 'redirectCreatePage' }) ) export class CustomViewAction extends RouterViewActionWidget { public initialize(props) { super.initialize(props); this.setComponent(CustomViewActionVue); return this; } } 图3-5-7-24 自定义跳转动作组件(TS)代码示例 @SPI.ClassFactory: 这是一个装饰器，用于向平台注册这个新的动作。 ActionWidget.Token: 通过这个Token，指定了这个动作与特定模型 (resource.ResourceCity) 关联，并给这个动作命名 (redirectCreatePage). 步骤 2: 初始化和设置组件 在 initialize 方法中，调用了父类的初始化方法，并设置了自定义的 Vue 组件。 public initialize(props) { super.initialize(props); this.setComponent(CustomViewActionVue); return this; } 图3-5-7-24 初始化和设置组件 步骤 3: 定义 Vue 组件 在 CustomViewAction.vue 文件中，定义了自定义动作的视觉表示。 <template> <div class="view-action-wrapper"> 自定义挑战跳转动作 </div> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ inheritAttrs: false, name: 'ViewActionComponent' }) </script> <style lang="scss"> .view-action-wrapper { } </style> 图3-5-7-24 自定义跳转动作组件(Vue)代码示例 步骤 4: 效果如下 图3-5-7-24 自定义跳转动作效果示例 自定义服务器动作 示例工程目录 以下是需关注的工程目录示例，action/index.ts更新导出./custom-serveraction： 图3-5-7-24 自定义服务器动作工程目录示例 步骤 1: 创建自定义动作类 首先, 创建了一个名为 CustomServerAction 的类，这个类继承自 ServerActionWidget。这表明您的自定义动作主要关注服务器端的逻辑。 import {ActionWidget, ServerActionWidget, SPI, Widget} from '@kunlun/dependencies'; import CustomServerActionVue from './CustomServerAction.vue'; @SPI.ClassFactory( ActionWidget.Token({ model: 'resource.ResourceCity', name: 'delete' })…

  史, 昂

  2024年5月23日

  1.1K000