3.5.2.3 构建View的Layout

在日常需求中也经常需要调整Layout的情况,如出现树表结构(左树右表、级联),我们则需要通过修改View的Layout来完成。今天就带您学习下Layout的自定义

第一个表格Layout

如果我们想去除表格视图区域的搜索区、ActionBar(操作区),就可以为视图自定义一个简单的Layout就行啦

Step1 新建一个表格的Layout

在views/demo_core/layout路径下增加一个名为sample_table_layout.xml文件,name设置为sampleTableLayout

<view type="TABLE" name="sampleTableLayout">
<!--    <view type="SEARCH">-->
<!--        <pack widget="fieldset">-->
<!--            <element widget="search" slot="search" slotSupport="field"/>-->
<!--        </pack>-->
<!--    </view>-->
    <pack widget="fieldset" style="height: 100%" wrapperStyle="height: 100%">
        <pack widget="row" style="height: 100%; flex-direction: column">
<!--            <pack widget="col" mode="full" style="flex: 0 0 auto">-->
<!--                <element widget="actionBar" slot="actionBar" slotSupport="action">-->
<!--                    <xslot name="actions" slotSupport="action" />-->
<!--                </element>-->
<!--            </pack>-->
            <pack widget="col" mode="full" style="min-height: 234px">
                <element widget="table" slot="table" slotSupport="field">
                    <xslot name="fields" slotSupport="field" />
                    <element widget="rowAction" slot="rowActions" slotSupport="action"/>
                </element>
            </pack>
        </pack>
    </pack>
</view>

图3-5-2-27 新建一个表格的Layout

Step2 修改宠物达人自定义表格Template

在view标签上增加layout属性值为"sampleTableLayout"

<view name="tableView" model="demo.PetTalent" cols="1" type="TABLE" enableSequence="true" layout="sampleTableLayout">
……省略其他
</view>

图3-5-2-28 修改宠物达人自定义表格Template

Step3 重启看效果

image.png

图3-5-2-29 示例效果

Step4 修改宠物达人自定义表格Template

去除在view标签上的layout属性配置,让其回复正常

第一个树表Layout

本节以“给商品管理页面以树表的方式增加商品类目过滤”为例

Step1 增加商品类目模型

增加PetItemCategory模型继承CodeModel,新增两个字段定义name和parent,其中parent字段M2O关联自身模型,非必填字段(如字段值为空即为一级类目):

package pro.shushi.pamirs.demo.api.model;

import pro.shushi.pamirs.meta.annotation.Field;
import pro.shushi.pamirs.meta.annotation.Model;
import pro.shushi.pamirs.meta.base.common.CodeModel;

@Model.model(PetItemCategory.MODEL_MODEL)
@Model(displayName = "宠物商品类目",summary="宠物商品类目",labelFields={"name"})
public class PetItemCategory extends CodeModel {

    public static final String MODEL_MODEL="demo.PetItemCategory";
    @Field(displayName = "类目名称",required = true)
    private String name;

    @Field(displayName = "父类目")
    @Field.many2one
    private PetItemCategory parent;
}

图3-5-2-30 增加商品类目模型

Step2 修改自定义商品模型

为商品模型PetItem增加一个category字段m2o关联PetItemCategory

@Field(displayName = "类目")
@Field.many2one
private PetItemCategory category;

图3-5-2-31 修改宠物商品模型

Step3 新增名为treeTableLayout的Layout

在views/demo_core/layout路径下增加一个名为tree_table_layout.xml文件,name设置为treeTableLayout

image.png

图3-5-2-32 新增名为treeTableLayout的Layout

