PasteForm最佳CRUD實踐，實際案例PasteTemplate詳解之管理前端的程式碼(二)

PasteSpider發表於2024-09-26

之前的文章說了，使用反射和ABPvNext的Dto實現用後端控制前端以實現最佳CRUD實踐！
相信看過一的已經瞭解了這個PasteForm是如何實現的了，本文來看下具體如何實現的

表格頁面的實現

開啟pasteform/index.html頁面之後，先會向API請求當前的path的資料模板

    _apiget(`/api/app/${_classPath}/readListModel`, true, (c, o) => {
        if (c == 200) {
            if (o.title) {
                $(".ppbody .st").find(".sn").html(o.title);
                this.document.title = o.title;
            }
            if (o.desc) {
                $(".ppbody .st").find(".idesc").html(o.desc);
            }
            //表頭的模板內容
            var _template_head_html = null;

            _globadataProperties = o.properties;
            //模型處理，如何顯示外表 比如cate.name 
            HandlerModelColumn(o.properties);
            //class模型的屬性列表
            if (o.attributes) {
                _globadataAttributes = o.attributes;
                o.attributes.forEach(_attribute => {
                    if (_attribute.name == 'disable') {
                        if (_attribute.args1) {
                            _config.disable_add = true;
                            $(".btnadd").hide();
                        }
                        if (_attribute.args2) {
                            _config.disable_edit = true;
                        }
                        if (_attribute.args3) {
                            _config.disable_del = true;
                        }
                    }
                    if (_attribute.name == "template") {
                        if (_attribute.args1) {
                            _template_head_html = $(`#${_attribute.args1}`).html();
                        }
                        if (_attribute.args2) {
                            _template_body_html = $(`#${_attribute.args2}`).html();
                        }
                    }
                });
            }

            if (_template_head_html == null) {
                _template_head_html = $("#template_header").html();
            }
            var _modelhtml = template(_template_head_html, { list: o.properties, config: _config });
            //一級模型 轉化成 二級模型
            if (_template_body_html == null) {
                var _template_body = $("#template_body").html();
                var _bodyhtml = template(_template_body, { list: o.properties, config: _config });
                _template_body_html = _bodyhtml.replace(/{{/g, '<%').replace(/}}/g, '%>');
            }
            $(".table").find("thead").html(_modelhtml);
            //處理查詢項
            if (o.queryProperties) {
                _globdataQueryProperties = o.queryProperties;
                HandlerQueryItem(o.queryProperties);
            } else {
                _readpagedata(1);
            }
            //讀取資料
        }
    });

看如上程式碼，就是先向後端獲得這個頁面的搜尋區域的資料模型屬性和下方表格的資料模型
然後

_readpagedata(1);

