AmdasyBlog > LayUI练手

LayUI练手

2021-01-23 

1
2
3
4
5
6
7
8
9
10
11
12
13

├─css //css目录
  │  │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
  │  │  ├─laydate
  │  │  ├─layer
  │  │  └─layim
  │  └─layui.css //核心样式文件
  ├─font  //字体图标目录
  ├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
  │─lay //模块核心目录
  │  └─modules //各模块组件
  │─layui.js //基础核心库
  └─layui.all.js //包含layui.js和所有模块的合并文件

1、下载layUI文件

下载地址：https://www.layui.com/

下载之后解压

image-20200804173917494

像这样;

image-20200804174007116

2、在官方文档中复制代码

文档地址：https://www.layui.com/doc/

举个栗子：

image-20200804174215660

image-20200804174411582

F12查看请求方式

image-20200804174525578

image-20200804174724097

image-20200804174836013

3、开始仿照

3.1、编写servlet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
package com.gec.controller;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.gec.domain.Product;
import com.gec.service.ProductService;
import com.gec.service.ProductServiceImpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.HashSet;
import java.util.List;


@WebServlet("/product")
public class ProduectServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }

        ProductService ps=new ProductServiceImpl();

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        resp.setCharacterEncoding("utf-8");

        String pageNum = req.getParameter("page");
        String pageSize = req.getParameter("limit");
        int pageNum2=1;
        int pageSize2=10;
        if("".equals(pageNum)||null==pageNum){

        }else{
            pageNum2=Integer.parseInt(pageNum);
        }
        if("".equals(pageSize)||null==pageSize){}else{
            pageSize2=Integer.parseInt(pageSize);
        }


        
        //dao层用mybatis
        List<Product> list = ps.findAllByPage(pageNum2,pageSize2);
        
        //用来存放需要传递的参数
        HashMap<Object, Object> map = new HashMap<>();
      	//仿照上前端格式
        map.put("code",0);
        map.put("msg","");
        map.put("count",50);
        //将查询的数据放入map
        map.put("data",list);
        
        //将数据装换成json数据
        ObjectMapper objectMapper=new ObjectMapper();
        String s1 = objectMapper.writeValueAsString(map);
        
        //通过响应输出流，将json数据传递给前端
        resp.getWriter().write(s1);

    }
}

前端代码：(虽然是jsp页面，因为单纯使用ajax,json数据交互,所以可以用html效果也一样)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>product</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>
<table id="demo" lay-filter="test"></table>

<script src="/layui/layui.js"></script>
<script>
    //调用类的
    layui.use('table', function(){
        var table = layui.table;

        //第一个实例
        table.render({
            //绑定标签
            elem: '#demo'
            ,height: 312
            ,url: '${pageContext.request.contextPath}/product' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'pid', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'pname', title: '名称', width:80}
                ,{field: 'marketPrice', title: '标价', width:80, sort: true}
                ,{field: 'shopPrice', title: '实际价格', width:80}
                ,{field: 'pdate', title: '上柜日期', width: 177}
                ,{field: 'pdesc', title: '描述', width: 80, sort: true}
                ,{field: 'cid', title: '类型', width: 80, sort: true}
                ,{field: 'work', title: '职业', width: 80}
                ,{field: 'wealth', title: '财富', width: 135, sort: true}
            ]]
        });
    });
</script>
</body>
</html>