3.5.6.2 视图的配置

相关推荐

• Oinone 7天入门到精通

  7.4 Oinone的低无一体

  基础介绍 前面我们学习了基于低代码开发平台进行快速开发，以及通过oinone的设计器进行零代码开发两种模式。当然低无一体不是简单地说两种模式还指：低无两种模式可以融合。 在做核心产品的时候以低代码开发为主，以无代码为辅助。见低代码开发的基础入门篇中设计器的结合一文 在做实施或临时性需求则是以无代码为主，以低代码为辅助 本文主要介绍第二种模式，它是www.oinone.top官网在SaaS模式下的专有特性。满足客户安装标品后通过设计器进行适应性修改后，但对于一些特殊场景还是需要通过代码进行完善或开发 在该模式下，我们提供了jar模式和代码托管两种模式，客户只要选择需要进行代码开发的模块，点击生产SDK，下载扩展工程模版，按Oinone低代码开发平台规范进行研发，后上传扩展工程即可。 操作手册 低无一体这个模块是连接无代码设计器的桥梁，可以为一个模块或应用设计低代码的逻辑，可以在界面设计器或流程设计器中使用低代码的逻辑。 1.选择模块 首先需要在下拉单选中选择需要低代码的模块或应用。 下拉选中只展示在「应用中心」中已安装的模块或应用，可前往「应用中心」安装后继续低代码操作。 选择模块中不展示系统的基础模块或应用，因为这些模块或应用无法自定义模型。 2.模块信息 模块信息展示的是选择模块的基础信息：模块名称、模块编码、模块作者、模块版本、包的前缀、工程模板下载地址，下载地址仅在上传jar包模式时候用到。 3.低无一体操作 低无一体支持了两种使用模式：上传jar包模式、源码托管模式。 上传控制工程或创建研发分支动作完成会生成一条数据，可以对单条数据进行部署、卸载、修改、删除。 3.1 上传jar包模式 在这个模式下，需要做四步动作。 生成SDK，点击按钮之后，会把模块的当前模型状态打成一个SDK包，SDK最新生成时间更新。当模型变更但未生成SDK时，使用低无一体就会出错，请重新生成SDK并修改扩展工程。生成SDK通常需要1分钟左右，若第一次使用低无一体模块，可能需要更长时间，请耐心等待。 下载扩展工程模板，点击按钮之后，会将SDK包和工程模板生成一个下载链接，复制模块信息中的卸载地址打开即可下载。 技术人员在工程模板的基础上写低代码逻辑。 上传扩展工程，点击按钮展开弹窗，在弹窗中设置标签、备注，并将最终的jar包上传，完成上传之后表格中就会新增一条数据。 上传jar包模式下，模板工程中代码需要注意的点参考下图： 3.2 源码托管模式 在这个模式下，需要做三步动作。 生成SDK，点击按钮之后，会把模块的当前模型状态打成一个SDK包，SDK最新生成时间更新。当模型变更但未生成SDK时，使用低无一体就会出错，请重新生成SDK并修改扩展工程。生成SDK通常需要1分钟左右，若第一次使用低无一体模块，可能需要更长时间，请耐心等待。 创建研发分支，点击按钮展开弹窗。首次创建时需要设置git账号名称、git账号邮箱来创建一个账号，另外在弹窗中设置分支名称、标签、备注，完成创建后表格中就会新增一条数据。 通过表格中的Gitlab地址，技术人员写低代码逻辑。 3.3 行内操作 部署：工程状态为未部署、部署失败、已卸载时展示行内的部署按钮，点击之后进行部署，工程状态变为部署中。部署过程大致需要5-10分钟，请耐心等待。部署完成之后，会生成一个新的模块：“原模块名称”扩展工程。 卸载：工程状态为已部署时展示行内的卸载按钮，点击之后会卸载这个已部署的工程，工程状态变为已卸载。同一模块只能有一个已部署的工程（与选择的模式无关），若需要使用新的工程请先卸载已部署的工程。 修改：行内操作修改按钮始终展示，只允许修改标签、备注。 删除：工程状态为未部署、部署失败、已卸载时展示行内的删除按钮，点击之后删除这一条工程记录。 3.4 部署效果 低无一体部署成功之后，可以进入对应模块的模型页面中使用提交动作来使用低代码逻辑，也可以在流程设计器中的引用逻辑节点中使用低代码逻辑。

  史, 昂

  2024年5月23日

  1.8K000