才是獲取表格的資料，也就是說第二頁之後的資料是隻要請求一次的，只要首次開啟才要獲取資料模型的屬性，如果你使用本地緩也是可以省略第一次的模型屬性的資料的！
UI中再基於JS獲取到的模型進行渲染

        <!-- 查詢的資訊模板 -->
        <script type="text/html" id="template_search">
            <% list.forEach(item=>{ %>
                <% if(item.dataType=="String" || item.dataType == 'Guid'){ %>
                    <label class="sitem" <%if(item.hidden){%>style="display:none;"<%}%>>
                        <span><%:=item.title%>:</span>
                        <input type="text" name="<%:=item.name%>" class="inputword" placeholder="<%:=item.placeholder || ''%>">
                        <span class="spanclean" onclick="handlerClean(this)">x</span>
                    </label>
                <% } %>
                <% if(item.dataType=="Int32" || item.dataType=='Int64'){ %>
                    <label class="sitem" <%if(item.hidden){%>style="display:none;"<%}%>>
                        <span><%:=item.title%>:</span>
                        <input type="number" name="<%:=item.name%>" class="inputword" placeholder="<%:=item.placeholder || ''%>">
                        <span class="spanclean" onclick="handlerClean(this)">x</span>
                    </label>
                <% } %>
                <% if(item.dataType=='outer'){ %>
                    <div class="outer sitem" <%if(item.hidden){%>style="display:none;"<%}%>>
                        <span><%:=item.title%>:</span>
                        <% if(item.dataFrom=='Int32' || item.dataFrom=='Int64'){ %>
                            <input type="number" class="outerid" style="display:none;" value="<%:=item.value%>" name="<%:=item.name%>">
                        <%}else{%>
                            <input type="text" class="outerid" style="display:none;"  value="<%:=item.value%>" name="<%:=item.name%>">
                        <%}%>
                        <input type="text" class="outerdisplay" dataname="<%:=item.name%>" value="<%:=item.display%>" onclick="handler_outer_value(this)" readonly placeholder="<%:=item.placeholder%>" >
                        <span class="spanclean" onclick="handlerCleanOuterInput(this)">x</span>
                    </div>
                <% } %>
                <% if(item.dataType=="select"){ %>
                    <label  class="sitem" <%if(item.hidden){%>style="display:none;"<%}%>>
                        <span><%:=item.title%>:</span>
                        <select name="<%:=item.name%>">
                            <% if(item.selects){ %>
                                <% item.selects.forEach(_select=>{ %>
                                    <option value="<%:=_select.value%>" <% if(_select.selected){ %>selected<% } %>><%:=_select.name%></option>
                                <% }) %>
                            <%}%>
                        </select>
                    </label>
                <% } %>
                <% if(item.dataType=="DateTime"){ %>
                    <label class="sitem" <%if(item.hidden){%>style="display:none;"<%}%>>
                        <span><%:=item.title%>:</span>
                        <input type="text" name="<%:=item.name%>" value="<%:=item.value || ''%>" class="inputword" onClick="WdatePicker({el:this,dateFmt:'<%:=item.format%>'})" placeholder="<%:=item.placeholder || ''%>">
                        <span class="spanclean" onclick="handlerClean(this)">x</span>
                    </label>
                <% } %>
                <% if(item.dataType=="datalist"){ %>
                    <label class="sitem" <%if(item.hidden){%>style="display:none;"<%}%>>
                        <span><%:=item.title%>:</span>
                        <input type="text" name="<%:=item.name%>" class="inputword" list="<%:=item.name%>" placeholder="<%:=item.placeholder || ''%>">
                            <% if(item.selects){ %>
                                <datalist id="<%:=item.datalistid%>">
                                    <% item.selects.forEach(_select=>{ %>
                                        <option value="<%:=_select.value%>" ><%:=_select.name%>(<%:=_select.value%>)</option>
                                    <% }) %>
                                </datalist>
                            <%}%>
                        <span class="spanclean" onclick="handlerClean(this)">x</span>
                    </label>
                <% } %>
                <% if(item.dataType=='daterange'){%>
                    <label class="sitem" <%if(item.hidden){%>style="display:none;"<%}%>>
                        <span><%:=item.title%>:</span>
                            <input type="text" class="inputword" name="<%:=item.name%>" readonly datas="" datae="" value="<%:=item.value || ''%>" id="<%:=item.name%>">
                    </label>
                <% } %>
            <% }) %>
        </script>

        <!-- 頭部的資訊模板 -->
        <script type="text/html" id="template_header">
                <tr>
                    <% list.forEach(item=>{ %>
                        <% if(!item.hidden){ %>
                            <td>
                            <%:=item.title%>
                              <% if(item.attributes!=null){ %>
                                <% item.attributes.forEach(_attribute=>{ %>
                                    <% if(_attribute.name=='orderby'){ %>
                                        <span class="orderby">
                                            <i class="Hui-iconfont ordersell icon-top" dataval="<%:=_attribute.args1%>"></i>
                                            <i class="Hui-iconfont ordersell icon-bottom" dataval="<%:=_attribute.args2%>"></i>
                                        </span>
                                    <% } %>
                                <% }) %>
                            <% } %>
                            </td>
                        <% } %>
                    <% }) %>
                    <td>操作</td>
                </tr>
        </script>

        <!-- 表格的資訊模板 -->
        <script type="text/html" id="template_body">
            <!-- 注意花括號百分比的是當前的模板 2個花括號的是佔位，下一個的模板程式碼 -->
            {{ list.forEach(item=>{ }}
                <tr>
                    <% list.forEach(item=>{ %>
                        <% if(!item.hidden){ %>
                            <td <%if(item.class){%>class="<%:=item.class%>"<%}%>>
                            <% if(item.dataType=='image' ){ %>
                                <img class="image" src="{{:=item.<%:=item.name%>}}">
                            <% }else if(item.dataType=='head' ){ %>
                                <img class="head" src="{{:=item.<%:=item.name%>}}">
                            <% }else if(item.dataType=='switch' ){ %>
                                <input type="checkbox" class="input-checkbox mui-switch mui-switch-anim" onchange="handlerSwitchChange(this)" dataid="{{:=item.id}}" dataname="<%:=item.name%>" {{ if(item.<%:=item.name%>){ }}checked{{ } }} >
                            <% }else{ %>                                
                                <%if(item.html){%>
                                    <%:=item.html%>
                                <%}else{%>
                                <span class="itd">
                                    {{:=item?.<%:=item.name%>}}
                                </span>
                                <%}%>
                            <% } %>
                            </td>
                        <% } %>
                    <% }) %>
                    <td class="fleft">
                        <!-- 這裡填寫編輯或者其他 -->
                        {{ if(config.model=='view'){ }}
                            <% if(config.menubox){%>
                                <a href="javascript:;" onclick="open_menu_box(this);" onmouseover="open_menu_box(this);" ><i class="Hui-iconfont Hui-iconfont-more"></i></a>
                                <div class="menubox" style="z-index: 100;" onmouseleave="$(this).fadeOut();">
                                    <% list.forEach(item=>{%>
                                        <% if(item.dataType=='menubox'){ %>
                                            <% if(item.attributes){ %>
                                                <% item.attributes.forEach(_attribute=>{ %>
                                                    <% if(_attribute.name=='menu'){ %>
                                                        <a onclick="<%:=_attribute.args2%>"><% if(_attribute.args3){%><i class="Hui-iconfont <%:=_attribute.args3%>"></i><%}%> <%:=_attribute.args1%></a>
                                                    <% } %>
                                                <% }) %>
                                            <% } %>
                                        <% } %>
                                        <% if(item.dataType=='ifmenubox'){ %>
                                            {{ if(<%:=item.ifmenu.expression%>){ }}
                                                <%:=item.ifmenu.value%>
                                            {{ } }}
                                        <% } %>
                                    <% }) %>
                                </div>
                            <% } %>

                            <% if(!config.disable_edit){ %>
                                <a href="javascript:;" onclick="tap_view_item(this)" dataid="{{:=item.id}}"><i class="Hui-iconfont Hui-iconfont-shuru"></i>編輯</a>
                            <% } %>

                            <!-- 處理自定義的型別，由於是表的性質，穿透到資料的className -->
                            <% list.forEach(item=>{%>
                                <% if(item.dataType=='menu'){ %>
                                    <% if(item.attributes){ %>
                                        <% item.attributes.forEach(_attribute=>{ %>
                                            <% if(_attribute.name=='menu'){ %>
                                                <a onclick="<%:=_attribute.args2%>"><% if(_attribute.args3){%><i class="Hui-iconfont <%:=_attribute.args3%>"></i><%}%> <%:=_attribute.args1%></a>
                                            <% } %>
                                        <% }) %>
                                    <% } %>
                                <% } %>
                                <% if(item.dataType=='ifmenu'){ %>
                                    {{ if(<%:=item.ifmenu.expression%>){ }}
                                        <%:=item.ifmenu.value%>
                                    {{ } }}
                                <% } %>
                            <% }) %>

                            <% if(!config.disable_del){ %>
                                <a href="javascript:;" onclick="handler_tap_del(this)" class="a-del" dataid="{{:=item.id}}"><i class="Hui-iconfont Hui-iconfont-del3"></i>刪除</a>
                            <% } %>

                        <!-- 自定義處理操作列選單完成 -->
                        {{ } }}

                        {{ if(config.model=='select'){ }}
                        <a href="javascript:;" class="mselect" onclick="tap_select_item(this)"
                            dataid="{{:=item.id}}"><i class="Hui-iconfont Hui-iconfont-fabu"></i>選擇</a>
                        {{ } }}
                    </td>
                </tr>
            {{ }) }}
        </script>

