前端-低代码-jnpf：使用分享 / 积累使用分享

一、本文前言

https://www.jnpfsoft.com/

在开始本文前，咨询了deepsick，是否合适分享，咨询后认为是好事，本文会遵循以下原则：

1、只分享使用经验，仅停留在使用的层面

2、不透露核心代码

3、不用做商业化

4、本文认为可能涉及敏感信息的内容均已脱敏

下面本文开始，本文描述不够准确的地方，欢迎交流指正

二、jnpf简介

jnpf 是 pnpm-workplace 单体代码库架构

1、第一次启动项目时，先检查 项目名是否准确， env 相关文件配置是否准确

2、检查node环境 ，本文使用 24.11.1 做参考

3、pnpm install 下载依赖

4、pnpm run dev 启动项目

5、本地启动了 localhost:3000

6、登录账密，进入项目

env.development

# env.development # 端口号 VITE_PORT=3000 VITE_BASE=/ # 本地开发代理，可以解决跨域及多地址代理 # 如果接口地址匹配到，则会转发到http://localhost:30000，防止本地出现跨域问题 # 可以有多个，注意多个不能换行，否则代理将会失效 VITE_PROXY=[["/dev","http://www.snow.com"], ["/reportDev","http://localhost:32000"]] # 接口地址 VITE_GLOB_API_URL=/dev # 报表接口地址 VITE_GLOB_REPORT_API_URL=/reportDev # WebSocket基础地址 VITE_GLOB_WEBSOCKET_URL=ws://localhost:30000 # 是否打开 devtools，true 为打开，false 为关闭 VITE_DEVTOOLS=false # 是否注入全局loading VITE_INJECT_APP_LOADING=true

三、创建应用

地址：https://www.snow.com/appCenter 访问自己部署后的项目地址，这里仅作展示

账号：test

密码：test@test

3.1、创建应用

3.2、创建成功

3.3、进入应用

四、数据中心

4.1、数据中心-数据源链接/链接数据库

根据字段提示，填写对应信息

维护完成之后点击确定就会出现在列表里边

4.2、数据中心-数据接口-新建接口

数据接口列表-新建

维护步骤1：基本信息

注意这里的switch组件/鉴权，如果要设置“变量”，这里需要打开，如果不设置对象，这里不需要打开

维护步骤2：数据配置

注意这里要传参数，包括token和业务参数等

维护步骤3：异常校验

维护步骤4：异常处理

这里如果开启了鉴权，那么没有这个步骤，如果没有打开，这里可以处理数据

比如接口返回的数据不符合页面使用的预期，那么可以在这里做处理

4.3、数据中心-数据接口-变量参数（传参）

设置变量

变量可以在接口部分动态传递参数

使用变量

如果在body里边用变量，前边加上@即可

4.4、数据中心-数据接口-接口参数（传参）

1、接口数据-找到目标接口

2、右侧接口参数-新建参数

3、写入接口参数

4、页面使用接口

5、设置参数

到这一步就设置了接口的使用页面的动态参数

字段值的options为页面的字段，如果页面里没有这个字段，但是需要使用这个字段，可以设置一个隐藏字段，然后在这里使用值就可以了

4.5、数据中心-数据接口-接口参数（传参）为页面增加隐藏字段作为接口参数

1、为组件添加字段

2、添加目标字段

3、为字段添加数据 / 此处为用户信息的数据，其他数据同理

4、为字段设置数据

4.6、数据中心-数据建模-理解数据建模

JNPF平台的数据建模是其作为企业级低代码开发平台的核心功能之一。

它是一种可视化的、基于模型驱动的数据库设计和管理工具，旨在让开发者甚至业务人员能够通过图形化界面快速定义应用的数据结构，而无需编写复杂的SQL代码，从而极大地提升开发效率，降低技术门槛。

简单来说，数据建模就是在JNPF平台上“画”出你的数据库表结构。

模型驱动开发 (Model-Driven Development)：数据建模是JNPF平台模型驱动思想的体现。您通过定义数据实体（Entity）、属性（Attribute）和关系（Relationship）等模型元素来响应业务需求变化。

可视化数据库建模：它提供了一个在线的、可视化的环境，让您像画流程图一样创建和管理数据库表、字段、主键、外键以及表之间的关系。

全生命周期管理：数据建模不仅是设计阶段的工具，它贯穿了数据表的整个生命周期，包括创建、配置、数据查看、编辑、删除以及导入导出。

在线实体建模：

新建表：通过简单的表单填写表名、表说明，并逐个添加字段。

字段配置：为每个字段配置名称、说明、数据类型（如字符串、数字、日期等）、是否为主键、是否自增长、默认值等属性。