• Oinone 7天入门到精通

  3.2.2 启动前端工程

  本节核心是带大家直观的感受下我们上节构建的demo模块，并搭建前端环境为后续学习打下基础 一、使用vue-cli构建工程 ##demo-front是项目名，可以替换成自己的 vue create –preset http://ss.gitlab.pamirs.top/:qilian/pamirs-archetype-front4 –clone demo-front –registry http://nexus.shushi.pro/repository/kunlun/ 图3-2-2-1 使用vue-cli构建工程 如果启动报错，清除node_modules后重新npm i mac清除命令：npm run cleanOs windows清除命令: npm run clean 若安装失败，检查本地node、npm、vue对应的版本 图3-2-2-2 检查本地的版本 或者下载前端工程本地运行[oinone-front.zip](oinone-front)(575 KB) 二、启动前端工程 找到README.MD文件，根据文件一步一步操作就行。 找到vue.config.js文件，修改devServer.proxy.pamirs.target为后端服务的地址和端口 const WidgetLoaderPlugin = require('@kunlun/widget-loader/dist/plugin.js').default; const Dotenv = require('dotenv-webpack'); module.exports = { lintOnSave: false, runtimeCompiler: true, configureWebpack: { module: { rules: [ { test: /\.widget$/, loader: '@kunlun/widget-loader' } ] }, plugins: [new WidgetLoaderPlugin(), new Dotenv()], resolveLoader: { alias: { '@kunlun/widget-loader': require.resolve('@kunlun/widget-loader') } } }, devServer: { port: 8080, disableHostCheck: true, progress: false, proxy: { pamirs: { // 支持跨域 changeOrigin: true, target: 'http://127.0.0.1:8090' } } } }; 图3-2-2-3 修改后端服务地址与端口 注：要用localhost域名访问，.env文件这里也要改成localhost。如果开发中一定要出现前后端域名不一致，老版本Chrome会有问题，修改可以请参考https://www.cnblogs.com/willingtolove/p/12350429.html 。或者下载新版本Chrome 进入前端工程demo-front文件目录下，执行 npm run dev，最后出现下图就代表启动成功 图3-2-2-4 前端启动成功提示 使用 http://127.0.0.1:8081/login 进行访问，并用admin账号登陆，默认密码为admin 图3-2-2-5 系统登陆页面 点击左上角进行应用切换，会进入App Finder页面，可以看到所有已经安装的应用，可以对照boot的yml配置文件看。但细心的小伙伴应该注意到了，在App Finder页面出现的应用跟我们启动工程yml配置文件中加载的启动模块数不是一一对应的，同时也没有看到我们demo模块。 图3-2-2-6 已安装应用界面 boot工作的yml文件中加载模块 App Finder的应用 说明 – base- common- sequence- expression 无 模块的application = false，为非应用类的模块 – resource – user – auth – business- message – apps- my_center（show=INACTIVE ）- sys_setting （show=INACTIVE ） 有 模块的application = true，为应用类的模块但show=INACTIVE 的则不展示，通过以下方式定义：@Module(show = ActiveEnum.INACTIVE) – demo_core 无 刚建的oinoneDemo工程，默认为false 设计器：无 设计器：无 因为boot中没有加载设计器模块，所以App Finder中的设计器tab选项卡下没有应用 表3-2-2-1 boot工作的yml文件中加载模块及App Finder应用说明 只需要修改oinoneDemo工程的模块定义如下图，那么就可以在App Finder页面看见“oinoneDemo工程”。 图3-2-2-7 修改模块的application属性为true 图3-2-2-8 在App Finder 页面即可看见“OinoneDemo工程” 目前oinone的Demo模块还是一个全空的模块，所以我们点击后会进入一个空白页面。在后续的学习过程中我们会不断完善该模块。 至此恭喜您，前端工程已经启动完成。 三、前端工程结构介绍 ├── public 发布用的目录，index.html入口文件将在这里 │ ├── src 源代码…

  史, 昂

  2024年5月23日

  1.1K000

