LayUi框架

最新推荐文章于 2024-05-24 23:39:00 发布

囨誌

最新推荐文章于 2024-05-24 23:39:00 发布

阅读量1k

点赞数

分类专栏： Javaweb学习笔记文章标签： layui javascript 前端

本文链接：https://blog.csdn.net/qq_48578877/article/details/127094849

版权

Javaweb学习笔记专栏收录该内容

30 篇文章 1 订阅

订阅专栏

LayUi框架

官网：https://layuiweb.com/

导入依赖

1.下载layui解压后放在webapp目录下使用，

此文使用SSM整合一文的案例演示

在这里插入图片描述

2.在官网上的示例代码可复制代码到本地直接使用

注意引用cs或js的路径要进行修改 ./代表当前路径…/代表上级路径

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <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">
  <link rel="stylesheet" href="../../res/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
 
<iframe src="layout-admin.html-from=demo.htm" tppabs="https://www.layuiweb.com/demo/layout-admin.html?from=demo" frameborder="0" id="demoAdmin" style="width: 100%; height: 300px; border-radius: 2px;"></iframe>     
               
          
<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
</script>

</body>
</html>

3.index.xml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 管理界面大布局示例 - Layui</title>
    <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">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="./layui/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
    <style>
        /* 移动端 */
        @media screen and (max-width: 768px) {
            .layui-layout-admin .layui-layout-left,
            .layui-layout-admin .layui-body,
            .layui-layout-admin .layui-footer{left: 0;}
            .layui-layout-admin .layui-side{left: -300px;}
        }
    </style>
</head>
<body>

<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

            <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">nav groups</a>
                <dl class="layui-nav-child">
                    <dd><a href="">menu 11</a></dd>
                    <dd><a href="">menu 22</a></dd>
                    <dd><a href="">menu 33</a></dd>
                </dl>
            </li>


        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="../../other/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" tppabs="http://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
                    tester
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">Your Profile</a></dd>
                    <dd><a href="">Settings</a></dd>
                    <dd><a href="">Sign out</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>
    
    
    
      <!-- 主要代码当点击左侧导航时，列表内容在右侧显示而不是直接跳转到新页面 -->

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">用户管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="#" name="users/all" class="loadUrl">用户列表jsp</a></dd>
                        <dd><a href="#" name="users/allLay" class="loadUrl">用户列表html</a></dd>
                        <dd><a href="#" name="users/saveUser" class="loadUrl">新增用户</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">menu group 2</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">list 1</a></dd>
                        <dd><a href="javascript:;">list 2</a></dd>
                        <dd><a href="">超链接</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    
    
    
    
 <!-- 主要代码 -->
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;" id="content">
            内容主体区域
        </div>
    </div>

    
    
    
    
    <div class="layui-footer">
        <!-- 底部固定区域 -->
        底部固定区域
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<script src="./layui/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
<script>
    //JS
    layui.use(['element', 'layer', 'util'], function(){
        var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,$ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(othis){
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            ,menuRight: function(){
                layer.open({
                    type: 1
                    ,title: '更多'
                    ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                    ,scrollbar: false
                });
            }
        });

    });
    
    
    
      <!-- 主要代码 -->
    $(function (){
        //alert(123)
          //遍历这个类选择器的标签，当点击这个标签时将内容主题区域与其进行绑定
        $(".loadUrl").each(function (){
            $(this).click(function (){
                //alert(321)
                $("#content").load($(this).attr("name"));
            });
        })
    });
</script>
    
    

<script src="/res/static/tongji/baidu.js"></script>
</body>
</html>

实现效果

在这里插入图片描述

4.controller

UsersController.java

package com.qfedu.controller;

import com.github.pagehelper.Page;
import com.qfedu.entity.Users;
import com.qfedu.service.UsersService;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.w3c.dom.stylesheets.LinkStyle;

import javax.annotation.Resource;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * (Users)表控制层
 *
 * @author makejava
 * @since 2022-09-26 14:31:43
 */
@Controller
@RequestMapping("users")
public class UsersController {
    /**
     * 服务对象
     */
    @Resource
    private UsersService usersService;

    @GetMapping("/all")
    public String getAllUsers(Model m){
        m.addAttribute("list", usersService.getAllUsers());
        return "Users.jsp";
    }