关系支持：支持单表、一对一、一对多等常见的表关系配置。

4.7、数据中心-数据建模-创建接口-选择SQL操作-使用数据建模

1、点击数据中心，选择目标数据库，点击新建

2、输入表名，表说明，字段设置，，点确定保存

3、创建接口--选择SQL操作–使用数据建模

填写信息后点下一步到数据配置

4、填写完成后，点下一步到数量统计

5、完善后点下一步到数据回显

6、完善后点下一步到数据处理，完成后点确定保存

7、表单设计时就可以使用接口了

五、系统管理

5.1、系统管理-素材管理-数据字典

1、数据字典

2、新建字典数据

3、获取字典分类下拉框列表

import { getDictionaryDataSelector } from '#/api/systemData/dictionary'; getDictionaryDataSelector(config.dictionaryType).then((res) => { cur.options = res.data.list; });

5.2、系统管理-素材管理-系统字典-表单分类

表单设计，表单分类，这个在哪里维护？

在这里维护

5.3、系统管理-store

import { useBaseStore } from '#/store'; const baseStore = useBaseStore(); async function getOptions() { const sexRes = await baseStore.getDictionaryData('sex'); updateSchema({ field: 'gender', componentProps: { options: sexRes } }); }

5.4、系统管理-变量 variate

variate.ts apps/jnpf-web-apps-main/src/api/systemData/variate.ts import { defHttp } from '#/api/request'; enum Api { Prefix = '/api/system/DataInterfaceVariate', } // 获取变量列表 export function getList(data) { return defHttp.get({ url: `${Api.Prefix}/${data.id}`, data }); } // 新增变量 export function create(data) { return defHttp.post({ url: Api.Prefix, data }); } // 修改变量 export function update(data) { return defHttp.put({ url: `${Api.Prefix}/${data.id}`, data }); } // 获取变量 export function getInfo(id) { return defHttp.get({ url: `${Api.Prefix}/${id}/Info` }); } // 删除变量 export function del(id) { return defHttp.delete({ url: `${Api.Prefix}/${id}` }); } // 复制变量 export function copy(id) { return defHttp.post({ url: `${Api.Prefix}/${id}/Actions/Copy` }); } // 导出变量 export function exportData(id) { return defHttp.get({ url: `${Api.Prefix}/${id}/Actions/Export` }); } // 获取变量 export function getVariateSelector() { return defHttp.get({ url: `${Api.Prefix}/Selector` }); }

5.5、系统管理-地区 area

apps/jnpf-web-apps-main/src/api/system/area.ts import { defHttp } from '#/api/request'; enum Api { Prefix = '/api/system/Area', } // 获取行政区划列表 export function getAreaList(data) { return defHttp.get({ url: `${Api.Prefix}/${data.nodeId}`, data }); } // 获取行政区划下拉框列表 export function getAreaSelector(id, currId = '0') { return defHttp.get({ url: `${Api.Prefix}/${id}/Selector/${currId}` }); } // 获取行政区划数据详情 export function getAreaByIds(idsList) { return defHttp.post({ url: `${Api.Prefix}/GetAreaByIds`, data: { idsList } }); } // 新建行政区划 export function createArea(data) { return defHttp.post({ url: Api.Prefix, data }); } // 修改行政区划 export function updateArea(data) { return defHttp.put({ url: `${Api.Prefix}/${data.id}`, data }); } // 获取行政区划 export function getAreaInfo(id) { return defHttp.get({ url: `${Api.Prefix}/${id}/Info` }); } // 删除行政区划 export function delArea(id) { return defHttp.delete({ url: `${Api.Prefix}/${id}` }); }

六、应用前台-应用后台

应用前台/用户使用的页面

应用后台/编辑和管理当前应用/无代码模式开发在应用后台进行操作

七、应用后台-在线开发

7.1、应用后台-在线开发-表单设计

新建-表单

步骤一：基础设计

核心--选择数据库表

步骤二：表单设计

左侧：组件库，这里选用目标组件，拖放到中间区域

中间：这里是组合后的页面内容

右侧：组件属性、组件样式、表单属性

步骤三：列表设计

左侧上部：查询字段

左侧下部：列表字段

右侧左1：设置查询字段

右侧左2：设置列表字段

右侧左3：设置列表属性

勾选需要的字段，点击保存

点击发布

到应用前台页面查看

到此大致的页面就完成了。但是在配置页面的时候，细节是非常多的，一个细节卡住可能就需要排查很长时间，所以细节部分后续会陆续随着使用补充。

7.2、应用后台-在线开发-表单设计-下拉选择

1、实现目标

下拉框，点击可以选择数据，数据从接口获取