注意表格中的模板進行了二次轉化，也就是獲取模型後先轉化成資料模型獲得模板，然後再結合實際的頁資料再一次進行UI渲染

表單頁面的實現

表單頁面開啟後會判斷是否是編輯，其實整個思路是一樣的，只是請求的介面不一樣，一個是XXXAddDto一個是UpdateDto

/**
 * 讀取模型和預設值，值等
 */
function FuncFilexModel() {
    // console.log(_id);
    if (_id && _id != '0' && _id != 0) {
        _apiget(`/api/app/${_classPath}/${_id}/readUpdateModel`, true, (c, o) => {
            if (c == 200) {
                loadHeader(o);
                if (o.properties) {
                    LoadModelProperity(o.properties);
                }
                if (o.title) {
                    this.document.title = "更新" + o.title;
                }
            }
        });
    } else {
        _apiget(`/api/app/${_classPath}/readAddModel`, true, (c, o) => {
            if (c == 200) {
                loadHeader(o);
                if (o.properties) {
                    LoadModelProperity(o.properties);
                }
                if (o.title) {
                    this.document.title = "新增" + o.title;
                }
            }
        });
    }
}

其實2個請求到最後都是到LoadModelProperity的函式中

/**
 * 讀取資料的模型 處理資料的模型
 * @param {*} properties 
 */
