第7章 Oinone的设计器们（改）

3.5.6.3 布局的配置

布局是将页面拆分成一个一个的小单元，按照上下中左右进行排列。前沿在前端领域中，布局可以分为三大块「Float、Flex、Grid 」，Float可以说的上是上古时期的布局了，如今市面还是很少见的，除了一些古老的网站。目前，平台主要支持通过配置XML上面的cols和span来进行布局。平台也同样支持自由布局，合理的使用row、col、containers和container四个布局容器相关组件，将可以实现各种类型的布局样式，换句话说，平台实现的自由布局功能是Flex和Grid的结合体。这里主要是讲解Flex和Grid布局，以及目前新的模板布局实现的思路。 Flex布局 Flex布局采用的是一维布局，那么什么是一维布局呢，所谓的一维布局就是只有一个方向、没有体积、面积，比如一条直线。它适合做局部布局，就像我们原来的顶部菜单、面包屑导航，以及现在的主视图字段配置。图3-5-6-19 Flex布局示意图3-5-6-20 Flex布局示意图3-5-6-21 Flex布局示意从上图可以看看出，Flex布局只能在X、Y轴进行转换，它无法对上下左右四个方向同时处理，因为它没“面积”的概念。所以它最适合做局部布局。优点图3-5-6-22 Flex兼容性 Flex的兼容性，可以看得出来，目前主流的浏览器都支持该属性。所以Flex兼容性强，如果你想对局部做布局处理，Flex是最好选择。缺陷刚刚也提到了，用户想要的布局是千奇百怪的，如果他想要的布局在现有的功能中无法实现怎么办？让用户放弃？还是说服他使用现在的布局。 Grid布局 Grid布局系统采用的是二维布局，二维布局有四个方向：上、下、左、右，它只有面积没有体积，比如一张纸、网格。 Grid布局 <div id="grid-container-one"> <div class="one-1">Grid Item 1</div> <div>Grid Item 2</div> <div>Grid Item 3</div> <div>Grid Item 4</div> <div>Grid Item 5</div> <div class="one-6">Grid Item 6</div> </div> <div id="grid-container-two"> <div class="tow-1">Grid Item 1</div> <div class="tow-2">Grid Item 2</div> <div>Grid Item 3</div> <div>Grid Item 4</div> <div>Grid Item 5</div> <div>Grid Item 6</div> </div> <div id="grid-container-three"> <div>Grid Item 1</div> <div>Grid Item 2</div> <div class="grid">Grid Item 3</div> <div class="grid-column">Grid Item 4</div> <div>Grid Item 5</div> <div>Grid Item 6</div> <div>Grid Item 7</div> <div class="grid-column">Grid Item 8</div> </div> HTML CSSResult Skip Results Iframe EDIT ON * { box-sizing: border-box; padding: 0; margin: 0; line-height: 1.5; font-weight: bold; text-align: center; } #grid-container-one{ background-color: black; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 50px); gap: 10px; border: solid black 2px; margin-bottom: 20px; color: salmon; } #grid-container-one div { border: solid white 2px; padding: 10px; } #grid-container-one .one-1 { grid-area: span 1/span 3; text-aligin: center } #grid-container-one .one-6 { grid-column: 3 /4; } #grid-container-two{ background-color: CADETBLUE; display: grid; grid-template-columns: 15% repeat(2, 1fr);…

史, 昂

2024年5月23日

1.1K000

Oinone 7天入门到精通

4.2.4 框架之网络请求-HttpClient

oinone提供统一的网络请求底座，基于graphql二次封装一、初始化 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setMiddleware() // 必须设置，请求回调。具体查看文章https://shushi.yuque.com/yqitvf/oinone/vwo80g http.setBaseURL() // 必须设置，后端请求的路径图4-2-4-1 初始化代码示例二、HttpClient详细介绍获取实例 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); 图4-2-4-2 获取实例接口地址 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setBaseURL('接口地址'); http.getBaseURL(); // 获取接口地址图4-2-4-3 接口地址请求头 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setHeader({key: value}); 图4-2-4-4 请求头 variables import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setExtendVariables((moduleName: string) => { return customFuntion(); }); 图4-2-4-5 variables 回调 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setMiddleware([middleware]); 图4-2-4-6 回调业务使用-query private http = HttpClient.getInstance(); private getTestQuery = async () => { const query = `gql str`; const result = await this.http.query('module name', query); console.log(result) return result.data[`xx`]['xx']; // 返回的接口，打印出result对象层次返回 }; 图4-2-4-7 业务使用-query 业务使用-mutate private http = HttpClient.getInstance(); private getTestMutate = async () => { const mutation = `gql str`; const result = await this.http.mutate('module name', mutation); console.log(result) return result.data[`xx`]['xx']; // 返回的接口，打印出result对象层次返回 }; 图4-2-4-8 业务使用-mutate 三、如何使用HttpClient 初始化在项目目录src/main.ts下初始化httpClient 初始化必须要做的事: 设置服务接口链接设置接口请求回调业务实战前文说到自定义新增宠物表单，让我们在这个基础上加入我们的httpClient; 第一步新增service.ts 图4-2-4-8 新增service.ts service.ts import { HttpClient }…

