LayUi框架

官网：https://layuiweb.com/

导入依赖

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

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

在这里插入图片描述

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

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




  
  Layui

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 管理界面大布局示例 - Layuititle>
    <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 demodiv>
        
        <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 1a>li>
            <li class="layui-nav-item layui-hide-xs"><a href="">nav 2a>li>
            <li class="layui-nav-item layui-hide-xs"><a href="">nav 3a>li>
            <li class="layui-nav-item">
                <a href="javascript:;">nav groupsa>
                <dl class="layui-nav-child">
                    <dd><a href="">menu 11a>dd>
                    <dd><a href="">menu 22a>dd>
                    <dd><a href="">menu 33a>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 Profilea>dd>
                    <dd><a href="">Settingsa>dd>
                    <dd><a href="">Sign outa>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">
            
            <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">用户列表jspa>dd>
                        <dd><a href="#" name="users/allLay" class="loadUrl">用户列表htmla>dd>
                        <dd><a href="#" name="users/saveUser" class="loadUrl">新增用户a>dd>
                    dl>
                li>
                <li class="layui-nav-item">
                    <a href="javascript:;">menu group 2a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">list 1a>dd>
                        <dd><a href="javascript:;">list 2a>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: '处理右侧面板的操作
'
                    ,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" %>


    Users
    

    
    

    
    


this is all users page.

    no data



    
            
        
            uid
            name
            pass
            tel
            addr
            manage
        

        
                ${u.uid}
                ${u.name}
                ${u.pass}
                ${u.tel}
                ${u.addr}
                update

uid	name	pass	tel	addr	manage
${u.uid}	${u.name}	${u.pass}	${u.tel}	${u.addr}	update

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文件中将去后缀的拦截去掉

6.实现效果

在这里插入图片描述

相关阅读:
“视频剪辑：如何分割与转换视频格式，一探究竟！
分治法思考题
 Day46-50：统计图表项目总结
 32.nacos配置文件中心，使用实例（springcloud）
在vscode中配置git bash终端、git 源码管理
 java开发手册-03单元测试
 【XSS绕过-防护策略】理解防护策略，更好的绕过
 iOS开发之iOS15.6之后拉流LFLiveKit，画面模糊及16.1马赛克问题
 Vue3的升级及优化总结
 OpenGL -文字
原文地址：https://blog.csdn.net/qq_48578877/article/details/127094849