1. Oinone社区首页
  2. Oinone 7天入门到精通

3.2.1 构建第一个Module

史, 昂 • • Oinone 7天入门到精通 • 阅读 2311

所有环境准备就绪，就让我们踏上oinone的奇妙之旅吧。先搞个demo模块【展示名为“oinone的Demo工程”，名称为“demoCore”，编码为“demo_core”】试试看，本节学习目的就是能把它启动起来，有个大概的认知。

一、后端工程脚手架

使用如下命令来利用项目脚手架生成启动工程：

  1. 新建archetype-project-generate.sh脚本，或者直接下载archetype-project-generate.sh
#!/bin/bash

# 项目生成脚手架
# 用于新项目的构建

# 脚手架使用目录
# 本地 local
# 本地脚手架信息存储路径 ~/.m2/repository/archetype-catalog.xml
archetypeCatalog=local

# 以下参数以pamirs-demo为例

# 新项目的groupId
groupId=pro.shushi.pamirs.demo

# 新项目的artifactId
artifactId=pamirs-demo

# 新项目的version
version=1.0.0-SNAPSHOT

# Java包名前缀
packagePrefix=pro.shushi

# Java包名后缀
packageSuffix=pamirs.demo

# 新项目的pamirs platform version
pamirsVersion=4.7.8

# Java类名称前缀
javaClassNamePrefix=Demo

# 项目名称 module.displayName
projectName=OinoneDemo

# 模块 MODULE_MODULE 常量
moduleModule=demo_core

# 模块 MODULE_NAME 常量
moduleName=DemoCore

# spring.application.name
applicationName=pamirs-demo

# tomcat server address
serverAddress=0.0.0.0

# tomcat server port
serverPort=8090

# redis host
redisHost=127.0.0.1

# redis port
redisPort=6379

# 数据库名
db=demo

# zookeeper connect string
zkConnectString=127.0.0.1:2181

# zookeeper rootPath
zkRootPath=/demo

mvn archetype:generate \
  -DinteractiveMode=false \
  -DarchetypeCatalog=${archetypeCatalog} \
  -DarchetypeGroupId=pro.shushi.pamirs.archetype \
  -DarchetypeArtifactId=pamirs-project-archetype \
  -DarchetypeVersion=${pamirsVersion} \
  -DgroupId=${groupId} \
  -DartifactId=${artifactId} \
  -Dversion=${version} \
  -DpamirsVersion=${pamirsVersion} \
  -Dpackage=${packagePrefix}.${packageSuffix} \
  -DpackagePrefix=${packagePrefix} \
  -DpackageSuffix=${packageSuffix} \
  -DjavaClassNamePrefix=${javaClassNamePrefix} \
  -DprojectName="${projectName}" \
  -DmoduleModule=${moduleModule} \
  -DmoduleName=${moduleName} \
  -DapplicationName=${applicationName} \
  -DserverAddress=${serverAddress} \
  -DserverPort=${serverPort} \
  -DredisHost=${redisHost} \
  -DredisPort=${redisPort} \
  -Ddb=${db} \
  -DzkConnectString=${zkConnectString} \
  -DzkRootPath=${zkRootPath}

图3-2-1-1 新建archetype-project-generate.sh脚本

  1. Linux/Unix/Mac 需要执行以下命令添加执行权限
chmod +x archetype-project-generate.sh

图3-2-1-2 添加执行权限

  1. 根据脚本中的注释修改项目变量（demo工程可无需编辑）
  2. 执行脚本
./archetype-project-generate.sh

二、后端工程结构介绍

通过脚手架生成的demo工程是我们2.4.1【oinone独特性之单体与分布式的灵活切换】一文中介绍的单模块工程结构，属于入门级的一种，麻雀虽小五脏俱全，特别适合新手学习。

  1. 结构示意图（如下图3-2-4所示）

3.2.1 构建第一个Module

图3-2-1-4 结构示意图

  1. 工程结构说明
工程名 包名 说明
pamirs-demo-api 对外api包，如果有其他模块需要依赖demo模块，则可以在其pom中引入pamirs-demo-api包
constant 常量的包路径
enumeration 枚举类的包路径
model 该领域核心模型的包路径
service 该领域对外暴露接口api的包路径
tmodel 存放该领域的非存储模型如：用于传输的临时模型
DemoModule 该类是Demo模块的定义
pamirs-demo-boot demo模块的启动类
boot 启动类的包路径
DemoApplication Demo模块的应用启动类，遵循spring boot 规范
resources/config/application-dev.yml 研发环境的yml配置文件，遵循spring boot 规范
resources/bootstrap.yml 启动的yml配置文件，遵循spring boot 规范
pamirs-demo-core
action 模型对外交互的行为的包路径
init 模块初始化工作的包路径
manager manager是 service的一些公共逻辑，不会定义为独立的function的类
service service是对应api工程中service接口的实现类，是模型的function

