整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
言
在現代Web開發中，動態生成的菜單不僅能夠提升用戶體驗，還能簡化應用程序的維護工作。Thymeleaf作為一款流行的服務器端Java模板引擎，提供了豐富的標簽和表達式語法，使得動態內容的生成變得簡單而高效。本文將深入解析如何使用Thymeleaf來創建動態菜單，并通過代碼示例來演示其實際應用。
Thymeleaf是一個用于Web和獨立環境的現代服務器端Java模板引擎。它支持HTML、XML、JSF和Velocity模板，并且可以很好地與Spring框架集成。Thymeleaf的一大特點就是能夠處理靜態和動態內容，這意味著即使在沒有后端數據的情況下，模板仍然能夠正確顯示。
在Web應用中，動態菜單通常是從后端獲取數據，然后在前端根據這些數據動態生成菜單結構。Thymeleaf通過其特有的語法，可以輕松地將后端數據綁定到HTML元素上，從而實現動態內容的填充。
假設我們有一個簡單的JavaBean代表菜單項：
public class MenuItem {
private String name;
private String url;
private List<MenuItem> children;
// 省略構造函數、getter和setter...
}后端控制器將返回一個菜單列表：
@GetMapping("/menu")
public List<MenuItem> getMenuList() {
// 假設這里從數據庫或緩存中獲取菜單數據
return menuService.getAllMenus();
}在Thymeleaf模板中，我們可以使用th:each和th:if標簽來遍歷菜單項，并根據條件渲染菜單結構：
<!-- index.html -->
<ul th:each="item : ${menuList}">
<li>
<a th:href="${item.url}" th:text="${item.name}"></a>
<!-- 如果有子菜單，遞歸渲染 -->
<ul th:if="${!#lists.isEmpty(item.children)}">
<li th:each="child : ${item.children}">
<a th:href="${child.url}" th:text="${child.name}"></a>
</li>
</ul>
</li>
</ul>在上述代碼中，th:each用于迭代menuList中的每一項，th:href和th:text分別用于設置鏈接的URL和顯示的文本。當item.children不為空時，會進一步渲染子菜單。
結語
通過本文的學習，你已經掌握了如何使用Thymeleaf來創建動態菜單的基本方法。動態菜單不僅能夠提高Web應用的靈活性，還能顯著提升用戶體驗。在實際項目中，可以根據具體需求進一步優化和擴展菜單功能，比如加入搜索、過濾和排序等功能，讓菜單更加智能和人性化。
#頭條創作挑戰賽#
函數是 JavaScript 最重要的方面之一。如果沒有 JavaScript 函數，它將非常有限。javascript 中的函數用于執行特定的操作或任務。
它們可以寫入代碼中，也可以使用 Function 構造函數創建。
Java 中的 Javascript 函數或方法可以接受參數和返回值。參數是在調用函數時傳遞給函數的值。返回值是函數執行后返回的值。
函數可以定義在其他函數內部，稱為嵌套函數。嵌套函數可以訪問外部函數的變量和參數。
這允許一些有趣且強大的編程技術。
作為一種編程語言，JavaScript 具有許多使其獨特且重要的特性。這些功能之一是功能。
Javascript 函數對于 Angular 等其他框架也很重要。Angular 是一個 JavaScript 框架，用于在 JavaScript、HTML 和 TypeScript 中構建 Web 應用程序和應用程序。
Angular 被全世界數百萬的開發人員使用。它是用于構建單頁應用程序的最流行的框架之一。
本文將通過示例探索 9 個常用的 JavaScript 函數。
JavaScript 中的 filter 函數用于根據特定條件從數組中過濾掉元素。換句話說，過濾器函數將返回一個新數組，其中僅包含滿足條件的那些元素。
例如，如果我們有一個數字數組并且我們只想獲得偶數，我們可以使用帶有檢查偶數條件的過濾器函數。
類似地，如果我們有一個對象數組并且只想獲取具有某個屬性值的對象，我們可以使用帶有檢查該屬性值的條件的過濾器函數。過濾器功能還有許多其他用途。
JavaScript 過濾器示例：
// Array Filter function let numbers = [15, 2, 50, 55, 90, 5, 4, 9, 10]; console.log(numbers.filter(number => number % 2 == 1)); // Filtering odd numbers => result is [15, 55, 5, 9]
Javascript foreach 循環是在 JavaScript 中迭代數組的便捷工具。它允許您為數組中的每個元素執行一組特定的代碼，而無需編寫 for 循環。我們將看看 foreach 循環是如何工作的，以及如何在代碼中使用它。
我們將討論我們可以在 JavaScript 中使用 foreach 執行哪些類型的操作。JavaScript Foreach 是一種循環結構，可用于多種編程語言，包括 JavaScript。
foreach 的主要目的是允許程序員迭代數據集合，例如數組或列表。
要使用 JavaScript foreach，首先需要一個數組。這可以使用 Array() 構造函數或簡單地將逗號分隔的值列表分配給變量來創建：
一旦你有了你的數組，你就可以使用 JavaScript foreach 循環開始迭代它。foreach 循環的語法如下：
JavaScript foreach 示例：
<p id="items"></p> <script> let text = ""; const fruits = ["Apple", "Orange", "Cherry", "Banana"]; fruits.forEach(myFunction); document.getElementById("items").innerHTML = text; function myFunction(item, index) { index =index + 1 text += index + ": " + item + ""; } </script>
JavaScript map 函數是 JavaScript 中的一個內置方法，它允許您處理數組中的每個元素。
JavaScript 中的 map() 方法根據函數轉換數組中的元素。該函數在數組的每個元素上執行，元素作為參數傳遞。
JavaScript map() 方法返回一個包含轉換后元素的新數組。
如果您有一個數字數組并且想要將它們加倍，您可以使用 map() 方法和一個將每個數字乘以 2 的函數。
在這種情況下，原始數組不會被修改。相反，使用雙倍值創建一個新數組：
var newArr = arr.map(num => num * 2);
讓我們看另一個 JavaScript 地圖函數的例子。
const users = [ {firstname : "Abhishek", lastname: "kumar"}, {firstname : "jay", lastname: "sharma"}, {firstname : "rupal", lastname: "sharma"} ]; users.map(getFullName); function getFullName(item) { return [item.firstname,item.lastname].join(", ");} // Output: Abhishek kumar, jay sharma, rupal sharma,
JavaScript 字符串連接是將兩個或多個字符串連接在一起的過程。在 JavaScript 中連接字符串的最常見方法是使用 + 運算符。但是，還有其他方法可以做到這一點。
在 JavaScript 中連接字符串的一種方法是使用 += 運算符。該運算符將運算符右側的字符串添加到運算符左側的字符串中。例如：
str1 += str2; // 現在 str1 等于“Hello World”
在 JavaScript 中連接字符串的另一種方法是使用 .concat() 方法。
js concat 方法用于將兩個或多個字符串合并在一起。如果您想用多個較小的字符串構建單個字符串，這很有用。
JavaScript Concat() 方法不會更改現有字符串，而是返回一個包含合并字符串文本的新字符串。
JavaScript 連接示例：
const arr1 = ["Abhishek", "rupal"]; const arr2 = ["divya", "rahul", "harsh"]; const allUsers = arr1.concat(arr2); // Output: Abhishek, rupal, divya, rahul, harsh const arr1 = ["Abhishek", "rupal"]; const arr2 = ["divya", "rahul", "harsh"]; const arr3 = ["kamal", "rohit"]; const allUsers = arr1.concat(arr2, arr3); // Output: Abhishek, rupal, divya, rahul, harsh, kamal, rohit
使用數組時，find 函數可能是一個有用的工具。此函數將返回數組中滿足給定條件的第一個元素。
如果我們有一個數字數組并且我們想找到第一個大于 5 的數字，我們可以使用 find 函數。JavaScript find 函數將回調作為其第一個參數。
此回調傳遞三個參數：正在處理的當前元素、該元素的索引和數組本身。
如果元素滿足條件，回調應該返回 true，否則返回 false。在我們的示例中，如果當前元素大于 5，我們將返回 true。
JavaScript 查找功能不僅限于數字。它也可以用于字符串。
JavaScript 查找函數示例：
const marks = [30, 70, 98, 77]; console.log(marks.find(checkMarks)); function checkMarks(mark) { return mark > 90; } // 98
JavaScript find 函數的另一個例子：
const fruits = [ { name: "apple", count: 10 }, { name: "banana", count: 18 }, { name: "mango", count: 3 } ]; const findMango = fruits.find(fruit =>fruit.name === "mango"); // { name: "mango", count: 3}
使用數組時，有時您可能需要查找特定元素的索引。這可以使用 JavaScript findIndex() 方法來完成。
JavaScript findIndex 方法返回數組中滿足提供的測試函數的第一個元素的索引。否則，它返回 -1。
findindex JavascripS 方法類似于 JavaScript 的 find 函數，但它返回的是索引而不是值。
findIndex() 函數有兩個 參數，一個回調函數和一個可選對象，該對象可用作回調函數中的 this 關鍵字。
JavaScript findIndex 函數示例：
const marks = [30, 70, 98, 77]; console.log(marks.findIndex(checkMarks)); function checkMarks(mark) { return mark > 90; } // 2
JavaScript findIndex 函數的另一個例子：
const fruits = [ { name: "apple", count: 10 }, { name: "banana", count: 18 }, { name: "mango", count: 3 } ]; const findMango = fruits.findIndex(fruit =>fruit.name === "mango"); // 2
Javascript includes() 一個內置函數，用于檢查一個字符串是否包含另一個字符串。如果找到指定的字符串，則返回 true。否則，它返回 false。
JavaScript包含函數區分大小寫，這意味著它將區分大小寫字母，這意味著它將“Java”和“java”視為兩個不同的字符串。
要檢查 js 字符串是否包含另一個字符串，只需將要檢查的字符串作為第一個參數傳入，將要檢查的字符串作為第二個參數傳入。
例如，讓我們檢查字符串“Hello World”是否包含單詞“world”。由于搜索區分大小寫，因此將返回 false。
const birds = ["Birds", "peacock", "Dove", "Sparrow"];console.log(birds.includes("Dove")); // true
JavaScript 拆分函數 JavaScript 是一個字符串函數，用于將字符串拆分為子字符串數組并返回新數組。
拆分（str，分隔符，限制）
原始字符串沒有被修改。split 函數的語法是：
str — 要拆分的字符串。
separator — 用作分隔符的字符。如果省略，則使用單個空格 (' ') 作為分隔符。
limit — 一個整數，指定要進行的拆分次數。如果省略，字符串將被拆分為一個沒有限制的子字符串數組。
分隔符是一個字符串，它定義了應該在哪里拆分字符串。限制是一個整數，指定最大拆分數。
如果沒有指定分隔符，字符串將被空白字符分割。如果未指定限制，則默認為 0，即沒有限制。
JavaScript split 函數的返回值是一個子字符串數組。如果字符串不能被拆分，它將返回一個空數組。
let text = "Hello this is akashminds";console.log(text.split(" "));// ["Hello", "this", "is", "akashminds"];let text = "Hello this is akashminds";console.log(text.split(" ", 3)); // ["akashminds"];
JavaScript substr 函數用于提取字符串的一部分。它有兩個參數：開始位置和子字符串的長度。該函數返回一個新字符串，其中包含原始字符串的提取部分。
如果起始位置為負數，則從字符串的末尾開始計數。如果省略長度參數，JavaScript substr 會提取從字符串開始位置到結尾的所有字符。
JavaScript substr 函數可用于提取字符串的一部分或通過連接兩個子字符串來創建新字符串。它還可以用于找出給定字符串中是否存在某個字符或子字符串。
const test = "Hey!, this is Akashminds, have a nice day ahead.";console.log(test.substring(0, 30));// Hey!, this is Akashminds, have
作為用途最廣泛、用途最廣泛的編程語言之一，JavaScript 有著悠久的歷史和光明的未來。在本文中，我們通過示例探索了最常用的 9 個 JavaScript 函數。
在 JavaScript 中使用函數有很多優點。
首先，如果你有很多代碼需要重用，把它放在一個函數中可以很容易地在你需要的時候再次調用它。
其次，使用函數可以通過將代碼分解成更小的部分來幫助您提高代碼的可讀性。
這些是最常用的 9 個 JavaScript 函數以及示例。掌握這些功能將幫助你編寫更好的代碼，成為更精通的程序員。
業辦公管理系統，可以提供強大的模塊化服務，幫助企業進行諸如制定計劃、組織活動、上班考勤、領導管理和日志記錄等功能，各個部分以模塊化進行劃分，軟件具體可以分為部門管理、角色管理、用戶管理、考勤管理、日志管理等部分。
這個系統使用了現在很流行的開發軟件和相關技術，使用了目前最流行最方便的JAVA框架——SpringBoot框架，安全的shiro權限管理解決方案、前端使用了Thymeleaf作為模板語言，關系型數據庫框架——mybatis，其中的MySQL數據庫是中小型數據處理的最優選擇方案。
SpringBoot框架是繼spingMVC框架之后的有一個非常受歡迎的框架，具有很高的實用性，大大地減少了框架搭建之時的各種配置工作。是目前最優秀的JAVA框架，可以說是當SpringBoot框架出現之后，別的框架就黯然失色。該特性使開發人員能夠擺脫復雜的配置工作和依賴的管理工作，更加關注業務邏輯。
1.項目基于SpringBoot，簡化了大量的配置和Maven依賴。
2.日志記錄系統，記錄用戶的登陸、登出，用戶執行的操作，通過@BizLog注解以及Spring中的AOP功能，記錄了具體到用戶的業務操作、登入登出，并且可以下載excel格式，方便查看。
3.利用Thymeleaf使得前端html代碼看起來更加清晰。
4.通過角色管理來配置菜單，達到菜單為不同部門顯示的目的，間接實現了權限的管理。
5.創建表后，通過LinGenerater類可生成包括html、js、Dao、Service、Controller等代碼，復制進項目可直接使用。
Lin中摒棄了傳統的xml配置文件，使得配置文件更加清晰、簡潔，下列為Shrio配置文件中的片段
@Configuration
public class ShiroConfig {
/**
* 安全管理器
* @param rememberMeManager
* @return
*/
@Bean
public DefaultWebSecurityManager securityManager(CookieRememberMeManager rememberMeManager){
DefaultWebSecurityManager securityManager = new DefaultWebSecurityManager();
securityManager.setRememberMeManager(rememberMeManager);
securityManager.setRealm(this.shiroDbRealm());
return securityManager;
}
@Bean
public ShiroDbRealm shiroDbRealm(){
return new ShiroDbRealm();
}
項目借助Mybatis Plus代碼生成器生成Bean以及Dao，通過Velocity生成Controller、Service、ServiceImpl、html、js文件。在數據庫中創建新表后，代碼生成文件即可根據此表生成上述文件，實現了基本的表格展示、增刪改查功能，可直接復制進項目中直接使用，添加菜單數據到數據庫，即可在項目中看到此菜單頁面。
public static void main(String[] args) throws IOException {
// 參數為表名
LinGenerater lg = new LinGenerater("thing");
// 此方法可以生成代碼
lg.execute();
// 此方法可以插入菜單數據
lg.insertMenu("thing", "測試生成", "globe");
} 日志記錄通過aop(LogAop類)方式對所有包含@BizLog注解的方法進行aop切入，通過@Bizlog注解中的value屬性來獲取用戶所做的操作，封裝為日志類，異步存入數據庫中（通過ScheduledThreadPoolExecutor類）。
@Pointcut("@annotation(com.du.lin.annotation.BizLog)")
public void logCut() {
}下面是便簽功能實現的部分片段。 后端：
List<Memo> list = service.getUserMemoList();
request.setAttribute("memolist", list);前端html：
<li th:each="memo,memoStat:${memolist}">
<div>
<small th:text="${memo.time}"></small>
<small th:text="${memo.time}"></small>
<h4 th:text="${memo.title}"></h4>
<p th:text="${memo.text}"></p>
<a th:id="${memo.id}" onclick="deletememodialog(this)">
<i class="fa fa-trash-o "></i></a>
</div>
</li>項目演示視頻如下：
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
獲取源碼請關注并私信“BG”
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
