写文章
  1. Oinone社区首页
  2. 前端

「前端」 获取当前用户信息以及语言

汤乾华 • • 前端, 项目开发综合知识点 • 阅读 304

概述

TopBarService 是用于管理用户信息和多语言配置的工具类，提供以下核心功能：

  • 用户信息查询（含缓存机制）
  • 当前语言状态获取
  • 可用语言列表查询
  • 语言切换操作

快速开始

// 基础使用示例
import { TopBarService } from '@kunlun/dependencies';

// 获取用户信息（自动缓存）
const userInfo = await TopBarService.getUserInfo();

// 获取当前语言配置
const currentLang = await TopBarService.getCurrentLang();

// 查询支持的语言列表
const languages = await TopBarService.queryLanguageList();

// 激活指定语言
await TopBarService.activeLang('zh_CN');

API 详解

方法功能说明

方法名称 描述 参数 返回值
​getUserInfo 获取当前用户信息（自动缓存） 无 用户信息对象
​queryUserInfo 强制获取最新用户信息 无 最新用户信息对象
​getCurrentLang 获取当前激活的语言配置 无 语言配置对象 / undefined
​queryLanguageList 获取所有可用语言列表 无 语言列表数组
​activeLang 激活指定语言 语言 ID (string) 更新后的语言配置对象

Oinone社区 作者：汤乾华原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/20744.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

赞 (0)
汤乾华的头像汤乾华数式员工
0 0
上一篇 2025年3月19日 pm3:56
下一篇 2025年3月21日 pm5:46