表3-2-1-1 工程结构说明

三、pom.xml介绍

父pom的依赖管理

  1. 一个是启动包依赖
    a. pamirs-boot里是有我们多种启动模式依赖包。教程只介绍标准启动模式
    b. pamirs-base-standard

3.2.1 构建第一个Module

图3-2-1-5 父pom的依赖管理

pamirs-domo-api

一个标准java工程，可以看出只是依赖了，我们的pamirs-base-standard
3.2.1 构建第一个Module

图3-2-1-6 pamirs-domo-api

pamirs-demo-core

一个标准java工程，可以看出只是依赖了，我们的pamirs-demo-api

3.2.1 构建第一个Module

图3-2-1-7 pamirs-domo-core

pamirs-demo-boot

把启动的时候，需要启动的module（模块）对应的jar，进行依赖引入。这样就可以在我们的yml文件中进行启动module的配置

  1. 所需module（模块）对应的jar（如下图3-2-8所示）

3.2.1 构建第一个Module

图3-2-1-8 所需module（模块）对应的jar包依赖

  1. yml文件基础配置，boot工程的yml配置详见4.1.1【模块之yml文件结构详解】一文

3.2.1 构建第一个Module

图3-2-1-9 yml文件

四、DemoModule的定义

到此我们一个oinone中的一个module对应的工程就介绍完了。到目前为止跟一般的spring boot的工程没有太多区别，就多做了一个DemoModule的定义，oinone的所有Module都继承自PamirsModule。

3.2.1 构建第一个Module

图3-2-1-10 DemoModule的定义

配置注解

通过@Module的name属性配置模块技术名称，前端与后端交互协议使用模块技术名称来定位模块。

通过@Module的displayName属性配置模块展示名称，在产品视觉交互层展现。

通过@Module的version属性配置模块版本，系统会比较版本号来决定模块是否需要进行升级。

通过@Module的priority属性配置模块优先级（数字越小，优先级越高），系统会根据优先级取优先级最高的应用设置的首页来作为整个平台的首页。

通过@Module的dependencies属性和exclusions属性来配置模块间的依赖互斥关系，值为模块编码数组。如果模块继承了另一模块的模型或者与另一模块的模型建立了关联关系，则需要为该模块的依赖模块列表配置另一模块的模块编码。

通过@Module.module配置模块编码，模块编码是模块在系统中的唯一标识。

通过@Module.Advanced的selfBuilt属性配置模块是否为平台自建模块。

通过@Module.Advanced的application属性配置模块是否为应用（具有视觉交互页面的模块）。模块切换组件只能查看到应用。

通过@UxHomepage注解配置首页。@UxHomepage注解的model属性指定跳转页面的模型编码，name属性指定跳转页面的视图动作，默认为列表页。如果配置首页为列表页且未定义ViewAction，系统会根据首页配置自动生成。

更多Module的详细元数据描述，详见4.1.4【模块元数据详解】一文

配置扫描路径

设置扫描模型配置的包路径：

  • 使用packagePrefix方法来配置模块需要扫描模型配置的包路径

  • 使用dependentPackagePrefix方法来配置依赖模块的模型配置的包路径；如果不配置，会默认根据依赖模块的配置扫描模型配置的包路径扫描依赖模型

  • 不同模块包路径包含会导致模型加载模块出问题

命名规范

属性 默认取值规则 命名规范
module 无默认值
开发人员定义规范示例：
{项目名称}_{模块功能示意名称}		 使用下划线命名法
仅支持数字、大写或小写字母、下划线
必须以字母开头
不能以下划线结尾
长度必须小于等于128个字符
name 无默认值 使用大驼峰命名法
仅支持数字、字母
必须以字母开头
长度必须小于等于128个字符

表3-2-1-2 命名规范

五、DemoModule的启动

  1. 修改yml文件中数据源配置，数据库地址与密码修改为自己本地

  2. 配置license,否则启动会报错，获取授权文件请找官方客户

3.2.1 构建第一个Module

图3-2-1-11 license未配置

  1. 需要为启动或依赖模块配置扫描路径，配置扫描路径：pmairs是我们的oinone的基础包（必选），himalaya，tanggula是我们的业务模型基础包（可选），pro.shushi.pamirs.demo是我们测试项目包路径（必选，只不过它也在pamirs路径下，不填也不错)

3.2.1 构建第一个Module

