如何通过 Oineone 平台自定义视图

相关推荐

• 前端

  Oinone移动端快速入门

  介绍 oinone的pc端的页面默认都可以在移动端直接访问。自定义mask、layout、视图组件、字段组件、动作组件方式都参考pc端实现。目前移动端的UI组件是基于vant@3.6.0版本开发，如有自定义部分的代码，推荐使用该组件库。 “注意”： 由于移动端和pc端在交互上的巨大差异，两端用的是不同的UI组件库是，按照此约定开发的自定义组件在两端也是无法相互兼容的，在pc端自定义的组件或者页面，不会在移动端自动适配，需要自行开发对应的移动端组件或者页面。 工程搭建 移动端很多交互跟pc端差异很大，所以移动端的我们采用的方案是独立用一套移动端的UI框架实现，而不是简单的做页面布局自适应，所以移动端需要跟pc端一样独立部署一套前端工程。 参考文档：【前端】移动端工程结构最佳实践（v4/v5） 如何区分多端 在界面设计器设计页面的时候，可以通过顶部的多端设备的图标切换在各端的页面效果。 pc端页面 切换为移动端后的页面 注意：大部分情况下，pc端和移动端可以共享一个设计的页面，然后通过上面的方法区分两端，如果移动端的页面交互差异很大，那更推荐独立新建一个页面专门给移动端使用。 模块 模块在定义的时候可以通过注解@Module.clientTypes决定当前模块在哪些端展示 package pro.shushi.pamirs.demo.api; import org.springframework.stereotype.Component; import pro.shushi.pamirs.business.api.BusinessModule; import pro.shushi.pamirs.core.common.CommonModule; import pro.shushi.pamirs.file.api.FileModule; import pro.shushi.pamirs.meta.annotation.Module; import pro.shushi.pamirs.meta.base.PamirsModule; import pro.shushi.pamirs.meta.common.constants.ModuleConstants; import pro.shushi.pamirs.meta.enmu.ClientTypeEnum; import pro.shushi.pamirs.user.api.UserModule; @Component @Module( name = DemoModule.MODULE_NAME, displayName = "oinoneDemo工程", version = "1.0.0", // 客户端类型，默认是PC和MOBILE端都展示 clientTypes = {ClientTypeEnum.PC, ClientTypeEnum.MOBILE}, // 登录后默认访问 priority 值最小的模块 priority = 1, dependencies = {ModuleConstants.MODULE_BASE, CommonModule.MODULE_MODULE, UserModule.MODULE_MODULE, BusinessModule.MODULE_MODULE, FileModule.MODULE_MODULE } ) @Module.module(DemoModule.MODULE_MODULE) @Module.Advanced(selfBuilt = true, application = true) public class DemoModule implements PamirsModule { public static final String MODULE_MODULE = "demo_core"; public static final String MODULE_NAME = "DemoCore"; @Override public String[] packagePrefix() { return new String[]{ "pro.shushi.pamirs.demo" }; } } 菜单 界面设计器设置方式 在菜单设置的时候可以选择“显示设备” 低代码设置方式 通过注解@UxMenu.clientTypes设置显示设备 package pro.shushi.pamirs.demo.core.init.menu; import pro.shushi.pamirs.boot.base.constants.ViewActionConstants; import pro.shushi.pamirs.boot.base.ux.annotation.action.UxRoute; import pro.shushi.pamirs.boot.base.ux.annotation.navigator.UxMenu; import pro.shushi.pamirs.boot.base.ux.annotation.navigator.UxMenus; import pro.shushi.pamirs.demo.api.model.DemoItem; import pro.shushi.pamirs.demo.api.model.DemoItemCategory; import pro.shushi.pamirs.meta.enmu.ClientTypeEnum; @UxMenus() public class DemoMenus implements ViewActionConstants { // 同时在pc端和移动端显示 @UxMenu(value = "商品中心", clientTypes = {ClientTypeEnum.PC, ClientTypeEnum.MOBILE}) class ItemPMenu{ @UxMenu("商品类目") class DemoItemAndCateMenu { // 只在pc端显示 @UxMenu(value = "商品管理", clientTypes = {ClientTypeEnum.PC}) @UxRoute(DemoItem.MODEL_MODEL) class DemoItemMenu { } // 只在移动端显示 @UxMenu(value = "类目管理", clientTypes = {ClientTypeEnum.MOBILE}) @UxRoute(DemoItemCategory.MODEL_MODEL) class DemoItemCategoryMenu { } } } } 组件 界面设计器选中组件后，可以在右边属性面板看到“显示设备”的配置，默认为空，为空则表示在pc端和移动端都显示

  nation

  2024年9月19日

  2.0K000
• 前端

  自定义字段的数据联动

  某种情况下，开发人员期望自定以的字段发生变化后，需要修改其他的字段，这篇文章从两个维度来讲解如果处理数据的联动 界面设计器配置 1: 在界面设计器页面中的的组件区域找到自定义的字段，设计元件 2: 在模型区域，搜索提交方式，如果找到了，就把该字段拖拽进来, 如果找不到，就在元件中的组件区域，拖拽一个文本字段，按照下面的配置进行配置，然后保存 图一是找到了对应的字段图二是找不到对应的字段 【图一】 【图二】 图二的字段编码必须是constructDataTrigger 3: 从模型区搜索联动函数，将其拖拽进来 3: 从模型区搜索提交数据，将其拖拽进来4: 从模型区搜索提交字段，将其拖拽进来 5: 发布 （记得刷新页面哦） 最后再到对应的设计器页面，选中该字段，进行配置 提交方式为blur或者change ， 需要开发者手动调用该方法 this.blur()或者this.change(value) // 字段对应的ts文件 class MyField extends FormFieldWidget { onChangeValue(val) { // this.change(val) // this.blur() } } 联动函数就是要调用的后端函数 提交数据分为:变更字段 -> 发生变化后的字段当前视图字段 -> 当前视图所有的字段指定字段 -> 指定字段，如果配置的指定字段，那么提交字段的配置就要输入对应的字段 代码配置 平台也支持通过代码的方式修改字段 // 字段对应的ts文件 class MyField extends FormFieldWidget { onChangeValue(val) { // 修改字段本身的值 this.change(val) // 修改其他字段的值 this.formData.otherField = 'value' this.reloadFormData$.subject.next(true); } }

  汤乾华

  2023年11月9日

  2.2K000
• 开发实践

  Oinone项目引入Nacos作为注册中心

  Oinone项目引入Nacos作为注册中心 Oinone项目的默认dubbo注册中心为zk, 实际项目中有可能要求用Nacos作注册中心。 Oinone默认引入的nacos-client-1.4.1，低版本不支持认证配置；该客户端版本支持Nacos服务1.x的和2.x的版本 一、项目中增加依赖 项目主pom引入依赖。 <dependency> <groupId>org.apache.dubbo</groupId> <artifactId>dubbo-registry-nacos</artifactId> <version>2.7.22</version> </dependency> 项目的boot工程的pom引入依赖 <dependency> <groupId>org.apache.dubbo</groupId> <artifactId>dubbo-registry-nacos</artifactId> </dependency> 二、配置修改 修改dubbo服务注册到nacos bootstrap.yml文件的配置，或者application.yml文件中修改dubbo的配置 dubbo: application: name: pamirs-demo version: 1.0.0 registry: id: pamirs-demo-registry address: nacos://192.168.0.118:8848 username: nacos # 认证的用户名(根据情况自行修改)，未开启认证可以不需要配置username和password password: nacos # 认证的密码(根据情况自行修改)，未开启认证可以不需要配置username和password # dubbo使用nacos的注册中心往配置中心写入配置关闭配置 use-as-metadata-center: false use-as-config-center: false config-center: address: nacos://192.168.0.118:8848 username: nacos # 认证的用户名(根据情况自行修改)，未开启认证可以不需要配置username和password password: nacos # 认证的密码(根据情况自行修改)，未开启认证可以不需要配置username和password metadata-report: failfast: false # 关闭错误上报的功能 address: nacos://192.168.0.118:8848 username: nacos # 认证的用户名(根据情况自行修改)，未开启认证可以不需要配置username和password password: nacos # 认证的密码(根据情况自行修改)，未开启认证可以不需要配置username和password protocol: name: dubbo port: -1 serialization: pamirs scan: base-packages: pro.shushi cloud: subscribed-services: 其他 Oinone构建分布式项目一些注意点，包括服务远程发布范围、关闭Dubbo元数据上报日志、Nacos作为注册中的配置 Nacos做为注册中心：如何调用其他系统的SpringCloud服务？

  望闲

  2024年2月28日

  1.7K000
• 开发实践

  如何加密gql请求内容

  介绍 在一些对安全等级要求比较高的场景，oinone提供了扩展前端加密请求内容，后端解密请求内容的能力，该方案要求前后端的加解密方案统一。 后端 1. 继承平台的RequestController新增一个请求类，在里面处理加密逻辑 package pro.shushi.pamirs.demo.core.controller; import org.apache.commons.lang3.StringUtils; import org.springframework.web.bind.annotation.*; import pro.shushi.pamirs.framework.gateways.graph.java.RequestController; import pro.shushi.pamirs.meta.annotation.fun.extern.Slf4j; import pro.shushi.pamirs.meta.api.dto.protocol.PamirsClientRequestParam; import pro.shushi.pamirs.user.api.utils.AES256Utils; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.util.HashMap; import java.util.List; import java.util.Map; @RestController @Slf4j public class DemoRequestController extends RequestController { @SuppressWarnings("unused") @RequestMapping( value = "/pamirs/{moduleName:^[a-zA-Z][a-zA-Z0-9_]+[a-zA-Z0-9]$}", method = RequestMethod.POST ) public String pamirsPost(@PathVariable("moduleName") String moduleName, @RequestBody PamirsClientRequestParam gql, HttpServletRequest request, HttpServletResponse response) { decrypt(gql); return super.pamirsPost(moduleName, gql, request, response); } @SuppressWarnings("unused") @RequestMapping( value = "/pamirs/{moduleName:^[a-zA-Z][a-zA-Z0-9_]+[a-zA-Z0-9]$}/batch", method = RequestMethod.POST ) public String pamirsBatch(@PathVariable("moduleName") String moduleName, @RequestBody List<PamirsClientRequestParam> gqls, HttpServletRequest request, HttpServletResponse response) { for (PamirsClientRequestParam gql : gqls) { decrypt(gql); } return super.pamirsBatch(moduleName, gqls, request, response); } private static final String GQL_VAR = "gql"; private void decrypt(PamirsClientRequestParam gql) { Map<String, Object> variables = null != gql.getVariables() ? gql.getVariables() : new HashMap<>(); String encodeStr = (String) variables.get(GQL_VAR); if (StringUtils.isNotBlank(encodeStr)) { variables.put(GQL_VAR, null); // TODO 此处的加密方法可以换为其他算法 String gqlQuery = AES256Utils.decrypt(encodeStr); gql.setQuery(gqlQuery); } } } 2.boot工程的启动类排除掉平台默认的RequestController类 @ComponentScan( excludeFilters = { // 该注解排除平台的RequestController类 @ComponentScan.Filter( type = FilterType.REGEX, pattern = "pro.shushi.pamirs.framework.gateways.graph.java.RequestController" ) }) public class DemoApplication { } 以下为实际项目中的启动类示例 package pro.shushi.pamirs.demo.boot; import org.apache.ibatis.annotations.Mapper; import org.mybatis.spring.annotation.MapperScan; import org.springframework.boot.WebApplicationType; import org.springframework.boot.autoconfigure.SpringBootApplication; import…

  nation

  2024年6月20日

  1.6K000
• 前端

  如何在多标签页切换时自动刷新视图

  在日常项目中，常常会遇到多视图（Multi-View）标签的场景，用户在切换不同视图时，可能需要刷新当前活动标签内的视图数据或状态。本文将详细解析下面这段代码，并说明如何利用它在视图切换时刷新对应的视图。 下列代码写在ss-boot里面的main.ts import { VueOioProvider } from '@kunlun/dependencies'; import { delay } from 'lodash-es'; VueOioProvider( { … 自己的配置 }, [ () => { setTimeout(() => { subscribeRoute( (route) => { const page = route.segmentParams.page || {}; // 如果不是表格类型，则不刷新(根据自己的需求判断) if (page.viewType !== ViewType.Table) { return; } const { model, action } = page; const multiTabsManager = MultiTabsManager.INSTANCE; delay(() => { const tab = multiTabsManager.getActiveTab(); if (tab?.key && tab.stack.some((s) => s.parameters?.model === model && s.parameters?.action === action)) { multiTabsManager.refresh(tab.key); } }, 200); }, { distinct: true } ); }, 1000); } ] ); 1. VueOioProvider 及其作用 首先，代码通过 VueOioProvider 初始化应用程序或组件，并传入两部分参数： 配置对象：可以根据实际业务需求进行自定义配置； 回调函数数组：这里传入了一个匿名函数，用于在应用初始化后执行额外的逻辑 2. 延时执行与路由监听 在回调函数中，使用了 setTimeout 延时 1000 毫秒执行，目的通常是为了确保其他组件或全局状态已经初始化完毕，再开始进行路由监听。 随后，代码调用 subscribeRoute 来监听路由的变化。subscribeRoute 接收两个参数： 回调函数：每次路由变化时都会触发该函数，并将最新的 route 对象传递给它； 配置对象：此处使用 { distinct: true } 来避免重复的触发，提高性能。 3. 判断视图类型 在路由回调函数内部，首先通过 route.segmentParams.page 获取当前页面的配置信息。通过判断 page.viewType 是否等于 ViewType.Table，代码可以确定当前视图是否为“表格类型”： 如果不是表格类型：则直接返回，不做刷新操作； 如果是表格类型：则继续执行后续刷新逻辑。 这种判断机制保证了只有特定类型的视图（例如表格）在切换时才会触发刷新，避免了不必要的操作 4. 多视图标签的刷新逻辑 当确认当前视图为表格类型后，从 MultiTabsManager 中获取当前活动标签： MultiTabsManager.INSTANCE.getActiveTab() 返回当前活动的标签对象； 如果 key 存在，并且激活的标签内部存储的action跟url一致， 就调用 multiTabsManager.refresh(key) 方法来刷新当前标签内的视图。

  汤乾华

  2025年3月13日

  1.3K000