相关推荐

  • 后端代码规范 后端

    后端代码规范

    前言 虽然oinone框架减少了很多的代码，但是低代码部分的代码质量也需要高度关注，不管是写的代码bug多，或者说被吐槽代码不行，还是说写的代码经常被重构，核心点还是没有代码规范的意识和技巧，下面摘录了一些常见的规范要求，去提高后端的代码质量，代码质量提高后，自然效率也会提升。 常见代码规范 **1、规范命名** 命名是写代码中最频繁的操作，比如类、属性、方法、参数等。好的名字应当能遵循以下几点： **见名知意** 比如需要定义一个变量需要来计数 int i = 0; 名称 i 没有任何的实际意义，没有体现出数量的意思，所以我们应当指明数量的名称 int count = 0; **能够读的出来** 如下代码： private String sfzh; private String dhhm; 这些变量的名称，根本读不出来，更别说实际意义了。 所以我们可以使用正确的可以读出来的英文来命名 private String idCardNo; private String phone; **2、规范代码格式** 好的代码格式能够让人感觉看起来代码更加舒适。 好的代码格式应当遵守以下几点： 合适的空格 代码对齐，比如大括号要对齐 及时换行，一行不要写太多代码 好在现在开发工具支持一键格式化，可以帮助美化代码格式，大家统一使用idea的规范即可。 **3、写好代码注释** 在《代码整洁之道》这本书中作者提到了一个观点，注释的恰当用法是用来弥补我们在用代码表达意图时的失败。换句话说，当无法通过读代码来了解代码所表达的意思的时候，就需要用注释来说明。 书的作者之所以这么说，是因为作者觉得随着时间的推移，代码可能会变动，如果不及时更新注释，那么注释就容易产生误导，偏离代码的实际意义。而不及时更新注释的原因是，程序员不喜欢写注释。😒 但是这不意味着可以不写注释，当通过代码如果无法表达意思的时候，就需要注释，比如如下代码： for (Integer id : ids) { if (id == 0) { continue; } //做其他事 } 为什么 id == 0 需要跳过，代码是无法看出来了，就需要注释了。 好的注释应当满足一下几点： 解释代码的意图，说明为什么这么写，用来做什么 对参数和返回值注释，入参代表什么，出参代表什么 有警示作用，比如说入参不能为空，或者代码是不是有坑 当代码还未完成时可以使用 todo 注释来标记 代码review发现漏洞时 可以使用 fixme 注释来标记 **4、try catch 内部代码抽成一个方法** try catch代码有时会干扰我们阅读核心的代码逻辑，这时就可以把try catch内部主逻辑抽离成一个单独的方法 如下图是Eureka服务端源码中服务下线的实现中的一段代码 整个方法非常长，try中代码是真正的服务下线的代码实现，finally可以保证读锁最终一定可以释放。 所以这段代码其实就可以对核心的逻辑进行抽取。 protected boolean internalCancel(String appName, String id, boolean isReplication) { try { read.lock(); doInternalCancel(appName, id, isReplication); } finally { read.unlock(); } // 剩余代码 } private boolean doInternalCancel(String appName, String id, boolean isReplication) { //真正处理下线的逻辑 } **5、方法别太长** 方法别太长就是字面的意思。一旦代码太长，给人的第一眼感觉就很复杂，让人不想读下去； 同时方法太长的代码可能读起来容易让人摸不着头脑，不知道哪一些代码是同一个业务的功能。 比如代码中有那种2000+行大类，各种if else判断，光理清代码思路就需要用很久时间。🤷🏻‍♀️ 所以一旦方法过长，可以尝试将相同业务功能的代码单独抽取一个方法，最后在主方法中调用即可。 **6、抽取重复代码** 当一份代码重复出现在程序的多处地方，就会造成程序又臭又长，当这份代码的结构要修改时，每一处出现这份代码的地方都得修改，导致程序的扩展性很差。 所以一般遇到这种情况，可以抽取成一个工具类，还可以抽成一个公共的父类。 **7、多用return** 在有时我们平时写代码的情况可能会出现if条件套if的情况，当if条件过多的时候可能会出现如下情况： if (条件1) { if (条件2) { if (条件3) { if (条件4) { if (条件5) { System.out.println("11111"); } } } } } 面对这种情况，可以换种思路，使用return来优化 if (!条件1) { return; } if (!条件2) { return; } if (!条件3) { return; } if (!条件4) { return; } if (!条件5) { return; } System.out.println("11111"); 这样优化就感觉看起来更加直观 **8、if条件表达式不要太复杂**…

    冯, 天宇的头像 冯, 天宇
    2024年12月11日
    1.0K00
  • 自定义的「视图、字段」调用界面设计器配置的按钮（包含权限控制） 前端

    自定义的「视图、字段」调用界面设计器配置的按钮（包含权限控制）

    我们在业务开发中，经常会遇到自定义的视图或字段。有时候期望点击某一块区域的时候，打开一个弹窗或者是跳转新页面，但是希望这个动作是界面设计器拖拽进来的。 这篇文章详细的讲解了自定义的视图、字段怎么执行界面设计器拖出来的按钮。 自定义视图 1: 先设计一个页面，把对应的动作拖拽进来，可以不需要配置字段2: 将该页面绑定菜单 3: 自定义对应的页面 当我们自定义视图的时候，首先会注册一个视图，下面是我自定义的一个表单视图 registerLayout( `<view type="FORM"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="MyWidget"> </element> </view>`, { moduleName: 'ys0328', model: 'ys0328.k2.Model0000000453', actionName: 'MenuuiMenu78ec23b054314ff5a12b4fe95fe4d7b5', viewType: ViewType.Form } ); 我自定义了一个叫做MyWidget的 element，下面是对应的ts代码 @SPI.ClassFactory(BaseElementWidget.Token({ widget: 'MyWidget' })) export class MyWidgetManageWidget extends BaseElementWidget { public initialize(props: BaseElementWidgetProps): this { super.initialize(props); this.setComponent(MyVue); return this; } } 这是对应的 vue 文件: MyVue.vue <template> <div @click="onClick">点击打开弹窗</div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ props: ['onClick'] }); </script> 这个时候，我希望点击的时候，执行 onClick，打开一个弹窗，这时只需要在对应的 ts 文件中写对应的代码逻辑即可： @SPI.ClassFactory(BaseElementWidget.Token({ widget: 'MyWidget' })) export class MyWidgetManageWidget extends BaseElementWidget { // 获取当前页面所有的按钮 @Widget.Reactive() public get modelActions() { return this.metadataRuntimeContext.model.modelActions || [] } // 用来解析上下文表达式的，如果不需要，可以删除 public executeCustomExpression<T>( parameters: Partial<ExpressionRunParam>, expression: string, errorValue?: T ): T | string | undefined { const scene = this.scene; return Expression.run( { activeRecords: parameters.activeRecords, rootRecord: parameters.rootRecord, openerRecord: parameters.openerRecord, scene: parameters.scene || scene, activeRecord: parameters.activeRecord } as ExpressionRunParam, expression, errorValue ); } // 点击事件 @Widget.Method() public onClick() { // 找到对应的按钮 const action = this.modelActions.find((a) => a.label === '点击打开弹窗'); // 执行按钮 executeViewAction(action); /** * 如果跳转动作打开的视图需要通过id去查询数据，可以这样配置 */ // executeViewAction(action, undefined, undefined, {id: 'xxxx'});…

    汤乾华的头像 汤乾华
    2023年11月8日
    57901
  • 自定义字段组件如何处理vue组件内的表单校验 低无一体

    自定义字段组件如何处理vue组件内的表单校验

    介绍 本示例以字符串字段为业务场景，将输入框用element-plus的组件实现了一遍，vue组件内在onMounted生命周期内将ElForm表单实例通过ts组件内提供到props的setFormInstance方法设置到了ts组件的属性formInstance上，这样就可以在ts组件校验方法validator()触发的时候直接调用表单组件实例formInstance的校验方法validate() 适用场景 当前字段存储了动态表单的配置json，vue组件内自行实现了一套表单渲染逻辑，需要在vue组件和ts组件内同时触发校验 参考文档 element-plus表单组件文档 如何编写自定义字段组件的校验逻辑 示例代码 ts组件 import { BaseFieldWidget, FormStringFieldSingleWidget, isValidatorSuccess, ModelFieldType, SPI, ValidatorInfo, ViewType, Widget } from '@kunlun/dependencies'; import { FormInstance } from 'element-plus'; import MyFormStringField from './MyFormStringField.vue'; @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: [ViewType.Form, ViewType.Search], ttype: ModelFieldType.String, widget: 'Input', model: 'resource.k2.Model0000000109', name: 'code', }) ) export class MyFormStringFieldWidget extends FormStringFieldSingleWidget { public initialize(props) { super.initialize(props); this.setComponent(MyFormStringField); return this; } /** * ElementPlus的表单vue组件实例 * @private */ private formInstance?: FormInstance; @Widget.Method() private setFormInstance(formInstance: FormInstance | undefined) { this.formInstance = formInstance; } /** * 字段校验方法 */ public async validator(): Promise<ValidatorInfo> { const validRes = await this.formInstance?.validate((valid, fields) => {}); console.log('validRes', validRes) if (!validRes) { return this.validatorError('校验失败'); } const res = await super.validator(); if (!isValidatorSuccess(res)) { return res; } if (this.value == null) { return this.validatorSuccess(); } return this.validateLength(this.value); } } vue组件 <template> <ElForm ref="formInstance" :model="model" :rules="rules"> <ElFormItem label="编码" prop="code"> <ElInput v-model="model.code" @input="onValueChange"></ElInput> </ElFormItem> </ElForm> </template> <script lang="ts"> import { defineComponent, reactive, ref, onMounted, watch } from 'vue'; import { ElForm, ElFormItem, ElInput, FormInstance } from 'element-plus'; export default defineComponent({ name: 'MyFormStringField', components: { ElForm, ElFormItem, ElInput }, props: ['value', 'setFormInstance', 'onChange'],…

    nation的头像 nation
    2024年9月6日
    75600
  • 上下文在字段和动作中的应用 前端

    上下文在字段和动作中的应用

    上下文在字段和动作中的应用 在业务场景中，常常需要在打开弹窗或跳转到新页面时携带当前页面数据。此时，我们需要配置相关「动作」中的上下文信息。 在 oinone 平台中，上下文主要分为以下三种： activeRecord：当前视图数据 rootRecord：主视图数据 openerRecord：触发弹窗的对象 参考文档：oinone内的主视图数据和当前视图数据使用介绍 activeRecord 表示当前视图的数据。例如，若动作配置在表单上，则指代当前表单的数据；若配置在 o2m、m2m 字段表格上，则指代选中的行数据。 rootRecord 表示根视图的数据。若当前视图是表单页，则代表表单的数据；若为表格页，则代表表格的数据。 openerRecord 表示触发弹窗的对象。例如，在弹窗内的字段或动作中，可通过 openerRecord 获取触发弹窗的信息。 这三者均为对象 (Object) 类型。 界面设计器配置 在 o2m、m2m 表格字段弹窗中携带当前视图数据 假设我们设计了一个包含 o2m、m2m 表格字段的表单页面。打开相关弹窗时，需将表单中的 code 数据传递至弹窗中。 选择相应的「动作」，如创建或添加。在右侧属性面板底部找到「上下文」，添加格式为对象 {} 的上下文信息。 以键值对的格式添加上下文信息：{code: rootRecord.code}。 设计弹窗时，将 code 字段拖入弹窗中。 完成设计后保存并发布。 大家可以看到，上下文中的key是 code，但是value是rootRecord.code，这里取的是rootRecord而不是activeRecord，因为我们上面讲过如果当前动作配置在o2m、m2m的字段表格上面，那么activeRecord就是表格选中的行，我们现在要取的是表单上的code字段，所以需要用rootRecord。 注意点：key需要是提交模型【前端视图】存在的字段才能传递。

    汤乾华的头像 汤乾华
    2023年11月8日
    1.0K10
  • 前端自定义请求入门版 前端

    前端自定义请求入门版

    在开发过程中，为了满足业务场景、增加灵活性，前端自定义请求不可避免。下面将会从——需不需要自定义请求，不同场景下怎么自定义请求的维度，提供渐进式的自定义请求介绍。 1. 什么场景不需要自定义请求 自定义请求的背后是获取数据，如果数据已经拿到了，就不需要自定义请求了。首先，Oinone 提供了前端组件的默认实现。所以生成默认页面的时候，请求数据都是通的，可以看到表格、表单、表单里的字段等组件数据都是能回填的。这意味着，当我们简单替换组件，不需要特殊获取数据的时候，如果需要拿值，不需要自定义请求，直接从props里接就好，例如： 自定义表格 这里继承平台的表格组件，就有了平台表格自动获取数据的能力 import { BaseElementWidget, SPI, TABLE_WIDGET, TableWidget, ViewType } from '@kunlun/dependencies'; import Test from './Test.vue'; @SPI.ClassFactory( BaseElementWidget.Token({ viewType: ViewType.Table, widget: ['table', TABLE_WIDGET] }) ) export class TestWidget extends TableWidget { public initialize(props) { super.initialize(props); this.setComponent(Test); return this; } } 在 vue 中用 props 接一下 dataSource，就能获取数据 <template> <div class="Test"> {{ dataSource }} </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: 'Test', props: ['dataSource'] }); </script> 效果如下： 自定义表单 这里继承平台的表单组件，就有了平台表单自动获取数据的能力 import { BaseElementWidget, SPI, FORM_WIDGET, FormWidget, ViewType } from '@kunlun/dependencies'; import Test from './Test.vue'; @SPI.ClassFactory( BaseElementWidget.Token({ viewType: ViewType.Form, widget: ['form', FORM_WIDGET] }) ) export class TestWidget extends FormWidget { public initialize(props) { super.initialize(props); this.setComponent(Test); return this; } } 在 vue 中用 props 接一下 formData，就能获取数据 <template> <div class="Test"> {{ formData }} </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: 'Test', props: ['formData'] }); </script> 效果如下： 自定义字段 这里以单行文本字段为例，继承平台的单行文本字段组件，字段的数据实际上是从表单或表格里拿的，可以通过 value 快捷地拿到字段值。如果是关系型字段，想拿到选项数据而不是字段值，可以参考方法3、方法4。 import { SPI, ViewType, FormStringFieldSingleWidget, BaseFieldWidget, ModelFieldType } from '@kunlun/dependencies'; import Test from './Test.vue'; @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: [ViewType.Form, ViewType.Search], ttype: ModelFieldType.String }) ) export class TestWidget extends…

    银时的头像 银时
    2025年4月17日
    6600

Leave a Reply

登录后才能评论