图3-2-1-12 扫描逻辑配置

  1. 启动应用，我们会发现会报错。这个错误主要因为Oinone默认的是RELOAD（重启）模式，这种模式下只会从数据库中读取已安装模块并与yml文件中配置需要加载的模块对比。如果数据库中没有则会报没有安装过**模块，而我们是第一次启动，前面必然没有安装过模块，所以我们要把模式变为INSTALL，启动参数详见4.1.2【模块之启动指令】一文。如果整个平台第一次启动则回报 'base_sequence_config' doesn't exist

3.2.1 构建第一个Module

图3-2-1-13 启动应用的报错提示

  1. 把模式变为INSTALL再次启动

3.2.1 构建第一个Module

3.2.1 构建第一个Module

图3-2-1-14 把模式变为INSTALL再次启动

  1. 查看日志，看到对应启动字样才代表启动完成，而非Spring Boot的启动完成日志。我们的oinone的启动是在Spring Boot 启动完以后异步启动的

3.2.1 构建第一个Module

图3-2-1-15 启动成功日志

  1. 打开GraphQL客户端Insomnia看对应服务是否暴露

    a. 创建一个demo项目

3.2.1 构建第一个Module

图3-2-1-16 Insomnia操作示意-创建一个新项目

3.2.1 构建第一个Module

图3-2-1-17 Insomnia操作示意-命名为demo

b. 为demo项目创建一个请求集合

3.2.1 构建第一个Module

图3-2-1-18 Insomnia操作示意-创建一个请求集合（第一步）

3.2.1 构建第一个Module

图3-2-1-19 Insomnia操作示意-创建一个请求集合（第二步）

3.2.1 构建第一个Module

图3-2-1-20 Insomnia操作示意-创建一个请求集合（第三步）

c. 创建一个请求 command+N

3.2.1 构建第一个Module

图3-2-1-21 Insomnia操作示意-创建一个请求

3.2.1 构建第一个Module

图3-2-1-22 Insomnia操作示意-选POST模式

3.2.1 构建第一个Module

图3-2-1-23 Insomnia操作示意-输入服务地址

3.2.1 构建第一个Module

图3-2-1-24 Insomnia操作示意-切换body结构为GQL

d. 检验结果，对应后端提供的服务已经有提示了

3.2.1 构建第一个Module

图3-2-1-25 Insomnia操作示意-检验结果

e. 查看schema 文档

3.2.1 构建第一个Module

图3-2-1-26 Insomnia操作示意-查看API文档

3.2.1 构建第一个Module

图3-2-1-27 Insomnia操作示意-查看API文档

3.2.1 构建第一个Module

图3-2-1-28 Insomnia操作示意-查看API文档

恭喜第一个oinone的模块已经启动完成，在下一文中我们通过页面来看看oinone的系统的庐山真面目。

Oinone社区 作者：史, 昂原创文章，如若转载，请注明出处：https://doc.oinone.top/oio4/9228.html

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

赞 (0)
史, 昂的头像史, 昂数式管理员
0 0
上一篇 2024年5月23日 am9:54
下一篇 2024年5月23日

