java form表单去除边框_关于自动生成表单的测试

最新推荐文章于 2024-04-29 16:05:13 发布

椰子大魔头

最新推荐文章于 2024-04-29 16:05:13 发布

阅读量376

点赞数

文章标签： java form表单去除边框

本文链接：https://blog.csdn.net/weixin_33235712/article/details/112087508

版权

本文介绍如何利用form-create工具，结合JSON数据和数据库字段，自动生成Java Form表单，简化UI开发，实现双向数据绑定和高效渲染。通过示例展示js代码和数据库操作，提供测试效果，并分享相关资源链接。

摘要由CSDN通过智能技术生成

-----聊摄影谈技术不老的攻城狮-----

春天来了

曾经看到网上的麦客表单等生成工具，总觉得很神奇，想来想去总卡在UI端如何去实现。现在有了form-create神器，简化了很多操作，从数据库到UI一统江湖。从使用 json 数据、双向数据绑定生成表单、现栅格布局、局部更新提升渲染速度，样样都让人赞叹。对于开发人员，特别是业务层的开发人员，有了这样的神器，配合VUE、jQuery，几乎可以抛弃美工了。

读书不觉已春深，一寸光阴一寸金。不是道人来引笑，周情孔思正追寻。本文尝试从数据库开始，规范建表，每个字段都设置备注，来动态生成UI的Form表单，全当引笑了。

UI端的js如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><html><head><base href=""><meta charset="UTF-8">    <title>动态生成表单演示title><link href="css/iview.css" rel="stylesheet">    <script src="js/jquery-1.7.2.min.js">script>    <script src="js/vue.min.js">script>    <script src="js/iview.min.js">script>    <script src="js/form-create.min.js">script><style>        .container{            width: 700px;            overflow: hidden;            margin: 0 auto;        }        .jsonBox,.formCreate{            overflow: auto;            width:100%;            resize: none;            margin-top: 20px;            height:450px;            border:1px solid #666;        }        .fl{            float: left;        }        .fr{            float: right;        }        button{            width: 50%;            height: 40px;            line-height: 40px;            border:none;            font-size: 16px;            outline:none;            color: #fff;      pading-left:5px;            cursor: pointer;            background:#992d33;        }style>head>  <body><div id="app"><div class="container">        <div class="formCreate fr" id="formCreate" style="width:100%">div>        <button @click="markHtml">生成表单button><button>提交表单button>div>div><script>    var mock =[];//mock = JSON.stringify(mock,null,4).toString();    vm = new Vue({        el:'#app',        cus:'foo',        data:{            model:[]        },     created:function(){      $.ajax({        url :'/Chkin/getPoster.wx',        type : 'GET',        success : function(data) {          this.model = JSON.stringify(data,null,4).toString();          mock=data;                },        error : function() {          console.log("服务异常" + 222)    }      });},        methods:{            markHtml(){                this.model = mock;                console.log(this.model);                if(!this.model){                    return alert('没有发现生成表单的json数据')                }                model = JSON.parse(this.model);                console.log("服务" +001)                window.formData = {};                let root = document.getElementById('formCreate');                $f = this.$formCreate(model,{                    el:root,                    submitBtn:false                });                $f.model(formData);                console.log(formData,'formData')            },        }    });script>body>html>

为日后开发方便，编写两个实体类

package com.wangbin.entity;public class Props {    String type="text";   String clearable="false";  String disabled= "false";   String readonly= "false";   String rows= "4";  String autosize= "false";   String number= "false";   String autofocus= "false";  String autocomplete="off";  String placeholder="请输入内容";  String size="default";   String spellcheck= "false";   String required="false";      public String getType() {    return type;  }  public void setType(String type) {    this.type = type;  }  public String getClearable() {    return clearable;  }  public void setClearable(String clearable) {    this.clearable = clearable;  }  public String getDisabled() {    return disabled;  }  public void setDisabled(String disabled) {    this.disabled = disabled;  }  public String getReadonly() {    return readonly;  }  public void setReadonly(String readonly) {    this.readonly = readonly;  }  public String getRows() {    return rows;  }  public void setRows(String rows) {    this.rows = rows;  }  public String getAutosize() {    return autosize;  }  public void setAutosize(String autosize) {    this.autosize = autosize;  }  public String getNumber() {    return number;  }  public void setNumber(String number) {    this.number = number;  }  public String getAutofocus() {    return autofocus;  }  public void setAutofocus(String autofocus) {    this.autofocus = autofocus;  }  public String getAutocomplete() {    return autocomplete;  }  public void setAutocomplete(String autocomplete) {    this.autocomplete = autocomplete;  }  public String getPlaceholder() {    return placeholder;  }  public void setPlaceholder(String placeholder) {    this.placeholder = placeholder;  }  public String getSize() {    return size;  }  public void setSize(String size) {    this.size = size;  }  public String getSpellcheck() {    return spellcheck;  }  public void setSpellcheck(String spellcheck) {    this.spellcheck = spellcheck;  }  public String getRequired() {    return required;  }  public void setRequired(String required) {    this.required = required;  }  }

package com.wangbin.entity;public class Mock {  String  type="input";  String  title;  String  field;  Props  props;    public String getType() {    return type;  }  public void setType(String type) {    this.type = type;  }  public String getTitle() {    return title;  }  public void setTitle(String title) {    this.title = title;  }  public String getField() {    return field;  }  public void setField(String field) {    this.field = field;  }  public Props getProps() {    return props;  }  public void setProps(Props props) {    this.props = props;  }    }

供ajax调用的数据

package com.wangbin.controller; import java.io.PrintWriter;import java.sql.SQLException; import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONArray; import com.wangbin.bus.ReadPoster; public class getPoster extends HttpServlet{    private static final long serialVersionUID = 1L;  PrintWriter pw =null;  @SuppressWarnings("unchecked")    public void doGet(HttpServletRequest req, HttpServletResponse res) {        try {                   res.setContentType("text/html;charset=UTF-8");      ReadPoster gp=new ReadPoster();//ctext=gp.getParam("1");       try {        JSONArray jsonArray=JSONArray.fromObject(gp.getMock("tb_village"));        pw = res.getWriter();        pw.write(jsonArray.toString());        /*         * System.out.println(jsonArray.toString());        for(int i=0;i        JSONObject jsonObject=jsonArray.getJSONObject(i);              Iterator headerkeys = jsonObject.keys();                while (headerkeys.hasNext()) {                  String headerkey = headerkeys.next();                  String headerValue = jsonObject.getString(headerkey);                  System.out.println(headerkey);                  System.out.println(headerValue);                }        }*/      } catch (SQLException e) {         e.printStackTrace();pw.close();      }                     } catch (Exception e){e.printStackTrace(); }    }    }

从数据库生成一个ArrayList：

  @SuppressWarnings("unchecked")  public List getMock(String tablename) throws SQLException{    String sql = "select column_name,data_type,column_comment from information_schema.columns where table_name= ?  and length(column_comment)>0;";    PreparedStatement pstmtm = conn.prepareStatement(sql);    pstmtm.setString(1, tablename);    ResultSet rsm = pstmtm.executeQuery();    List rtMock = (List) new ArrayList();    while(rsm.next()){      Mock rt=new Mock();       Props ps=new Props();      rt.setTitle((String)rsm.getString("column_comment"));      rt.setField((String)rsm.getString("column_name"));      rt.setProps(ps);      rtMock.add(rt);//System.out.println(rt);    }     rsm.close();    pstmtm.close();        return rtMock;              }

部署完毕，测试一下，效果如下：