精华内容
下载资源
问答
  • 动态表单完整库表设计
    千次阅读
    2021-05-27 17:29:17

    实现动态表单功能设计思路


    一、业务场景

    业务只涉及简单的增删改查,但是业务类型繁杂,表单内容不确定,需要用户自定义设置时。

    二、设计思路

    不单独建表,对表单的属性,表头信息建表维护,业务数据以键值对形式存储

    三、数据库设计

    表单属性表

    字段注释
    ID
    name表名
    type分类
    note备注

    表单表头表

    字段注释
    ID
    name列名
    property属性名
    property_type属性类型
    form_type属性表id
    input_type输入方式(单选/文本框/…)
    options选项(单选多选的选项)
    sort排序

    业务数据表

    字段注释
    ID
    value内容({property1 :value1,property2: value2})
    form_type属性表id
    create_time生成时间

    四、页面展示

    操作流程

    1. 用户录入表单信息
      在这里插入图片描述

    2. 表单列表
      在这里插入图片描述

    3. 数据展示页
      在这里插入图片描述

    4. 数据录入页
      根据input_type 设置不同的表单组件
      在这里插入图片描述

    部分代码

    录入页提交表单:

    var array = $('#form-data-add').serializeArray();
                    var val = JSON.stringify(array)
                    $.ajax({
                        type:"POST",
                        async:false,
                        url: prefix  + '/add',
                        data:{
                            value:val,
                            formType:ID
                        },
                        dataType:"json",
                        success:function(data){
                            
                        }
                    });
    

    展示页layui渲染,设置动态表头cols:

    var colss = [
                    {type:'checkbox', align : 'center',width : 60}
                    ,{title : '序号', type : 'numbers', width : 60, align : 'center'}
                    ,]
                for(var i=0;i<arr.length;i++){
                    colss.push({field: arr[i].property, title: arr[i].name,align: 'center'})
                }
    
    table.render({
                    elem: '#demo'
                    ,cols: [colss]
                    ,url: prefix + "/list"
                    ,method:'POST'
                    ,where: {formType: ID}
                    ,request: {
                        pageName: 'pageNum' //页码的参数名称,默认:page
                        ,limitName: 'pageSize' //每页数据量的参数名,默认:limit
                    }
                    ,parseData: function(res){ //res 即为原始返回的数据
                        var list = res.rows;
                        var list2 = []
                        for(var i=0;i<list.length;i++){
                            var jsonObj = JSON.parse(list[i].value)
                            jsonObj.ID = list[i].ID
                            list2.push(jsonObj)
                        }
                       
                        return {
                            "code": res.code, //解析接口状态
                            "msg": res.msg, //解析提示文本
                            "count": res.total, //解析数据长度
                            "data": list2 //解析数据列表
                        };
                    }
                    ,title:[[${custom.name}]]
                    ,skin: 'line' //表格风格
                    //,even: true
                    ,page: true //是否显示分页
                    ,limits: [5,10,20]
                    //,limit: 5 //每页默认显示的数量
                });
    
    更多相关内容
  • ——难点为数据绑定,也就是页面元素与数据表字段的映射,另外动态数据存储结构问题、间数据校验和计算、建立主从的问题是难点;因此要建立相对应的样式、脚本、函数、模板等等。 5.除了可视化表单定制...
  • 动态表单开源(推荐)

    千次阅读 2020-10-23 15:13:03
    Form Making 代码仓库 https://github.com/GavinZhuLei/vue-form-making 演示DEMO http://form.making.link/#/zh-CN/ Form Generator 代码仓库 https://github.com/JakHuang/form-generator ...
    1. Form Making

    A visual form designer/generator base on Vue.js, make form development simple and efficient.(基于Vue的可视化表单设计器,让表单开发简单而高效。)

    代码仓库
    https://github.com/GavinZhuLei/vue-form-making

    演示DEMO
    http://form.making.link/#/zh-CN/

    演示图

    1. Form Generator

    Element UI表单设计及代码生成器

    代码仓库
    https://github.com/JakHuang/form-generator

    码云
    https://gitee.com/mrhj/form-generator

    演示DEMO
    https://mrhj.gitee.io/form-generator/#/

    演示图

    1. Form Create

    强大的表单生成器|Form builder with dynamic rendering, data collection, validation and submission capabilities, built-in 17 common form components, support for two-way data binding, event extension, and support for building built-in components and any vue components using json.

    代码仓库
    https://github.com/xaboy/form-create

    码云
    https://gitee.com/xaboy/form-create/

    演示DEMO
    http://jeekweb.pro/form-create-demo/#/
    https://jsrun.net/NQhKp/edit

    演示图

    1. k-form-design

    代码仓库
    https://github.com/Kchengz/k-form-design
    码云
    https://gitee.com/kcz66/k-form-design

    演示DEMO
    http://cdn.kcz66.com/k-form-design.html

    演示图

    1. vue-form-design

    代码仓库
    https://github.com/jjxliu306/vue-form-design

    码云
    https://gitee.com/jjxliu306/vue-form-design

    在这里插入图片描述

    展开全文
  • 作者简介Daryl,携程高级研发经理,关注业界大前端及高并发应用解决方案。一、简介在很多软件系统中,表单开发都是很重要的一个部分。在表单开发中,往往会遇到重复开发的问题,例如在页面搭建系...

    作者简介

     

    Daryl,携程高级研发经理,关注业界大前端及高并发应用解决方案。

    一、简介

    在很多软件系统中,表单开发都是很重要的一个部分。在表单开发中,往往会遇到重复开发的问题,例如在页面搭建系统中,除了组件本身的逻辑,配置组件数据的表单通常也需要开发人员重复手动开发。这就导致开发人员不仅要维护组件本身的逻辑,还要维护组件的配置表单,严重影响组件的开发和迭代效率。

    fd3550b1093ecc86e930372562f2f7e0.png

    为了让开发人员更加专注于组件本身的逻辑处理,我们开发了DynamicForm动态表单配置系统,可以通过拖拽的方式,快速创建一个表单。

    DynamicForm是由携程市场营销”活动平台”及”会员平台”共同设计的React表单组件,它包括表单可视化设计、校验、预览、渲染等功能。目前最重要的应用场景,是为乐高平台提供组件属性配置的动态化表单配置能力。

    乐高平台是探索组件化构建页面的实际应用,期望通过归纳常规web组件和业务组件,归纳单一职责服务接口从而构建出通过配置自动生成h5页面的方案,以达到代码复用,逻辑复用,节省开发时间,经验积累,节省页面上线时间等目的。

    二、乐高早期表单的实现

    实现阶段1:手动开发

    乐高最初完全使用定制化开发的形式来实现属性表单,这样做的好处是表单外观可以随心所欲,界面对于运营可以做的非常友好。当然,缺点也是显而易见的,定制化的开发无法满足快速迭代的活动运营要求,往往一个需求来了立马就要上线,这个时候定制化的开发和发布流程就会严重制约生产力。

    实现阶段2:动态表单1.0

    乐高表单第二版使用的是半自动化表单,支持动态配置表单控件类型和表单校验等。

    配置面板如图:

    68e611437503743fee02222c36ea0df7.png

    此版本的表单不支持可视化拖拽,控件自上而下顺序排列。解决了需求快读迭代的问题,但因为无法自定义布局,随之带来了属性的臃肿以及运营人员操作复杂的问题。

    因此我们开发了动态表单2.0(DynamicForm)。

    DynamicForm在乐高平台的应用

    为了应对乐高组件快速迭代的业务需求,必须研发出一种能够让组件属性快速得到应用的表单技术框架,这样以保证在组件新增属性时,无需进行新代码的开发,仅需通过简单的配置即可生成新的组件属性。

    为了达到表单配置的灵活性,DynamicForm必须满足以下几个条件:

    1)丰富的表单控件类型

    DynamicForm包含了以下内容,满足了多样化的配置要求。

    • 通用控件:文本框、单选框、多选框、下拉选择、颜色选择、图片上传等

    • 自定义控件:组件可视化选择,热区定义,JSON可视化配置控件等。

    2)DIY表单界面

    运维人员可以通过对控件拖拽,实时编辑的形式,对表单进行自由设计,以达到理想的UI效果。

    3)表单控件配置

    可以对控件的默认值、是否必填、提示信息、控件宽度、正则匹配等进行自由配置,以达到理想效果。

    4)表单数据关联

    为了达到表单的属性项的关联,需配置数据关联,控制分组关联等。

    配置界面示例见下图:

    523926e08715c5fd166e2635fbcc7671.png

    二、亮点

    已实现的DynamicForm具有如下亮点:

    • 可视化:可视化搭建、修改和预览表单

    • 可拖拽布局:控件可在画布内拖拽至任意坐标,以搭建最佳布局

    • 可扩展:可二次开发,可扩展控件集

    • 可联动:某个控件可以控制别的控件的显示和隐藏

    • 支持复杂数据类型:支持对象结构以及对象数组结构等复杂数据类型(JSON)的配置

    三、架构

    DynamicForm架构设计的目的是降低表单的维护成本、降低开发人力,解决表单开发中常见的联动、校验、自定义展示等问题。

    3.1 功能梳理

    Dynamic的核心功能包括联动、校验、扩展、可视化等。

    • 联动:某个控件变化后,改变其他控件的显示和隐藏。

    • 校验:通过正则表达式(预留或者自定义)进行表单校验。

    • 扩展:支持自定义控件和校验。

    • 可视化:支持可视化拖拽和可视化编辑,节省开发表单时间,并降低运营的配置成本。

    3.2 架构模块

    246fb079d836cd390e19ee05d42ce7ed.png

    渲染流程:

    b8052eb132c4defaea622496c90b0e9a.png

    系统有表单生成器编辑面板Form Generator,表单渲染入口Form Viewer两个主要模块。

    这两个模块共用常规的基础组件如输入框,颜色选择等,还有一些基于业务扩展的复杂组件,例如热区选择,视频上传,数据聚合(JSON列表)等。

    1bca06a4d2dba4ecfba25c85722266c4.png

    动态表单一个比较重要的点是需要解决JSON可视化配置,为此表单也开发了table列表式的JSON列表组件,子项的配置就基于嵌套表单实现配置字段,并且能够增删改查条目,excel导入,导出数据。

    66543300a1f6f8ddb6396398563ceb4f.png

    其他复杂数据类型配置,如["a","b"]和["a","c"],表单提交数据结构即为{a:{b:"",c:""}} 

    af997d223124ba3f2737335ffed72a33.png

    da40568ab1d88b434833fb13072a81bf.png

    另外一个功能点是解决动态属性间的联动问题,为此表单通过配置联动表达式解决了控件联动问题,例如控制显隐等。

    20bde5d9015408ed6d64b8a88730a9b8.png

    ba47617691d617e0734c5b811d326071.png

    表单底层则依赖React(hooks),Ant Design的主题UI库,Mobx。

    3.3 灵活的布局

    • 组件自由拖拽布局,自动对齐等

    • 组件可控制添加分组,从而批量操作布局

    1ee1bcd207fbd67c92c0a1ca32276168.png

    3.4 校验

    提供预留的常规校验,如中文,英文校验等,以及可自定义扩展的校验配置。

    6c2211404cd881b5f44c8535101d4247.png

    四、后续计划

    DynamicForm将作为独立的npm模块使用,为其他动态表单场景提供公共功能,打造泛应用动态表单。

    DynamicForm代码开源,与社区共同交流与进步。

    【推荐阅读】

    ddd3a562ee17af28aa8cf2c5e046a8d8.png

     “携程技术”公众号

      分享,交流,成长

    展开全文
  • 数据库-库表设计 【分享一些库表设计经验】

    万次阅读 多人点赞 2018-05-20 19:48:15
    本文的核心内容:记录积累一些库表设计方案与技巧 数据库实体与实体间的对应关系 1)数据库的菜单【分类】设计:如省市关联、图书的一、二级分类。 2)数据库表设计之树形结构的 3)的简化方案(特定情况,例如...

    本文的核心内容:记录积累一些库表设计方案与技巧

    数据库实体与实体间的对应关系

    1)数据库表的菜单【分类】设计:如省市关联、图书的一、二级分类。

    2)数据库表设计之树形结构的表

    3)表的简化方案(特定情况,例如,用户触发过的场景记录表)

    4)数据库表设计之购物车,利用Session暂时存储购物车信息。


    实体与实体间的对应关系

    一对一

    一对一,一般用于对主表的补充。假设A表为用户信息表,存储了用户的姓名、性别、年龄等基本信息。用户的家庭住址信息也属于用户的基本信息。我们可以选择将用户的家庭住址信息放到用户信息表,也可以单独建一张表,存储用户的家庭住址信息,以用户信息表的主键作为关联。

    需不需要拆分取决:表信息的关联程度、表的字段个数限度。

    一对多

    一对多,是最常见的一种设计。就是 A 表的一条记录,对应 B 表的多条记录,且 A 的主键作为 B 表的外键。举几个  例子:

      1. 班级表 与 学生表,一个班级对应多个学生,或者多个学生对应一个班级。
      2. 角色表 与 用户表,一个角色对应多个用户,或者多个用户对应一个角色。
      1. 商品表 与 图片表,一个商品对应多张图片,或者多张图片对应一个商品。

    多对多

    构建一张关系表将两张表进行关联,形成多对多的形式。例如:

      1. 老师表、学生表;一个学生可以选修多个老师的课程、同时一个老师也可以教多个学生。
    --教师表
    
    CREATE TABLE #Teacher(TeacherId int, Name nvarchar(20));
    
    INSERT INTO #Teacher VALUES(1, '张老师'), (2, '王老师');
    
    --学生表
    
    CREATE TABLE #Student(StudentId int, Name nvarchar(20));
    
    INSERT INTO #Student VALUES(1, '小张'), (2, '小赵');
    
    --老师学生关系表
    CREATE TABLE #Teacher_Student(StudentId int, TeacherId int);
    
    INSERT INTO #Teacher_Student VALUES(1, 1), (1, 2),(2, 1), (2, 2);

    一:数据库表的菜单【分类】设计:如省市关联、图书的一、二级分类

    BookType 一级分类:  少儿、外语、计算机

    BookClass 二级分类: 少儿[0-2岁、3-6岁、7-10岁、11-14岁、儿童文学]

                                         外语[英语、日语、韩语、俄语、德语]

                                         计算机[计算机理论、计算机考试、数据库、人工智能、程序设计]

    BookInf 图书详情 :    图书信息的详细字段。。。

    基于以上关系:我们建表有两种方法

    ①:建立三张表 一级分类表,二级分类表、图书详情表

    一级分类ID->作为二级分类的外键

    二级分类ID->作为图书详情的外键

    这一种依赖外键,实体模型也比较简单。(不再过多描述)

    查询语句:可以采用 left join  on   或者  等值连接  将二级分类的外键与一级分类的主键等值连接即可查询。

    ②:建立两张表      一级分类和二级分类合并成一张表

                                   图书详情表(引用TypeID为外键)

     

    TypeID        指一级二级分类的ID(唯一标识、主键) 序列自增从1开始。

    TypeName  指一级二级分类的名字

    ParentID     指二级分类所属一级分类TypeID (若为一级分类则填”0”与二级分类加以区分)

    countNumber     指一级图书包含二级图书的个数

                               二级分类所包含详细图书的个数

     

    数据库查询一级分类信息的SQL

    select typeid,typename,parentid,countnumber 
    from t_booktype   where parentid='0'

    数据查询二级分类信息(利用表的自连接)

    select  child.typeid,child.typename,
    child.parentid,child.countnumber 		
    from t_booktype child ,t_booktype  parent 
    where child.parentid=parent.typeid

    二:MySQL 表中存储树形结构数据

    由上面设计技巧引出,如果数据层级有多级呢?简言之就像一棵树一样,我们如何存储树形的数据到数据库。

    存储父节点

    存储于数据库中,最简单直接的方法,就是存储每个元素的父节点ID,即parent_Id->父节点Id。这种方式方便了插入,但是在某些情况下的查询会束手无策。我们可以增加两个字段(deep,is_leaf)帮助我们更快的查询。

    deep=1表示父节点,deep>1 表示子节点。

    id
    parent_id
    deep     //当前树的深度
    is_leaf  //是否叶子节点

    查询所有父节点deSQL如下:

    select * from tree where deep=1

    查询某个父节点下的所有子节点:

    select * from tree where parent_id="" 

    查询某个父节点下的所有后代节点,采用这种库表设计方式,这个需要依靠程序才能实现

    存储路径

    将存储根结点到每个节点的路径,这种数据结构,可以一眼就看出子节点的深度。要插入自己,然后查出父节点的Path,并且把自己生成的ID更新到path中去。

    如果要查询某个节点下的子节点,只需要根据path的路径去匹配,比如要查询D节点下的所有子节点。

    select * from tree where path like '1/4/%'

    总结

    我建议存储树形结构可以将两者结合起来。

    id
    parent_id
    deep     //当前树的深度
    path     //根路径
    is_leaf  //是否叶子节点

    三:MySQL 表的简化(特定情况,例如:用户触发过的场景记录表)

    假设业务中有N多道具,比如用户首次使用某个道具触发特效。根据表里有没有用户相关的道具触发记录来完成判断。

    id
    user_id //用户Id
    item_id //道具ID
    flag    //是否触发过特效 0-1
    add_time
    update_time

    毫无疑问,上述表结构是能够满足并实现我们需求的,但是如果有20种道具,那么每个用户最终将有20条数据,数据冗余,如何简化?

    解决方案:

    定义道具枚举值

    public enum ItemOnceFlagEnum {
        
        NONE(0),
        
        ITEM_ONE(1),//道具1
        
        ITEM_TWO(1 << 1), //道具2
        
        ITEM_Three(1 << 2), //道具3
        
        ;
        
        private int code;
        
        ItemOnceFlagEnum(int code) {
            this.code = code;
        }
        public int getCode() {
            return code;
        }
        
        public static ItemOnceFlagEnum valueOf(int code) {
            ItemOnceFlagEnum[] values = ItemOnceFlagEnum.values();
            for (ItemOnceFlagEnum flag : values) {
                if (flag.getCode() == code) {
                    return flag;
                }
            }
            return NONE;
        }
    }

    建表

    id
    user_id //用户Id
    flag    //是否触发过特效 2的0次幂、2的1次幂。。。
    add_time
    update_time
    
    user_id设置为唯一索引

     判断是否使用过某道具与添加道具使用记录

        //判断是否使用过某项道具
        public static boolean isHasThisFlag(long flag, ItemOnceFlagEnum itemOnceFlagEnum) {
            return (flag & itemOnceFlagEnum.getCode()) > 0;
        }
    
        //添加道具使用记录
        public Result<Boolean> addOnceFlag(long userId, itemOnceFlagEnum flag) {
             ItemOnceFlagDO itemOnceFlagDO = itmeOnceFlagService.getOnceFlagMap(Collections.singletonList(userId));
             long calculateFlag = (Objects.isNull(blockOnceFlagDO) ? 0L : itemOnceFlagDO.getFlag()) | flag.getCode();
             itemOnceFlag.setFlag(calculateFlag);
             boolean res = itemOnceFlagService.addOrUpdateOnceFlag(itemOnceFlag);
        }

    添加记录SQL

    "INSERT INTO xxxx ( ) VALUES ( :1.userId,  :1.flag ) " +
                " ON DUPLICATE KEY UPDATE flag = :1.flag "

    某一项道具为具体2次幂值(仅能够维护2种状态,有或无),flag代表所有触发道具2次幂和。

    通过 (flag & itemOnceFlagEnum.getCode())>0  判断是否有某项道具

    通过 flag | temOnceFlagEnum.getCode();  添加道具记录


    四:购物车模块的库表设计

    在电商软件,必不可少的模块就是购物车。

    我分享两种设计方法:

    ①:维护一张购物车表,以用户ID为外键

    一个用户一个购物车,用户注册成功的同时,为用户在购物车表内维护一个专属于用户的购物车。(根据我以前学到的知识,这一步可以为用户表创建Insert触发法器,当用户注册成功[触发器将用户ID作为外键插入购物车表],用户即拥有了唯一的购物车)

    T_Car

    字段

    类型

    说明

    Car_ID

    Varchar2(36)

    购物车编号  主键

    User_ID

    Varchar2(36)

    外键  用户唯一标识

    Car_Status

    Varchar2(4)

    购物车状态

    T_Shop_Item

    字段

    类型

    说明

    Shop_item_ID

    Varchar2(36)

    购物项编号  主键

    Car_ID

    Varchar2(36)

    购物车编号 外键

    Product_ID

    Varchar2(36)

    商品编号   外键

    Count

    Number(4)

    数量

    Price

    number(8,2)

    价格

    ProductName

    Varchar(30)

    商品名

    这么实现购物车的弊端:①:非该网站的注册用户无法将商品加入购物车。这与现实的情况不符合。一般我们访问某宝,某东,我们可以以游客的方式将商品加入购物车,直到下订单、付款时才要求我们必须登录。②:每个用户维护一下购物车似乎不太明智,顾客将商品加入购物车到下订单,完成交易,这一需求对数据库更改频繁。

    ②:所有用户共用一个”购物车”

    我们可以直接以用户ID为标识,区分购物车商品所属的用户。

    T_Shop_Item

    字段

    类型

    说明

    Shop_item_ID

    Varchar2(36)

    购物项编号  主键

    User_ID

    Varchar2(36)

    用户编号 外键

    ProductID

    Varchar2(36)

    商品编号   外键

    Count

    Number(4)

    数量

    Price

    number(8,2)

    价格

    ProductName

    Varchar(30)

    商品名

    即使减少了一张购物车表,但是这表还需要用户登录才能记录用户添加商品情况。

    ③:利用Session暂时存储购物车内的东西

    [用户不登录就能添加商品到购物车;用户登录状态将Session中的信息存入非关系型数据库、关系型数据库。将购物车内的东西持久化存储]

    明确一点:Session -> 一次会话有效(在用户不关闭浏览器的前提下,默认存在30分钟;用户关闭浏览器再次打开后,未登录用户的购物车将清空。)

    解决如何用Session存储购物车内信息。

    第一个难点:那么如何准确区分不同的商品? (自然是商品ID)

    第二个难点:那么如何准确标记一个进入购物车的商品? (只有商品ID是不行的)

    商品ID,通过商品ID,我们可以查询到商品详情。(价格、名称等等)

    同一商品的购买数量。这一信息是不存在于商品详情的。【重点,不能忽略】

    这两个信息必须存储。于是我想到Map(两个原因)。

    ①:存储两个值

    Map<String,Integer> map=new HashMap<String,Integer>();

    key存储 商品ID,  value存储 商品数量(购买数量)

    ②:保证商品ID(键)的唯一性

    Map的特点:键唯一,值可以重复。我们以商品ID为键,这样就可以保证商品的唯一性。

    我们再将map存入Session中就可以了。

    当用户添加商品时,只需先从Session中取出map,迭代遍历判断key是否已经存在,若存在取value值加1;若不存在则将商品ID作为key,value数量默认为1,Put进map。

    当用户(未登录)查看购物车时,只需从Session中取商品ID和数量,就可以显示购车内商品的详细信息,计算购物车内的商品总价格。

    这种存储方式简化了添加商品进入购物车和删除购物车里商品的操作。但是却不得不再次封装一个Map对象将购物车详情页面的信息存储进去,以供购物车展示页面显示数据。

    (这是我第一次考虑的存储方案,写到查看购物车详情页面才发现不合理之处。)

    改进版本:

    Map <String,Goods> map=new HashMap<String,Goods> ();

    Key ->商品id

    Value->购物车页面需要展示的商品详情(商品名、商品ID、商品数量、商品价格等)

    核心:value值维护不再是一个商品数量,而是我们封装的模拟购物车实体对象

    JSP页面的效果图

    源代码:添加商品的Action

    	//添加商品Action
    	public String addToCar() throws Exception{
    		//尝试从Session取出购物车
    		ValueStack vs=ActionContext.getContext().getValueStack();
    		Map<String,Goods> car=(Map<String,Goods>)vs.findValue("#session.car");
    		
    		BookService service=new BookServiceImpl();
    		
    		if(car==null){	
    			//判断购物车是否存在
    			//不存在则创建,将用户添加的商品加入Map 存入Session
    			Map<String,Goods> map=new HashMap<String,Goods>();
    			//查询数据将商品详情查询出出来,把我们感兴趣的属性封装到Goods实体中
    			Book book=service.getSingleBook(bookid);
    			Goods goods=new Goods();
    			goods.setBookid(book.getBookid());
    			goods.setCount(1);
    			goods.setPrice(book.getPrice());
    			goods.setCurrentprice(book.getCurrentprice());
    			goods.setProductname(book.getProductname());
    			
    			map.put(bookid, goods);
    			vs.setValue("#session.car", map);
    		}else{		
    			//判断用户添加的商品是否已经存在于购物车里
    			//若存在根据key取出Goods->修改商品选购的数量
    			//不存在则是首次添加,数量默认为1 ,将商品Put入map
    			if(car.containsKey(bookid)){
    				Goods product=car.get(bookid);
    				product.setCount(product.getCount()+1);
    			}else{			
    				Book book=service.getSingleBook(bookid);
    				Goods goods=new Goods();
    				goods.setBookid(book.getBookid());
    				goods.setCount(1);
    				goods.setPrice(book.getPrice());
    				goods.setCurrentprice(book.getCurrentprice());
    				goods.setProductname(book.getProductname());				
    				car.put(bookid, goods);
    			}
    		}	
    		return Action.SUCCESS;
    	}

    展开全文
  • vue表单设计器,vue,动态表单

    千次阅读 2020-06-15 12:38:12
    最近写了一款表单设计器,基于element-ui的如果有需要的可以看一下,如果对你有帮助的话,希望去github上给项目点个start,如果有什么问题可以直接给我留言,项目刚发布,如果大家有更多的需求的话,也可以给我留言,每周会...
  • 日常开发时想要快速构建节省时间或者功能需求需要拖拽生成表单,推荐使用以下表单设计器。 1.基于vue+elementui 的表单设计及代码生成器 Form Generator Element UI表单设计及代码生成器,可将生成的代码直接运行在...
  • vue中使用form-create实现动态表单

    千次阅读 2021-11-12 14:48:16
    项目中需要实现动态生成表单,经过调研,决定使用form-create插件来实现,非常简单,带大家了解一下 一、form-create是什么? form-create是一个通过JSON生成具有动态渲染、数据收集、验证和提交功能的表单生成组件...
  • Form动态表单设计的开发

    千次阅读 2013-05-31 16:37:36
     项目中往往需要动态的创建一个表单,或者添加一个新的数据模板,这时候因为需要在运行时动态的创建以及动态的维护表字段甚至关系 使得普通java解决方案变得困难重重。 2.实现工具  Struts2.x + mongodb + ...
  • Vue表单设计器的终极解决方案

    千次阅读 2021-08-09 12:07:08
    VForm全称为Variant Form,寓意为灵活的、动态的、多样化的Vue表单组件。 VForm提供了丰富的组件属性设置、表单交互事件和API方法,点此体验:VForm体验 VForm功能一览: 拖拽式可视化表单设计,所见即所得; ...
  • Vue ElementUI 表单设计器 代码生成器

    千次阅读 2020-12-28 21:39:23
    1、支持ElementUI组件,未来会持续添加更多组件支持。 2、支持多达36种控件,满足各种业务场景。 3、组件配置详细,基本1:1还原了组件的所有配置,当然,不常用的配置为了界面简洁我们放在了高级设置里。 4...
  • 数据库设计

    千次阅读 2021-07-01 10:07:48
    5. 必备三个字段,id,create_time,update_time,其中id为主键类型为 bigint unsigned、单时自增、步长为 1,(如果使用分分表集群部署,则id类型为verchar,非自增,业务中使用分布式id生成器) create_time,...
  • 一篇文章告诉你如何设计数据库

    千次阅读 2019-09-12 17:09:41
    ◆ 第二范式(2NF):首先是 1NF,另外包含两部分内容,一是必须有一个主键;二是没有包含在主键中的列必须完全依赖于主键,而不能只依赖于主键的一部分。  ◆ 第三范式(3NF):首先是 2NF,另外非主键列...
  • 低代码平台表单引擎技术方案选型

    千次阅读 2022-03-15 13:56:15
    可视化表单建模是低代码/零代码平台的核心功能,业内对该功能有多种叫法:电子单、表单可视化、表单驱动、表单引擎等,该组件主要由表单设计器、表单解析引擎、表单存储引擎三个部分构成,而表单解析引擎取决于...
  • PHP动态网页设计与制作案例教程

    热门讨论 2012-12-12 10:53:30
    本书展示一个完整网站的设计和实现过程,详细地介绍动态网页设计和制作的技术和相关理论,全书共分为8章,主要内容包括:动态网站设计概述、动态网站编程环境、网站主页设计与PHP基础、网站计数器设计与PHP文件访问...
  • vue element web 表单设计工具

    万次阅读 2020-12-07 22:22:17
      项目名 dw-form-making,基于 element-ui 组件的Web端表单设计工具。   项目技术栈vue、vue-cli3,可视化设计element-ui输入框、选择器、单选框等控件组成的Form表单,配置表单字段、标签、校验规则等。  ...
  • 数据库结构及索引设计

    千次阅读 2021-12-13 20:31:52
    数据库表设计 良好的结构设计是高性能的基石,应该根据系统将要执行的业务查询来设计,这往往需要权衡各种因素。糟糕的结构设计,会浪费大量的开发时间,严重延误项目开发周期,让人痛苦万分,而且直接影响到...
  • 表单元素,作为最常用的用户输入组件,在设计开发过程中几乎都要涉及,且往往大同小异。能不能减少重复的代码编写工作呢?能不能甚至不写代码,点几下鼠标就能生成想要的表单呢?Form-Generator,这个基于 Element...
  • 今天要介绍的这套中后台设计原型模板,是由Web端元件、框架、数据表单组成的,模板组件样式特别全面。列表布局样式、详情页布局样式、可视化图表样式及其丰富,简直是中后台设计人员的福音,我一眼就爱上了。除此...
  • 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单设计器生成的代码可直接运行在基于 Element 的 vue 项目中。 github仓库 https://github.com/JakHuang/form-generator 码云仓库...
  • 1. 我们点开Infopath Designer: 2. 点击相应的设计表单,选择... 接下来我们开始设计第一个视图中的面试通知界面,我们可以先设计一个外部框架,基本内容如下: 5. 接下来我们开始相关内容的设计了,我们可以在这
  • OA多级审批流程表设计方案以及开发思路(非常细节)

    万次阅读 多人点赞 2020-07-27 15:39:30
    OA审批工作流设计解决方案
  • 基于VUE 开发的 表单设计

    千次阅读 2020-07-14 10:33:44
    k-form-design 基于vue和ant-design-vue实现的表单设计器 组件预览地址 http://cdn.kcz66.com/form-design.html 组件地址 https://www.npmjs.com/package/k-form-design 开源地址 ...第二种 基于开源Element ...
  • 电子表单设计器,表单填写器,表单打印,数据发布,Web表单处理,Visual C++源代码组件2018“全球唯一提供了全部VC++源代码的专业电子表单解决方案!”-- 为您提供即刻可以拿来使用的源码级电子单解决方案!-- ...
  • form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定。 文档 | github 功能...
  • 拖拽式流程表单设计器——雀书

    千次阅读 2020-08-17 18:21:44
    雀书是一款基于Vue和springboot开发的表单设计器,提高表单开发效率的利器,让开发者从枯燥的表单代码编写中解放出来,提供了常用的表单组件,可以直接使用,同时支持自定义增加组件以及提供api支持对表单做自定义...
  • 一、系统模块设想 1.系统分析 &nbsp;&nbsp;&nbsp;&...万事开头难,要做一个系统,首先得分析这一个系统究竟需要...维修完成后管理员写维修经历并把表单转为历史表单。 2.功能分块 &nbsp;&nbs...
  • Vue动态生成表单组件vue-form-maker

    千次阅读 2018-12-25 10:30:52
    Vue动态生成表单组件 可以根据数据配置表单 使用的UI是iView 整体组件布局方式借鉴了form-create的写法 在此表示感谢 在Vue里 一般要用到什么组件或数据 都得提前声明 所以要根据数据来生成表单 只能使用Vue的...
  • element+vue实现界面动态添加表单

    千次阅读 2019-05-24 10:05:48
    首先,要确保你的开发环境是vue+element框架。然后就可以开始了 添加一个按钮用于打开模态框...设计一个组件用于动态添加表单,我这儿使用的是模态框。里面是卡片和表格处理数据 <!--SKU属性维护的模态框-->...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 96,025
精华内容 38,410
关键字:

动态表单完整库表设计