function LoadModelProperity(properties) {
    _modelProperties = properties;
    handlerExchangeDataTypeToUIType(properties);

    var _template = $("#templatemodel").html();
    var _ahtml = template(_template, { list: properties, config: _config });
    $(".paste-form-body").html(_ahtml);
    setTimeout(function () {
        FormLoaded(properties);
        funcAppendInputLength();

        //計算高度，返回
        var _height = $(".newform").height() + 140;
        if (_has_outer) {
            //如果計算的高度小於600，表單中有outer則至少保證高度為600
            if (_height < 600) {
                _height = 600;
            }
        }
        var _index = parent.layer.getFrameIndex(window.name); //獲取視窗索引
        if (window.parent.set_dialog_height) {
            window.parent.set_dialog_height(_height, _index);
        } else {
            console.log('沒有在父級找到函式set_dialog_height');
        }

        $(".ulselects").on('click', 'li', function () {
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
            } else {
                $(this).addClass('selected');
            }
        });


    }, 100);
}

然後是前端HTML中，基於JS獲取的資料進行UI渲染

        <script type="text/html" id="templatemodel">
            <% list.forEach(item=>{%>
                <div class="row cl <% if(item.singlerow){ %>singlerow<% } %>" <%if(item.hidden){%> style="display:none;" <%}%>>
                    <div class="itemrow">
                        <label class="form-label"><%:=item.title%><%if(item.mark){%><span class="tapmark" onclick="global_tap_mark('<%:=item.mark.model%>','<%:=item.mark.value%>')">?</span><%}%><%if(item.required){%><span class="form-required">*</span><%}%></label>
                        <div class="formControls">
                        <% if(item.dataType=="text" || item.dataType =='Guid'){ %>
                            <input name="<%:=item.name%>" class="input-text" <%if(item.required){%>required<%}%> type="text" value="<%:=item.value || ''%>" maxlength="<%:=item.maxlength%>" placeholder="<%:=item.placeholder%>" />
                            <span class="spanclean" onclick="handlerClean(this)">x</span>
                        <%}%>
                        <% if(item.dataType=="number"){ %>
                            <input name="<%:=item.name%>" class="input-number" placeholder-class="p-form-placeholder" type="number" value="<%:=item.value || ''%>" placeholder="<%:=item.placeholder%>" />
                            <%if(item.unit){%>
                                <span class="unit"><%:=item.unit%></span>
                            <%}%>
                        <%}%>
                        <% if(item.dataType=="fentoyuan"){ %>
                            <input name="<%:=item.name%>" class="input-number" step="0.01" min="0" max="99999999" placeholder-class="p-form-placeholder" type="number" value="<%:=item.value || ''%>" placeholder="<%:=item.placeholder%>" />
                            <span>元</span>
                        <%}%>
                        <% if(item.dataType=="Double" || item.dataType=='Decimal'){ %>
                            <input name="<%:=item.name%>" class="input-number" step="<%:=item.step%>" placeholder-class="p-form-placeholder" type="number" value="<%:=item.value || ''%>" placeholder="<%:=item.placeholder%>" />
                            <%if(item.unit){%>
                                <span class="unit"><%:=item.unit%></span>
                            <%}%>
                        <%}%>
                        <% if(item.dataType=="textarea"){ %>
                            <textarea name="<%:=item.name%>" class="input-textarea" <%if(item.style){%>style="<%:=item.style%>"<%}%> <%if(item.required){%>required<%}%> <%if(item.maxlength>0){%>maxlength="<%:=item.maxlength%>"<%}%> placeholder="<%:=item.placeholder%>" ><%:=item.value || ''%></textarea>
                            <span class="spanclean" onclick="handlerClean(this)">x</span>
                        <%}%>
                        <% if (item.dataType=="switch"){ %>
                            <input type="checkbox" class="input-checkbox mui-switch mui-switch-anim" <%if(item.value){%>checked<%}%> name="<%:=item.name%>">
                            <span class="placeholder"><%:=item?.placeholder || ''%></span>
                        <%}%>
                         <% if(item.dataType=="datetime"){ %>
                            <input type="text" value="<%:=item.value || ''%>" name="<%:=item.name%>" <%if(item.required){%>required<%}%> maxlength="20" placeholder="<%:=item.placeholder%>" onClick="WdatePicker({el:this,dateFmt:'<%:=item.format%>'})"
                            autocomplete="off" class="input-text input-form-date">
                        <%}%>
                        <% if(item.dataType=="daterange"){ %>
                            <input type="text" value="<%:=item.value || ''%>" id="<%:=item.name%>" name="<%:=item.name%>" datas="" datae="" <%if(item.required){%>required<%}%> placeholder="<%:=item.placeholder%>" 
                            autocomplete="off" class="input-text input-form-date">
                        <%}%>
                        <% if(item.dataType == "richtext"){ %>
                            <div class="editoryarea">
                                <div class="editor_toolbar" id="<%:=item.name%>editorbar"></div>
                                <div class="editor_body" id="<%:=item.name%>editor"></div>
                            </div>
                        <%}%>
                        <% if(item.dataType == "file"){ %>
                            <input type="file" id="<%:=item.name%>" datanum="<%:=item.num%>" onchange="handlerUploadOnlyFile(this)" <%if(item.url){%>dataurl=<%:=item.url%><%}%> datatype="<%:=item.type%>" datasize="<%:=item.size%>" style="display:none" />
                            <input type="text" name="<%:=item.name%>" value="<%:=item.value%>" placeholder="<%:=item.placeholder%>" onclick="$('[id=<%:=item.name%>]').trigger('click');">
                            <span class="spanclean" onclick="handlerClean(this)">x</span>
                        <%}%>

                        <% if(item.dataType == "image" || item.dataType=="images"){ %>
                            <input type="text" style="display:none" name="<%:=item.name%>" value="<%:=item.value%>">
                            <input type="file" multiple id="<%:=item.name%>" datanum="<%:=item.num%>" onchange="handlerUploadFile(this)" datatype="<%:=item.type%>" datasize="<%:=item.size%>" style="display:none;" />
                            <% if(item.num ==1){%>
                                <label for="<%:=item.name%>">
                                    <img class="form-image-head" <%if(item.value){%>src="<%:=item.value%>"<%}%> >
                                    <%if(!item.value){%>
                                        <span class="iconadd icon-add">
                                            <i class="Hui-iconfont Hui-iconfont-add2 icon"></i>
                                        </span>
                                    <%}%>
                                </label>
                                <span class="placeholder"><%:=item?.placeholder || ''%></span>
                            <% }else{ %>
                                <span class="placeholder"><%:=item?.placeholder || ''%></span>
                                <ul class="imageul">
                                    <li><label for="<%:=item.name%>"><span class="icon-add">
                                        <i class="icon Hui-iconfont Hui-iconfont-add2"></i>
                                    </span></label></li>
                                    <%if(item.images){%>
                                        <%item.images.forEach(_img=>{%>
                                            <li><img src="<%:=_img%>"><i class="Hui-iconfont Hui-iconfont-close2 icon-close"  onclick="handlerRemoveImageItem(this)"></i></li>
                                        <%})%>
                                    <%}%>
                                    <!-- <li>
                                        <img>
                                        <i class="iconfont icon-close" onclick="handlerRemoveImageItem(this)"></i>
                                    </li> -->
                                </ul>
                            <% } %>
                        <%}%>

                        <% if(item.dataType=='outer'){ %>
                            <div class="outer">
                                <% if(item.dataFrom=='Int32' || item.dataFrom=='Int64'){ %>
                                    <input type="number" class="outerid" style="display:none;" value="<%:=item.value%>" name="<%:=item.name%>">
                                <%}else{%>
                                    <input type="text" class="outerid" style="display:none;"  value="<%:=item.value%>" name="<%:=item.name%>">
                                <%}%>
                                <input type="text" class="outerdisplay" dataname="<%:=item.name%>" value="<%:=item.display%>" onclick="handler_outer_value(this)" readonly placeholder="<%:=item.placeholder%>" >
                                <span class="spanclean" onclick="handlerClean(this)">x</span>
                            </div>
                        <% } %>

                        <% if(item.dataType=='outers'){ %>
                            <div class="outers">
                                <input type="button" value="新增" class="btn btnaddouter" dataname="<%:=item.name%>" onclick="handler_outer_value(this)">
                                <ul class="ulouter outers<%:=item.name%>">
                                    <% if(item.display){%>
                                        <% item.display.forEach(_display=>{ %>
                                            <li dataid="<%:=_display[item.display_id]%>">
                                                <%:=_display[item.display_name]%>
                                                <span class="outer_close"  onclick="$(this).parents('li').remove();">x</span>
                                            </li>
                                        <% }) %>
                                    <% } %>
                                </ul>
                            </div>
                        <% } %>

                        <% if(item.dataType=="select"){ %>
                                <select name="<%:=item.name%>">
                                    <% if(item.selects){ %>
                                        <% item.selects.forEach(_select=>{ %>
                                            <option value="<%:=_select.value%>" <%if(_select.value==item.value){%>selected<%}%>><%:=_select.name%></option>
                                        <% }) %>
                                    <%}%>
                                </select>
                        <% } %>

                        <%if(item.dataType=="button"){%>
                            <input type="button" class="btn btnlink" value="<%:=item.value%>" onclick="global_form_button_click(this,`<%:=config.className%>`,`<%:=item.name%>`);">
                            <span class="placeholder"><%:=item?.placeholder || ''%></span>
                        <%}%>

                        <% if(item.dataType=="selects"){ %>
                            <ul class="ulselects" name="<%:=item.name%>">
                                <% if(item.selects){ %>
                                    <% item.selects.forEach(_select=>{ %>
                                        <li class="selectli <%if(_select.selected){%>selected<%}%>" value="<%:=_select.value%>"><%:=_select.name%></li>
                                    <% }) %>
                                <%}%>
                            </ul>
                        <% } %>

                        <% if(item.dataType=="datalist"){ %>
                                <input type="text" name="<%:=item.name%>" class="inputword" value="<%:=item.value%>" list="<%:=item.name%>" placeholder="<%:=item.placeholder || ''%>">
                                    <% if(item.selects){ %>
                                        <datalist id="<%:=item.datalistid%>">
                                            <% item.selects.forEach(_select=>{ %>
                                                <option value="<%:=_select.value%>" ><%:=_select.name%>(<%:=_select.value%>)</option>
                                            <% }) %>
                                        </datalist>
                                    <%}%>
                                <span class="spanclean" onclick="handlerClean(this)">x</span>
                        <% } %>
                        </div>
                    </div>
                </div>
            <%})%>
        </script>

