當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

SpringBoot集成LayuiAdmin的简单使用

發(fā)布時(shí)間：2023/12/29 javascript 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 SpringBoot集成LayuiAdmin的简单使用小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

SpringBoot+LayuiAdmin的簡(jiǎn)單使用

分享一下SpringBoot集成LayuiAdmin的一些心得體會(huì)，剛開(kāi)始網(wǎng)上找了半天沒(méi)找到集成教程，鼓搗了一陣只好自己上手了…

快速開(kāi)始

1、準(zhǔn)備一份LayuiAdmin

源碼壓縮包解壓后進(jìn)入dist文件夾，通常該文件夾有兩個(gè)子文件夾：layuiadmin和views；別問(wèn)我壓縮包怎么弄，問(wèn)就是自己悟…

2、創(chuàng)建項(xiàng)目

創(chuàng)建一個(gè)SpringBoot項(xiàng)目，勾選依賴(lài)的時(shí)候別忘了選Spring Web和Thymeleaf，當(dāng)然，你也可以后續(xù)再添加；把一些不需要的文件刪除，具體略…

3、配置文件

在application.properties文件中添加如下配置，以過(guò)濾靜態(tài)資源文件

spring.mvc.static-path-pattern=/static/**

4、導(dǎo)入靜態(tài)資源

將layuiadmin文件夾整個(gè)復(fù)制到static文件夾下，如圖所示：（圖片錯(cuò)了，應(yīng)該是static文件夾下，尷尬…）

注意：json文件下都是一些模擬數(shù)據(jù)，可以刪除該文件夾；其它盡量不要?jiǎng)h除

附贈(zèng)一份LayuiAdmin目錄詳解

5、創(chuàng)建頁(yè)面

將views文件夾下的index.html文件復(fù)制到項(xiàng)目的templates文件夾下

改動(dòng)如下：

1、引入thymeleaf空間 <html lang="en" xmlns:th="http://www.thymeleaf.org">2、將原生的引入資源改成如下方式(這樣寫(xiě)比較規(guī)范，原生的也可以引入，但需注意路徑正確)<link rel="stylesheet" th:href="@{/static/layuiadmin/layui/css/layui.css}"><link rel="stylesheet" th:href="@{/static/layuiadmin/style/admin.css}"><script th:src="@{/static/layuiadmin/layui/layui.js}"></script>3、改動(dòng)靜態(tài)資源文件夾<script>layui.config({//靜態(tài)資源所在路徑base: '../layuiadmin/' --->改成 'static/layuiadmin/'}).extend({//主入口模塊index: 'lib/index'}).use('index');</script> </html>

6、頁(yè)面跳轉(zhuǎn)

在啟動(dòng)類(lèi)同級(jí)或以下寫(xiě)個(gè)控制類(lèi)，跳轉(zhuǎn)到該頁(yè)面

@Controller public class PagesController {@RequestMapping("/index")public String index() {return "index";} }

7、運(yùn)行測(cè)試

啟動(dòng)項(xiàng)目，效果圖如下：

8、程序擴(kuò)展

上一步可以看出，整個(gè)系統(tǒng)父頁(yè)面已能正常顯示，子頁(yè)面加載出錯(cuò)；下面就以控制臺(tái)、主頁(yè)一、主頁(yè)二這三個(gè)來(lái)演示如何擴(kuò)展程序：

在index.html中找到這三個(gè)鏈接，更改lay-href如下：

在PagesController類(lèi)中添加跳轉(zhuǎn)控制

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

在templates文件夾下新建三個(gè)html文件，內(nèi)容隨意，注意名字要和控制方法里面的返回的視圖值保持一致

運(yùn)行項(xiàng)目，實(shí)現(xiàn)效果如下：

神功已經(jīng)練成，盡情發(fā)揮吧(>_<)!!!

9、總結(jié)

私認(rèn)為，LayuiAdmin算是一個(gè)對(duì)我這種后端比較友好的框架，只需要很簡(jiǎn)單的配置就能實(shí)現(xiàn)很棒的頁(yè)面效果，總算不用每次都很痛苦的寫(xiě)頁(yè)面布局了，想想那些復(fù)雜的CSS我腦子都大了…

總結(jié)

以上是生活随笔為你收集整理的SpringBoot集成LayuiAdmin的简单使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：借助Android Studio生成图标
下一篇：计算机辅助在医学中的应用,计算机辅助诊断