:
PasteForm最佳CRUD实践，实际案例PasteTemplate详解之管理前端的代码(二)
2024年09月26日 20:39
之前的文章说了，使用反射和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">
<% list.forEach(item=>{ %>
<% if(item.dataType=="String" || item.dataType == 'Guid'){ %>
<label <%if(item.hidden){%>style="display:none;"<%}%>>
<span><%:=item.title%>:</span>
<input type="text" name="<%:=item.name%>" placeholder="<%:=item.placeholder || ''%>">
<span onclick="handlerClean(this)">x</span>
</label>
<% } %>
<% if(item.dataType=="Int32" || item.dataType=='Int64'){ %>
<label <%if(item.hidden){%>style="display:none;"<%}%>>
<span><%:=item.title%>:</span>
<input type="number" name="<%:=item.name%>" placeholder="<%:=item.placeholder || ''%>">
<span onclick="handlerClean(this)">x</span>
</label>
<% } %>
<% if(item.dataType=='outer'){ %>
<div <%if(item.hidden){%>style="display:none;"<%}%>>
<span><%:=item.title%>:</span>
<% if(item.dataFrom=='Int32' || item.dataFrom=='Int64'){ %>
<input type="number" style="display:none;" value="<%:=item.value%>" name="<%:=item.name%>">
<%}else{%>
<input type="text" style="display:none;" value="<%:=item.value%>" name="<%:=item.name%>">
<%}%>
<input type="text" dataname="<%:=item.name%>" value="<%:=item.display%>" onclick="handler_outer_value(this)" readonly placeholder="<%:=item.placeholder%>" >
<span onclick="handlerCleanOuterInput(this)">x</span>
</div>
<% } %>
<% if(item.dataType=="select"){ %>
<label <%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 <%if(item.hidden){%>style="display:none;"<%}%>>
<span><%:=item.title%>:</span>
<input type="text" name="<%:=item.name%>" value="<%:=item.value || ''%>" onClick="WdatePicker({el:this,dateFmt:'<%:=item.format%>'})" placeholder="<%:=item.placeholder || ''%>">
<span onclick="handlerClean(this)">x</span>
</label>
<% } %>
<% if(item.dataType=="datalist"){ %>
<label <%if(item.hidden){%>style="display:none;"<%}%>>
<span><%:=item.title%>:</span>
<input type="text" name="<%:=item.name%>" list="<%:=item.name%>" placeholder="<%:=item.placeholder || ''%>">
<% if(item.selects){ %>
<datalist>
<% item.selects.forEach(_select=>{ %>
<option value="<%:=_select.value%>" ><%:=_select.name%>(<%:=_select.value%>)</option>
<% }) %>
</datalist>
<%}%>
<span onclick="handlerClean(this)">x</span>
</label>
<% } %>
<% if(item.dataType=='daterange'){%>
<label <%if(item.hidden){%>style="display:none;"<%}%>>
<span><%:=item.title%>:</span>
<input type="text" name="<%:=item.name%>" readonly datas="" datae="" value="<%:=item.value || ''%>">
</label>
<% } %>
<% }) %>
</script>
<!-- 头部的信息模板 -->
<script type="text/html">
<tr>
<% list.forEach(item=>{ %>
<% if(!item.hidden){ %>
<td>
<%:=item.title%>
<% if(item.attributes!=null){ %>
<% item.attributes.forEach(_attribute=>{ %>
<% if(_attribute.name=='orderby'){ %>
<span>
<i dataval="<%:=_attribute.args1%>"></i>
<i dataval="<%:=_attribute.args2%>"></i>
</span>
<% } %>
<% }) %>
<% } %>
</td>
<% } %>
<% }) %>
<td>操作</td>
</tr>
</script>
<!-- 表格的信息模板 -->
<script type="text/html">
<!-- 注意花括号百分比的是当前的模板 2个花括号的是占位，下一个的模板代码 -->
{{ list.forEach(item=>{ }}
<tr>
<% list.forEach(item=>{ %>
<% if(!item.hidden){ %>
<td <%if(item.class){%>class="<%:=item.class%>"<%}%>>
<% if(item.dataType=='image' ){ %>
<img src="{{:=item.<%:=item.name%>}}">
<% }else if(item.dataType=='head' ){ %>
<img src="{{:=item.<%:=item.name%>}}">
<% }else if(item.dataType=='switch' ){ %>
<input type="checkbox" onchange="handlerSwitchChange(this)" dataid="{{:=item.id}}" dataname="<%:=item.name%>" {{ if(item.<%:=item.name%>){ }}checked{{ } }} >
<% }else{ %>
<%if(item.html){%>
<%:=item.html%>
<%}else{%>
<span>
{{:=item?.<%:=item.name%>}}
</span>
<%}%>
<% } %>
</td>
<% } %>
<% }) %>
<td>
<!-- 这里填写编辑或者其他 -->
{{ if(config.model=='view'){ }}
<% if(config.menubox){%>
<a href="javascript:;" onclick="open_menu_box(this);" onmouseover="open_menu_box(this);" ><i></i></a>
<div 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></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></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></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)" dataid="{{:=item.id}}"><i></i>删除</a>
<% } %>
<!-- 自定义处理操作列菜单完成 -->
{{ } }}
{{ if(config.model=='select'){ }}
<a href="javascript:;" onclick="tap_select_item(this)"
dataid="{{:=item.id}}"><i></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">
<% list.forEach(item=>{%>
<div <%if(item.hidden){%> style="display:none;" <%}%>>
<div>
<label><%:=item.title%><%if(item.mark){%><span onclick="global_tap_mark('<%:=item.mark.model%>','<%:=item.mark.value%>')">?</span><%}%><%if(item.required){%><span>*</span><%}%></label>
<div>
<% if(item.dataType=="text" || item.dataType =='Guid'){ %>
<input name="<%:=item.name%>" <%if(item.required){%>required<%}%> type="text" value="<%:=item.value || ''%>" maxlength="<%:=item.maxlength%>" placeholder="<%:=item.placeholder%>" />
<span onclick="handlerClean(this)">x</span>
<%}%>
<% if(item.dataType=="number"){ %>
<input name="<%:=item.name%>" placeholder-class="p-form-placeholder" type="number" value="<%:=item.value || ''%>" placeholder="<%:=item.placeholder%>" />
<%if(item.unit){%>
<span><%:=item.unit%></span>
<%}%>
<%}%>
<% if(item.dataType=="fentoyuan"){ %>
<input name="<%:=item.name%>" 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%>" step="<%:=item.step%>" placeholder-class="p-form-placeholder" type="number" value="<%:=item.value || ''%>" placeholder="<%:=item.placeholder%>" />
<%if(item.unit){%>
<span><%:=item.unit%></span>
<%}%>
<%}%>
<% if(item.dataType=="textarea"){ %>
<textarea name="<%:=item.name%>" <%if(item.style){%>style="<%:=item.style%>"<%}%> <%if(item.required){%>required<%}%> <%if(item.maxlength>0){%>maxlength="<%:=item.maxlength%>"<%}%> placeholder="<%:=item.placeholder%>" ><%:=item.value || ''%></textarea>
<span onclick="handlerClean(this)">x</span>
<%}%>
<% if (item.dataType=="switch"){ %>
<input type="checkbox" <%if(item.value){%>checked<%}%> name="<%:=item.name%>">
<span><%:=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">
<%}%>
<% if(item.dataType=="daterange"){ %>
<input type="text" value="<%:=item.value || ''%>" name="<%:=item.name%>" datas="" datae="" <%if(item.required){%>required<%}%> placeholder="<%:=item.placeholder%>"
autocomplete="off">
<%}%>
<% if(item.dataType == "richtext"){ %>
<div>
<div></div>
<div></div>
</div>
<%}%>
<% if(item.dataType == "file"){ %>
<input type="file" 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 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 datanum="<%:=item.num%>" onchange="handlerUploadFile(this)" datatype="<%:=item.type%>" datasize="<%:=item.size%>" style="display:none;" />
<% if(item.num ==1){%>
<label for="<%:=item.name%>">
<img <%if(item.value){%>src="<%:=item.value%>"<%}%> >
<%if(!item.value){%>
<span>
<i></i>
</span>
<%}%>
</label>
<span><%:=item?.placeholder || ''%></span>
<% }else{ %>
<span><%:=item?.placeholder || ''%></span>
<ul>
<li><label for="<%:=item.name%>"><span>
<i></i>
</span></label></li>
<%if(item.images){%>
<%item.images.forEach(_img=>{%>
<li><img src="<%:=_img%>"><i onclick="handlerRemoveImageItem(this)"></i></li>
<%})%>
<%}%>
<!-- <li>
<img>
<i onclick="handlerRemoveImageItem(this)"></i>
</li> -->
</ul>
<% } %>
<%}%>
<% if(item.dataType=='outer'){ %>
<div>
<% if(item.dataFrom=='Int32' || item.dataFrom=='Int64'){ %>
<input type="number" style="display:none;" value="<%:=item.value%>" name="<%:=item.name%>">
<%}else{%>
<input type="text" style="display:none;" value="<%:=item.value%>" name="<%:=item.name%>">
<%}%>
<input type="text" dataname="<%:=item.name%>" value="<%:=item.display%>" onclick="handler_outer_value(this)" readonly placeholder="<%:=item.placeholder%>" >
<span onclick="handlerClean(this)">x</span>
</div>
<% } %>
<% if(item.dataType=='outers'){ %>
<div>
<input type="button" value="添加" dataname="<%:=item.name%>" onclick="handler_outer_value(this)">
<ul>
<% if(item.display){%>
<% item.display.forEach(_display=>{ %>
<li dataid="<%:=_display[item.display_id]%>">
<%:=_display[item.display_name]%>
<span 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" value="<%:=item.value%>" onclick="global_form_button_click(this,`<%:=config.className%>`,`<%:=item.name%>`);">
<span><%:=item?.placeholder || ''%></span>
<%}%>
<% if(item.dataType=="selects"){ %>
<ul name="<%:=item.name%>">
<% if(item.selects){ %>
<% item.selects.forEach(_select=>{ %>
<li value="<%:=_select.value%>"><%:=_select.name%></li>
<% }) %>
<%}%>
</ul>
<% } %>
<% if(item.dataType=="datalist"){ %>
<input type="text" name="<%:=item.name%>" value="<%:=item.value%>" list="<%:=item.name%>" placeholder="<%:=item.placeholder || ''%>">
<% if(item.selects){ %>
<datalist>
<% item.selects.forEach(_select=>{ %>
<option value="<%:=_select.value%>" ><%:=_select.name%>(<%:=_select.value%>)</option>
<% }) %>
</datalist>
<%}%>
<span onclick="handlerClean(this)">x</span>
<% } %>
</div>
</div>
</div>
<%})%>
</script>
所以说，针对不同项目的不同需求，或者说你们的个人习惯，可以对上面的代码进行修改以便适应自己的项目，比如我的项目一般不会用到date,一般用到的是datetime，所以我就没考虑date的情况了！
下一次将介绍在实际中遇到的问题，和PasteForm是如何处理问题的
From:https://www.cnblogs.com/pastespider/p/18434452
本文地址: http://www.shuzixingkong.net/article/2336
阶段 1：数学基础 学习大语言模型的核心在于对以下数学概念的掌握： 线性代数（矩阵、向量、矩阵乘法、特征值与特征向量） 微积分（导数、偏导数、链式法则） 概率与统计（条件概率、贝叶斯定理、期望值、方差） 优化（梯度下降、凸优化） 推荐学习资源： “Mathematics for Machine Le
仔细阅读示例: EnumTest.java，运行它，分析运行结果？ 代码如下： `public class EnumTest { public static void main(String[] args) { Size s=Size.SMALL; Size t=Size.LARGE; //s和t引
前言 今天大姚给大家分享一套基于.NET 8.0 + LayUI的快速开发框架，项目完全开源、免费（MIT License）且开箱即用：WaterCloud。 可完全实现二次开发让开发更多关注业务逻辑。既能快速提高开发效率，帮助公司节省人力成本，同时又不失灵活性。 项目介绍 WaterCloud是一
Taro的React Native端开发提供了两种开发方式，一种是将壳和代码分离，一种是将壳和代码合并在一起开发 壳是用来打包调试版或者发版安装包使用的 代码是运行在壳上的js代码 Taro壳子的代码仓库https://github.com/NervJS/taro-native-shell duxa
Sql介绍 与 Sql基础查询 SQL SQL也称为结构化查询语言(Structure Query Language),是一种用于管理和操作关系型数据库的标准化计算机语言,SQL语言广泛应用于各种关系型数据库系统(RDBMS)如Mysql,Oracle,Microsoft SQL Server等等
概述 在应用Sychronized关键字时需要把握如下注意点： 一把锁只能同时被一个线程获取，没有获得锁的线程只能等待； 每个实例都对应有自己的一把锁(this),不同实例之间互不影响；例外：锁对象是*.class以及synchronized修饰的是static方法的时候，所有对象公用同一把锁 sy
我们创建了一个新的 Windows Dev Center 页面，简化了我们的 Getting Started with WinUI 文档，并与 Visual Studio 合作来改善开发人员在工作负荷和模板方面的体验。
为确保重大节日期间，团队负责的测试环境服务器磁盘不会占用过高，导致频繁报警。我们要求在重大节假日前对服务器磁盘占用情况进行检查。如果发现占用过高，则需人为介入，进行相应清理。 一、检查要求 查看各分区占用情况，如果达到以下任一条件，则需要人为介入判断或处理： （1）磁盘使用率 > 90% （2