<view type="TABLE" name="treeTableLayout">
  <view type="SEARCH">
    <pack widget="fieldset">
      <element widget="search" slot="search" slotSupport="field"/>
    </pack>
  </view>
  <pack widget="fieldset" style="height: 100%" wrapperStyle="height: 100%">
    <pack widget="row" wrap="false" style="height: 100%">
      <pack widget="col" mode="full" style="min-width: 257px; max-width: 257px">
        <pack widget="fieldset" style="height: 100%" wrapperStyle="height: 100%; padding: 24px 16px">
          <pack widget="col" style="height: 100%">
            <element widget="tree" slot="tree" style="height: 100%" />
          </pack>
        </pack>
      </pack>
      <pack widget="col" mode="full" style="min-width: 400px">
        <pack widget="row" style="height: 100%; flex-direction: column">
          <pack widget="col" mode="full" style="width: 100%; flex: 0 0 auto">
            <element widget="actionBar" slot="actionBar" slotSupport="action">
              <xslot name="actions" slotSupport="action" />
            </element>
          </pack>
          <pack widget="col" mode="full" style="width: 100%; min-height: 345px">
            <element widget="table" slot="table" slotSupport="field">
              <xslot name="fields" slotSupport="field" />
              <element widget="rowAction" slot="rowActions" slotSupport="action" />
            </element>
          </pack>
        </pack>
      </pack>
    </pack>
  </pack>
</view>

图3-5-2-33 treeTableLayout的示例代码

Step4 自定义商品管理的Template

  1. 在views/demo_core/template路径下增加一个名为pet_item_table.xml文件

  2. 跟普通自定义template的区别在于

a. 配置layout属性为【treeTableLayout】跟前面layout定义一致

b. 配置了widget为tree的template节点,node可以配置多个,node配置说明如下

ⅰ. model,模型编码,必填。

ⅱ. label,数据标题,支持表达式,必填。

ⅲ. labelFields,数据标题中使用的字段列表,必填。

ⅳ. references,层级关联字段,第一层无效,其他层必填。模型编码#字段。

ⅴ. selfReferences,自关联字段,模型编码#字段。

ⅵ. search,点击搜索字段,必须使用主表格字段。模型编码#字段。

ⅶ. filter,层级过滤条件。模型编码#字段。

以上所有使用#拼接的属性配置,与model一致的情况下,均可以省略模型编码。

image.png

图3-5-2-34 pet_item_table.xml示例代码图

<view name="tableView" model="demo.PetItem"  type="TABLE" cols="1" enableSequence="false" layout="treeTableLayout">
  <template slot="actions" autoFill="true"/>
  <template slot="rowActions" autoFill="true"/>
  <template slot="fields">
    <field invisible="true" priority="5" data="id" label="ID" readonly="true"/>
    <field priority="90" data="code" label="编码"/>
    <field priority="101" data="itemName" label="商品名称"/>
    <field priority="101" 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 priority="102" data="price" label="商品价格"/>
    <field priority="103" data="shop" label="店铺">
      <options>
        <option references="demo.PetShop" referencesType="STORE" referencesLabelFields="shopName">
          <field name="shopName" data="shopName" ttype="STRING"/>
        </option>
      </options>
    </field>
    <field priority="104" data="shopId" label="店铺id"/>
    <field priority="105" data="type" label="品种">
      <options>
        <option references="demo.PetType" referencesType="STORE" referencesLabelFields="name">
          <field name="name" data="name" ttype="STRING"/>
        </option>
      </options>
    </field>
    <field priority="106" data="typeId" label="品种类型"/>
    <field priority="107" data="petItemDetails" label="详情">
      <options>
        <option references="demo.PetItemDetail" referencesType="TRANSIENT" referencesLabelFields="remark">
          <field name="remark" data="remark" ttype="STRING"/>
        </option>
      </options>
    </field>
    <field priority="108" data="tags" label="商品标签"/>
    <field priority="109" data="petTalents" label="推荐达人">
      <options>
        <option references="demo.PetTalent" referencesType="STORE" referencesLabelFields="name">
          <field name="name" data="name" ttype="STRING"/>
        </option>
      </options>
    </field>
    <field priority="200" data="createDate" label="创建时间" readonly="true"/>
    <field priority="210" data="writeDate" label="更新时间" readonly="true"/>
    <field priority="220" data="createUid" label="创建人id"/>
    <field priority="230" data="writeUid" label="更新人id"/>
  </template>
  <template slot="search" autoFill="true" cols="4"/>
  <template enableSearch="true" slot="tree" style="height: 100%" widget="tree">
    <nodes>
