WTM框架使用技巧之：Layui版本嫁接Vue+ElementUI

最新推荐文章于 2024-04-26 09:13:50 发布
最新推荐文章于 2024-04-26 09:13:50 发布
阅读量1.9k 收藏 12
点赞数 5
分类专栏： WTM 文章标签： c#
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/StupidZhuang/article/details/119777798
版权

为什么要这样做

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

准备工作

在_Layout中引入包

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

操作步骤

  1. 引入element-ui.css
  2. 引入vue.js
  3. 引入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来替代。
开始改造：

处理原页面

  1. 干掉<wt:grid/>组件
    将<wt:grid vm="@Model" url="/Trucker/Search" />打上注释，或者干脆直接删掉。

  2. 重写<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>
  1. 定义一个vue的根容器。切记：不要在这个容器中写任何<script>代码，否则vue会报警告
<div id="app">
</div>
  1. 创建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>
  1. 创建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. 给第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>

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

  1. 完善分页组件的功能-分页显示
  • 首先创建一个对象，用来对应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>

此时，页面效果如下图
在这里插入图片描述

增加工具栏及权限控制

  1. 使用Wtm.IsAccessable来控制权限
  2. 使用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
rea-zhuang
关注
  • 5
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
WTM：使用WTM快速编写.netcore应用！
02-05
它支持LayUI，React，VUE。 WTM具有内置的代码生成器以最大化开发效率。 它是用于高效Web开发的强大工具。 CI构建状态 平台 构建服务器 开发包 主人身份 发展状况 Azure管道 Windows / Linux / OSX v2.2.300 ...
WTM-Algiers-Website:WTM阿尔及尔官方网站
05-10
基于盖茨比的默认启动器WTM阿尔及尔官方网站克隆项目。 开始开发。 导航到新站点的目录并启动。 cd WTM-Algiers-Website/gatsby develop 打开源代码并开始编辑！ 您的站点现在在http://localhost:8000 ！ 注意：您还...
LayUI框架——选项卡等element组件使用
让优秀成为一种习惯！
07-12 1459
在项目中我们需要编写许多页面，在页面中有许多元素需要自动去完成一些处理，譬如导航菜单的小滑块、Tab的切换等操作。他们往往不需要去单独调用一个方法来开启一项功能，而页面上恰恰有太多这样的小交互，所以在Layui框架中统一归类为element组件。跟表单一样，基于元素属性和事件驱动的接口书写方式。element。
使用 Vue + LayUI 做后台管理、RESTful 交互
热门推荐
IT小村
08-22 9万+
一、前言 1、之前使用了 React/Angular，使用起来显然是比 jQuery 好多了，但时隔半年，最近再次深入研究了 vue，很惊喜。 故以后选择 MVC/MVVM 框架的话，建议首选 vue，主要是其代码结构，清晰简单。 2、使用 vue + layui 了，但 layui 里边的 layui.js 模块 vue.js 冲突， 因此放弃使用 layui.js，导致很多高级...
el-descriptions固定列宽度等样式
最新发布
Apple23233的博客
04-26 963
【代码】el-descriptions固定列宽度等样式。
vue项目使用layui的树形表格treeTable扩展组件
qq_41897351的博客
02-16 2639
vue项目使用layui的树形表格treeTable扩展组件 首先我的vue项目vue脚手架创建的。 第一步（下载）：        下载扩展组件treeTable的js，treeTable有3个版本，我个人推荐使用最新版本，即3.0版本。        前两个版本在github上面有，[下载地址](https://github.com/whvcse/treetable
vue 中使用 layui
mygoes
07-18 3063
vue 中使用 layui 1. 安装 : 根据 layui 官网 介绍可以用命令行直接安装 . 我用 npm 安装后总会有报错 , 就没成功过一次 . 解决办法 : 去 layui 官网首页 下载文件包 . 2. 拖动 : 将下载的文件包解压后 , 把整个解压文件夹拖到 vue 项目的静态资源文件夹 ( piblic 或 static ) 里 . 拖到其它位置会报错 error 'layui' is not defined no-undef 3. 导入 : 在 vue 项目的 静态资源文件夹 下的 ind
解决Layui中layer报错的问题
01-19
解决方法，查看网上说名，是非独立版导致直接使用layer导致，只需要在使用时加一说明，申明一下使用。 layui.use(['element','layer'], function(){ var element = layui.element,layer=layui.layer; //一些事件...
开源框架实例使用一高仿丁香医生的界面.rar
07-30
开源框架实例使用一高仿丁香医生的界面.rar,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
wtm_bot：电影测验Discord机器人
02-11
该测验使用上的数据显示电影的镜头，然后让播放器猜电影。 安装 要安装该机器人，请获取其源代码（ git clone https://github.com/sephii/wtm_bot ）并使用python3 -m pip install /path/to/wtm_bot_dir将其安装在...
基于layui内置模块(element常用元素的操作)
10-16
今天小编就为大家分享一篇基于layui内置模块(element常用元素的操作)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui使用vue的例子
06-13
layui使用vue的例子包含基本的页面增删改查,推荐给刚接触vue的小伙伴
layui源码详细分析系列之element模块以及自定义事件机制
玉案轩窗的博客
07-27 1万+
element内置模块时layui框架中页面元素的交互功能的实现，主要是选项卡、面板、导航等的交互的实现。下面先分析element模块的组织结构，具体如下图所示： 从上图中可以看出，element模块使用该框架自己的模块加载机制来加载该模块。该框架内置的模块都是采用面向对象的编程，该模块也是，定义了Element构造函数，对外的API接口都定义在Element的原型对象上，使用JQuery来绑定一
layui——element模块
lxw1005192401的博客
10-12 1万+
介绍 对页面中一部分元素（tab、progress、nav、breadcrumb、collapse）的操作需要处理接口，layui统一放到element模块处理； 1 预设元素属性 我们通过自定义元素属性来作为元素的功能参数，他们一般配置在容器外层；element模块支持的元素如下表： 属性名 可选值 说明 lay-filter 任意字符 事件过滤器（公用属性），主要用于事件的精确...
layui.element--前端 UI 框架
刘荣丹的日志
08-06 2838
layui 兼容人类正在使用的全部浏览器（IE6/7除外），可作为 PC 端后台系统与前台界面的速成开发方案。 安装 1、npm install layui-src 2、https://www.layui.com download 放在应用中 使用 引入以下两文件 ./layui/css/layui.css ./layui/layui.js //提示：如果是采用非模块化方式（最下面有讲解），此处可...
VUE中使用layui
work_fei的专栏
09-11 5018
vue + layui
LayUI 完美兼容Vue.js
weixin_30436891的博客
12-27 2281
<div id="app"> <form class="layui-form" action=""> <div class="layui-form-item"> <div class="layui-input-block"> <select name="city" lay-verify="required"&gt...
vue项目中使用layui
u012732909的博客
03-30 1万+
背景 项目是vue+element UI 一、引入 第1种方法： 从www.layuiweb.com或https://gitee.com/sentsin/layui/tree/master/下载 复制dist文件夹到项目的public目录下重命名为layui 第2种方法： 在项目中安装layui-src依赖 yarn add layui-src | npm install layui-src 在node_modules下找到layui-src下的build文件夹复制到项...
2021前端几大UI主流框架排行榜
zuo_kaizheng的博客
06-03 2万+
在前端项目开发过程中，总是会引入一些UI框架，已为方便自己的使用，很多大公司都有自己的一套UI框架，下面就是最近经常使用并且很流行的UI框架。 一.layui 流行指数：★★★★★★★ layui是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。 官网地址:https://www.layui.com Github:
wtm框架第三方登录
09-15
在WTM框架中，你可以使用OAuth2.0协议来实现第三方登录，常见的第三方登录包括微信、QQ、微博等。通过集成第三方登录，用户可以使用他们在第三方平台上的账号进行登录和授权操作，从而减少用户的注册和登录步骤，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值