1. 背景介紹

1.1 為何選擇 Spring Boot + Vue？

在現(xiàn)代 Web 開(kāi)發(fā)中，前后端分離已成為一種標(biāo)準(zhǔn)實(shí)踐。Spring Boot 提供了強(qiáng)大的后端開(kāi)發(fā)能力，尤其在構(gòu)建企業(yè)級(jí)應(yīng)用時(shí)，其輕量級(jí)、高效性和豐富的生態(tài)系統(tǒng)讓開(kāi)發(fā)者如虎添翼。而 Vue.js 則以其簡(jiǎn)單易學(xué)的語(yǔ)法和靈活的組件系統(tǒng)，成為前端開(kāi)發(fā)的熱門(mén)選擇。結(jié)合這兩個(gè)技術(shù)棧，我們可以輕松實(shí)現(xiàn)復(fù)雜的業(yè)務(wù)邏輯與優(yōu)秀的用戶體驗(yàn)。

1.2 多級(jí)目錄的應(yīng)用場(chǎng)景

多級(jí)目錄廣泛應(yīng)用于后臺(tái)管理系統(tǒng)、權(quán)限管理系統(tǒng)等場(chǎng)景。通過(guò)多級(jí)目錄，用戶可以層層遞進(jìn)地訪問(wèn)各個(gè)功能模塊。想象一下，一個(gè)只有一級(jí)菜單的管理系統(tǒng)將多么混亂和不可維護(hù)，因此，多級(jí)目錄的設(shè)計(jì)與實(shí)現(xiàn)顯得尤為重要。

2. 數(shù)據(jù)庫(kù)設(shè)計(jì)

2.1 數(shù)據(jù)庫(kù)表結(jié)構(gòu)設(shè)計(jì)

在設(shè)計(jì)多級(jí)目錄時(shí)，數(shù)據(jù)庫(kù)的表結(jié)構(gòu)是整個(gè)系統(tǒng)的基礎(chǔ)。我們需要為目錄和菜單設(shè)計(jì)合理的數(shù)據(jù)表，以支持樹(shù)狀結(jié)構(gòu)和層級(jí)關(guān)系。典型的表結(jié)構(gòu)包括 menu 表，用于存儲(chǔ)菜單的基本信息和層級(jí)關(guān)系。

Menu 表設(shè)計(jì)

CREATE TABLE menu (id BIGINT AUTO_INCREMENT PRIMARY KEY,parent_id BIGINT,  -- 父級(jí)菜單的 IDname VARCHAR(100) NOT NULL,  -- 菜單名稱url VARCHAR(255),  -- 菜單鏈接icon VARCHAR(50),  -- 菜單圖標(biāo)order_num INT,  -- 菜單排序level INT,  -- 菜單層級(jí)permission VARCHAR(255),  -- 關(guān)聯(lián)的權(quán)限標(biāo)識(shí)create_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP,  -- 創(chuàng)建時(shí)間update_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP  -- 更新時(shí)間
);

在這個(gè)表結(jié)構(gòu)中，parent_id 字段用于表示父級(jí)菜單，level 字段表示菜單的層級(jí)，通過(guò)這兩個(gè)字段，我們可以輕松地實(shí)現(xiàn)樹(shù)狀結(jié)構(gòu)。

2.2 多級(jí)目錄數(shù)據(jù)的存儲(chǔ)方案

為了實(shí)現(xiàn)多級(jí)目錄，我們需要設(shè)計(jì)一個(gè)遞歸的結(jié)構(gòu)。通過(guò) parent_id 字段，我們可以為每個(gè)菜單項(xiàng)指定父級(jí)菜單，實(shí)現(xiàn)樹(shù)形結(jié)構(gòu)的存儲(chǔ)。這種設(shè)計(jì)在查詢時(shí)可能稍顯復(fù)雜，但在實(shí)際應(yīng)用中能夠很好地支持多級(jí)目錄的展示。

2.3 菜單與權(quán)限的關(guān)系設(shè)計(jì)