<!--       <node label="activeRecord.name" labelFields="name" model="demo.PetItemCategory" search="demo.PetItem#category" selfReferences="parent"/> -->
           <node label="activeRecord.name" labelFields="name" model="demo.PetItemCategory" search="demo.PetItem#category" selfReferences="demo.PetItemCategory#parent"/>
     </nodes>
   </template>
 </view>

图3-5-2-35 pet_item_table.xml示例代码

Step5 为商品类目增加管理入口

修改DemoMenus类,增加类目管理菜单

image.png

图3-5-2-36 增加类目管理菜单

@UxMenu("类目管理")@UxRoute(PetItemCategory.MODEL_MODEL) class PetItemCategoryMenu{
}

图3-5-2-37 增加类目管理菜单代码

Step6 重启看效果

  1. 进入类目管理页面,新增商品类目数据

image.png

图3-5-2-38 示例效果

  1. 进入商品管理页面,找一行数据修改其类目字段,然后再点击左边树看过滤效果

image.png

图3-5-2-39 示例效果

第一个级联Layout

本节以“给商品管理页面以级联的方式增加商品类目过滤”为例,该例子中左边级联项由多个模型组成

Step1 增加商品类目类型模型

增加PetItemCategoryType模型集成CodeModel,新增两个字段定义name

package pro.shushi.pamirs.demo.api.model;

import pro.shushi.pamirs.meta.annotation.Field;
import pro.shushi.pamirs.meta.annotation.Model;
import pro.shushi.pamirs.meta.base.common.CodeModel;

@Model.model(PetItemCategoryType.MODEL_MODEL)
@Model(displayName = "宠物商品类目类型",summary="宠物商品类目类型",labelFields={"name"})
public class PetItemCategoryType extends CodeModel {

    public static final String MODEL_MODEL="demo.PetItemCategoryType";
    @Field(displayName = "类目类型名称",required = true)
    private String name;

}

图3-5-2-40 增加PetItemCategoryType模型集成CodeModel

Step2 修改商品类目

为商品类目模型PetItemCategory增加一个type字段m2o关联PetItemCategoryType

@Field(displayName = "类目类型")
@Field.many2one
private PetItemCategoryType type;

图3-5-2-41 为商品类目模型PetItemCategory增加一个type字段

Step3 新增名为cascaderTableLayout的Layout

在views/demo_core/layout路径下增加一个名为cascader_table_layout.xml文件

image.png

图3-5-2-42 新增名为cascaderTableLayout的Layout

<view type="TABLE" name="cascaderTableLayout">
<view type="SEARCH">
    <pack widget="fieldset">
        <element widget="search" slot="search" slotSupport="field"/>
    </pack>
</view>
<pack widget="fieldset" style="height: 100%" wrapperStyle="height: 100%; overflow: auto">
    <pack widget="row" wrap="false" style="height: 100%">
        <pack widget="col" mode="full" style="flex: unset">
            <element widget="card-cascader" slot="cardCascader" style="height: 100%" />
        </pack>
        <pack widget="col" mode="full" style="min-width: 564px">
            <pack widget="row" style="height: 100%; flex-direction: column">
                <pack widget="col" mode="full" style="width: 100%; flex: 0 0 auto">
                    <element widget="actionBar" slot="actionBar" slotSupport="action">
                        <xslot name="actions" slotSupport="action" />
                    </element>
                </pack>
                <pack widget="col" mode="full" style="width: 100%; min-height: 345px">
                    <element widget="table" slot="table" slotSupport="field">
                        <xslot name="fields" slotSupport="field" />
                        <element widget="rowAction" slot="rowActions" slotSupport="action"/>
                    </element>
                </pack>
            </pack>
        </pack>
    </pack>
</pack>
</view>

图3-5-2-43 代码说明

Step4 修改商品管理的Template

  1. 修改在views/demo_core/template路径下名为pet_item_table.xml的文件

a. 配置layout属性为【cascaderTableLayout】跟前面layout定义一致

b. 配置了widget为card-cascader的template节点,node可以配置多个,node配置跟树表的配置一致

