SpringBoot + LayUI 框架快速搭建WEB网站

  • 前言
  • 一.后端项目搭建
  • 1.选择Spring initializr
  • 2.选择依赖
  • 3.项目结构
  • 4.项目配置
  • 二.前端搭建
  • 1.创建前端文件
  • 2.打开main.html界面
  • 3.创建其余文件
  • 4.最终效果图
  • 结语


前言

针对于某些小伙伴需要 从零开发 一个属于自己的项目，但是又要页面布局，页面访问配置等繁琐情况，本文将从项目搭建到项目配置再到项目代码编写做一个操作流程。

一.后端项目搭建

1.选择Spring initializr

springboot 增加classpath springboot加layui_前端


其它注意点: 图中Java是8，有的小伙伴创建项目可能选择只有17和19。因为目前创建SpringBoot项目默认是3版本，3版本是不支持Java8的。

2.选择依赖

springboot 增加classpath springboot加layui_前端_02


pom.xml文件中新增以下依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

3.项目结构

springboot 增加classpath springboot加layui_前端_03


注意点: 创建后会下载依赖 (需要耐心等待)，每个人Maven配置不同，这块Maven配置不标准情况下就会报错，会下载很慢等问题。只要是文件夹没变色前都是在下载Maven。变色后还要检查一下pom.xml文件中是否有错误的地方 (提前检查，为后面省事)

4.项目配置

项目结构中resources目录下有一个application.properties配置文件。我习惯用yml文件格式的配置 (properties文件后缀修改成yml)。如下:

##配置访问html文件路径和静态资源访问路径
##这里也有很多学问在里头，之前研究了一下，现在忘了
spring:
   mvc:
   	view:
   		prefix: /templates/
   		suffix: .html
   web:
    resources:
      static-locations: classpath:/templates/,classpath:/static/	

##端口，被占用就更换一个，或者把占用端口的进程kill一下
server:
  port:8081

完事就可以启动项目了，出现如图所示就算成功。

springboot 增加classpath springboot加layui_后端_04

二.前端搭建

1.创建前端文件

springboot 增加classpath springboot加layui_spring_05


我这里换了个项目，实际跟上面搭建一样的，在templates下创建一个文件 main.html。名字随意。代码也很简单 (从 LayUI官网管理系统界面布局 CV过来自己稍加改动的)。如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <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">
    <link id="changeDark" rel="stylesheet">
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.8.0/dist/css/layui.css" rel="stylesheet">
</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="javascript:;">nav 1</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 2</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 3</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">nav groups</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">menu 11</a></dd>
                    <dd><a href="javascript:;">menu 22</a></dd>
                    <dd><a href="javascript:;">menu 33</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <i class="layui-icon layui-icon-moon layui-font-12 demo-dropdown-align" lay-options="{trigger: 'hover'}"></i>
            </li>

            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="javascript:;">
                    <img src="https://unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
                    tester
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">Your Profile</a></dd>
                    <dd><a href="javascript:;">Settings</a></dd>
                    <dd><a href="javascript:;">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已有的垂直导航） -->
            <!-- 只关注这块，其它可以同理操作 lukeView -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">menu group 1</a>
                    <dl class="layui-nav-child">
                    	<!-- 官网copy代码新增luke自定义属性 实现点击跳转界面 -->
                    	<!-- 我这里只是实现 属性有luke的时候才跳转界面，否则不会跳转。copy -->
                        <dd><a href="javascript:;" luke="one">menu 1</a></dd>
                        <dd><a href="javascript:;" luke="two">menu 2</a></dd>
                        <dd><a href="javascript:;">the links</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="javascript:;">超链接</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
                <li class="layui-nav-item"><a href="javascript:;">the links</a></li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <blockquote class="layui-elem-quote layui-text">
                <div id="abc">
                	<!-- lukeView src="默认打开界面" -->
                    <iframe src="one" frameborder="0" width="600px" height="400px" scrolling="no" name="d"></iframe>
                </div>
            </blockquote>
            <br><br>
        </div>
    </div>
    <div class="layui-footer">
        <!-- 底部固定区域 -->
        底部固定区域
    </div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<!-- 引入 layui.js。用2.8.0以上最好，低版本可能会出现其他问题 -->