同理 Element-ui 的远程搜索

2、表单设计-下拉选择

选择目标接口

选择字段

输入名称

选择下拉数据所需要的接口

输入存储字段、回显字段

7.3.1、应用后台-在线开发-表单设计-设计子表

1、目标

1.1、添加子表

1.2、为子表设计/表格列 添加字段

2、添加子表

拖动过来

选择关联子表，为这个表格添加接口

3、为子表添加字段

点击添加字段，从弹窗里选择类型

选择关联子表

子表字段：为表格添加列

对于普通的字段，选择对应的字段

4、为子表选择控件字段

子表控件：弹窗选择

为子表选择控件字段

为弹窗控件输入字段

为弹窗控件设置 隐藏（根据需要来设置）

5、其他

这个子表的弹窗字段，和按钮的弹窗，应该是关联的，两边的字段也一样，依靠记忆形成本文，记录不准确的后续发现后随时修改

这里是按钮弹窗的，可以做个对比参考

7.3.2、应用后台-在线开发-表单设计-设计子表-按钮-弹窗-选择数据

1、实现目标：

应用前台，见下图：

图1

图2

应用后台，见下图：

2、实现添加产品的“按钮-弹窗-选择数据”

点击添加按钮

在对应的字段添加信息

动作设置：

按钮动作--选择数据

数据来源--数据接口

数据接口--选择对应的接口

动作设置：

参数设置–设置查询参数

设置列表字段/设置关联字段：根据实际情况填写

填写完成后，点击确定

7.3.3、应用后台-在线开发-表单设计-当下选择发生变化时，为其他表单字段赋值

1、当选择收获仓之后，通过收获仓接口返回的数据为其他字段进行赋值

2、配置change

({ data, rowIndex, formData, setFormData, setShowOrHide, setRequired, setDisabled, onlineUtils }) => { // 在此编写代码 setFormData('contact_man', data.receiverName) setFormData('contact_man_phone', data.receiverPhone) setFormData('storage_address', data.warehouseAddress) }

3、配置后当收获仓选择后，对应的字段就会回显数据了

7.3.4、应用后台-在线开发-表单设计-为什么新增按钮会出现弹窗或者打开新页面

列表页面点击新增按钮会出现弹窗或者打开新的页面

居中弹窗

全屏弹窗

八、二次开发 / 低代码开发

8.1、二次开发-应用后台-在线开发-表单设计-代码生成/低代码开发/下载代码 自己 二次开发

1、代码生成/低代码开发的起点

2、下载代码

这里有个代码预览，可以预览完整代码

模块命名

3、代码预览

这里前后端代码都可以查看

4、下载后的文件

第一个文件是用来表单回传的

第二个文件是前端代码

第三个文件是后端代码

这里我们把前端代码复制到我们的jnpf-web-apps-main/src/views目标目录下

配置对应的菜单jnpf-web-apps-main/src/router

配置菜单后就可以在本地访问页面了

代码修改完成后，我们继续

5、本地启动项目，访问页面，进行开发调试

pnpm run dev

6、表单回传

6.1、点击导入

6.2、上传文件

上传我们当时下载的文件包下的 returnForm.vdd 文件即可

上传后列表多了一条数据

6.3、点编辑

填写页面地址，点保存

到这里就形成了一个页面的模板

7、配置菜单

这里关键字段是：

类型：表单回传/我们本地开发的页面代码

菜单列表多了我们刚配置的菜单

配置好之后，在应用前台我们就能看到了

注意，此时还是在本地开发

如果要发布到线上，需要提交代码到仓库对应的分支

到此，我们记录了二次开发/低代码的全过程，同样细节很多，后续伴随着使用陆续补充

注意：低代码开发下载下来的代码包括前端代码，也包括后端代码，需要前后端都使用低代码，后端上传代码后前端代码可以正常使用，否则前端访问接口，接口的http返回200，业务代码返回400，msg不能访问服务

下载代码后，后端需要先上传代码并发版，pass接口才可以走通

8.2、二次开发-获取JnpfRelationForm表单组件的数据

import { useGeneratorStore } from '#/store'; const generatorStore = useGeneratorStore(); const relationData = generatorStore.getRelationData; console.log('844---', relationData); // 数据拿到了

8.3、二次开发-getTableActions的使用

function getTableActions(record): ActionItem[] { return [ { label: $t('common.editText'), onClick: addOrUpdateHandle.bind(null, record.id), }, { label: '发布', color: 'error', modelConfirm: { title: '发布确认', content: '发布表单会覆盖当前线上版本, 是否继续?', onOk: handleRelease.bind(null, record.id), }, }, ]; }

九、平台能力开发

十、合并代码 / 发版