SpringBoot + LayUI 框架快速搭建WEB网站(附源码)_springboot+layui项目

作者：小蓝xlanll | 2024-02-27 20:14:03

踩

springboot+layui项目

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

前言
一.后端项目搭建
二.前端搭建
结语

前言

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

一.后端项目搭建

1.选择Spring initializr

在这里插入图片描述
其它注意点: 图中Java是8，有的小伙伴创建项目可能选择只有17和19。因为目前创建SpringBoot项目默认是3版本，3版本是不支持Java8的。将服务器URL修改成 https://start.aliyun.com/ 就会出现8了。详情可以查阅 IDEA2023版本创建Sping项目只能勾选17和21，却无法使用Java8？（已解决）这篇文章了解

2.选择依赖

在这里插入图片描述
pom.xml文件中新增以下依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
1
2
3
4

3.项目结构

在这里插入图片描述
注意点: 创建后会下载依赖 (需要耐心等待)，每个人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     	
1
2
3
4
5
6
7
8
9
10
11
12
13
14

完事就可以启动项目了，出现如图所示就算成功。
在这里插入图片描述

二.前端搭建

1.创建前端文件

在这里插入图片描述
我这里换了个项目，实际跟上面搭建一样的，在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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201

看到这里可以网页上全局搜索一下 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视图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

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

3.创建其余文件

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

4.最终效果图

在这里插入图片描述

源码地址：gitee地址

结语

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/155711