<script src="//unpkg.com/layui@2.8.0/dist/layui.js"></script>
<script>
	//Jquery的$命名更换jQuery，因为layui中冲突了。
    jQuery.noConflict();
	
	//初始化执行函数
    window.onload = function (){
    	//获取缓存中URL
        var luke = localStorage.getItem("url")
        //获取自定义属性为luke的元素
        const link = document.querySelector('a[luke="'+luke+'"]');
        const dd = link.parentNode;
        //给该属性下的parentNode加一个class实现高亮菜单
        dd.classList.add('layui-this');

		//获取当前地址URL
        var currentURL = window.location.href;
        //定义一个参数值 地址附带#号时不会影响前面的地址
        var newFragment = '#/test/'+luke;
        //跳转该页面实现用户退出浏览器后下次进入还是打开退出前页面地址
        window.location.hash = newFragment;
        var iframe = jQuery("iframe[name='d']");
        iframe.attr("src", "/test/"+luke);
        console.log(iframe)
    }

    //JS 以下JS只有点击菜单时触发属于自定义编写，其它为Copy官网例子
    layui.use(['element', 'layer', 'util'], function(){
        var element = layui.element;
        var layer = layui.layer;
        var util = layui.util;
        var $ = layui.$;
        var dropdown = layui.dropdown;
        element.init();
        // 导航点击事件
        element.on('nav(test)', function(elem){
            let luke = $(elem.context).attr("luke");
            if(luke == null || luke == undefined){
                return;
            }
            var iframe = $("iframe[name='d']");

            // 修改src属性为新的URL
            iframe.attr("src", "/test/"+luke);

            var currentURL = window.location.href;
            var newFragment = '#/test/'+luke;
            window.location.hash = newFragment;
            localStorage.setItem("url",luke);
        });

        dropdown.render({
            elem: '.demo-dropdown-align',
            data: [{
                title: '深色模式',
                id: 100
            }, {
                title: '浅色模式',
                id: 101
            }],
            click: function (item){
                if(item.id == 100){
                    console.log(document.getElementById('changeDark'));
                    //原生
                    document.getElementById('changeDark').setAttribute('href','./layui-v2.7.6/layui/css/layui-theme-dark.css')
                }
                if(item.id == 101){
                    document.getElementById('changeDark').removeAttribute('href')
                }
            }
        });

        //头部事件
        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: 'slideLeft'
                    ,shadeClose: true
                    ,scrollbar: false
                });
            }
        });
    });
</script>
</body>
</html>

看到这里可以网页上全局搜索一下 lukeView 查看一下注释。 这里文件可以自定义编写一些自己想要的功能点，因为官网给的代码是点击没效果的，需要自己实现，我这里也只是简单实现了一下。满足复制粘贴后再稍作修改即可达到接口开发的目的。

2.打开main.html界面

//controller层编写


@Controller   //别使用@RestController
@RequestMapping("/test")
public class testController {
	@RequestMapping("/main")
    public String main(){
        return "main";
    }
	
	@RequestMapping("/one")
    public String one(){
        return "one";
    }

    @RequestMapping("/two")
    public String two(){
        return "two";
    }
}


//以上代码就ok了。/test是js中写的/test请求所以这里要求相同。main是主界面，由于配置会返回main.html视图

注意点: 不同于前后端开发，Vue开发的小伙伴是不需要这样编写的，Vue自带路由功能，前端自身就可以实现界面间跳转，Html这种就需要接口或者a标签等实现界面跳转

重启项目，localhost:端口号/test/main 就可以看到一个layUI构成的UI界面了。

3.创建其余文件

templates文件夹下需要新建一个one.html,two.html两个文件实现点击菜单互相访问测试。然后就可以通过点击菜单实现局部页面修改。

4.最终效果图

springboot 增加classpath springboot加layui_java_06

结语

main.html那块不是很理解的小伙伴也可以通过评论提出问题，我也会在收到消息后的第一时间给你回复。
欢迎大家评论提问或指出问题！！！