共计 3909 个字符，预计需要花费 10 分钟才能阅读完成。
摘要：本文由葡萄城技术团队于思否原创并首发。葡萄城为开发者提供业余的开发工具、解决方案和服务，赋能开发者。
据说 …
每敲进去一行代码
就有 一根头发 离我而去 …
而每解决掉一个 bug
就有 一个毛囊 开始养精蓄锐 …
程序猿，一个让人既爱又恨的职业，作为这个世界上最大的脱发群体之一，每天除了要进行长期的大量脑力劳动外，还要秉承着月亮不睡我不睡、太阳没起我已起的“低劣作息习惯”。如果把熬夜加班作为程序猿们的高级磨难的话，那么每天来自产品经理或客户的各种不合理需要则是天堂级般的磨难。
俗话说得好，没有经验过产品经理“折磨“的程序员不能称之为一个合格的程序员。作为程序员的”毕生之敌“，每次都会提出各种无脑要求：”能不能给我来一个五彩壮丽的黑”、”这样子太难看了能不能换一个”、”这需要有这么难吗？“，每一句话很扎心。尽管心曾经碎成了豆腐渣，但嘴上还是不得不回复一句：”好的，我试下“。回头，又转身在曾经改了很屡次的代码中持续正文掉重写，而后持续骂骂咧咧的再补一句”这代码写的跟 * 一样“。长久以来，很多程序员就都会在反复”增删改查“的操作中缓缓失去写代码的乐趣。
明天，小编想通知大家的是，都“3203”年了，还要依附代码来编写零碎吗？闲话少说，进入注释。在此，小编为大家介绍一款可视化“无码“搭建零碎的低代码平台——活字格。
什么是低代码
为了缩小读者在浏览过程中的疑难，小编以活字格产品为例来帮忙读者了解低代码以及其应用办法。
低代码的官网解释：低代码（Low-Code / Low-Code Development Platform / Low-Code Application Platform）提出于 2014 年，是指一项可用于晋升软件交付速度的开发技术和工具，以可视化为典型特色，能起到升高编码开发工作量和开发成本的目标。从实际上看，低代码技术连续了元数据驱动的设计理念，提供多层次的组件封装，以就义极限性能优化和精细化交互体验为代价，换来了数倍晋升的开发效率。所以，低代码技术次要利用于企业软件开发，通常不适用于构建数据量和并发用户量微小、对用户体验有极致要求的互联网利用。
艰深讲低代码是一款能够通过 可视化 操作的形式实现以前代码实现的工作，从而升高了设计零碎的技术门槛。
活字格产品
工作原理
活字格设计器用于应用程序网站的开发和调试，并把网站公布到活字格服务器。活字格服务器作为网站服务器来运行利用网站。应用网站的最终用户通过浏览器拜访网站并操作以实现业务需要。
（活字格工作原理）
活字格设计器布局
格局图片设计把活字格服务器分为了 9 个区域：
（活字格设计器界面组成）
- 标题栏：用于显示正在编辑的文件名称和以后应用的软件名称，还有“最小化”、“还原”、“敞开”按钮。
- 快速访问工具栏：快速访问工具栏次要包含一些常用命令，如开始、新建、保留、关上、撤销、复原、后退、后退按钮。快速访问工具栏最右端的下拉按钮，单击此按钮能够增加常用命令。
- 文件按钮：文件按钮是一个相似于菜单的按钮，位于活字格窗口左上角。其中包含新建、关上、保留、另存为、帮忙、设置、退出等常用命令。
- 功能区：功能区次要包含开始、创立、插入、设计、公式、数据、平安、公布、协同性能菜单的性能。
- 对象管理器：显示您创立的表、页面、母版页、服务端命令、打算工作、报表、流程、组件、服务端告诉、模板命令和图片资源。
- 工作区：显示右边栏中您抉择的页面或表的内容。您能够对其进行编辑。如果您关上了多个页面和表，它们会在工作区的底部列出。底部最多显示 5 个页面。
- 属性设置区：用于数据绑定、单元格设置、页面设置、表设置等。
- 单元格显示模式：通过扭转单元格的显示模式，您能够显示在该单元格上的各种设置。
像素大小和缩放滑块：像素大小指的是抉择区域的像素大小，缩放滑块可扭转正在编辑的工作区的缩放比例。
注：上面的教程中会援用到这 9 个区域名称。
如何应用低代码平台搭建一个零碎
介绍完活字格设计器的组成后，应用活字格设计器来搭建一个物品信息管理系统。
开发环境：windows10、11。
开发工具：活字格设计器和活字格服务器。
（下载链接：https://www.grapecity.com.cn/solutions/huozige/download）
须要筹备的材料包：https://gitee.com/GrapeCity/typeface-file-20230605
（Gitee）
https://github.com/GrapeCityXA/huozigge（Github）
（材料包中蕴含空白文件和残缺文件两个版本，读者可自行抉择）
应用活字格设计器关上材料包中后缀为.fgcc 的文件。第一次关上会报版本不统一的信息，疏忽即可。
（须要用到的文件）
零碎成果展现图：
（PC 端物品展现页面）
（PC 端物品保护界面）
（挪动端物品保护界面）
本次展现的 Demo 由 PC 端物品列表展现界面、PC 端物品保护界面以及挪动端物品保护界面组成，小编将依照程序为大家顺次介绍如何应用活字格设计器设计三个页面的款式和按钮业务逻辑。
应用活字格设计页面款式
1）PC 端物品列表展现页面：
设计查问框和查问按钮：
应用快捷键 Ctrl+ M 创立两个合并的单元格，别离作为输入框页面和查问按钮。鼠标点击输入框页面后抉择功能区 Element-Plus 插件（在插件治理中下载）的输入框类型，同理点击查问按钮后抉择功能区的按钮类型。
（创立合并单元格）
（设置查问框）
（设置查问按钮）
设计物品列表和物品其余信息：
应用快捷键 Ctrl+ M 创立 5 个合并的单元格，别离作为物品列表展现界面、物品其余信息界面、物品名称界面、品牌界面和备注界面。鼠标点击物品列表展现界面后抉择功能区的设置为表格选项，同理别离点击物品其余信息界面、物品名称界面、品牌界面和备注界面后抉择功能区 Element-Plus 插件的输入框类型。
（创立合并单元格）
（设置物品列表展现界面）
（设置物品其余信息、物品名称等界面）
在物品列表显示界面中退出须要展现的数据信息，把物品表中须要展现的字段拖动到物品列表中的界面即可。
（物品列表显示界面中退出数据信息）
在物品列表显示界面中退出批改和删除操作的超链接，鼠标点击批改和删除的页面后抉择功能区的超链接类型。
（物品列表显示界面中退出超链接）
设计分页页面：
应用快捷键 Ctrl+ M 创立合并单元格作为分页页面后点击分页页面抉择功能区 Element-Plus 插件的分页类型。
（设计分页框）
2）PC 端物品保护页面
设计物品保护数据和跳转、勾销按钮
应用快捷键 Ctrl+ M 创立 10 个合并的单元格，别离作为物品编号页面、物品名称页面、物品单位页面、类别页面、品页面牌、价格页面、备注页面、物品图片页面、跳转按钮和勾销按钮。而后鼠标点击 8 个须要展现的字段页面后抉择功能区 Element-Plus 插件的输入框类型，同理别离点击跳转按钮和勾销按钮后抉择功能区的按钮类型。最初把物品表的字段拖拽到相应的字段页面中。
（设计物品保护数据和跳转、勾销按钮）
（设计完效果图）
3）挪动端物品保护界面
设计办法和设计 PC 端物品保护界面的办法一样。（借鉴 PC 端物品保护界面的办法即可）
（设计挪动端物品保护界面）
（设计完效果图）
应用活字格设计按钮逻辑性能
1）设计物品列表界面的按钮逻辑性能
设计物品列表界面的查问按钮性能：
点击查问按钮右键抉择编辑命令，在关上的命令窗口中抉择查询方法。
（右键点击查问抉择编辑命令）
点击新建条件，字段抉择数据表中蕴含的字段，操作抉择蕴含指定的字符串，值抉择
查问方框的坐标（间接点击方框即可显示在命令窗口中），点击确定即可。
（建设查问条件）
（抉择查问输入框页面作为值）
设计新增 / 批改 / 删除按钮的逻辑
右键点击新增 / 批改按钮并点击编辑命令抉择弹出页面抉择高级选项。
（新增按钮的业务逻辑）
源单元格抉择新增单元格的坐标。
（源单元格抉择新增按钮坐标）
指标单元格抉择物品保护界面的按钮。
（指标单元格抉择物品保护页面跳转按钮）
右键点击删除按钮并点击编辑命令后抉择删除记录按钮并确定。![图形用户界面, 文本, 应用程序 形容已主动生成]
（删除按钮业务逻辑）
2）设计物品保护页面的按钮
跳转按钮
右键点击跳转按钮后点击编辑命令抉择条件命令并点击 if 条件表达式字段抉择跳转按钮，操作抉择等于，值抉择新增，而后点击下方的空命令抉择数据表操作而后抉择新增。![图形用户界面, 应用程序, Word 形容已主动生成]
（抉择 if 条件表达式）
（抉择数据操作表抉择增加）
点击增加 Else 抉择数据表操作抉择更新而后点击确定即可。
（点击增加 Else）
（抉择数据表操作抉择更新）
点击新建命令抉择敞开弹出页面并勾选父页面从新加载绑定数据选项。
（增加敞开弹出界面性能）
勾销按钮
右键点击勾销按钮编辑命令抉择敞开弹窗页面。
（勾销按钮的逻辑）
3）设计物品保护手机端页面按钮逻辑
右键点击新增按钮抉择编辑命令抉择数据表操作抉择增加。
点击新建命令抉择 V - 轻提醒抉择。
3. 新建命令抉择设置单元格提，指标单元格抉择物品表字段，值抉择空，物品编号抉择自增。这一步是为了保障每次点击新增按钮后数据清空。
设置左侧导航布局
双击物品列表界面，在弹出的界面中抉择物品列表而后抉择编辑命令。
（编辑导航栏命令）
抉择页面跳转命令并抉择跳转到物品列表。
（跳转页面命令）
右键点击物品列表抉择设置母版页抉择左侧导航布局。
点击开始按钮运行程序。
而后就能够在浏览器上运行和操作系统了。
如果想理解活字格更多的信息，可返回葡萄城活字格官网进行理解。
扩大链接：
活字格携手百度 AI，利用图像识别技术晋升数据录入效率
活字格兼容达梦 DM8，低代码反对数据库国产化
客开新思路，用活字格把 Excel“搬进”用友 U8+ CS 门户