相关推荐

  • 集成平台 Oinone 7天入门到精通

    集成平台

    1. 集成介绍 集成是指平台应用与外部系统之间的集成，平台内部应用之间直接内部服务调用。 在讲解集成设计之前先了解以下概念： 集成资源：在实际业务场景中需要将多个系统打通，针对单一的一方，我们称之为集成资源。集成资源可以是具体的数据服务合集，例如系统应用、数据库、FTP服务、域控服务等。 连接器：连接具体集成资源，以供后续实际集成时使用的connector。 数据流程：通过流程编排的方式，让集成也可以可视化的处理，提升集成作业效率。 集成平台通过连接器、数据流程的编排实现与外部系统的数据互通，包括：连接器、数据流程、流程日志三部分功能。 集成操作整体流程： 2. 连接器 支持集成应用、数据库两大类型的资源。 页面操作包括：新增、编辑、查看引用、删除，点击卡片进入API列表管理接口。 2.1 连接器之应用 2.1.1 新增应用 操作入口：在连接器、应用Tab页面——新增应用资源。 2.1.2 编辑应用 编辑应用同新增页面信息，不做赘述。 2.1.3 删除应用 允许删除未被引用的应用，已被引用的不允许删除。 2.1.4 应用详情 点击应用卡片进入应用详情，查看应用基础信息、集成的接口清单。 2.1.5 API接口 操作入口：新增资源后，点击连接器卡片，进入API管理页面。 页面操作：新增、删除、编辑、详情、返回连接器。 2.1.5.1 新增API 输入基础信息、请求参数、定义响应结果； API URL支持： 协议类型：HTTP/HTTPS Verb：GET、POST、PUT、DELETE 参数类型支持：Long、Double、String、Boolean、Integer、Date、Void、Object。 2.1.5.2 新增WebService 输入基础信息、请求参数、定义响应结果； API URL支持： 协议类型：HTTP/HTTPS Verb：POST 参数类型支持：Long、Double、String、Boolean、Integer、Date、Void、Object。 2.1.5.3 编辑 编辑同新增页面信息，不做赘述。 2.1.5.4 删除 删除API接口后不能继续使用，请慎重。 2.1.6 查看引用 查看引用应用资源的接口。 2.2 连接器之资源 2.2.1 新增数据库资源 操作入口：在连接器页面，切换到数据库页面——新增DB资源。 2.2.2 编辑应用 编辑应用同新增页面信息，不做赘述。 2.2.3 删除应用 允许删除未被引用的应用，已被引用的不允许删除。 2.2.4 查看引用 查看引用数据库的接口。 2.2.5 数据库详情 点击应用卡片进入数据库连接器详情，查看应用基础信息、集成的接口清单，新增API。 2.2.6 API接口 2.2.6.1 新增API 输入基础信息、请求参数、数据库操作、定义响应结果。 2.2.6.2 编辑 编辑同新增页面信息，不做赘述。 2.2.6.3 删除 删除API接口后不能继续使用，请慎重。 3. 数据流程 3.1.1 数据流程介绍 数据流程：通过流程编排的手段，可视化的配置、处理集成的数据流程，提升集成作业效率。 主要包含基本操作和流程设计两个部分。前者包含了流程的新增、删除、复制、停用/启用、设计/编辑、搜索。后者包含单一流程的基础信息修改、流程设计、参数配置、保存、发布。 3.1.2 流程的基本操作 3.1.2.1 新增流程 新增流程，点击后进入流程设计页面，流程名默认为“未命名流程”，可自行修改。 3.1.2.2 设计/编辑 点击编辑进入该流程的设计页面。 3.1.2.3 停用/启用 流程需要更新或暂时不用时可以使用停用功能。流程停用后将不会执行流程，正在执行中的流程不受停用影响。 针对停用流程，点击启用按钮，流程恢复启用状态，可正常触发。 3.1.2.4 复制 遇到流程节点动作相似度较高的情况可以使用复制流程的功能，点击按钮后生成一个“原流程名-复制”的流程，并且进入新流程的流程设计界面。 3.1.2.5 删除 遇到流程创建有误，没有使用过且将来也不会使用该流程，可以删除流程。需要注意的是，删除流程的前提是该流程已停用，并且该流程从未执行过。 3.1.3 流程设计 通过新增、编辑/设计动作进入流程设计页后，可以进行流程名称、流程说明的编辑，可以进行流程设计，流程参数配置，保存和发布。 3.1.3.1 流程配置 点击进入流程配置页面，若需要配置一些参数供流程使用，可在此添加和删除。删除流程参数时，若该参数已在流程中被使用则无法删除。参数支持文本、数值、日期、布尔四种类型。 3.1.3.2 保存 点击后流程设计进行存档，流程设计不完整也支持保存，下次进入流程设计回到保存的页面。 3.1.3.3 发布 第一次发布时右上角发布显示文字为发布流程，后续发布按钮显示文字为更新发布。发布后流程才会按照设计触发，首次发布和更新发布的逻辑一致，若流程中有未解决的错误则无法发布不成功，发布成功后页面跳转到显示全部流程的页面，流程状态为已启用、已更新。 3.1.4 流程触发 新增的流程设计页面默认包含两个节点，一个是流程的触发节点：确定流程开始的条件；另一个是流程结束的节点。 流程触发方式有定时触发、消息触发两种方式，未设置流程触发方式时无法继续添加后续流程节点，同时无法进行流程发布，如左下图。触发方式设置完成后，可从左侧菜单栏拖入或流程箭头中的加号点击添加节点动作，如下图。 3.1.4.1 定时触发 定时触发适用于周期性调用流程的场景，设置流程第一次执行的时间，配置循环的周期间隔。 3.1.4.2 消息触发 消息触发方式下，识别消息任务的唯一标识，标识可复用。在发送消息时，必须匹配定义的消息标识。 3.1.5节点动作 3.1.5.1 集成服务 集成服务API，选择集成的应用、此应用下的API，配置相应的参数。 3.1.5.2 数据处理 【新增数据】节点：同流程设计器； 【更新数据】节点：同流程设计器； 【获取数据】节点：同流程设计器； 【删除数据】节点：同流程设计器； 【更新流程参数】节点：同流程设计器； 【引用逻辑】节点：同流程设计器； 3.1.5.3 构建 【延时】节点：同流程设计器； 【条件分支】节点：同流程设计器； 【子流程】节点：同流程设计器； 【循环】节点 循环模式：次数循环、列表循环； 次数循环：需配置循环开始值、循环结束值、循环步长； 列表循环：配置需要循环的列表； 均使用表达式配置相应字段， 3.1.5.4 通知消息 【站内信】节点：同流程设计器； 【邮件】节点：同流程设计器； 【短信】节点：同流程设计器； 4. 流程日志 查看流程执行的情况，包括执行状态、执行时间、执行时长，针对异常流程，可以重试。 详情：查看流程日志、日志详情。

    史, 昂的头像 史, 昂
    2024年6月20日
    1.8K00
  • 3.5.2.2 构建View的Template Oinone 7天入门到精通

    3.5.2.2 构建View的Template

    我们在很多时候需要自定义模型的管理页面，而不是直接使用默认页面，比如字段的展示与隐藏，Action是否在这个页面上出现，搜索条件自定义等等，那么本章节带您一起学习如何自定义View的Template。 自定义View的Template 在使用默认layout的情况下，我们来做几个自定义视图Template,并把文件放到指定目录下。 图3-5-2-14 自定义View的Template 第一个Tabel Step1 自定义PetTalent的列表 我们先通过数据库查看默认页面定义，找到base_view表，过滤条件设置为model =\’demo.PetTalent\’，我们就看到该模型下对应的所有view，这些是系统根据该模型的ViewAction对应生成的默认视图，找到类型为【表格（type = TABLE）】的记录，查看template字段。 图3-5-2-15 base_view表查看template字段 <view name="tableView" cols="1" type="TABLE" enableSequence="false"> <template slot="actions" autoFill="true"/> <template slot="rowActions" autoFill="true"/> <template slot="fields"> <field invisible="true" data="id" label="ID" readonly="true"/> <field data="name" label="达人"/> <field data="dataStatus" label="数据状态"> <options> <option name="DRAFT" displayName="草稿" value="DRAFT" state="ACTIVE"/> <option name="NOT_ENABLED" displayName="未启用" value="NOT_ENABLED" state="ACTIVE"/> <option name="ENABLED" displayName="已启用" value="ENABLED" state="ACTIVE"/> <option name="DISABLED" displayName="已禁用" value="DISABLED" state="ACTIVE"/> </options> </field> <field data="createDate" label="创建时间" readonly="true"/> <field data="writeDate" label="更新时间" readonly="true"/> <field data="createUid" label="创建人id"/> <field data="writeUid" label="更新人id"/> </template> <template slot="search" autoFill="true" cols="4"/> </view> 图3-5-2-16 base_view表查看template字段 对比view的template定义与页面差异，从页面上看跟view的定义少了，创建人id和更新人id。因为这两个字段元数据定义里invisible属性。 a. 当XML里面没有配置，则用元数据覆盖了。 b. 当XML里面配置了，则不会用元数据覆盖了。 在下一步中我们只要view的DSL中给这两个字段加上invisible="false"就可以展示出来了 图3-5-2-17 查看列表展示 图3-5-2-18 invisible属性 新建pet_talent_table.xml文件放到对应的pamirs/views/demo_core/template目录下，内容如下 a. 对比默认视图，在自定义视图时需要额外增加属性model="demo.PetTalent" b. name设置为"tableView"，系统重启后会替换掉base_view表中model为"demo.PetTalent"，name为"tableView"，type为"TABLE"的数据记录。 ⅰ. name不同的但type相同，且viewAction没有指定时，根据优先级priority进行选择。小伙伴可以尝试修改name="tableView1"，并设置priority为1，默认生成的优先级为10，越小越优先。 ccreateUid和writeUid字段，增加invisible="false"的属性定义 <view name="tableView" model="demo.PetTalent" cols="1" type="TABLE" enableSequence="false"> <template slot="actions" autoFill="true"/> <template slot="rowActions" autoFill="true"/> <template slot="fields"> <field invisible="true" data="id" label="ID" readonly="true"/> <field data="name" label="达人"/> <field data="dataStatus" label="数据状态"> <options> <option name="DRAFT" displayName="草稿" value="DRAFT" state="ACTIVE"/> <option name="NOT_ENABLED" displayName="未启用" value="NOT_ENABLED" state="ACTIVE"/> <option name="ENABLED" displayName="已启用" value="ENABLED" state="ACTIVE"/> <option name="DISABLED" displayName="已禁用" value="DISABLED" state="ACTIVE"/> </options> </field> <field data="createDate" label="创建时间" readonly="true"/> <field data="writeDate" label="更新时间" readonly="true"/> <field data="createUid" label="创建人id" invisible="false"/> <field data="writeUid" label="更新人id" invisible="false"/> </template> <template slot="search" autoFill="true" cols="4"/> </view> 图3-5-2-19 增加invisible=”false”的属性定义 Step2 重启应用看效果 图3-5-2-20 示例效果 第一个Form Step1 自定义PetTalent的编辑页…

    史, 昂的头像 史, 昂
    2024年5月23日
    1.0K00

  • 数据可视化

    史, 昂的头像 史, 昂
    Oinone 7天入门到精通 2024年6月20日
    1.4K00
  • 3.5.6.3 布局的配置 Oinone 7天入门到精通

    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.2K00
  • 7.2 实战训练（积分发放） Oinone 7天入门到精通

    7.2 实战训练（积分发放）

    前言 当我们碰到一个全新的场景，除了写代码以外也可以通过设计器来完成，大致步骤如下： 分析业务场景，规划对应的模型并通过模型设计器进行配置 通过界面设计器，设计出必要管理页面 通过流程设计器，设计对应业务流程 通过数据可视化，设计相应的数据看板 场景说明 本节通过例子完成一个积分成本分摊的业务场景 积分支出：谁受益谁支出原则+导购手动确认原则，通过门店应用的积分规则，来实现自动化+手动积分形式实现 案例背景 某家具企业经营多种家具类型，不同系列不同品类分事业部经营。 注： 独立门店：只能售卖本事业部下的商品； 融合门店：可以售卖多事业部下的商品； 需求：需要建立一套积分规则，遵循谁受益谁支出原则+导购手动确认原则；通过门店应用的积分规则，来实现自动化+手动积分。 场景一 导购a邀请老客户c通过裂变分享新客户x在独立门店1下单。系统根据独立门店1的积分规则，自动发放积分给老客户c和新客户x，积分由国一事业部承担。 场景二 融合门店1导购b邀请老客户d裂变分享新客户y在融合门店下单。该订单可能涉及多个事业部，由导购b手动选择最大量值的积分规则进行发放 场景三 独立门店1的导购a邀请老客户c裂变分享新客户z在独立门店2下单。系统根据独立门店2的积分规则，来计算积分值，自动发放老客户c和新客户z的积分，积分由国二事业部 实战训练 Step1 分析业务场景规划对应模型 本场景下涉及基础对象模型包括：事业部、门店、导购、会员等 事业部：它是积分成本的载体 门店：类型分为独立门店和融合门店，独立门店必须隶属于一个事业部，同时配置默认积分发放规则，融合门店可能属于多个事业部当发生积分发放时，需要店员手工选择成本事业部和积分发放规则 导购员：导购员必须隶属于一个门店等 会员：消费者需要记录它隶属导购员，以及是由哪个会员推荐过来的等 涉及业务对象模型包括：积分发放规则，积分发放记录，邀请下单记录 积分发放规则：会员积分发放规则，对应邀请老客的积分发放规则等 积分发放记录：本次发放积分、本次发放积分规则、发放对象(会员)、成本事业部、关联门店、关联导购、关联老客（可空）、关联下单记录编码等 邀请下单记录：导购、下单会员、下单门店、商品信息、下单金额等 对应模型如下： 模型 设计器呈现 自定义字段列表 关系字段说明 说明 事业部 事业部负责人(文本) 门店列表(o2m) 与门店建立o2m绑定关系,绑定时选择双向绑定，双向绑定意思是在事业部这边建立o2m到门店的关系字段，在门店那边建立m2o的关系字段 关系字段需要在有对方模型的情况下再建，比如事业部中的门店列表则是再后面追加新增的 门店 导购列表(o2m) 事业部(m2o) 默认积分发规则(m2o) 门店类型(枚举) 分别与事业部、导购、积分发放规则建立m2o、o2m、m2o关系 门店类型：需要先建对应的数据字典 导购 绑定用户(m2o) 门店(m2o) 是否离职(布尔型) 与门店建立m2o关系 1. 绑定用户，用于后续业务流程设计中的填写规则 2. 打马赛克的忽略，其他场景测试用 会员 会员累计积分(浮点数) 推荐客户(m2o) 所属于导购员(m2o) 是否为新客(布尔型) 与导购、会员建立m2o关系 1. 会员m2o的字段是自关联用于存储推荐会员 2. 打马赛克的忽略，其他场景测试用 积分发放规则 推荐客户发放比例(浮点数) 发放倍数(整数) 积分发放记录 最终发放积分(浮点数) 关联积分规则(m2o) 事件编码(文本) 推荐导购员(m2o) 推荐会员(m2o) 关系门店(m2o) 成本事业部(m2o) 会员(m2o) 成本事业部名称（文本） 会员名称（文本） 与积分发放规则、导购员、会员、门店、事业部建立m2o关系 1. 会员有两个m2o，分别用户记录发放会员和发放会员的推荐会员也就是老客 2. 事件编码用户维护触发本次积分发放记录产生的源头单据编码如：邀请下单记录的编码 邀请下单记录 成本事业部(m2o) 选择积分发放规则(m2o) 下单门店(m2o) 购买商品(文本) 下单金额(整数) 会员(m2o) 导购(m2o) 与成本事业部、积分发放规则、下单门店、会员、导购等建立m2o的关系 1. 会员、下单门店、导购属于必要信息 2. 成本事业部、积分发放规则是业务流程中自动计算回填的数据 Step3 利用界面设计器，设计出必要的管理页面 以事业部为例，构建管理页面。其他模型依次按例子建立管理页面 进入界面设计器，应用选择全员营销，模型选择事业部，点击添加页面下的直接创建 设置页面标题、模型（自动带上可切换）、业务类型（运营管理后续会扩展其他类型）、视图类型（表单）后点击确认按钮进入事业部表单设计页面 进入页面设计器，对事业部表单页面进行设计（更多细节介绍，请参考界面设计产品使用手册） a. 左侧为物料区：分为组件、模型。 ⅰ. 【组件】选项卡下为通用物料区，我们可以为页面增加对应布局、字段（如同在模型设计器增加字段）、动作、数据、多媒体等等 ⅱ. 【模型】选项卡下为页面对应模型的自定义字段、系统字段、以及模型已有动作 b. 中间是设计区域 c. 右侧为属性面板，在设计区域选择中组件会显示对应组件的可配置参数 在左侧【组件】选项卡下，拖入布局组件【分组】，并设置组件【标题属性】为基础信息 在左侧【组件】选项卡下，再次拖入布局组件【分组】，并设置组件【标题属性】为门店列表 在左侧【模型】选项卡下，分别把自定义字段中的【事业部负责人】和系统字段中的【名称】拖入【基础信息】分组，把自定义字段中的【门店列表】字段拖入门店列表分组 在设计区域切换【门店列表】展示组件为【表格】 此时【门店列表】展示形式变成了表格形式，选中【门店列表】组件，会发现左侧【模型】选项卡下的当前模型切换成了【门店】，同时我们在右属性面板区置空其【标题属性】 设计区选中【门店列表】的表格组件，分别把自定义字段中的【默认积分发规则】、【门店类型】、【导购列表】和系统字段中的【名称】拖入【门店列表】表格组件的表格字段设计区 设计区选中【门店列表】的表格组件的【创建】按钮，点击【打开弹窗】设计关系字段【门店】的新增页面 11.分别把自定义字段中的【默认积分发规则】、【门店类型】和系统字段中的【名称】拖入门店的新增页面设计区 选中弹出框中【取消】取消按钮，设置其【按钮样式】属性为【次要按钮】 关闭弹出框，回到主设计区 设计区选中【门店列表】的表格组件的【删除】按钮，设置其【按钮样式】属性为【次要按钮】，【二次确认】属性打开 设计区选中【门店列表】的表格组件中操作列的【编辑】按钮，点击【打开弹窗】设计关系字段【门店】的编辑页面， a. 分别把自定义字段中的【默认积分发规则】、【门店类型】和系统字段中的【名称】拖入门店的新增页面设计区。 b. 选中弹出框中【取消】取消按钮，设置其【按钮样式】属性为【次要按钮】 c. 把门店类型展示组件切换为【单选框】 d. 关闭弹出框 设计区选择非【门店列表】组件如基础信息，模型切换为主模型【事业部】，在左侧【模型】选项卡下，把动作分类下的提交类型【创建】动作拖入中间设计区的动作区 选择中展示名为【确定】的创建动作按钮，在右侧属性面板中设置：是否隐藏属性为【条件隐藏】，隐藏条件为【id非空】 在左侧【模型】选项卡下，把动作分类下的提交类型【更新】动作拖入中间设计区的动作区 选择中展示名为【确定】的更新动作按钮，在右侧属性面板中设置：是否隐藏属性为【条件隐藏】，隐藏条件为【id为空】。之所以同时拖入【创建】和【更新】动作并都命名为确认，是期望这个页面同时可以做为新增页面也可以做为编辑页面，只不过要通过条件隐藏来设置按钮的出现规则 在左侧【组件】选项卡下，把动作分类下的【客户端动作】拖入中间设计区的动作区 选择设计区【客户端动作】，在右侧属性面板中设置：动作名称为【返回】，客户端行为为【返回上一个页面】并点击保存 选择设计区【返回】动作，在右侧属性面板中设置：按钮样式为【返回】，【二次确认】属性打开并设置提示文字为【返回页面操作将不被保存】，可以点击预览二次确认看效果 点击【发布】按钮，页面成功发布，每发布一次会有一个例子版本，可以通过历史版本进行恢复 点击右上角历史版本图标，进入历史版本查看页面 在历史版本页面可以选择对应历史版本记录，并通过【恢复此版本】来完成页面的历史版本切换 接下来我们为事业部模型创建表格管理页面，入口同编辑页面。设置页面标题、模型（自动带上可切换）、业务类型（运营管理后续会扩展其他类型）、视图类型（表格）后点击确认按钮进入事业部表格设计页面 进入页面设计器，对事业部表格页面进行设计（更多细节介绍，请参考界面设计产品使用手册） 在左侧【模型】选项卡下，分别把自定义字段中的【事业部负责人】和系统字段中的【名称】拖入表格组件的表格字段设计区 在左侧【组件】选项卡下，把动作分类下的【跳转动作】拖入中间设计区的动作区，并在右侧属性面板中设置动作名称为【新增】，数据控制类型为【不进行数据处理】，打开方式为【当前窗口打开】，动作跳转页面为【事业部编辑】页面，并点击保存 在左侧【组件】选项卡下，把动作分类下的【跳转动作】拖入中间设计区的行内动作区，并在右侧属性面板中设置动作名称为【编辑】，数据控制类型为【处理单条数据】，打开方式为【当前窗口打开】，动作跳转页面为【事业部编辑】页面，并点击保存 在左侧【模型】选项卡下，把动作分类下的【删除】拖入中间设计区的动作区，并在右侧属性面板中设置动作名称为【删除】，按钮样式为【次要按钮】，【二次确认】属性打开 点击右上角【显示母版】进入页面最终展示形式，点击添加菜单项，并在输入框中输入【事业部管理】 点击菜单右侧设置图标，选择【绑定已有页面】，进行菜单与页面的绑定操作 在绑定页面中，模型选择【事业部】，视图选择【事业部管理】，点击确认按钮提交 拖动【事业部管理】菜单到【积分管理】父菜单下 最后别忘了点击右上角【发布】按钮对【事业部管理】表格页面进行发布，回到界面设计器首页查看刚刚建好的两个页面 以事业部为例分别对门店、导购、会员、积分发放规则、积分发放记录、邀请下单记录等模型进行页面设计，这里不再累赘，请按照自身学习需要，尝试进行界面设计 Step4 通过流程设计器，设计对应业务流程 我们先来整理下核心流程即：邀请下单流程 Step4.1 创建导购邀请下单记录触发流程 进入流程设计器，点击【创建】按钮 注意：流程中需要获取关系类型的字段（如：O2O、O2M、M2O或M2M），这种类型都是复杂的对象字段，除关联字段(一般为ID)以外的字段，需要通过【数据获取】节点单独获取【关系字段】的对象数据。所以在流程设计中经常会用到【数据获取】节点 左上角编辑流程名称为【导购邀请下单触发流程】，点击第一个【触发】节点，触发方式选择模型触发，模型选择【导购邀请下单】，触发场景选择【新增数据时】，点击该节点的【保存】按钮 点击流程图节点间的【+】图标选择增加【获取数据】节点，或者拖动左侧物料区【获取数据】到特定的【+】图标 点击【获取数据】，在右侧属性面板中设置【获取数据条数】为单条，选择模型为【导购】，点击【筛选条件】的【{X}】图标，进行数据获取的条件设置 选择条件字段为【ID】条件操作符为【等于】，条件为变量的导购字段的ID。当上下文只有一个变量时默认不需要选择，这里默认的是【触发[导购邀请下单记录]】，设置好以后点击确认，回到属性面板设置【未获取到数据时执行方式】为【终止流程】，并点击节点【保持】按钮 再增加一个【获取数据】节点，在右侧属性面板中设置 a. 【获取数据条数】为单条，选择模型为【会员】 b. 点击【筛选条件】的【{X}】图标，进行数据获取的条件设置，选择条件字段为【ID】条件操作符为【等于】，条件为变量【导购邀请下单记录】的会员关系字段的ID字段。因为上下文中存在多个变量时需要选择对应变量，跟获取导购数据有点区别，在获取导购数据时，上下文中只有此次【导购邀请下单记录】所以不需要选择对应变量，设置好以后点击【确认】按钮 c. 回到属性面板设置【未获取到数据时执行方式】为【终止流程】 d. 最后点击节点【保持】按钮。…

    史, 昂的头像 史, 昂
    2024年5月23日
    1.6K00

Leave a Reply

登录后才能评论