在實(shí)際項(xiàng)目中，菜單往往與權(quán)限系統(tǒng)掛鉤。我們可以在 menu 表中增加一個(gè) permission 字段，用于存儲(chǔ)與該菜單關(guān)聯(lián)的權(quán)限標(biāo)識(shí)。這樣，我們可以根據(jù)用戶的權(quán)限動(dòng)態(tài)生成菜單，確保用戶只能看到自己有權(quán)限訪問(wèn)的部分。

3. 后端實(shí)現(xiàn)

3.1 Spring Boot 項(xiàng)目結(jié)構(gòu)

在 Spring Boot 項(xiàng)目中，我們通常按照功能模塊進(jìn)行劃分。在多級(jí)目錄的實(shí)現(xiàn)中，我們可以創(chuàng)建 menu 模塊來(lái)專門(mén)處理菜單相關(guān)的邏輯。項(xiàng)目結(jié)構(gòu)如下：

src
├── main
│   ├── java
│   │   └── com
│   │       └── example
│   │           └── project
│   │               ├── controller  # 控制器層
│   │               ├── service  # 服務(wù)層
│   │               ├── repository  # 數(shù)據(jù)訪問(wèn)層
│   │               └── entity  # 實(shí)體類
│   └── resources
│       └── application.yml  # 配置文件

3.2 JPA 實(shí)現(xiàn)多級(jí)目錄的數(shù)據(jù)操作

在數(shù)據(jù)訪問(wèn)層，我們使用 JPA 來(lái)操作數(shù)據(jù)庫(kù)表。為了實(shí)現(xiàn)多級(jí)目錄，我們可以通過(guò)遞歸查詢來(lái)獲取菜單的層級(jí)結(jié)構(gòu)。以下是一個(gè)簡(jiǎn)單的 JPA 實(shí)現(xiàn)示例：

Menu 實(shí)體類

@Entity
@Table(name = "menu")
public class Menu {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)private Long id;@Column(name = "parent_id")private Long parentId;private String name;private String url;private String icon;private Integer orderNum;private Integer level;private String permission;// Getters and Setters
}

MenuRepository 接口

@Repository
public interface MenuRepository extends JpaRepository<Menu, Long> {List<Menu> findByParentId(Long parentId);@Query("SELECT m FROM Menu m WHERE m.permission IN :permissions")List<Menu> findByPermissions(@Param("permissions") List<String> permissions);
}

通過(guò) findByParentId 方法，我們可以遞歸地查詢子菜單，構(gòu)建完整的目錄結(jié)構(gòu)。

3.3 權(quán)限管理與目錄訪問(wèn)控制

在權(quán)限管理中，我們可以通過(guò) permission 字段與用戶的權(quán)限進(jìn)行匹配。在實(shí)際應(yīng)用中，可以通過(guò)攔截器或注解的方式來(lái)控制用戶對(duì)不同菜單項(xiàng)的訪問(wèn)。以下是一個(gè)簡(jiǎn)單的權(quán)限控制實(shí)現(xiàn)：

權(quán)限攔截器

