WTM框架使用技巧之：Layui版本嫁接Vue+ElementUI[通俗易懂]

全栈程序员-用户IM • 2022年6月25日下午5:36 • 未分类

WTM框架使用技巧之：Layui版本嫁接Vue+ElementUI[通俗易懂]为什么要这样做layui版本具备很多优点：组件齐全、ide提醒程度高、代码量少、依赖少、编译快、运行快，非常适合一个人的开发全队。但它也有很多缺点，比如说组件灵活度低、可控性差。受blazorssr的思路启发，将vue嫁接进layui版本中，在大部分常规页面中，保留layui的快速高效用法。在极少部分需要大量定制化的页面，采用vue+elementUI的方式编写，既能保证开发效率，又能解决复杂页面编写。因此本文拿一个页面改造的例子，旨在抛砖引玉。准备工作在_Layout中引入包_Layo

大家好，又见面了，我是你们的朋友全栈君。

为什么要这样做

layui版本具备很多优点：组件齐全、ide提醒程度高、代码量少、依赖少、编译快、运行快，非常适合一个人的开发团队。
但它也有很多缺点，比如说组件灵活度低、可控性差。
受blazor ssr的思路启发，将vue嫁接进layui版本中，在大部分常规页面中，保留layui的快速高效用法。在极少部分需要大量定制化的页面，采用vue+elementUI的方式编写，既能保证开发效率，又能解决复杂页面编写。
因此本文拿一个页面改造的例子，旨在抛砖引玉。

准备工作

在_Layout中引入包

_Layout.cshtml文件位于Views\Shared\_Layout.cshtml

操作步骤

引入element-ui.css
引入vue.js
引入element-ui.js

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

本篇文章使用的vue版本为2.6.14
如下图示
在这里插入图片描述

改造一个index.cshtml页面

原页面代码为

@model ReaTms.ViewModel.TruckerVMs.TruckerListVM
@inject IStringLocalizer<Program> Localizer;

<wt:searchpanel vm="@Model" reset-btn="true">
	<wt:row items-per-row="ItemsPerRowEnum.Three">
		<wt:textbox field="Searcher.TruckerIdentify" />
		<wt:textbox field="Searcher.TruckerName" />
		<wt:textbox field="Searcher.TruckerPhone" />
	</wt:row>
</wt:searchpanel>
<wt:grid vm="@Model" url="/Trucker/Search" />

显示效果为
在这里插入图片描述
但我不满意layui的表格，功能太少了,准备使用element-ui的table来替代。
开始改造：

处理原页面

干掉<wt:grid/>组件
将<wt:grid vm="@Model" url="/Trucker/Search" />打上注释，或者干脆直接删掉。
重写<wt:searchpanel/>的搜索按钮点击事件
我们知道，wtm中<wt:searchpanel/>的搜索按钮默认id为wtSearchBtn_@Model.UniqueId（如果对这一点不了解同学，请查看源码src/WalkingTec.Mvvm.TagHelpers.LayUI/Form/SearchPanelTagHelper.cs），那么我们只要拿到这个id，在页面加载的时候，卸载掉框架默认的点击事件，重新绑定一个新的点击事件就可以了。

这里为什么要卸载掉点击事件呢？因为默认的点击事件会调用layui.table去加载数据，而我们在第一步中已经将<wt:grid/>组件移除了，如果不卸载掉默认事件的话，点击按钮会报错。

参照以下代码：

@model ReaTms.ViewModel.TruckerVMs.TruckerListVM
@inject IStringLocalizer<Program> Localizer;

<wt:searchpanel vm="@Model" reset-btn="true">
	<wt:row items-per-row="ItemsPerRowEnum.Three">
		<wt:textbox field="Searcher.TruckerIdentify" />
		<wt:textbox field="Searcher.TruckerName" />
		<wt:textbox field="Searcher.TruckerPhone" />
	</wt:row>
