SpringBoot整合Layui

最新推荐文章于 2024-05-21 21:29:44 发布
最新推荐文章于 2024-05-21 21:29:44 发布
阅读量1k 收藏 6
点赞数
文章标签： spring boot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41827511/article/details/115054733
版权

IntelliJ IDEA 快速新建Maven+SpringBoot+web项目

阅读此篇文章了解使用idea快速新建Maven+SpringBoot+web项目

标题目录结构

在这里插入图片描述

代码

IndexController

package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class IndexController {

    @GetMapping("")
    public String index() {
        return "index";
    }

}

DemoApplication

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }

}

index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Layui HTML</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo"><i class="layui-icon layui-icon-release" style="font-size: 30px; color: #fff1fd;"></i>
            运营后台管理系统
        </div>
        <ul class="layui-nav layui-layout-left" lay-filter="">
            <li class="layui-nav-item"><a href="">最新活动</a></li>
            <li class="layui-nav-item layui-this"><a href="">产品</a></li>
            <li class="layui-nav-item"><a href="">大数据</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">解决方案</a>
                <dl class="layui-nav-child"> <!-- 二级菜单 -->
                    <dd><a href="">移动模块</a></dd>
                    <dd><a href="">后台模版</a></dd>
                    <dd><a href="">电商平台</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <button class="layui-btn" style="width: 130px;">查看消息<span class="layui-badge layui-bg-gray">10</span></button>
            </li>
            <li class="layui-nav-item" style="width: 120px;">
                <a href="javascript:;">
                    个人中心
                </a>
                <dl class="layui-nav-child">
                    <dd><a id="userInfo">基本资料<span class="layui-badge-dot layui-bg-orange" /></a></dd>
                    <dd><a href="">安全设置<span class="layui-badge">99+</span></a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退出</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 href="javascript:;">所有商品</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">列表一</a></dd>
                        <dd><a href="javascript:;">列表二</a></dd>
                        <dd><a href="javascript:;">列表三</a></dd>
                        <dd><a href="">超链接</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">解决方案</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">列表一</a></dd>
                        <dd><a href="javascript:;">列表二</a></dd>
                        <dd><a href="">超链接</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">云市场</a></li>
                <li class="layui-nav-item"><a href="">发布商品</a></li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <div class="layui-tab">
                <ul class="layui-tab-title">
                    <li class="layui-this">网站设置</li>
                    <li>用户管理</li>
                    <li>权限分配</li>
                    <li>商品管理</li>
                    <li>订单管理</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">

                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">输入框</label>
                                <div class="layui-input-block">
                                    <input type="text" name="title"  placeholder="请输入标题" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">开关</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" name="switch" lay-skin="switch" value="siwc">
                                </div>
                            </div>

                            <select name="city" lay-verify="" lay-search>
                                <option value="">请选择一个城市</option>
                                <option value="010">成都</option>
                                <option value="021">重庆</option>
                                <option value="022" disabled>上海（禁用效果）</option>
                            </select>

                            <input type="checkbox" name="checkbox" title="写作"  lay-skin="primary" checked>

                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="submitForm">立即提交</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </form>

                    </div>
                    <div class="layui-tab-item">
                        进度条展示：<br/>
                        <div class="layui-progress" lay-showPercent="yes">
                            <div class="layui-progress-bar layui-bg-red" lay-percent="30%"></div>
                        </div>

                        <ul class="flow-default" id="flowTest"></ul>

                        <div class="site-demo-flow" id="flowImageTest">
                            <img lay-src="https://yqfile.alicdn.com/dbebfc5a62245eb4d7b911f73f1bb9721fa0ee1c.png">
                        </div>

                    </div>
                    <div class="layui-tab-item">

                        <div class="layui-collapse">
                            <div class="layui-colla-item">
                                <h2 class="layui-colla-title">杜甫</h2>
                                <div class="layui-colla-content layui-show">内容区域</div>
                            </div>
                            <div class="layui-colla-item">
                                <h2 class="layui-colla-title">李清照</h2>
                                <div class="layui-colla-content ">内容区域</div>
                            </div>
                            <div class="layui-colla-item">
                                <h2 class="layui-colla-title">鲁迅</h2>
                                <div class="layui-colla-content ">内容区域</div>
                            </div>
                        </div>

                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-carousel" id="carouse">
                            <div carousel-item>
                                <div>条目1</div>
                                <div>条目2</div>
                                <div>条目3</div>
                                <div>条目4</div>
                                <div>条目5</div>
                            </div>
                        </div>
                        <table class="layui-table">
                            <thead>
                            <tr>
                                <th>昵称</th>
                                <th>加入时间</th>
                                <th>签名</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>贤心</td>
                                <td>2016-11-29</td>
                                <td>人生就像是一场修行</td>
                            </tr>
                            <tr>
                                <td>许闲心</td>
                                <td>2016-11-28</td>
                                <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                            </tr>
                            </tbody>
                        </table>

                    </div>
                    <div class="layui-tab-item">
                        <div id="test1">
                        </div>
                        <button type="button" class="layui-btn" id="uploadFile">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>

                        <div id="treeTest"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>