<view name="tableView" model="demo.PetItem"  type="TABLE" cols="1" enableSequence="false" layout="cascaderTableLayout">
  <template slot="actions" autoFill="true"/>
  <template slot="rowActions" autoFill="true"/>
  <template slot="fields">
    <field invisible="true" priority="5" data="id" label="ID" readonly="true"/>
    <field priority="90" data="code" label="编码"/>
    <field priority="101" data="itemName" label="商品名称"/>
    <field priority="101" 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 priority="102" data="price" label="商品价格"/>
    <field priority="103" data="shop" label="店铺">
      <options>
        <option references="demo.PetShop" referencesType="STORE" referencesLabelFields="shopName">
          <field name="shopName" data="shopName" ttype="STRING"/>
        </option>
      </options>
    </field>
    <field priority="104" data="shopId" label="店铺id"/>
    <field priority="105" data="type" label="品种">
      <options>
        <option references="demo.PetType" referencesType="STORE" referencesLabelFields="name">
          <field name="name" data="name" ttype="STRING"/>
        </option>
      </options>
    </field>
    <field priority="106" data="typeId" label="品种类型"/>
    <field priority="107" data="petItemDetails" label="详情">
      <options>
        <option references="demo.PetItemDetail" referencesType="TRANSIENT" referencesLabelFields="remark">
          <field name="remark" data="remark" ttype="STRING"/>
        </option>
      </options>
    </field>
    <field priority="108" data="tags" label="商品标签"/>
    <field priority="109" data="petTalents" label="推荐达人">
      <options>
        <option references="demo.PetTalent" referencesType="STORE" referencesLabelFields="name">
          <field name="name" data="name" ttype="STRING"/>
        </option>
      </options>
    </field>
    <field priority="200" data="createDate" label="创建时间" readonly="true"/>
    <field priority="210" data="writeDate" label="更新时间" readonly="true"/>
    <field priority="220" data="createUid" label="创建人id"/>
    <field priority="230" data="writeUid" label="更新人id"/>
  </template>
  <template slot="search" autoFill="true" cols="4"/>
  <template enableSearch="true" slot="cardCascader" style="height: 100%" widget="card-cascader">
      <nodes>
          <node label="activeRecord.name" title="类目类型" labelFields="name" model="demo.PetItemCategoryType" />
          <node label="activeRecord.name" title="类目" labelFields="name" model="demo.PetItemCategory" search="demo.PetItem#category" references="demo.PetItemCategory#type" selfReferences="demo.PetItemCategory#parent"/>
      </nodes>
  </template>
</view>

图3-5-2-44 修改商品管理的Template

Step5 为商品类目类型增加管理入口

image.png

图3-5-2-45 为商品类目类型增加管理入口

@UxMenu("类目类型")@UxRoute(PetItemCategoryType.MODEL_MODEL) class PetItemCategoryTypeMenu{
}

图3-5-2-46 代码示例

Step6 重启看效果

  1. 进入类目类型管理页面,新增商品类目类型数据

image.png

图3-5-2-47 进入类目类型管理页面

  1. 进入类目管理页面,修改一级类目的类型

image.png

图3-5-2-48 修改一级类目的类型

  1. 进入商品管理页面,找一行数据修改其类目字段,然后再点击左边级联项看过滤效果

image.png

图3-5-2-49 进入商品管理页面

树表与级联的更多配置

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

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

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