</wt:searchpanel>
<script> $().ready(() => { 
      $('#wtSearchBtn_@Model.UniqueId') .off('click') .on('click', e => { 
      e.stopPropagation();//阻止点击事件继续冒泡，使pannel不折叠 //查询方法写在这里，下文会继续讲到 } ); }); </script>

定义一个vue的根容器。切记：不要在这个容器中写任何<script>代码，否则vue会报警告

<div id="app">
</div>

创建vue实例,并创建表格数据对象
注意：在cshtml文件中不能使用vue的事件绑定符号@，请使用全称v-on:

	var app = new Vue({ 
   
		el: '#app',
		data: { 
   
			TableItems: { 
   } //表格数据对象
		},
		methods: { 
   
		}
	});

到这一步后，页面的样子是这样的

@model ReaTms.ViewModel.TruckerVMs.TruckerListVM
@inject IStringLocalizer<Program> Localizer;

<wt:searchpanel vm="@Model" reset-btn="true">
	<wt:row items-per-row="ItemsPerRowEnum.Three">
		<wt:textbox field="Searcher.TruckerIdentify" />
		<wt:textbox field="Searcher.TruckerName" />
		<wt:textbox field="Searcher.TruckerPhone" />
	</wt:row>
</wt:searchpanel>
<div id="app">

</div>
<script> $().ready(() => { 
      $('#wtSearchBtn_@Model.UniqueId') .off('click') .on('click', e => { 
      e.stopPropagation();//阻止点击事件继续冒泡，使pannel不折叠 //查询方法写在这里，下文会继续讲到 } ); }); var app = new Vue({ 
      el: '#app', data: { 
      TableItems: { 
     } //表格数据对象 }, methods: { 
      } }); </script>

创建element-ui的table
注意这里绑定的是TableItems.Data，这是因为wtm后端传过来的数据是这种格式的。

<div id="app">
	<el-table :data="TableItems.Data">
		<el-table-column prop="TruckerName" label="司机" />
		<el-table-column prop="TruckerPhone" label="电话" />
		<el-table-column prop="TruckerIdentify" label="身份证" />
	</el-table>
</div>

给第1步中的搜索按钮编写查询方法。

使用ff.GetFormData(formId)的形式，拿到查询条件的表单数据。
formId可以根据wtm的约定，使用wtForm_@Model.UniqueId拿到。
使用$.post访问后台数据接口，拿到数据后将数据赋值给vue的TableItems对象。

<script>
	$().ready(() => { 
   
		$('#wtSearchBtn_@Model.UniqueId')
			.off('click')
			.on('click', e => { 
   
				e.stopPropagation();//阻止点击事件继续冒泡，使pannel不折叠
				//查询方法写在这里，下文会继续讲到
				let data = ff.GetFormData('wtForm_@Model.UniqueId');//拿到查询条件的表单数据
				$.post('/Trucker/Search', data, resp => { 
   
					app.TableItems = resp;
					},'json');
			}
		);
	});
	var app = new Vue({ 
   
		el: '#app',
		data: { 
   
			TableItems: { 
   } //表格数据对象
		},
		methods: { 
   
		}
	});
</script>

至此，我们的页面就跑起来了。

7. 添加分页组件

分别绑定:current-page="TableItems.Page"、:total="TableItems.Count"

	<el-pagination :current-page="TableItems.Page" :total="TableItems.Count" layout="total, sizes, prev, pager, next, jumper">
	</el-pagination>

再次刷新一下页面看下效果，分页组件能够读取当前页面和总条数了，但所有数据都显示出来了，并没有真正分页。

完善分页组件的功能-分页显示

首先创建一个对象，用来对应wtm中的Searcher,这里只需创建Page和Limit字段就行了，表单字段可以使用对象复制功能，复制过来

		data: { 
   
			TableItems: { 
   }, //表格数据对象
			TableSearcher: { 
    //对应wtm中的Searcher
				"Searcher.Page": 1,
				"Searcher.Limit": 10,
			}
		},

对第6步的查询方法进行封装，封装的过程中，使用$.extend(newobj,oldobj)的方法，将表单数据组装成一个分页查询对象

methods: { 
   
	onSearch() { 
   
		//将表单数据复制到this.TableSearcher中，组装成一个完整的查询对象
		$.extend(this.TableSearcher, ff.GetFormData('wtForm_@Model.UniqueId'));	
		$.post('/Trucker/Search', this.TableSearcher, resp => { 
   
			this.TableItems = resp;
			},'json');
	}
}

此时页面能够实现分页显示了，但还不能实现跳转页面
9. 完善分页组件的功能-跳转页面

上一步完成后，页面只是实现了分页，但还不能跳转，我们继续实现它
创建一个页面跳转函数onPagination(newPage)

		methods: { 
   
			onSearch() { 
   
				//将表单数据复制到this.TableSearcher中，组装成一个完整的查询对象
				$.extend(this.TableSearcher, ff.GetFormData('wtForm_@Model.UniqueId'));
				$.post('/Trucker/Search', this.TableSearcher, resp => { 
   
					this.TableItems = resp;
					},'json');
			},
			onPagination(newPage) { 
   
				this.TableSearcher["Searcher.Page"] = newPage;
				this.onSearch();
			}
		}

在el-pagination添加跳转事件，v-on:current-change="onPagination"、 v-on:size-change="onPagination"

	<el-pagination :current-page="TableItems.Page" :total="TableItems.Count" :page-size="10" layout="total, sizes, prev, pager, next, jumper" v-on:current-change="onPagination" v-on:size-change="onPagination">
	</el-pagination>

此时，已经实现了页面分页，分页跳转

页面的完整代码为

@model ReaTms.ViewModel.TruckerVMs.TruckerListVM
@inject IStringLocalizer<Program> Localizer;
<wt:searchpanel vm="@Model" reset-btn="true">
<wt:row items-per-row="ItemsPerRowEnum.Three">
<wt:textbox field="Searcher.TruckerIdentify" />
<wt:textbox field="Searcher.TruckerName" />
<wt:textbox field="Searcher.TruckerPhone" />
</wt:row>
</wt:searchpanel>
<div id="app">
<el-table :data="TableItems.Data">
<el-table-column prop="TruckerName" label="司机" />
<el-table-column prop="TruckerPhone" label="电话" />
<el-table-column prop="TruckerIdentify" label="身份证" />
</el-table>
<el-pagination :current-page="TableItems.Page" :total="TableItems.Count" :page-size="10" layout="total, sizes, prev, pager, next, jumper" v-on:current-change="onPagination" v-on:size-change="onPagination">
</el-pagination>
</div>
<script> $().ready(() => { 
 $('#wtSearchBtn_@Model.UniqueId') .off('click') .on('click', e => { 
 e.stopPropagation();//阻止点击事件继续冒泡，使pannel不折叠 app.onSearch(); } ); }); var app = new Vue({ 
 el: '#app', data: { 
 TableItems: { 
}, //表格数据对象 TableSearcher: { 
 //对应wtm中的Searcher "Searcher.Page": 1, "Searcher.Limit": 10 } }, methods: { 
 onSearch() { 
 //将表单数据复制到this.TableSearcher中，组装成一个完整的查询对象 $.extend(this.TableSearcher, ff.GetFormData('wtForm_@Model.UniqueId')); $.post('/Trucker/Search', this.TableSearcher, resp => { 
 this.TableItems = resp; },'json'); }, onPagination(newPage) { 
 this.TableSearcher["Searcher.Page"] = newPage; this.onSearch(); } } }); </script>

增加一个Descriptions（描述列表）

想实现效果：点击表格的行，能够在下方实现这行数据的明细

创建当前行的绑定对象SelectedRow

data: { 

SelectedRow: null,
TableItems: { 
}, //表格数据对象
TableSearcher: { 
 //对应wtm中的Searcher
"Searcher.Page": 1,
"Searcher.Limit": 10
}
},

配置el-table的highlight-current-row，实现点击行自动选中
给el-table的current-change事件创建回调函数onCurrentChange(currentRow, oldCurrentRow)，

		methods: { 

onSearch() { 

//将表单数据复制到this.TableSearcher中，组装成一个完整的查询对象
$.extend(this.TableSearcher, ff.GetFormData('wtForm_@Model.UniqueId'));
$.post('/Trucker/Search', this.TableSearcher, resp => { 

this.TableItems = resp;
},'json');
},
onPagination(newPage) { 

this.TableSearcher["Searcher.Page"] = newPage;
this.onSearch();
},
onCurrentChange(currentRow, oldCurrentRow) { 

this.SelectedRow = currentRow;
}
}

增加一个el-descriptions

	<el-descriptions title="司机信息" v-if="SelectedRow!=null">
<el-descriptions-item label="司机">{
{SelectedRow.Trucker}}</el-descriptions-item>
<el-descriptions-item label="手机号">{
{SelectedRow.TruckerPhone}}</el-descriptions-item>
<el-descriptions-item label="身份证">{
{SelectedRow.TruckerIdentify}}</el-descriptions-item>
<el-descriptions-item label="创建人">
<el-tag size="small">{
{SelectedRow.CreateBy}}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="创建时间">{
{SelectedRow.CreateTime}}</el-descriptions-item>
<el-descriptions-item label="备注">{
{SelectedRow.Remark}}</el-descriptions-item>
</el-descriptions>

此时，页面效果如下图

增加工具栏及权限控制

使用Wtm.IsAccessable来控制权限
使用ff.OpenDialog()来打开一个窗口

	<el-row>
@if (Model.Wtm.IsAccessable("/Trucker/Create")) {
<el-button type="primary" onclick="ff.OpenDialog('/Trucker/Create',1,'创建',1000)">创建</el-button>
}
</el-row>

此时能够打开窗口创建数据，但创建完成后，数据不能自动刷新。
3. 在控制器中，重写刷新页面的js函数AddCustomScript("app.onSearch();");。

        [HttpPost]
[ActionDescription("Sys.Create")]
public ActionResult Create(TruckerVM vm)
{ 

if (!ModelState.IsValid)
{ 

return PartialView(vm);
}
else
{ 

vm.DoAdd();
if (!ModelState.IsValid)
{ 

vm.DoReInit();
return PartialView(vm);
}
else
{ 

return FFResult().CloseDialog().AddCustomScript("app.onSearch();");
}
}
}

至此，页面能够自动刷新了，其他工具栏按钮可参照该方法创建，复杂功能可参照element的官方案例。
本文仅就这问题谈些浅显的看法，意在抛砖引玉，以就教于各界专家。感谢WTM的作者刘亮，免费授权使用如此优秀的框架，造福大家。https://wtmdoc.walkingtec.cn/
最终代码

@model ReaTms.ViewModel.TruckerVMs.TruckerListVM
@inject IStringLocalizer<Program> Localizer;
<wt:searchpanel vm="@Model" reset-btn="true">
<wt:row items-per-row="ItemsPerRowEnum.Three">
<wt:textbox field="Searcher.TruckerIdentify" />
<wt:textbox field="Searcher.TruckerName" />
<wt:textbox field="Searcher.TruckerPhone" />
</wt:row>
</wt:searchpanel>
<div id="app">
<el-row>
@if (Model.Wtm.IsAccessable("/Trucker/Create")) {
<el-button type="primary" onclick="ff.OpenDialog('/Trucker/Create',1,'创建',1000)">创建</el-button>
}
</el-row>
<el-table :data="TableItems.Data" highlight-current-row v-on:current-change="onCurrentChange">
<el-table-column prop="TruckerName" label="司机" />
<el-table-column prop="TruckerPhone" label="电话" />
<el-table-column prop="TruckerIdentify" label="身份证" />
</el-table>
<el-pagination :current-page="TableItems.Page" :total="TableItems.Count" :page-size="10" layout="total, sizes, prev, pager, next, jumper" v-on:current-change="onPagination" v-on:size-change="onPagination">
</el-pagination>
<el-descriptions title="司机信息" v-if="SelectedRow!=null">
<el-descriptions-item label="司机">{
{SelectedRow.TruckerName}}</el-descriptions-item>
<el-descriptions-item label="手机号">{
{SelectedRow.TruckerPhone}}</el-descriptions-item>
<el-descriptions-item label="身份证">{
{SelectedRow.TruckerIdentify}}</el-descriptions-item>
<el-descriptions-item label="创建人">
<el-tag size="small">{
{SelectedRow.CreateBy}}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="创建时间">{
{SelectedRow.CreateTime}}</el-descriptions-item>
<el-descriptions-item label="备注">{
{SelectedRow.Remark}}</el-descriptions-item>
</el-descriptions>
</div>
<script> $().ready(() => { 
 $('#wtSearchBtn_@Model.UniqueId') .off('click') .on('click', e => { 
 e.stopPropagation();//阻止点击事件继续冒泡，使pannel不折叠 app.onSearch(); } ); }); var app = new Vue({ 
 el: '#app', data: { 
 SelectedRow: null, TableItems: { 
}, //表格数据对象 TableSearcher: { 
 //对应wtm中的Searcher "Searcher.Page": 1, "Searcher.Limit": 10 } }, methods: { 
 onSearch() { 
 //将表单数据复制到this.TableSearcher中，组装成一个完整的查询对象 $.extend(this.TableSearcher, ff.GetFormData('wtForm_@Model.UniqueId')); $.post('/Trucker/Search', this.TableSearcher, resp => { 
 this.TableItems = resp; },'json'); }, onPagination(newPage) { 
 this.TableSearcher["Searcher.Page"] = newPage; this.onSearch(); }, onCurrentChange(currentRow, oldCurrentRow) { 
 this.SelectedRow = currentRow; } } }); </script>

控制器

        #region Create
[ActionDescription("Sys.Create")]
public ActionResult Create()
{ 

var vm = Wtm.CreateVM<TruckerVM>();
return PartialView(vm);
}
[HttpPost]
[ActionDescription("Sys.Create")]
public ActionResult Create(TruckerVM vm)
{ 

if (!ModelState.IsValid)
{ 

return PartialView(vm);
}
else
{ 

vm.DoAdd();
if (!ModelState.IsValid)
{ 

vm.DoReInit();
return PartialView(vm);
}
else
{ 

return FFResult().CloseDialog().AddCustomScript("app.onSearch();");
}
}
}
#endregion

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/152833.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...

全栈程序员-用户IM

0 0

Tomcat学习—Tomcat7 修改/webapps/ROOT发布路径（Linux和windows环境）

在web开发中经常使用到的一个容器就是Tomcat，大多数人在本地开发使用的是windows 环境，而当项目真正远行，一般就是在Linux服务器上。下面主要讲解Linux服务器上修改Tomcat部署应用程序的发布路径！现在应用服务器上用的笔记多的还是Tomcat7，就以Tomcat为例！Tomcat7和之前的版本一样，默认发布程序是在$Tomcat/webapp/ROOT 下面，就是当我们启动T

全栈程序员-用户IM
2022年2月24日
实战篇：Linux 安装 Oracle 11GR2 数据库保姆级教程[通俗易懂]

实战篇：Linux 安装 Oracle 11GR2 数据库保姆级教程[通俗易懂]没接触Linux的朋友不用害怕，跟着本篇文章一步步操作，安装Oracle如喝水般简单且标准。

全栈程序员-用户IM
2022年5月7日
基于 vue 实现的电商后台管理系统

基于 vue 实现的电商后台管理系统源码地址：https://github.com/Hero601/vue_shop后端接口：https://goal.lanzous.com/b01c5hhsb密码:5ees免费的小星星点一个吧~

全栈程序员-用户IM
2022年5月6日
RT-Thread FinSH控制台添加自定义msh命令原理「建议收藏」

RT-Thread FinSH控制台添加自定义msh命令原理「建议收藏」FinSH是RT-Thread的命令行组件，提供一套供用户在命令行调用的操作接口，主要用于调试或查看系统信息。它可以使用串口/以太网/USB等与PC机进行通信。FinSH提供了多个宏接口来导出自定义命令，导出的命令可以直接在FinSH中执行。自定义的msh命令，可以在msh模式下被运行，将一个命令导出到msh模式可以使用如下宏接口：MSH_CMD_EXPORT(name,desc);示例如下：voidhellort(void){rt_kpr

全栈程序员-用户IM
2022年5月21日
SpringBoot事务配置管理[通俗易懂]

SpringBoot事务配置管理[通俗易懂]1.事务使用功能场景：由于数据操作在顺序执行的过程中，线上可能有各种无法预知的问题，任何一步操作都有可能发生异常，异常则会导致后续的操作无法完成，此时由于业务逻辑并未正确的完成，所以在之前操作数据库的动作并不可靠，需要在这种情况下进行数据的回滚。事务的作用就是为了保证用户的每一个操作都是可靠的，事务中的每一步操作都必须成功执行，只要有发生异常就回退到事务未进行操作的状态。事务管理是SpringBoot框架中最为常用的功能之一，我们在实际应用开发时，基本上在service层处理业务逻辑的时候都要加上事

全栈程序员-用户IM
2022年6月7日
广州java培训哪家教育机构比较好_广州java培训课程

广州java培训哪家教育机构比较好_广州java培训课程如今社会上的就业竞争非常激烈，许多公司都在不断的提高对求职者的需求，大家也逐渐的开始意识到掌握一项适用的技能是非常重要的，一技之长不仅能够给我们带来就业上的巨大优势，还能提高我们的薪资收入，让我们更上一层楼。正因如此，越来越多的同学选择在就业之前通过专业的IT培训机构掌握一项实用的专业技能，而Java成为了进入IT行业的敲门砖，而目前每个城市的Java培训机构都有很多，让人难以选择，经调查，大部分的同学会通过一些排名榜进行参考，而今天，排名榜小编为大家主要介绍广州Java培训机构排名，主要通过教学质量，

全栈程序员-用户IM
2022年10月3日

WTM框架使用技巧之：Layui版本嫁接Vue+ElementUI[通俗易懂]

为什么要这样做

准备工作

在_Layout中引入包

改造一个index.cshtml页面

处理原页面

增加一个Descriptions（描述列表）

增加工具栏及权限控制

相关推荐

Tomcat学习—Tomcat7 修改/webapps/ROOT发布路径（Linux和windows环境）

实战篇：Linux 安装 Oracle 11GR2 数据库保姆级教程[通俗易懂]

基于 vue 实现的电商后台管理系统

RT-Thread FinSH控制台添加自定义msh命令原理「建议收藏」

SpringBoot事务配置管理[通俗易懂]

广州java培训哪家教育机构比较好_广州java培训课程

发表回复