所以說，針對不同專案的不同需求，或者說你們的個人習慣，可以對上面的程式碼進行修改以便適應自己的專案，比如我的專案一般不會用到date,一般用到的是datetime，所以我就沒考慮date的情況了！

下一次將介紹在實際中遇到的問題，和PasteForm是如何處理問題的

PasteForm最佳CRUD實踐，實際案例PasteTemplate詳解之3000問(三)
2024-09-30
ASTORM
PasteForm最佳CRUD實踐，實際案例PasteTemplate詳解之3000問(四)
2024-10-09
ASTORM
lerna管理前端packages的最佳實踐
2018-03-02
前端Package
dart系列之:dart程式碼最佳實踐
2022-01-04
Dart
前端乾貨之JS最佳實踐
2019-02-16
前端JS
最佳實踐之 Android程式碼規範
2015-04-08
Android
【jmx】JMX最佳實踐與詳解
2020-12-13
資料庫智慧管理助手-CloudDB詳解及最佳實踐
2018-06-12
資料庫Cloud
元件化實踐詳解（二）
2018-04-13
元件化
程式碼審查最佳實踐
2012-08-13
DHCP最佳實踐（二）
2021-01-17
前端快取最佳實踐
2019-03-03
前端快取
實現容器安全管理的最佳實踐
2022-04-22
React 程式碼共享最佳實踐方式
2021-05-11
React
React 整潔程式碼最佳實踐
2017-12-04
React
編寫優雅程式碼的最佳實踐
2018-04-24
Git 最佳實踐：分支管理
2017-01-01
Git
前端最佳實踐（一）——DOM操作
2019-03-04
前端
前端工程化最佳實踐
2021-07-03
前端
C 程式解決實際檔案案例
2015-03-30
GMTC 大前端時代前端監控的最佳實踐
2018-06-29
前端
前端程式碼質量的思考與實踐
2020-03-20
前端
[譯] 程式碼審查之最佳實踐
2018-12-08
使用Golang建立RESTful API的最佳實踐案例
2022-07-31
GolangRESTAPI
lerna管理前端模組實踐
2020-10-20
前端
python編碼最佳實踐之總結
2016-01-12
Python
RocketMQ 重試機制詳解及最佳實踐
2022-11-17
MQ
React最佳實踐嘗試（二）
2018-10-17
React
前端高效能動畫最佳實踐
2016-05-03
前端動畫
RocketMQ 的消費者型別詳解與最佳實踐
2022-11-30
MQ型別
Nacos配置管理最佳實踐
2022-01-08
Java 日誌管理最佳實踐
2014-11-29
Java
Maven最佳實踐：管理依賴
2009-02-25
Maven
CATIA許可管理最佳實踐
2024-10-30
Shell指令碼最佳實踐
2020-08-23
指令碼
密碼修改最佳實踐
2017-10-18
密碼
執行專案管理的最佳實踐
2008-07-09
專案管理
Vert.x 程式碼結構最佳實踐
2018-06-20

PasteForm最佳CRUD實踐，實際案例PasteTemplate詳解之管理前端的程式碼(二)

表格頁面的實現

表單頁面的實現

相關文章