相关推荐

  • 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.1K00
  • 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.9K00
  • 3.1.2 环境准备(windows版)

    一、后端基础环境准备 安装JDK1.8 ,高于1.8_221以上(下载地址见书籍【附件一】) 打开Windows环境变量配置页 此电脑 => 右键属性 => 系统高级设置 => 环境变量 配置环境变量 在用户环境变量中新建变量为JAVA_HOME的项,值为JDK安装之后的路径 图3-1-27 新建环境变量JAVA_HOM 编辑变量为Path的项添加一个值%JAVA_HOME%\bin 图3-1-28 添加一个环境变量值%JAVA_HOME%\\bin PowerShell或者CMD中验证,输出类似信息为安装配置成功 图3-1-29 验证JAVA是否安装成功 安装 Apache Maven 3.8+ (下载地址见书籍【附件一】) 删除Maven安装目录下的conf/settings.xml 配置mvn的settings,下载附件settings-open.xml,并重命名为settings.xml,建议直接放在【C:\Users\你的用户名.m2】下面。下载地址见oinone开源社区群公告,也可以联系oinone合作伙伴或服务人员 配置环境变量 在用户环境变量中新建变量为M2_HOME的项,值为Maven安装路径 图3-1-30 新建变量M2_HOME 编辑变量为Path的项添加一个值%M2_HOME%\bin 图3-1-31 添加一个值%M2_HOME%\\bin 验证 图3-1-32 验证Maven是否安装成功 安装 Jetbrains IDEA (下载地址见书籍【附件一】) 插件安装 下载地址 密码: mdji 如果IDEA安装了Lombok插件,请禁用Lombok插件 点击菜单项File => Settings => Plugins 图3-1-33 插件管理页面操作示意 下载插件包 (联系Oinone官方客服) 图3-1-35 操作指引 图3-1-36 操作指引 安装MySQL 8 (下载地址见书籍【附件一】) 解压下载的ZIP安装包, 复制到自定义安装目录 设置环境变量 MYSQL_BASE_DIR 提换成MySQL安装目录路径 把 %MYSQL_BASE_DIR%\bin 加入到系统环境变量中 在PowerShell中可以使用 Get-Command mysqld 命令验证环境变量是否配置成功,执行成功输出mysqld的所在路径 初始化 在命令行中执行 mysqld –initialize-insecure –user=mysql 安装 mysqld -install 启动MySQL服务 mysqld -install 设置root用户密码 alter user \’root\’@\’localhost\’ identified with mysql_native_password by \’oinone\’; flush privileges; 安装DB GUI工具 Datagrip、MySQLWorkbench、DBEaver 选其一 ### 安装Git (下载地址见书籍【附件一】) 安装GraphQL测试工具Insomnia(下载地址见书籍【附件一】) 安装RocketMQ(下载地址见书籍【附件一】) 修改安装目录下bin中对应文件的默认配置 a. runserver.cmd文件内容 -Xms2g -Xmx2g为 -Xms1g -Xmx1g b. runbroker.cmd文件内容 -Xms2g -Xmx2g为 -Xms1g -Xmx1g,以及-XX:G1HeapRegionSize=1m 启动RocketMQ NameServer命令 RocketMQ安装目录\bin\mqnamesrv.cmd start 启动RocketMQ Broker命令 RocketMQ安装目录\bin\mqbroker.cmd -n localhost:9876 停止 RocketMQ命令 mqshutdown.cmd broker mqshutdown.cmd namesrv 安装ElasticSearch 版本 8.4.1(下载地址见书籍【附件一】) (非必须) ES运行时需要JDK18及以上版本JDK运行环境, ES安装包中包含了一个JDK18版本 set JAVA_HOME=ES安装路径\jdk 启动 ES安装路径\bin\elasticsearch.bat 停止 ctrl+c 或者关闭cmd、PowerShell的窗口 安装Redis (下载地址见书籍【附件一】) 解压安装包到安装目录 在PowerShell进入到Redis安装目录 在PowerShell中执行.\redis-server.exe,输出图中类似信息(如下图3-35所示): 图3-1-37 验证redis是否安装成功 新开PowerShell窗口, 进入到Redis安装目录, 执行 .\redis-cli.exe回车,输入 ping 回车输出 PONG即表示Redis安装成功 图3-1-38 验证redis是否安装成功 Zookeeper安装(下载地址见书籍【附件一】) 解压安装, 在 PowerShell中执行 tar zxvf 安装包路径(tar.gz包) -C Zk安装目录 进入 Zk安装目录\conf\ 复制 zoo_sample.cfg文件为 zoo.cfg 修改zoo.cfg文件的内容 (其中dataDir需要自己设定) tickTime=2000…

    2024年5月23日
    2.4K00
  • 4.1.2 模块之启动指令

    针对不同启动指令的组合可以满足不同场景需求,下面列举了几个常规组合方式,小伙伴们务必把这几种模式都尝试一遍,会更有体感 本节为小伙伴讲解oinone模块的几种启动方式,它是为能灵活地应对企业市场的不同场景需求,为op(本地化部署)、saas和研发提供个性化支撑。也为oinone独特性之单体与分布式的灵活切换提供基础支撑 一、部署参数 参数 名称 默认值 说明 -Plifecycle 生命周期部署指令 RELOAD 可选项:无/INSTALL/PACKAGE/RELOAD/DDL安装-install为AUTO;upgrade为FORCE打包-install为AUTO;upgrade为FORCE;profile为PACKAGE重启-install、upgrade、profile为READONLY打印变更DDL-install为AUTO;upgrade为FORCE;profile为DDL 表4-1-2-1 部署参数 如果在启动命令中配置了部署参数,可不再设置服务参数和可选项参数。下图为在启动命令中添加部署参数的示例。 图4-1-2-1 在启动命令中添加部署参数的示例 二、使用场景 针对不同启动指令的组合可以满足不同场景需求,下面列举了几个常规组合方式,小伙伴们务必把这几种模式都尝试一遍,会更有体感。 场景一:DDL(1)+RELOAD(N)应对专有DBA 因为很多公司数据库是由专门的DBA来管理的,不允许应用直接变更数据库相关配置、表结构、初始化数据。而oinone是基于元数据驱动的,任何模型、行为的变化都会自动转化成对物理存储的改变与元数据变化。 oinone为了适用企业op场景,特别增加了DDL模式。把发布上线分为两个步骤。 一:用DDL模式把涉及到数据库的变更与元数据初始化的脚本进行输出,交由客户公司DBA审批,并执行 二:用RELOAD模式,进行正常的应用重启工作,不进行安装、升级、以及数据库物理变革等操作。 #应用启动关闭自动DDL配置 pamirs.boot.profile: CUSTOMIZE pamirs.boot.options.rebuildTable: false pamirs.persistence.global.auto-create-database: false pamirs.persistence.global.auto-create-table: false 图4-1-2-2 应用启动关闭自动DDL模式 场景二:PACKAGE(1)+RELOAD(N)应对提升多机器实例效率 在机器规模相对大的场景中我们会碰到以下问题: 元数据差量计算、数据库变更、元数据变化保存都非常费时,如果每台机器都来一遍是非常费时费力的 分布式下多机器如果并发进行INSTALL,会导致数据库修改表结构、元数据变化保存锁死 所以我们可以选择一台机器用PACKAGE,其他机器采用RELOAD模式,做到合理规避问题,提升应用发布效率 场景三:INSTALL应对开发模式 研发在本地开发模式下INSTALL是最有效率的,把所需依赖模块一把启动和调试。 上线如果要用INSTALL需要注意,要逐台进行。当然也可以改进成INSTALL(1)+RELOAD(N)模式 三、启动命令解读 查看启动命令 可以在启动日志中查看当前所用启动命令。 图4-1-2-3 在启动日志中查看当前所用启动命令 生命周期管理-Plifecycle 除了通过启动YAML中pamirs.boot属性来设置启动参数,你还可以在应用启动命令中使用-Plifecycle参数来快捷控制模块生命周期的管理方式。该参数的可选项为RELOAD、INSTALL、CUSTOM_INSTALL、PACKAGE、DDL。 java -jar <your jar name>.jar -Plifecycle=RELOAD 启动命令优先级高于YAML中pamirs.boot属性中的install、upgrade和profile属性。如果不使用-Plifecycle参数,则使用YAML中pamirs.boot属性中的install、upgrade和profile属性配置。若YAML中未配置,则采用默认值。 启动配置项 默认值 RELOAD INSTALL CUSTOM_INSTALL PACKAGE DDL install AUTO READONLY AUTO AUTO AUTO AUTO upgrade AUTO READONLY FORCE FORCE FORCE FORCE profile CUSTOMIZE READONLY AUTO CUSTOMIZE PACKAGE DDL 表4-1-2-2 Plifecycle可选项与启动项对应表 profile属性请参考4.1.1【服务启动可选项】一文。只有pamirs.boot.profile=CUSTOMIZE时,在pamirs.boot.options中自定义的可选项才生效。 自动建表-PbuildTable java -jar <your jar name>.jar -PbuildTable=NEVER PbuildTable参数用于设置自动构建表结构的方式。如果不使用该参数,则options属性的默认值请参考4.1.1【服务启动可选项】一文。-PbuildTable参数可选项为: NEVER – 不自动构建表结构,会将pamirs.boot.options中的diffTable和rebuildTable属性设置为false EXTEND – 增量构建表结构,会将pamirs.boot.options中的diffTable属性设置为false,rebuildTable属性设置为true DIFF – 差量构建表结构,会将pamirs.boot.options中的diffTable和rebuildTable属性设置为true 模块在线 -PmoduleOnline java -jar <your jar name>.jar -PmoduleOnline=CHECK PmoduleOnline参数用于设置模块在线的方式。如果不使用该参数,则profile属性的默认值请参考4.1.1【服务启动可选项】一文。-PmoduleOnline参数可选项为: NEVER – 不读取存储在数据库中的模块信息,会将pamirs.boot.options中的reloadModule和checkModule属性设置为false READ – 读取存储在数据库中的模块信息,会将pamirs.boot.options中的checkModule属性设置为false,reloadModule属性设置为true CHECK – 读取存储在数据库中的模块信息并校验依赖模块是否已安装,会将pamirs.boot.options中的reloadModule和checkModule属性设置为true 元数据在线-PmetaOnline java -jar <your jar name>.jar -PmetaOnline=MODULE PmetaOnline参数用于设置元数据在线的方式,如果不使用该参数,则profile属性的默认值请参考4.1.1【服务启动可选项】一文。-PmetaOnline参数可选项为: NEVER – 不持久化元数据,会将pamirs.boot.options中的updateModule、reloadMeta和updateMeta属性设置为false MODULE – 只注册模块信息,会将pamirs.boot.options中的updateModule属性设置为true,reloadMeta和updateMeta属性设置为false ALL – 注册持久化所有元数据,会将pamirs.boot.options中的updateModule、reloadMeta和updateMeta属性设置为true 开放远程服务-PenableRpc PenableRpc参数用于设置是否开启远程服务。如果不使用该参数,则profile属性的默认值请参考4.1.1【服务启动可选项】一文。-PenableRpc参数可选项为true和false。该参数会将参数值设置到pamirs.boot.options中的publishService属性。 开启API服务-PopenApi PopenApi参数用于设置是否开启HTTP API服务。如果不使用该参数,则profile属性的默认值请参考4.1.1【服务启动可选项】一文。-PopenApi参数可选项为true和false。该参数会将参数值设置到pamirs.boot.options中的rebuildHttpApi属性。 开启字段校验-PcheckField PcheckField参数用于设置是否开启字段校验。-PcheckField参数可选项为true和false。由于通常应用的字段数量非常多,会延长系统启动时长,所以默认不会开启字段校验。 启用数据初始化服务-PinitData PinitData参数用于设置是否开启数据初始化服务。如果不使用该参数,则profile属性的默认值请参考4.1.1【服务启动可选项】一文。-PinitData参数可选项为true和false。该参数会将参数值设置到pamirs.boot.options中的updateData属性。 四、不使用自动构建数据库表功能 Oinone LCDP默认提供框架的所有服务,所以会自动构建数据库表。如果不需要使用Oinone的存储构建服务,可以设置YAML文件中关于自动建表的配置。这样就不会动态构建数据库表,你可以手动搭建数据库表。 通过配置启动YAML中pamirs.boot.options.rebuildTable为false彻底关闭自动建表功能。 pamirs: boot: options: rebuildTable: false 图4-1-2-4 不使用自动构建数据库表功能 也可以按需配置启动YAML中pamirs.persistence配置来关闭部分数据源的自动建表功能。persistence配置既可以针对全局也可以分数据源进行配置。 pamirs: persistence: global: # 是否自动创建数据库的全局配置,默认为true autoCreateDatabase: true # 是否自动创建数据表的全局配置,默认为true autoCreateTable: true <your ds key>: # 是否自动创建数据库的数据源配置,默认为true autoCreateDatabase: true # 是否自动创建数据表的数据源配置,默认为true…

    2024年5月23日
    84300
  • 2.4.2 Oinone独特性之每一个需求都可以是一个模块

    我们的Oinone平台采用模型驱动的方式,并符合面向对象设计原则,每个需求都可以是一个独立模块,可以独立安装、升级和卸载。这让系统真正像乐高积木一样搭建,具有高度的灵活性和可维护性。 与大部分低代码或无代码平台不同的是,它们的应用市场上的应用往往是模板式的,也就是说,这是一个拷贝,个性化只能在应用上直接修改,而且一旦修改就不能升级。这对于软件公司和客户来说都非常痛苦。客户无法享受到软件公司产品的升级功能,而软件公司在服务大量客户时,也会面临不同版本的维护问题,成本也非常高。而我们的Oinone平台完全避免了这些问题,让客户和软件公司都可以从中受益(如下图2-9、2-10所示)。 图2-9软件公司与客户项目的关系-让标准与个性化共存 图2-10 软件公司与客户项目的关系-让升级无忧 实现原理 在满足客户个性化定制需求时,传统的方法通常是直接修改标准产品源码,但这样做会带来一个问题:标准产品无法持续升级。相反,无论是在OP模式还是SaaS模式下,Oinone都采用全新的模块为客户进行个性化开发,保持标准产品和个性化模块的独立维护和升级。这是因为在元数据设计时,Oinone采用了面向对象的设计原则,实现了元数据设计与面向对象设计思想的完美融合。 面向对象设计的核心特征包括封装、继承、多态,而Oinone的元数据设计完全融入了这些思想。下面是几个例子,说明Oinone的元数据设计如何体现面向对象设计的核心特征,并带来了什么好处: 继承:在继承原有模型的字段、逻辑、展示的情况下,增加一段代码来扩展模型的字段、逻辑、展示。 多态:在继承原有模型的字段、逻辑、展示的情况下,增加一段代码来覆盖模型的原有字段、逻辑、展示。 封装:外部无需关心模型内部如何实现,只需按照不同场景调用模型对应开放级别的字段、逻辑、展示。 这些特征和优势使得Oinone在满足客户个性化需求时更加灵活和可持续,同时使得标准产品的维护和升级变得更加容易和高效。 在Java语言设计中,万物皆对象,一切都以对象为基础。而Oinone的元数据设计则是以模型为出发点,作为数据和行为的承载体。如下图2-11清晰地描述了Java面向对象编程中封装、继承、多态在Oinone元数据中的对应关系。Oinone元数据描述了B对象继承A对象并拥有其所有属性和方法,并覆盖了A对象的属性1和方法1,同时新增了属性3和方法3。 此外,Oinone的面向对象特性是用元数据来描述的。一方面,我们基于Java编码规范收集相关元数据,以保持不改变Java编程习惯。另一方面,方法和对象的挂载是松耦合的,只要按照元数据规范进行挂载,就能轻松地将其附加到模型上。在不改变原有A对象的情况下,我们可以直接增加方法和属性(如下图2-12所示)。 图2-11 java面向对象在Oinone元数据中对应 图2-12 java对象的修改 VS Oinone元数据模型的修改 Oinone函数不仅支持面向对象的继承和多态特性,还提供了面向切面的拦截器和SPI机制的扩展点,以应对方法逻辑的覆盖和扩展,以及系统层面的逻辑扩展(如下图2-13所示)。这些扩展功能可以独立地在模块中维护。 其中,拦截器可以在不侵入函数逻辑的情况下,根据优先级为满足条件的函数添加执行前和执行后的逻辑。 扩展点是一种类似于SPI机制的逻辑扩展机制,用于扩展函数的逻辑。通过这一机制,可以对函数逻辑进行灵活的扩展,以满足不同的业务需求。 图2-13 Oinone函数拦截与扩展机制 不管是对象、属性还是方法,都可以以独立的模块方式来扩展,这就使得每一个需求都可以成为一个独立的模块,方便我们在研发标准产品时进行模块化的划分,同时也让我们在以低代码模式为客户进行二次开发时,能够更好地支持“标准产品迭代与个性化保持独立”的需求。在2.4.3【oinone独特性之低无一体】一文中,我们也提到了这个特性,但那是在低无一体的情况下,通过元数据融合来实现的。让我们看看基于低代码开发模式下,典型的Oinone二次开发工程结构(如下图2-14所示),就可以更好地理解这个特性啦! 图2-14 Oinone典型的二开工程结构

    2024年5月23日
    1.2K00

Leave a Reply

登录后才能评论