【前端】环境配置（v4）

相关推荐

• 前端

  组件SPI机制（v4）

  阅读之前 你应该： 了解DSL相关内容。母版-布局-DSL 渲染基础（v4） 组件SPI简介 不论是母版、布局还是DSL，所有定义在模板中的标签都是通过组件SPI机制获取到对应Class Component(ts)并继续执行渲染逻辑。 基本概念： 标签：xml中的标签，json中的dslNodeType属性。 Token组件：用于收集一组Class Component(ts)的基础组件。通常该基础组件包含了对应的一组基础能力（属性、函数等） 维度（dsl属性）：用于从Token组件收集的所有Class Component(ts)组件中查找最佳匹配的参数。 组件SPI机制将通过指定维度按照有权重的最长路径匹配算法获取最佳匹配的组件。 组件注册到指定Token组件 以BaseFieldWidget这个SPIToken组件为例，可以用如下方式，注册一个可以被field标签处理的自定义组件： （以下示例仅仅为了体现SPI注册的维度，而并非实际业务中使用的组件代码） 注册一个String类型组件 维度： 视图类型：表单(FORM) 字段业务类型：String类型 说明： 该字段组件可以在表单(FORM)视图中使用 并且该字段的业务类型是String类型 @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: ViewType.Form, ttype: ModelFieldType.String }) ) export class FormStringFieldWidget extends BaseFieldWidget { …… } 注册一个多值的String类型组件 维度： 视图类型：表单(FORM) 字段业务类型：String类型 是否多值：是 说明： 该字段组件可以在表单(FORM)视图中使用 并且该字段的业务类型是String类型 并且该字段为多值字段 @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: ViewType.Form, ttype: ModelFieldType.String, multi: true }) ) export class FormStringMultiFieldWidget extends BaseFieldWidget { …… } 注册一个String类型的Hyperlinks组件 维度： 视图类型：表单(FORM) 字段业务类型：String类型 组件名称：Hyperlinks 说明： 该字段组件仅可以在表单(FORM)视图中使用 并且该字段的业务类型是String类型 并且组件名称必须指定为Hyperlinks @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: ViewType.Form, ttype: ModelFieldType.String, widget: 'Hyperlinks' }) ) export class FormStringHyperlinksFieldWidget extends BaseFieldWidget { …… } 当上述组件全部按顺序注册在BaseFieldWidget这个SPIToken组件中时，将形成一个以BaseFieldWidget为根节点的树： “` mermaidgraph TDBaseFieldWidget —> FormStringFieldWidgetBaseFieldWidget —> FormStringMultiFieldWidgetFormStringFieldWidget —> FormStringHyperlinksFieldWidget“` 树的构建 上述形成的组件树实际并非真实的存储结构，真实的存储结构是通过维度进行存储的，如下图所示： （圆角矩形表示维度上的属性和值，矩形表示对应的组件） “` mermaidgraph TDviewType([viewType: ViewType.Form]) —>ttype([ttype: ModelFieldType.Strng]) —>multi([multi: true]) & widget([widget: &#039;Hyperlinks&#039;]) direction LRttype —> FormStringFieldWidgetmulti —> FormStringMultiFieldWidgetwidget —> FormStringHyperlinksFieldWidget“` 有权重的最长路径匹配 同样以上述BaseFieldWidget组件为例，该组件可用的维度有： viewType：ViewType[Enum] ttype：ModelFieldType[Enum] multi：[Boolean] widget：[String] model：[String] viewName：[String] name：[String] 当field标签被渲染时，我们会组装一个描述当前获取维度的对象： { "viewType": "FORM", "ttype": "STRING", "multi": false, "widget": "", // 在dsl中定义的任意值 "model": "", // 在dsl编译后自动填充 "viewName": "", // 当前视图名称 "name": "" // 字段的name属性，在dsl编译后自动填充 } 当我们需要使用FormStringHyperlinksFieldWidget这个组件时，我们在dsl中会使用如下方式定义： <view type="FORM" title="演示表单" name="演示模型form" model="demo.DemoModel"> <field data="name" widget="Hyperlinks" /> </view> 此时，我们虽然没有在dsl中定义维度中的其他信息，但在dsl返回到前端时，经过了后端编译填充了对应元数据相关属性，我们可以得到如下所示的对象： { "viewType": "FORM", "ttype": "STRING", "multi": false, "widget":…

  oinone

  2023年11月1日

  756001
• 低无一体

  如何提高自定义组件的开发效率

  引言 本文将通过前端的开发者模式带领大家提高自定义组件的开发效率 支持2024年9月6日之后用npm i安装的4.7.x之后的所有版本 介绍前端开发者模式 开发者模式的特性 浏览器控制台可以看到更多利于开发的日志输出 页面顶部状态栏消息模块的轮询接口，将只在页面刷新后请求一次，这样会减少开发阶段不必要的请求，以及解决后端断点调试的时候被消息轮询干扰的问题 页面视图的数据将不在走缓存，而是每次实时从base_view表里查询template字段获取，方便需要实时看通过xml修改的页面效果 如何进入开发者模式 通过在浏览器地址栏后追加;mode=dev刷新页面进入开发者模式，页面加载后可以在浏览器开发者工具的应用标签下的本地存储空间(即localStorage)中看到本标识的存储，如果想退出开发者模式可以手动清除该值 开发者模式的应用场景 1.通过控制台跳转到视图动作(ViewAction)的调试页面 页面刷新后，可以在浏览器开发者工具的控制台看到如下图的日志输出，直接点击该链接可以跳转到当前页面的调试链接弹窗视图动作、抽屉视图动作等以弹出层为展示效果的页面，之前的版本是无法进入调试链接查看的，现在可以在弹窗等视图动作点击后在控制台看到该链接点击进入调试页面 2.查看页面母版(mask)、布局(layout)的匹配情况 母版(mask)匹配结果布局(layout)匹配结果 3.查看视图组件(View)、字段组件(Field)、动作组件(Action)的匹配情况 通过浏览器开发者工具的控制台，我们可以看到每个视图、字段、字段匹配到的组件的class类名，这样我们就知道当前用的是那个组件，在自定义的时候可以在源码查看该组件类的实现代码，然后再选择是否继承该父类。另外我们在给组件定义SPI条件的时候，可以参考匹配入参和匹配结果内的属性。 匹配入参是当前元数据SPI的最全量注册条件 匹配结果是当前匹配到的组件的注册条件，一般情况下我们只需要在匹配结果的条件加上当前模型编码(model)、视图名称(viewName)、字段名称(name)、动作名称(actionName)等条件就可以完成自定义组件的覆盖。 在浏览器开发者工具的控制台，通过模型编码、视图名称、字段名称、动作名称等关键字快速搜索定位到需要查找的组件 控制台搜索快捷键：win系统通过ctrl+f，mac系统通过cmd+f 总结 在确保自定义部分代码最终正确被import导入到启动工程main.ts内的情况下，可以通过开发者模式在浏览器控制台打印的日志来排查组件未正确覆盖的问题。

  nation

  2024年9月6日

  1.6K002
• 前端

  【界面设计器】自定义字段组件实战——轮播图

  阅读之前 此文章为实战教程，已假定你熟悉了【界面设计器】较为完整的【自定义组件】相关内容。 如果在阅读过程中出现的部分概念无法理解，请自行学习相关内容。【前端】文章目录 业务背景 用户需要从【创建/编辑】页面中上传多张图片，并且在【详情】页面将这多张图片进行【轮播】展示。 业务分析 从需求来看，我们需要实现一个【轮播图】组件，并且该组件允许在【详情】视图中使用。在其他视图中，我们可以直接使用平台内置的【图片】组件，实现基础的编辑和展示功能。 名词解释 业务模型：需要进行可视化管理的存储模型或代理模型。 准备工作 你需要在某个业务模型下创建一个【表格视图】用于查看全部数据，创建【表单视图】用于创建/编辑数据，并创建【详情视图】展示必要的信息。（为了方便起见，你可以在所有视图中仅使用编码和名称两个字段） 你需要将【表格视图】绑定到某个菜单上，并通过【跳转动作】将三个视图进行关联，可以完整执行当前模型的全部【增删改查】操作。 业务模型定义 （以下仅展示本文章用到的模型字段，忽略其他无关字段。） DemoModel 名称 API名称 业务类型 是否多值 长度(单值长度) 编码 code 文本 否 128 名称 name 文本 否 128 轮播图 carouselImages 文本 是 512 实现页面效果展示 表格视图 表单视图-创建 表单视图-编辑 详情视图 根据业务背景添加轮播图字段到所有视图 轮播图字段信息： 字段业务类型：文本 多值：是 使用组件：图片 无代码模型 在模型设计器创建轮播图字段，并从【组件库】-【模型】拖放至视图中即可。 PS：这里需要注意的是，在模型设计器中需要切换至专家模式，并确认字段长度为512，否则当URL超长时将无法保存。 低代码模型 与服务端同学确认字段，并从【组件库】-【模型】中拖放至视图中即可。 将上图中的【演示】数据进行【编辑】，并上传三张图片，在【详情视图】查看默认展示效果。 演示图片下载 创建组件、元件 准备工作完成后，我们需要根据【业务背景】确定【组件】以及【元件】相关信息，并在【界面设计器】中进行创建。 以下操作过程将省略详细步骤，仅展示可能需要确认的关键页面。 创建轮播图组件 创建轮播图元件 根据业务背景，我们需要根据模型中的字段确定业务类型，在这个场景中，可以使用如下配置。（暂时可以不进行属性面板的设计） 在【详情视图】中将【轮播图字段】的组件切换为我们新创建的【轮播图组件】 PS：这里会发现组件变成了【输入框】的样式，这是由于我们没有提供对应元件的代码实现，使得SPI找到了默认组件。 启动SDK工程进行组件基本功能开发 (npm相关操作请自行查看SDK工程中内置的README.MD) Carousel.vue <template> <a-carousel class="carousel" effect="fade" autoplay> <div class="carousel-item" v-for="image in images" :key="image"> <img :src="image" :alt="image" /> </div> </a-carousel> </template> <script lang="ts"> import { Carousel as ACarousel } from 'ant-design-vue'; import { computed, defineComponent, PropType } from 'vue'; export default defineComponent({ name: 'Carousel', components: { ACarousel }, props: { value: { type: Array as PropType<string[]> } }, setup(props) { const images = computed(() => props.value || []); return { images }; } }); </script> <style lang="scss"> .carousel { .slick-slide { height: 160px; & > div, .carousel-item { width: 100%; height: 100%; } img { max-width: 100%; max-height: 100%; margin: auto; } } } </style> 效果展示 开发完成后，我们将重新打包生成的JS文件和CSS文件在【界面设计器】的【低无一体】进行上传，就可以在【设计器环境】中正常使用了。 设计轮播图的属性面板 通过我们使用的a-carousel组件，我们发现组件中提供了很多【属性】或【功能】可以进行配置，比如是否自动切换(autoplay)、面板指示点位置(dotPosition)、是否显示面板指示点(dots)等。在这里我们将对这三个属性的配置方式进行演示，其他更多属性可以自行设计并开发。 我们可以在【界面设计器】的【属性面板设计】中根据这三个属性的字段类型确定以下信息： 功能 API名称 业务类型 选用组件 可选项 是否自动切换 autoplay 布尔 开关 -…

  数式-海波

  2023年11月1日

  3.5K000
• 前端

  前端打包文件上传到oss

  打包dist文件上传到oss教程 1: 确保boot工程里面安装了「webpack-aliyun-oss」依赖, 如果没有安装，可以手动安装下 2: package.json -> devDependencies -> {"webpack-aliyun-oss": "0.5.2"} 3: 在vue.config.js文件中添加对应的plugin // vue.config.js文件 // 新增代码 let BASE_URL = '/'; const { DEPLOY, OSS_REGION, OSS_DIST, OSS_URL, OSS_ACCESS_KEY_ID, OSS_ACCESS_KEY_SECRET, OSS_BUCKET } = process.env; const UNIQUE_KEY = Math.random(); switch (DEPLOY) { case 'online': BASE_URL = `${OSS_URL}${UNIQUE_KEY}/`; break; default: BASE_URL = '/'; } module.exports = { …原先的代码, publicPath: BASE_URL, plugins: [ …原先的插件, DEPLOY === 'online' ? new WebpackAliyunOss({ from: ['./dist/**/**', '!./dist/**/*.html'], // build目录下除html之外的所有文件 dist: `${OSS_DIST}/${UNIQUE_KEY}`, // oss上传目录 region: OSS_REGION, // 地区, 比如 oss-cn-hangzhou accessKeyId: OSS_ACCESS_KEY_ID, accessKeySecret: OSS_ACCESS_KEY_SECRET, bucket: OSS_BUCKET, timeout: 1200000, deleteOrigin: true, deleteEmptyDir: true, overwrite: true }) : () => {} ] } 4: 在vue.config.js同级目录下面新增「.env」文件, 写入对应的配置, 配置对应的值按照自己的oss配置来 DEPLOY=online OSS_BUCKET=xxx OSS_DIST=/oinone/product OSS_URL=https://xxxxxx/oinone/product/ OSS_REGION=oss-cn-hangzhou OSS_ACCESS_KEY_ID=xxxx OSS_ACCESS_KEY_SECRET=xxxx

  oinone

  2023年11月1日

  849000
• 前端

  前端自定义请求入门版

  在开发过程中，为了满足业务场景、增加灵活性，前端自定义请求不可避免。下面将会从——自定义 mask、自定义表格(表单等)、自定义字段三个实际场景的角度，介绍自定义请求。这篇文章把请求都写在了 ts 中，这样便于继承重写，如果不习惯 ts 的写法，把请求写在 vue 里也是可以的。 1. 自定义 mask mask 组件通常会有一个特点：在不同页面不同模型或不同应用下都展示，与业务模型无关，且往往只需要请求一次。同时可能有精确控制请求体大小的需求，这就很适合采取手写 GraphQL 的方式。 例如，我要重写顶部 mask 中的用户组件，展示用户信息。这个请求就只需请求一次，而且不需要复用，就很适合手写 GraphQL。 这里继承平台的用户组件，然后在代码中写死 GraphQL 发起请求。但是 GraphQL 语句怎么拼呢？我们可以去默认页面，打开浏览器控制台，找到相应的请求，把 GraphQL 语句复制出来，这里复制下默认的用户请求。 http.query 参数的构造、相应结果的获取都能从请求中得到。可以看到我这里精简了请求，只取了用户名。 TS import { SPI, UserWidget, MaskWidget, Widget, http } from '@kunlun/dependencies'; import Test from './Test.vue'; @SPI.ClassFactory(MaskWidget.Token({ widget: 'user' })) export class TestWidget extends UserWidget { public initialize(props) { super.initialize(props); this.setComponent(Test); return this; } // 添加响应式注解，这样能在 vue 中接受到 ts 中的变量 @Widget.Reactive() public testUserInfo: { pamirsUser: { name: string } } | undefined; public async queryUser() { const query = ` { topBarUserBlockQuery { construct(data: {}) { pamirsUser { name } } } } `; const result = await http.query('user', query); this.testUserInfo = result.data['topBarUserBlockQuery']['construct'] as { pamirsUser: { name: string } }; } public mounted() { this.queryUser(); } } VUE <template> <div class="Test"> {{ testUserInfo }} </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: 'Test', props: ['testUserInfo'] }); </script> 效果如下： 2. 自定义表格(表单)等视图元素组件 2-1. 自定义表格 2-1-1. 自定义表格自动获取数据 Oinone 提供了前端组件的默认实现。所以生成默认页面的时候，请求数据都是通的，可以看到表格、表单、表单里的字段等组件数据都是能回填的。所以这里继承平台的表格组件，就有了平台表格自动获取数据的能力。 TS import { BaseElementWidget, SPI, TABLE_WIDGET, TableWidget, ViewType } from '@kunlun/dependencies'; import Test from './Test.vue'; @SPI.ClassFactory( BaseElementWidget.Token({ viewType: ViewType.Table, widget:…

  银时

  2025年4月17日

  412000