使用layui模板填充页面数据

比眉伴天荒 2022-05-21 00:14 309阅读 0赞

layui，是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年秋，她区别于那些基于 [MVVM][] 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。（摘自：百度百科：layui）

本篇文章讲解使用layui模板来填充前台数据，首先在layui官网下载layui库，下载之后会得到名为layui的文件夹，其目录结构如图：

![70][]

写一个UserController，其中有如下两个方法：

/**
     * @author haozz
     * @date 2018/5/29 15:29
     * @description
     */
    @Controller
    @RequestMapping(value = "/user")
    public class UserCtrl {
        @Autowired
        private UserService userService;
    
        @GetMapping(value="/userList")
        public ModelAndView toUserList(){
            ModelAndView mv = new ModelAndView("user/userList");
            return mv;
        }
    
        @GetMapping(value="/getUserList")
        @ResponseBody
        public Map<String,Object> getUserList(){
            Map<String,Object> map = new HashMap<>();
            PageInfo<UserDomain> page = userService.findAllUser(1,10);
            List<UserDomain> list = page.getList();
            map.put("data",list);
            return map;
        }
    }

在user文件夹下新建userList.jsp：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>userList</title>
        <script src="../../js/jquery.min.js"></script>
        <script src="../../js/layui/layui.js"></script>
        <script src="../../js/user/userList.js"></script>
    </head>
    <body>
    <div>
        <table id="userList">
    
    
        </table>
    </div>
    
    <script id="userListTemp" type="text/html">
        {
       {# layui.each(d.list,function(index,item){ }}
            <tr>
                <td>{
       {item.userId}}</td>
                <td> | {
       {item.userName}}</td>
                <td> | {
       {item.password}}</td>
                <td> | {
       {item.phone}}</td>
            </tr>
        {
       {# }); }}
    </script>
    </body>
    </html>

这里需要引入之前下载好的layui库、jQuery，以及新建的userList.js：

$(function(){
        $.ajax({
            url:'/user/getUserList',
            type:'get',
            cache:false,
            dataType:'json',//返回的数据类型
            success: function(data){
                debugger;
                var users = data.data;
                initUserList(users||[]);
            },
            error:function(){
                alert("error");
            }
        })
    })
    
    function initUserList(list){
        layui.use('laytpl', function(){
            var temp= userListTemp.innerHTML;
            layui.laytpl(temp).render({list:list},function(html){
                userList.innerHTML += html;
            });
        });
    };

这里的代码很简单，就是ajax方法向UserController获取一个UserList。在initUserList方法中，我们使用了layui中的laytpl元素，首先获取了userList.jsp中已经定义的名为userListTemp的模板，然后以userList为入參，将该模板的内容遍历，之后赋给页面上id值为userList的元素。

页面访问：localhost:8080/user/userList

![70 1][]

[MVVM]: https://baike.baidu.com/item/MVVM/96310
[70]: /images/20220521/ddd412656e69478aa6ba78f54d2c64ff.png
[70 1]: /images/20220521/7261b69e2bc9431fb48ad1dd105b671d.png