• 李强

  我们常说“在今天所有的不确定性当中，数字化是最大的确定性”，数字化一定会全面改造所有的行业更是确定的。在菜鸟九年的探索中，我们最大的感受是“未来，任何一个物流企业都会是一个技术公司，真正拉开差距的是：技术与实体产业的结合有多深”。菜鸟“简单极致，贴地疾飞”的技术文化也深刻体现了这一点——好的技术要能解决实际问题。数字化并不是简单地上线一个或几个系统，这是一个贴近业务持续迭代的过程，伴随着这个过程，我相信会诞生非常多的创新技术。 在本书中我看到了工程思维在推进技术创新的缩影，把难的问题转化为简单的问题，用成熟实用的技术分而解之。高性能的微服务框架、CDM、元数据、低代码、无代码等，都是当下非常热门的技术课题，Oinone把这一切都有机地结合起来，形成了一种具备先进理念的全新一代软件产品，每一个特性都贴合企业数字化遇到的实际问题。Oinone的产品设计，把“大道至简，软件自造”贯穿始终，用最简单的方式，帮助企业驾驭数字化，相信会给企业带来不一样的体验。 就跟本书提到的“「企业视角由内部管理转向业务在线、生态在线(协同)带来一系列新的诉求」这一大背景下，以及云、端等新技术的发展，对研发人员的需求越来越大，同时要求越来越高，低代码平台是提升研发效率，降低研发成本的核心手段”，低代码已经不是需不需要的问题，而是怎么选的问题。菜鸟网络自身也在推进自有低代码开发平台，我们有幸邀请本书作者陈鹏程来到菜鸟网络进行了分享交流，收获非常大。如您正在选型低代码开发平台，向您推荐这本书，低无一体的Oinone肯定会打动您。 菜鸟网络CTO李强（在宽）

  史, 昂

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

  1.2K000