    @GetMapping("/allData")
    @ResponseBody
    public List<Users> getAllUsersList(){
        ResponseEntity d;
        return usersService.getAllUsers();
    }

    @GetMapping("/allDataMap")
    @ResponseBody
    public Map<String, Object> getAllUsersLayData(){
        Map<String, Object> map = new HashMap<>();

        map.put("code", 0);
        map.put("msg", "");
        List<Users> allUsers = usersService.getAllUsers();
        map.put("data", allUsers);
        map.put("count", allUsers.size());

        return map;
    }

    @GetMapping("/allLay")
    public String getAllUsersLay(){
        return "users.html";
    }

    @GetMapping("/saveUser")
    public String addUser(){
        return "saveUser.html";
    }



    /**
     * 通过主键查询单条数据
     *
     * @param id 主键
     * @return 单条数据
     */
    @GetMapping("{id}")
    public ResponseEntity<Users> queryById(@PathVariable("id") Integer id) {
        return ResponseEntity.ok(this.usersService.queryById(id));
    }

    /**
     * 新增数据
     *
     * @param users 实体
     * @return 新增结果
     */
    @PostMapping("/saveUser")
    public String add(Users users) {
        this.usersService.insert(users);

        return "success.html";
    }

    /**
     * 编辑数据
     *
     * @param users 实体
     * @return 编辑结果
     */
    @PutMapping
    public ResponseEntity<Users> edit(Users users) {
        return ResponseEntity.ok(this.usersService.update(users));
    }

    /**
     * 删除数据
     *
     * @param id 主键
     * @return 删除是否成功
     */
    @DeleteMapping
    public ResponseEntity<Boolean> deleteById(Integer id) {
        return ResponseEntity.ok(this.usersService.deleteById(id));
    }
}

5.输出页面

users.jsp(输出非json格式数据)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Users</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<body>
<h1>this is all users page.</h1>
<c:if test="${list == null}">
    no data
</c:if>

<c:if test="${list != null}">
    <table class="table table-striped table-hover table-bordered">
        <tr>
            <th>uid</th>
            <th>name</th>
            <th>pass</th>
            <th>tel</th>
            <th>addr</th>
            <th>manage</th>
        </tr>

        <c:forEach items="${list}" var="u">
            <tr>
                <td>${u.uid}</td>
                <td>${u.name}</td>
                <td>${u.pass}</td>
                <td>${u.tel}</td>
                <td>${u.addr}</td>
                <td><a href="#">update</a></td>
            </tr>
        </c:forEach>
    </table>
</c:if>
</body>
</html>

users.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>users</title>
  <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">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">

  <link rel="stylesheet" href="../../layui/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">

</head>
<body>
<h1>this is all user html page.</h1>
<table class="layui-hide" id="test"></table>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<script src="../../layui/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
    //动态表格必须要导入table模块 layui.use(’table',....)
<script>
  layui.use('table', function(){
    var table = layui.table;
//为表格填充数据
    table.render({
      elem: '#test'
      ,url: '/users/allDataMap'
      ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
      ，page:true //开启分页
      ,cols: [[//表头
        {field:'uid', width:80, title: 'UID', sort: true}
        ,{field:'name', width:180, title: '用户名'}
        ,{field:'pass', width:280, title: '密码', sort: true}
        ,{field:'tel', width:280, title: '电话'}
        ,{field:'addr', title: '地址', width: '30%', minWidth: 300} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
      ]]
      ,page: true
    });
  });
</script>
</body>
</html>

动态表格(要求controller层传的数据具有以下格式，否则无法渲染数据)

数据格式如下：

code:0代表查询成功,为1时,会显示msg中的内容·count是为分页准备的,共有多少条数据

数据格式如下:
{ "msg" : "no data"," code" :0,
"data":[{"id":1, " username " : "shine1" , " sex": "男" , " city":"保定", " score":100}，
{ "id" :2, "username " : "shine2" , "sex" :"女" , "city":"石家庄", " score":100},{ "id":3, " username " : "shine3" , "sex" :"男" , "city":"邢台", "score” :100}],
"count" :10日}

注意：在spring-mvc.xml文件中将去后缀的拦截去掉