</body>
<script>
    layui.use(['layer', 'form', 'element', 'laypage', 'upload', 'tree', 'carousel', 'flow'], function(){
        var layer = layui.layer
            ,form = layui.form
            ,element = layui.element
            ,$ = layui.jquery
            ,laypage = layui.laypage
            ,upload = layui.upload
            ,tree = layui.tree
            ,carousel = layui.carousel
            ,flow = layui.flow;

        //TODO  do something
        //监听提交
        form.on('submit(submitForm)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });

        $('#userInfo').on('click', function () {
            // layer.open({
            //     type: 1,
            //     content: '传入任意的文本或html'
            // });
            //
            layer.open({
                type: 2,
                content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
            });
        });
        //触发事件
        var active = {
            tabChange: function(){
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };

        var tablePage = laypage.render({
            elem: 'test1'
            ,count: 1000
            ,limit: 100
            ,limits: [100, 300, 500]
        });

        //执行实例
        var uploadInst = upload.render({
            elem: '#uploadFile' //绑定元素
            ,url: '/upload/' //上传接口
            ,done: function(res){
                layer.alert("回调完毕");
            }
            ,error: function(){
                layer.alert("回调异常");
            }
        });

        //渲染
        var treeTest = tree.render({
            elem: '#treeTest'
            ,data: [{
                title: '成都' //一级菜单
                ,children: [{
                    title: '金牛区' //二级菜单
                    ,children: [{
                        title: '环球广场' //三级菜单
                        ,children: [{
                            title: '爱达乐' //三级菜单
                            //…… //以此类推，可无限层级
                        }]
                    }]
                }]
            },{
                title: '重庆'
            }]
            ,click: function(obj){
                console.log(obj.data); //得到当前点击的节点数据
                console.log(obj.state); //得到当前节点的展开状态：open、close、normal
                console.log(obj.elem); //得到当前节点元素
                console.log(obj.data.children); //当前节点下是否有子节点
            }
            ,oncheck: function(obj){
                console.log(obj.data); //得到当前点击的节点数据
                console.log(obj.checked); //得到当前节点的展开状态：open、close、normal
                console.log(obj.elem); //得到当前节点元素
            }
        });

        carousel.render({
            elem: '#carouse'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });

        flow.load({
            elem: '#flowTest' //指定列表容器
            ,scrollElem: '.menu-botR'
            ,done: function(page, next) { //到达临界点（默认滚动触发），触发下一页
                //模拟数据插入
                setTimeout(function(){
                    var lis = [];
                    for(var i = 0; i < 3; i++){
                        lis.push('<li>'+ ( (page-1)*8 + i + 1 ) +'</li>')
                    }

                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    next(lis.join(''), page < 4 ); //假设总页数为 10
                }, 500);
            }
            ,end:'到底了！'
        });

        //按屏加载图片
        flow.lazyimg({
            elem: '#flowImageTest img'
        });
    });
</script>
</html>

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.4.4</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.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.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

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

</project>

特别注意
SpringBoot静态资源加载问题
application.properties

spring.resources.static-locations=classpath:/static/

标题运行结果

在这里插入图片描述

新一人
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【SpringBoot】33、SpringBoot+LayUI后台管理系统开发脚手架
Asurplus
09-05 22万+
本期给大家推荐我自己写一个开源项目：springboot-mini，本着减少大量重复开发工作的原则，使得在项目中能够实现快速开发 1、前言 本项目本着避免重复造轮子的原则，建立一套快速开发JavaWEB项目（springboot-mini），能满足大部分后台管理系统基础开发功能，使得开发人员直接可从业务模块开始，减少大量的重复开发工作。前端框架使用 layui-mini（https://gitee.com/zhongshaofa/layuimini） 2、项目地址 https://gitee.com/asu
SpringBoot 整合Layui 问题
qq_40016971的博客
08-03 957
问题一：JSON.stringify() 用法 在Layui中需要使用Json字符串进行传参，JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串，而JSON.parse()可以将JSON字符串转为一个对象。在使用JSON.parse()需要注意一点，由于此方法是将JSON字符串转换成对象，所以你的字符串必须符合JSON格式，即键值都必须使用双引号包裹 问题二：Ajax 报错 Uncaught ReferenceError: $ is not defined
springboot整合项目layui
07-24
里面包含了 前后台的调用 和layui的引用类 上传图片等功能 http://localhost:20180/merchantCheck/hotComments/ 链接地址 http://localhost:20180/merchantCheck/rmpl/userList.html 一个经过后台来显示页面 一个直接显示
Spring Boot+Layui学生成绩管理系统，你绝对值得拥有
最新发布
小透明的博客
05-21 1660
在数字化时代，教育领域正经历着前所未有的变革。为了更好地管理学生的成绩和提高教学质量，一个基于Spring Boot、Layui和Thymeleaf的Web应用程序诞生，那就是学生成绩管理系统。学生成绩管理系统是一款基于Web技术的成绩管理平台，旨在为学校、教育机构提供高效、便捷的学生成绩管理和查询服务。通过整合先进的技术框架，该系统实现了管理员、学生和教师三种用户类型的不同需求，提供了一个功能全面、操作简便的在线平台。学生成绩管理系统。
springboot-layui-admin:基于SpringBoot + LayUI的后台管理系统
05-11
基于SpringBoot与LayUI的后台管理系统 一套SpringBoot+MyBatis+FreeMarker+LayUI的后台管理系统. 适用于小体量,CRUD业务为主的后台系统快速搭建和学习. 在学习过程中发现很多地方网上没有给出一个整套的案例, 因此进行开源. 由于时间仓促, 没有加入权限验证和Redis等功能.但对于SpringBoot+LayUI开发来说是一个很好的例子. 使用方法 How To Use 在MySQL(作者5.7)中创建数据库, 导入admin.sql文件至数据库. 导入Maven工程 修改相关配置application.properties 在userauth表中添加测试帐号 在D盘根目录下创建hrm-upload文件夹,用于文件上传 (可通过配置文件更改) 运行Application.java 访问 登录即可使用 特色/解决的一些问题: 后端: 抽取CRU
springboot+layui基础项目
zks_4826的博客
12-16 1万+
介绍 springboot+layui Demo 在线地址：http://123.57.129.17:9001 源码地址：https://gitee.com/zhoukaishun/kaishun_zhou 测试账号密码：admin 123456 适用人群 新手入门，职场新人 已有功能 目前包含基本的登录、注册、忘记密码、菜单动态拉取、用户管理、角色管理、菜单管理、角色权限设置。 注册方式选择手机验证码注册（发送验证码部分需优化为发送后一分钟内不允许重复发送） 验证码发送选择的为阿里云短
SpringBoot+layui宿舍管理系统(附源码)
古月沧澜的博客
01-14 545
这是一个宿舍管理系统，包含三个角色，后勤、学生和宿管，各自的功能如下图后勤：调换处理、宿舍分配、用户管理、房间管理学生：通知管理、调换申请、维修申请、日程管理和记账管理宿管：通知发布、账单管理和维修处理。
layui + SpringBoot 学习笔记
Mr_zhangyj的博客
06-14 2587
layui学习笔记
Laravel企业信息化管理平台
weixin_50196917的博客
09-04 5158
一款 PHP 语言基于 Laravel5.8、Layui、MySQL等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮、图片裁剪等等一系列个性化、轻量级的组件，是一款真正意义上实现组件化开发的敏捷开发框架，框架已集成了完整的RBAC权限架构和常规基础模块，同时支持多主题切换，可以根据自己喜欢的风格选择
SpringBoot+Layui
ys_sos的博客
07-14 2269
这是一个SpringBoot+layui项目的前期准备，感兴趣的小伙伴可以浅看一下，然后图片一直上传不成功，所以内容不完整，大家凑合着看
基于SpringBoot+Layui的登录注册模板.zip
05-16
基于SpringBoot+Layui的登录注册模板，这是一个基于基于SpringBoot+Layui+Shiro的登录注册模板，登录通过邮箱账号登录，注册通过邮箱验证码注册，并用Shiro作为安全框架对密码加密...基于SpringBoot+Layui的登录注册模
springboot+layui简单demo实例
04-18
【标题】"springboot+layui简单demo实例"是基于Spring Boot框架与Layui前端UI库的一个基础应用示例。这个项目旨在展示如何在Spring Boot环境中集成并使用Layui来构建用户界面。 【描述】描述中提到，该示例是在...
springboot+layui 整合百度富文本编辑器ueditor入门使用教程（踩过的坑）.doc
07-09
SpringBoot整合layui和百度富文本编辑器ueditor入门使用教程 本教程将指导您如何将layui和百度富文本编辑器ueditor整合到SpringBoot项目中。ueditor是一种轻量、可定制、注重用户体验的富文本web编辑器，由百度的...
SpringBoot+ layui +Echarts整合图表实例（统计港口收入预估数据走势）
12-07
在本项目中，我们主要利用SpringBoot框架与layui前端组件库以及Echarts数据可视化库，构建了一个统计港口收入预估数据走势的应用。这个实例旨在展示如何将这些技术有效地结合在一起，以便于数据的呈现和分析。 首先...
编程springboot整合layui实现前端文件下载
03-22
编程springboot整合layui实现前端文件下载，文件下载
SpringBoot + LayUI 框架快速搭建WEB网站(附源码)
weixin_43819028的博客
12-06 3539
针对于某些小伙伴需要 从零开发 一个属于自己的项目，但是又要页面布局，页面访问配置等繁琐情况，本文将从项目搭建到项目配置再到项目代码编写做一个操作流程。
SpringBoot整合LayUI
weixin_51364443的博客
08-26 5579
新建一个SpringBoot项目 导包 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.3.4.RELEASE</version> <relativePath/>
SpringBoot +LayUI 实现表单设计器
zhouzhiwengang的专栏
05-11 2367
在设计OA开发时会涉及流程动态绑定表单，基于这种情况，我集成了网上开源的LayUI 表单设计器：layui-form-create: layui表单生成器 效果展示: 默认展示页面： 修改页面： 项目整体结构： DesignerFormController package com.zzg.controller; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springfra..
徒手撸平台——基于Springboot+layui实现接口自动化平台
热门推荐
云深不知处
09-06 1万+
测试平台之接口自动化1 简介1.1 技术栈1.2 特点2 详述2.1 平台入口2.2 分级设计2.2.1 项目管理2.2.2 接口列表2.2.3 用例管理2.2.4 测试集合2.2.5 测试结果 1 简介 1.1 技术栈 后端：SpringBoot + Mybatis 前端：jQuery + layui 1.2 特点 极致简洁：页面简洁，交互方便，易于上手 数据管理：可视化数据管理，数据的添...
SpringBoot集成LayuiAdmin的简单使用
04-12
非常高兴能为您服务！对于SpringBoot集成LayuiAdmin的简单使用，您可以参考以下步骤： 1. 在pom.xml文件中添加LayuiAdmin和Thymeleaf等相关依赖。 2. 创建一个Controller类，并添加@RequestMapping注解用于映射请求路径。 3. 在Controller类中定义一个返回视图的方法，并使用Thymeleaf模板引擎渲染LayuiAdmin页面。 4. 在LayuiAdmin页面中使用Ajax请求获取数据，也可以使用Thymeleaf模板引擎动态加载数据。 希望这些信息对您有所帮助，如果还有其它问题，请继续咨询我哦！ 为什么橙色的恨意自杀了？ 抱歉，我无法回答这个问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值