@Component
public class PermissionInterceptor extends HandlerInterceptorAdapter {@Autowiredprivate MenuRepository menuRepository;@Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {String userId = request.getHeader("UserId");// 獲取用戶權(quán)限List<String> userPermissions = getUserPermissions(userId);// 獲取請(qǐng)求路徑對(duì)應(yīng)的菜單權(quán)限String requestUri = request.getRequestURI();Menu menu = menuRepository.findByUrl(requestUri);if (menu != null && !userPermissions.contains(menu.getPermission())) {response.sendError(HttpServletResponse.SC_FORBIDDEN);return false;}return true;}private List<String> getUserPermissions(String userId) {// 假設(shè)從數(shù)據(jù)庫(kù)或緩存中獲取用戶權(quán)限return Arrays.asList("MENU_READ", "MENU_WRITE");}
}

4. 前端實(shí)現(xiàn)

4.1 Vue 路由與組件設(shè)計(jì)

在 Vue 中，多級(jí)目錄的實(shí)現(xiàn)主要通過(guò) Vue Router 進(jìn)行。我們可以利用嵌套路由來(lái)實(shí)現(xiàn)層級(jí)結(jié)構(gòu)，同時(shí)通過(guò)動(dòng)態(tài)加載路由來(lái)提高應(yīng)用性能。

路由配置示例

const routes = [{path: '/dashboard',component: Dashboard,children: [{path: 'analytics',component: Analytics,},{path: 'reports',component: Reports,},],},
];

4.2 動(dòng)態(tài)菜單生成

為了根據(jù)用戶權(quán)限動(dòng)態(tài)生成菜單，我們需要在 Vuex 中存儲(chǔ)用戶權(quán)限信息，并結(jié)合路由配置生成菜單樹(shù)。以下是一個(gè)簡(jiǎn)單的 Vuex 生成菜單的例子：

export const generateMenu = (routes, permissions) => {const menu = routes.filter(route => {if (route.children) {route.children = generateMenu(route.children, permissions);}return permissions.includes(route.name);});return menu;
};

4.3 用戶權(quán)限與菜單展示

在前端，我們可以通過(guò) Vue Router 的導(dǎo)航守衛(wèi)來(lái)檢查用戶的權(quán)限，并根據(jù)權(quán)限動(dòng)態(tài)生成菜單。例如，可以在路由守衛(wèi)中根據(jù)用戶權(quán)限動(dòng)態(tài)

加載可訪問(wèn)的路由。

5. 前后端聯(lián)動(dòng)

5.1 API 設(shè)計(jì)與數(shù)據(jù)交互

前后端的聯(lián)動(dòng)主要通過(guò) API 實(shí)現(xiàn)。在設(shè)計(jì) API 時(shí)，我們可以通過(guò)一個(gè)統(tǒng)一的接口來(lái)獲取用戶的菜單數(shù)據(jù)和權(quán)限信息，從而在前端生成動(dòng)態(tài)菜單。

API 示例

@RestController
@RequestMapping("/api/menu")
public class MenuController {@Autowiredprivate MenuService menuService;@GetMapping("/user-menus")public List<Menu> getUserMenus() {String userId = SecurityContextHolder.getContext().getAuthentication().getName();return menuService.getUserMenus(userId);}
}

5.2 JWT 認(rèn)證與權(quán)限校驗(yàn)

為了確保安全性，我們通常會(huì)在 API 調(diào)用中加入 JWT 認(rèn)證。在 Spring Boot 中，可以通過(guò)配置 JwtTokenFilter 來(lái)實(shí)現(xiàn)對(duì)請(qǐng)求的攔截和權(quán)限校驗(yàn)。

JwtTokenFilter 示例

public class JwtTokenFilter extends OncePerRequestFilter {@Autowiredprivate JwtTokenProvider jwtTokenProvider;@Overrideprotected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)throws ServletException, IOException {String token = jwtTokenProvider.resolveToken(request);if (token != null && jwtTokenProvider.validateToken(token)) {Authentication auth = jwtTokenProvider.getAuthentication(token);SecurityContextHolder.getContext().setAuthentication(auth);}filterChain.doFilter(request, response);}
}

5.3 前后端數(shù)據(jù)一致性

為了保證前后端的數(shù)據(jù)一致性，我們需要在后端保證菜單數(shù)據(jù)和權(quán)限數(shù)據(jù)的同步更新，同時(shí)在前端根據(jù)用戶權(quán)限動(dòng)態(tài)加載菜單。

6. 總結(jié)與反思

一個(gè)成功的多級(jí)目錄系統(tǒng)的實(shí)現(xiàn)不僅依賴于技術(shù)上的解決方案，還需要在系統(tǒng)設(shè)計(jì)、性能優(yōu)化和用戶體驗(yàn)之間取得平衡。希望本文的內(nèi)容能為你在項(xiàng)目開(kāi)發(fā)中提供一些有益的參考和啟示。