layui中table展示后端数据

标签:浏览器   主页   格式   control   lin   查看   请求   ace   mapping   

layui中table展示后端数据

1.下载layui的资源文件

layui官网,下载解压后就是下面图里的文件

技术图片

把layui整个文件夹引入项目

2.在项目里引入下载好的文件

技术图片

3.启动项目,在主页发送一个ajax请求

<script>
    var xhr = new XMLHttpRequest();
    xhr.open("get","findAll");
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.responseText);
        }
    };
    xhr.send();
</script>

浏览器按F12查看请求

技术图片

好,请求有发出去了,404先别管,主要是这个请求成功发出去了

4.接下来写后台的代码

数据库

技术图片

DAO

(我这里用了MyBatis,如果用原生的JDBC则自己写流程)

@Repository
public interface BookDao {

    @Select("select * from book")
    List<Book> findAll();

}

Service

@Service
public class BookService {

    @Autowired
    private BookDao bookDao;

    @Override
    public List<Book> findAll() {
        return bookDao.findAll();
    }

}

去layui官网里把table的代码看看

技术图片

1.首先要在页面引入layui的css及js

2.URL是数据的接口,并且layui只认json的数据格式,所以controller返回的数据就要是json格式

3.cols里的field是要跟数据库查出来的列对应,只要后端返回的数据符合layui.table的格式,layui就会自动展示

所以我最终的页面是这样的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">

    <script>
        var xhr = new XMLHttpRequest();
        xhr.open("get","findAll");
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.responseText);
            }
        };
        xhr.send();
    </script>
</head>
<body>

<script src="layui/layui.js"></script>

<table id="demo" lay-filter="test"></table>

<script>
    layui.use(‘table‘, function(){
        var table = layui.table;

        //第一个实例
        table.render({
            elem: ‘#demo‘
            ,url: ‘/findAll‘
            ,cols: [[ //表头
                {field: ‘id‘, title: ‘ID‘, width:80,sort: true}
                ,{field: ‘name‘, title: ‘书名‘, width:160}
                ,{field: ‘price‘, title: ‘价格‘, width:80,sort: true}
            ]]
        });

    });
</script>

</body>
</html>

接下来编写controller层的代码

Controller

@Controller
@RequestMapping()
public class BookController {

    @Autowired
    private BookService bookService;

    @RequestMapping(value="findAll",produces="text/html;charset=utf-8")
    public @ResponseBody String findAll(){
        List<Book> bookList = bookService.findAll();
        String jsonString = JSON.toJSONString(bookList);
        //下面这里这个格式是在网上找的
        String books="{\"code\":\"0\",\"msg\":\"ok\",\"count\":100,\"data\":"+jsonString+"}";
        System.out.println("-----"+books);
        return books;
    }
}

这样我们就把json格式的数据返回去前端了

启动项目,浏览器进入主页

技术图片

成功展示了。

layui中table展示后端数据

标签:浏览器   主页   格式   control   lin   查看   请求   ace   mapping   

原文地址:https://www.cnblogs.com/heatainf/p/14118973.html

版权声明:完美者 发表于 2020-12-16 12:33:32。
转载请注明:layui中table展示后端数据 | 完美导航

暂无评论

暂无评论...