LayUi前端框架用法讲解--增删改查实例

时间:2024-05-22 18:00:28

最近开发的一个项目前端框架使用的是Layui,以前没有使用过,在这里做一下记录。想写一篇详细的LayUi使用博客,写的基本准则是实用为主。尽可能详细的介绍每一个配置的作用。
既然是刚开始使用一个新的框架,那么熟悉这个框架最好的办法就是写一个增删改查实例,下面就介绍LayUi的增删改查实例,可能篇幅过长会分为几篇来写,尽可能写的详细一点吧。
还想提到的一点是,这个项目采用的开发方式是前后端分离开发。后台写接口,前台写页面。由于人比较少,我写完接口还得写页面,有点苦逼哦。不过这种开发思想还是非常棒的。开发人员分离,后台开发人员专门负责后台,再也不用写讨厌的前台页面了,写好接口就ok了。
前后端分离开发的核心思想就是:前端Html页面通过ajax调用后台的Restful风格的接口,并使用Json数据进行交互。
实现一个Table模块的增删改查,效果图如下:
列表页面
LayUi前端框架用法讲解--增删改查实例
可以看到列表上有新增,查看,编辑,删除,分页,多条件查询功能,这些功能也能满足基本需求了。
查看页面:
LayUi前端框架用法讲解--增删改查实例
编辑页面:
LayUi前端框架用法讲解--增删改查实例
删除页面:
LayUi前端框架用法讲解--增删改查实例
新增页面:
LayUi前端框架用法讲解--增删改查实例
大致的效果图就是这样子,自己从零开始写这个页面也是费了不少时间,接下来大概会写三四片博文介绍这个的具体写法。