• Oinone 7天入门到精通

  4.1.14 Search之非存储字段条件

  search默认查询的是模型的queryPage函数，但我们有时候需要替换调用的函数，这个特性会在下个版本支持。其核心场景为当搜索条件中有非存储字段，如果直接用queryPage函数的rsql拼接就会报错，所以非存储字段不会增加在rsql中。本文介绍一个比较友好的临时替代方案。 非存储字段条件（举例） Step1 为PetTalent新增一个非存储字段unStore @Field(displayName = "非存储字段测试",store = NullableBoolEnum.FALSE) private String unStore; 图4-1-14-1 为PetTalent新增一个非存储字段unStore Step2 修改PetTalent的Table视图的Template 在标签内增加一个查询条件 <field data="unStore" /> 图4-1-14-2 修改PetTalent的Table视图的Template Step3 重启看效果 进入宠物达人列表页，在搜索框【非存储字段测试】输入查询内容，点击搜索跟无条件一致 Step4 修改PetTalentAction的queryPage方法 package pro.shushi.pamirs.demo.core.action; …… 引入依赖类 @Model.model(PetTalent.MODEL_MODEL) @Component public class PetTalentAction { ……其他代码 @Function.Advanced(type= FunctionTypeEnum.QUERY) @Function.fun(FunctionConstants.queryPage) @Function(openLevel = {FunctionOpenEnum.API}) public Pagination<PetTalent> queryPage(Pagination<PetTalent> page, IWrapper<PetTalent> queryWrapper){ QueryWrapper<PetTalent> queryWrapper1 = (QueryWrapper<PetTalent>) queryWrapper; Map<String, Object> queryData = queryWrapper.getQueryData(); String unStore = (String) queryData.get(LambdaUtil.fetchFieldName(PetTalent::getUnStore)); if (StringUtils.isNotEmpty(unStore)) { //转换查询条件 queryWrapper1.like( 图4-1-14-3 修改PetTalentAction的queryPage方法 Step5 重启看效果 在搜索框【非存储字段测试】输入查询内容，跟通过【达人】字段搜索的效果是一致的 图4-1-14-4 示例效果

  史, 昂

  2024年5月23日

  912000
• Oinone 7天入门到精通

  3.5.7.2 自定义母版

  母版是什么 在业务系统中，母版是一种全局通用的组件，用于包裹每个页面的元素。这个概念类似于 PPT 中的母版，它定义了页面的整体结构、样式和布局，使得系统具有一致的外观和风格。 特点： 全局通用：母版是全局性的，适用于系统中的每个页面，确保一致性的用户体验。 包裹元素：母版包裹每个页面的元素，定义了整体的结构和布局。 外观一致性：通过统一的母版设计，系统达到外观和风格的一致性。 与 PPT 母版的类比： 在母版的概念上，与 PPT 中的母版类似，都是用于定义整体结构和样式，确保每个页面都具有一致的外观。 默认母版范围: 图3-5-7-20 默认母版范围 作用场景 在系统中，我们提供了多个纬度的母版，包括全局、应用和页面纬度。这样的设计允许根据不同的业务场景选择合适的母版纬度，以满足不同层次的定制需求。 母版纬度： 全局母版： 覆盖系统中所有页面，确保全局的一致性和统一的用户体验。 定义全局性的结构、样式和布局。 应用母版： 适用于特定应用或模块，定制化程度介于全局和页面之间。 允许在不同应用间实现一定的差异化。 页面母版： 面向具体页面，提供最大的定制化空间。 允许在不同页面中定义不同的结构和样式。 选择纬度： 业务场景决定：根据具体的业务场景和需求选择合适的母版纬度。 定制化需求：如果需要全局一致性，选择全局母版；如果在应用层面有特定需求，选择应用母版；如果需要最大的灵活性和定制化，选择页面母版。 参数说明： 在系统中，使用 registerMask 注册母版时，需要提供两个参数。第一个参数是母版的 XML，第二个参数用于控制母版的注册行为，包括 module、moduleName、model 和 actionName。 母版 XML（第一个参数）： 提供母版的 XML 描述，定义了母版的结构和样式。 控制参数（第二个参数）： module：指定模块的名称。 moduleName：指定模块的显示名称。 model：指定母版所属的模型。 actionName：指定母版的操作名称，可以是字符串或字符串数组。 全局母版 可以使用 registerMask 注册母版。当第二个参数为 {} 时，即代表注册全局母版。 示例工程目录 以下是需关注的工程目录示例，并确保导入导出依赖正确： 图3-5-7-21 全局纬度注册母版工程目录示例 示例代码 以下是一个示例代码： import { registerMask } from '@kunlun/dependencies'; /** * mask: 在做系统时，我们通常会把外层的布局(菜单、顶部导航)等抽出公共组件，公共组件会抽离全局通用。类似ppt母版的概念即为Mask * registerMask 第二个入参为{}即注册了全局得母版 * * 和默认母版相比移除右上角消息、语言切换、用户 * `<block> * <widget widget="notification" /> * <widget widget="divider" /> * <widget widget="language" /> * <widget widget="divider" /> * <widget widget="user" /> * </block>` */ const registerGlobalMask = () => { registerMask(` <mask> <multi-tabs /> <header> <widget widget="app-switcher" /> </header> <container> <sidebar> <widget widget="nav-menu" height="100%" /> </sidebar> <content> <breadcrumb /> <block width="100%"> <widget width="100%" widget="main-view" /> </block> </content> </container> </mask>`, {}); } registerGlobalMask(); 图3-5-7-22 全局纬度注册母版代码示例 复制这段代码执行下registerGlobalMask()试试看吧 效果 右上角消息、语言切换、用户被移除。 图3-5-7-23 全局纬度注册母版效果示例 应用母版 在系统中，可以使用 registerMask 注册母版。当第二个参数为 {moduleName: ‘resource’} 时，即注册了 resource（资源）应用的母版。 示例工程目录 以下是需关注的工程目录示例，更新导出./moduleMask： 图3-5-7-24 应用纬度注册母版工程目录示例 示例代码 以下是一个示例代码： /** * registerMask 第二个入参为{moduleName: 'resource'}即注册了resource(资源)应用的母版 * * resource来源: 通常是浏览器url上的module * * 和默认模版相比拿掉了菜单 * `<sidebar> * <widget widget="nav-menu" height="100%"…

  史, 昂

  2024年5月23日

  1.2K000