实习的时候,自己慢慢摸索使用Layui,刚开始看到这个框架就头疼,到现在只是了解了一部分,框架虽然精美,对于初学者来说没那么容易,经过两个星期的折腾,终于弄得像样了

以下部分内容,仅供参考!

页面


<html lang="zh-CN"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>

<!--
    ..............
    ..............
    ..............
    -->
<table class="layui-hide" id="test" lay-filter="test"></table>

<!--
    ..............
    ..............
    ..............
    -->

<script th:src="@{/layui/layui.js}" type="text/javascript" charset="utf-8"></script>

<script th:inline="none">
    layui.use(['table','util'],function () {
        var index = layer.load(0, {shade: false}); //0代表加载的风格,支持0-2
        var table = layui.table;
        table.render({
            elem: '#test'
            , url: '/user/getUsers'
            , toolbar: '#toolbarDemo'
            , cellMinWidth: 80
            , cellMinHeight: 500
            , limits: [10, 20, 50]
            , limit: 10
            , method: 'post'
            , defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , title: '用户数据表'
            , cols: [
                [
                    {type: 'checkbox', fixed: 'true'}
                    , {field: 'uid', title: 'ID', width: 60, sort: true, fixed: true}
                    , {field: 'username', title: '账号',width:100}
                    , {field: 'nickname', title: '昵称', width: 120}
                    , {field: 'password', title: '密码',width: 120}
                    , {field: 'answer', title: '答案', width:100}
                    , {field: 'phone', title: '电话', width: 80, sort: true}
                    , {field: 'address', title: '地址', width: 150}
                    , {field: 'registerDate', title: '注册日期', sort: true,width:160,templet:function(d){return layui.util.toDateString(d.registerDate,'yyyy-MM-dd HH:mm:ss');}}
                    , {field: 'status', title: '状态', templet: '#lockStatus',width:110, unresize: true}
                    , {field: 'permission', title: '权限', templet: '#lockPermission',width:110, unresize: true}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
                ]
            ]
            , id: 'testReload'
            , page: true
            , done: function (res, curr, count) {
                layer.closeAll('loading');
            }
        });

    });
</script>

Controller


@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired
    UserService service;


    @RequestMapping("/getUsers")
    public Object getUsers(@RequestParam(defaultValue = "1") int page, @RequestParam(defaultValue = "10")int limit,HttpSession session){
        Map<String,Object> map = new HashMap<>();
        if (session.getAttribute("user")!=null){
            User user = (User)session.getAttribute("user");
            if (user.getPermission().equals("1")){

                try {
                    PageInfo<User> pageInfo= service.getUsers(page,limit);
                    map.put("data", pageInfo.getList());
                    map.put("code", 0);
                    map.put("msg", "请求成功");
                    map.put("count", pageInfo.getTotal());

                }catch (Exception e){
                    map.put("code","404");
                    map.put("msg","保存失败");
                    map.put("close","false");
                }
                return map;
            }else {
                map.put("msg","forbidden");
                map.put("code","403");
                map.put("error","无权限");
            }
        }else {
            map.put("msg","forbidden");
            map.put("code","404");
            map.put("error","请求错误");
        }

        return map;
    }
}

Service的实现类


@Service
public class UserServiceImpl implements UserService {
    @Autowired
    UserMapper mapper;

    /**
     * 查询所有用户并且分页
     * @param page
     * @param limit
     * @return
     */
    @Transactional(propagation = Propagation.REQUIRED, readOnly = true)
    @Override
    public PageInfo<User> getUsers(int page,int limit) {
        PageHelper.startPage(page, limit);
        List<User> users = mapper.getUsers();
        PageInfo<User> pageInfo = new PageInfo<>(users);
        return pageInfo;
    }

}

service 接口


public interface UserService {
    PageInfo<User> getUsers(int page,int limit);
}

Mapper 接口


主要用Mybatis注解查询

@Repository
@Mapper
public interface UserMapper {

    @Select("select * from user")
    List<User> getUsers();
}

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.0.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.czl</groupId>
    <artifactId>spring-boot-order-food</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <thymeleaf.version>3.0.11.RELEASE</thymeleaf.version>
        <thymeleaf-layout-dialect.version>2.1.1</thymeleaf-layout-dialect.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.1</version>
        </dependency>
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.1.10</version>
        </dependency>

        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-autoconfigure</artifactId>
            <version>1.2.3</version>
        </dependency>
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.3</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.62</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/com.xfvape.uid/uid-generator -->
        <dependency>
            <groupId>com.xfvape.uid</groupId>
            <artifactId>uid-generator</artifactId>
            <version>0.0.4-RELEASE</version>
        </dependency>

    </dependencies>

    <!-- Maven仓库地址 (下载源) -->
    <repositories>
        <repository>
            <id>central-repos</id>
            <name>Central Repository</name>
            <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
            <releases>
                <enabled>true</enabled>
            </releases>
            <snapshots>
                <enabled>false</enabled>
            </snapshots>
        </repository>
    </repositories>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

好了,就这样吧,有问题评论一下!