前端学习路径

准备工作

  • 环境准备-1h
    安装基础环境,需要NodePNPM如果已经安装检查对应版本,体验阶段建议版本保持一致

  • 克隆一个空工程-0.5h
    全新工程

  • 注意事项-0.5h
    静态资源解压,如果还没有对应的后端服务。可以使用:https://demo.oinone.top(Oinone演示环境),账号密码:admin/admin

前端基础

前端进阶

最后一步

当您实现玩基础和进阶的所有的效果,Oinone的整体使用您已经大致掌握了,接下来您可以找一个当前业务的场景来实现它把!

Oinone社区 作者:王海明原创文章,如若转载,请注明出处:https://doc.oinone.top/other/21654.html

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

(0)
王海明的头像王海明数式管理员
上一篇 2025年9月1日 pm2:16
下一篇 2025年9月4日 pm4:55

相关推荐

  • 入门学习路径

    前端学习路径 后端学习路径

    2024年10月25日
    1.9K00
  • 打印支持非存储数据导出

    介绍 平台提供的默认打印功能没有支持非存储数据的导出。我们可以自定义打印导出功能,以满足业务中个性化的需求。 实现思路 重写打印任务模型,添加业务数据字段 自定义打印动作,前端将导出数据放到业务数据字段中 使用导出数据扩展点机制修改导出数据 代码示例 继承平台的打印任务模型,加上需要业务数据字段,这个字段用于传输需要打印的表单数据,但是需要自定义打印的表单往往不止一个,所以需要定义为通用的Object字段。 @Model.model(TransientPdfPrintTask.MODEL_MODEL) @Model(displayName = "传输模型Pdf打印任务") public class TransientPdfPrintTask extends PdfPrintTask { public static final String MODEL_MODEL="demo.TransientPdfPrintTask"; @Field(displayName = "业务数据") private Object businessData; } 自定义打印动作 @Model.model(TransientPdfPrintTask.MODEL_MODEL) @Component public class TransientPdfPrintTaskAction extends AbstractPdfPrintTaskAction<TransientPdfPrintTask> { @Resource private PdfFileService pdfFileService; @Action(displayName = "打印", contextType = ActionContextTypeEnum.CONTEXT_FREE, bindingType = {ViewTypeEnum.TABLE}) @Override public TransientPdfPrintTask createPrintTask(TransientPdfPrintTask data) { return super.createPrintTask(data); } @Override protected void doExport(TransientPdfPrintTask exportTask, PdfDefinitionContext context) { pdfFileService.doExportSync(exportTask, context); } @Function.Advanced(type = FunctionTypeEnum.QUERY) @Function(openLevel = FunctionOpenEnum.API) public TransientPdfPrintTask construct(TransientPdfPrintTask data) { String model = FetchUtil.fetchVariables(PdfConstants.MODEL); data.construct(); data.setModel(model); return data; } } 本篇文章只介绍同步打印,如果异步需要修改doExport方法。 编写导出的数据处理逻辑 @Ext(PdfPrintTask.class) public class PrintExportExt extends AbstractPdfExportFetchDataExtPointImpl implements PdfExportFetchDataExtPoint { // 这里使用扩展点表达式匹配需要打印的非存储模型,只有表达式为true才会走这段逻辑。 @Override @ExtPoint.Implement(expression = "context.model==\"" + ProductPricingClientTransient.MODEL_MODEL + "\"") public List<Object> fetchExportData(PdfPrintTask exportTask, PdfDefinitionContext context) { List<Object> result = new ArrayList<>(); List<Object> dataList = new ArrayList<>(); TransientPdfPrintTask transientPdfPrintTask = new TransientPdfPrintTask(); transientPdfPrintTask.set_d(exportTask.get_d()); dataList.add(transientPdfPrintTask.getBusinessData()); result.add(dataList); return result; } } 前端自定义打印按钮,将数据提交给业务数据字段,并使用同步导出打印。

    2025年10月13日
    52200
  • 后端学习路径

    准备工作 -1h 后端研发环境安装后端研发环境,需要idea和oinone插件,git和maven 设置指南为学习教程进行的一些准备 后端基础 1.1.1整体介绍 -0.5h– 模块(module)定义– 模块(Module)结构– Oinone版本 1.1.2 新建一个应用 -1.5h为创建一个全新的 Oinone 模块奠定基础。从零开始,仅使用让 Oinone 识别我们模块所需的最少元素。包括: — 新建费用管理模块– 定义Oinone的费用模块– 配置启动工程的YAML文件 1.1.3 模型与基础字段 -3h– 对象关系映射ORM– 模型基础字段 1.1.4 安全简介 -3h配置模型的菜单入口和对应角色的权限(访问权限和数据权限) — 菜单入口– 用户与角色– 访问权限配置 1.1.5 界面实操-3h通过配置字段的一些新属性和UX属性改变页面交互 –字段一些新属性–UX属性 1.1.6 基础视图-3h–表格视图–表单视图–详情视图 1.1.7 模型建关系-8h–多对一关系(many2one)–多对多关系(many2many)–一对多关系(one2many) 1.1.8 字段间联动-5h–关系字段属性:domain–UX的一些新属性,包括:compute、constructFun 1.1.9 准备学习行为-3h–单记录操作–批量操作 1.1.10 约束-1h–SQL约束–校验约束–UI交互约束 1.1.11 追加细节 -3h–内联视图–组件widget–表格排序 1.1.12 继承-2h–函数的重写–模型的继承 1.1.13 模块间相互作用-2h–link模块 1.1.14 产品的个性化开发-4h–模块的upstream属性–函数特性,包括扩展点、拦截器 后端进阶 2.1.1 调试工具-1hOinone 提供的调试工具是一款支持在浏览器页面直接进行 页面调试 与 接口调试 的效率工具。 2.1.2 界面设计器-4h界面设计器提供了直观的可视化界面,允许用户通过拖拽和配置组件的方式来构建应用界面,而无需依赖传统的手写大量代码的方式。这种设计器旨在简化界面开发过程,提高开发效率,同时确保界面的美观和易用性。

    2025年9月1日
    79400
  • 前端环境准备并快速启动

    注意: 部署/启动前端的过程中如果出现问题,请先在 常见问题 中寻找答案。如仍未解决,请及时在群里咨询。 视频教程(点此观看) 1. 需要安装的工具 Node.js (v20.16.0) VSCode 注意:以上工具需安装在本地开发电脑上,根据实际情况补充所需工具。 2. 安装 Node.js 检查是否已安装 在终端中输入以下命令: node -v 如果安装了,会出现版本号。建议使用 20.16.0 版本。 下载 Node.js 如果未安装,请选择以下任一方式下载: 官网下载: Node.js v20.16.0 下载好了之后,双击,开始安装: 一直点击 Next 直到 Install 完成安装。 验证安装 再次运行以下命令检查是否安装成功: node -v npm -v 出现版本号表示安装成功: 3. 安装 VSCode 如果已安装,请忽略此步骤。 下载 VSCode 选择以下任一方式下载: 官网下载:Visual Studio Code 安装完成后,打开 VSCode 并加载前端工程 SS_FRONT_MODULES。 配置项目 在 ss-boot 子工程中,打开 vue.config.js 文件,将 target 地址修改为后端开发地址: 4. 安装 Vue CLI 安装 在 VSCode 的终端中输入以下命令安装 Vue CLI (v5.0.8): npm install -g @vue/cli@5.0.8 验证安装 检查安装是否成功: vue –version 安装成功将显示版本号。 5. 配置 npm 源 设置 npm 源为内部源 npm config set registry http://nexus.shushi.pro/repository/kunlun/ 登录 NPM 源 注意:用户名和密码在部署包的 xxx账号.md 文件中。 npm login –registry “http://nexus.shushi.pro/repository/kunlun/” npm info underscore 成功登录后,将出现相关信息: 6. 安装 pnpm 验证安装 在终端中输入以下命令安装 pnpm: npm install -g pnpm 验证安装 检查安装是否成功: pnpm -v 清理缓存 pnpm run clean 安装依赖包 pnpm i 注意:此过程可能较慢。 7. 启动项目 启动开发环境: pnpm run dev 启动成功后,您可以直接访问项目。

    2024年10月31日
    1.4K00

Leave a Reply

登录后才能评论