史, 昂

2024年5月23日

1.1K000

4.1.7 函数之元数据详解

介绍Function相关元数据，以及对应代码注解方式。大家还是可以通读下，以备不时之需如您还不了解Function的定义，可以先看下2.3【oinone独特之源，元数据与设计原则】对Function的描述，本节主要带大家了解Function元数据构成，能让小伙伴非常清楚oinone从哪些维度来描述Function，一、元数据说明 FunctionDefinition 元素数据构成含义对应注解备注 namespace 函数命名空间 @Fun("") @Model.model("") @Fun或@Model.model name 技术名称 @Function( name=””, scene={}, summary=””, openLevel=FunctionOpenEnum.REMOTE ) scene 可用场景见：FunctionSceneEnum description 描述 openLevel 开放级别见：FunctionOpenEnum fun 编码 @Function.fun("") displayName 显示名称 @Function.Advanced( displayName=””, type=FunctionTypeEnum.UPDATE, dataManager=false, language=FunctionLanguageEnum.JAVA, isBuiltin=false, category=FunctionCategoryEnum.OTHER, group=”pamirs”, version=”1.0.0″, timeout=5000, retries=0, isLongPolling=false, longPollingKey=”userId” longPollingTimeout=1 ) type 函数类型默认：4(改) 见 FunctionTypeEnum dataManager 数据管理器函数默认：false language 函数语言默认：DSL 见FunctionLanguageEnum isBuiltin 是否内置函数默认：false category 分类默认：OTHER 见：FunctionCategoryEnum group 系统分组默认：pamirs version 系统版本默认：1.0.0 timeout 超时时间默认：5000 retries 重试次数默认：0 isLongPolling 是否支持long polling，默认false longPollingKey 支持从上下文中获取字段作为key longPollingTimeout long polling超时时间默认值为1 transactionConfig 事务配置 JSON存储见TransactionConfig 配置@PamirsTransactional source 来源系统推断值，见：FunctionSourceEnum extPointList 函数包含扩展点系统推断值 module 所属模块系统推断值 bitOptions 位系统推断值 attributes 属性系统推断值 imports 上下文引用系统推断值 context 上下文变量系统推断值 codes 函数内容系统推断值 beanName bean名称系统推断值 rule 前端规则系统推断值，一般Action.rule传递下来的 clazz 函数位置系统推断值 method 函数方法系统推断值 argumentList 函数参数系统推断值，List<Argument> returnType 返回值类型系统推断值表4-1-7-1 FunctionDefinition TransactionConfig 函数事务管理之配置项事务，具体事务使用详见4.1.8【函数之事务管理】一文。元素数据构成含义对应注解备注 transactionManager 事务管理器 @PamirsTransactional( transactionManager=””, enableXa=false, isolation=Isolation.DEFAULT, propagation=Propagation.REQUIRED, timeout=-1, readOnly=false, rollbackFor={}, rollbackForClassName={}, noRollbackFor={}, noRollbackForClassName={}, rollbackForExpCode={}, noRollbackForExpCode={} ) enableXa 分布式事务默认为false isolation 事务隔离级别 propagation 事务传递类型 timeout 过期时间默认：-1 readOnly 只读默认：false rollbackForExpCode 回滚异常编码 rollbackForExpCode 忽略异常编码 namespace 函数命名空间系统推断值 fun 函数编码系统推断值 active…

史, 昂

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

1.0K000

Oinone 7天入门到精通

用户中心

1. 创建用户进入用户中心应用，在用户列表中点击创建。填写表单中的必填信息。若未设置昵称，则右上角头像右侧展示名称。若设置了昵称，则右上角头像右侧展示昵称。是否激活账号选择是，选择否时用户登录会显示“未找到首页”。角色分组中，选择创建的用户的角色，默认选择了超级管理员（包含所有权限）。点击确定，用户创建完成。用户登录时可用登录账号/邮箱/手机号登录。 2. 用户相关操作表格页中包含常规的搜索、批量删除功能。冻结：当将“是否有效”状态为“是”时展示，将用户“是否有效”修改为“否”。解冻：当将“是否有效”状态为“否”时展示，将用户“是否有效”修改为“是”。修改：进入用户信息修改页面，“编码、登录账号、注册时间”只读。重置密码：点击后在弹窗“账号确认”中输入账号，点击重置密码后，展示新密码。

史, 昂

2024年6月20日

1.7K000