1. 首页
  2. 全部文档
  3. 开发框架模块手册
  4. 上传文件成熟模块

上传文件成熟模块

上传文件成熟模块

  • 模块项目可下载学习或复用至新项目中
  • 请参考“无代码开发视频手册”的“文件处理”一组中“文件上传”演示说明
  • 上传文件很简单,一个项目中会用到两三次,每次重新设计上传文件模块比较麻烦,因为要调整样式,所以我们将其中做为一个成熟模块开发并提供下载复用
  • 上传文件功能可以用于用户提交本地电脑的文件,用于文件数据上传至数据库(比如申请审批演示项目中供应商信息上传)或将文件直接保存在数据库中,还可以将文件上传至服务器某个文件夹,这类功能逻辑我们不在此案例说明,开发者参考可视化元件手册中“Load Excel Table导入Excel数据”、“File文件数据/变量”和“Write Resource生成文件”元件的说明
  • 一般可以用弹窗来提交上传文件,主要包括以下三部分设计:上传文件界面设计、显示样式设计、提交文件逻辑设计,都比较简单

显示内容及样式设计

  • 从显示类元件中点选一个弹窗元件,点击需要添加的位置放入后即可命名,命名名称会在弹窗中显示为标题,此模块项目中我们命名为“上传文件”,我们这个案例中是将弹窗元件放入了一个按钮的点击事件行为处理元件中,用户点击按钮时即弹出弹窗
  • 双击进入弹窗主体中,删除默认的字符显示元件,然后添加三个行元件
    • 从元件选项板中添加一个行显示元件,为其添加一个字符显示元件,用于传入显示上传提示信息
      • 行元件添加一个样式属性“html.style”,输入样式值“text-align:center;”
      • 双击进入字符显示元件中,可以点选放入一个字符常量元件,命名为“请上传一个文件”并传入字符显示元件中的“Value”显示值存放的变量元件中
    • 从元件选项板中添加一个行显示元件,为其添加一个文件输入框元件,用户点击输入框时,弹出文件选择框来选要上传的文件
      • 输入框添加一个样式属性“html.style”,输入样式值“margin-left:20%;width:60%;display:block;height:25px;line-height:22px;border:1px solid #aaa;background-color:#FFF;padding:2px;”
    • 此部分设计内容如下

  • 弹窗底部默认按钮改名为“关闭”和“上传”
    • 在“上传”按钮一个比较常用的小模块是按钮中的旋转图标,在按钮点击后,可以显示一个旋转图标来示意上传处理在进行中
    • 注意需为图片传入图片在项目文件夹中的路径字符常量
    • 先为图片添加一个“Visible”是否可见的变量,点选放入布尔值否,默认就是不显示旋转图片的状态
    • 而“上传”按钮中,需要将文件输入框的中文件值直接连线传入服务器行为处理元件中,不可以中间连普通行为处理元件再连服务器处理元件,这是安全性要求的
    • 而“上传”按钮中,放入布尔常量是,传入父级的上传弹窗中的上传按钮的“Visible”变量,即为在用户点击“上传”按钮时显示旋转图标

弹窗显示样式设计

  • 弹窗中默认样式是在我们项目文件夹下“web\styles\bootstrap文件夹中024-modals.less文件”中定义的,默认的定义中弹窗标题居左,下部按钮靠右,弹窗出现时的背景色为黑色,可以修改定义值处理进行调整为标题居中、按钮居中、背景色灰色
    .modal-backdrop {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: @zindexModalBackdrop;
      background-color: @gray;  -------------------------------修改项:调整为gray
      ...
      .modal-header {
        padding: 9px 15px;
        text-align:center; --------------------------------------新加项:添加一行文字居中的标签定义
      ...
      .modal-footer {
        padding: 14px 15px 15px;
        margin-bottom: 0;
        text-align: center; // center align buttons -------------修改项:这一行中原文备注是靠右,改为居中
    
  • 注意,我们案例项目中,对项目文件夹下“web\styles\bootstrap文件夹中016-buttons.less文件”中定义的按钮鼠标上浮时的效果中“background-position: 0 30px;”也进行了修改,默认值为“0 -15px”,如果需要修改弹窗标题的大小,比如默认的H3标签字体过大,则可以修改项目文件夹下“web\styles\bootstrap文件夹中007-type.less文件”中定义的H3标签的大小来统一定义全部弹窗标题大小
  • 显示部分设计完成后,可以运行查看弹窗效果

提交信息逻辑设计

  • 弹窗底部Footer元件中,“添加”按钮的点击行为元件中我们开发提交信息进行保存的逻辑,我们在其中放入了从父级的弹窗元件中传入录入信息至数据库表的字段中,再传入服务器行为元件中与数据库记录插入元件连接来保存记录,保存完成后,关闭弹窗

快速复用指导

  • 1、下载成熟模块项目,开发工具中导入项目
  • 2、打开导入的项目,除了提示信息基本不需要修改其他内容,添加逻辑可以将弹窗复制复用到新项目中后处理
  • 3、各位置修改添加时处理说明:
    • 参考本文“显示内容及样式”设计,修改弹窗—Body—提示信息—字符显示元件中的提示信息常量来修改提示信息
    • 在“上传”按钮中,添加上传文件的进一步处理逻辑,以及处理完成后的关闭按钮等逻辑
  • 4、修改内容保存后可以试运行一下,可以测试一下显示效果是否正常
  • 5、开发区中点选按钮、或按钮中点击事件行为元件中的弹窗元件,右键单击选复制,在新的项目的某个页面中粘贴复用,选“导入粘贴”(paste import)的方式
  • 6、调整导入的模块在新项目中的文件目录中文件位置,将模块的内容全部拖放到新项目对应的目录位置

注意

  • 可用以上方式,多次添加来为新项目定义多个文件上传模块,实际上如果导入后操作第6步的目录位置修改,则就会在新项目中生成完全独立的两个或多个上传文件的模块,如果不修改目录,则会认为是复用
  • 也可以参考此模块,只复用部分样式内容,因为弹窗、提示信息设计和输入框点选放入操作都比较简单,自行设计也不需要太多时间

复用案例

请参考“增删改查成熟模块”中菜单栏的”添加更新”按钮中的处理,基本是一样的