springboot + vue 實現遞迴生成多級選單(例項程式碼)
阿新 • • 發佈:2020-01-07
開發過程中,涉及到多級選單的應用,找了一些資料案例實現如下(使用springboot+layui+oracle):
建立選單表 :
-- 建立選單表 create table wxmini_menus( menu_id number unique,--選單ID menu_name varchar2(20),menu_url varchar2(200),menu_icon varchar2(100),parent_id number,--父選單ID status varchar2(10),menu_sort number,last_update_date DATE not null,last_updated_by NUMBER not null,creation_date DATE not null,created_by NUMBER not null,last_update_login NUMBER ); -- 插入選單記錄 insert into wxmini_menus values((select 1 from dual),'設定',null,1,100,sysdate,-1,-1); insert into wxmini_menus values((select max(menu_id)+1 from yl_wxmini_menus),'使用者','網站使用者','角色管理',-1); --主選單二 insert into wxmini_menus values((select max(menu_id)+1 from yl_wxmini_menus),'主頁','控制檯',5,'主頁一','主頁二',-1);
實體類 WxMenu.java:
public class WxMenu { private String menu_id; private String menu_name; private String menu_url; private String menu_icon; private String parent_id; private String parent_menu_name; private String status; private String menu_sort; private String last_update_date; private long last_updated_by; private String creation_date; private long created_by; private long last_update_login; private List<WxMenu> childMenus; ...... } Controller控制層 : @Controller @RequestMapping("/index") public class IndexController { @Autowired private WxUserService wxUserService; /** * 獲取所有選單資料 * @return */ @ResponseBody @RequestMapping(value = "/loadAuthMenus",method = RequestMethod.GET) public LayuiJsonFormat<HashMap> login(String username,String password,HttpServletRequest request) { // 獲取所有選單資料 List<WxMenu> wxMenus = wxUserService.getAllMenus(); //定義 儲存一級選單 List<WxMenu> menuList = new ArrayList<WxMenu>(); // 先找到所有的一級選單 for (int i = 0; i < wxMenus.size(); i++) { // 一級選單沒有父選單,為null if (StringUtils.isBlank(wxMenus.get(i).getParent_id())) { menuList.add(wxMenus.get(i)); } } // for呼叫遞迴,迴圈獲取所有子選單 for (WxMenu menu : menuList) { menu.setChildMenus(getChildmenus(menu.getMenu_id(),wxMenus)); } //儲存所有選單,將資料回傳至 layui 前端 map.put("menus",menuList); return LayuiJsonFormat.createBySuccess(map.size(),map); } /** * 遞迴子選單 * @param id * @param wxMenus * @return */ private List<WxMenu> getChildmenus(String id,List<WxMenu> wxMenus) { // 子選單 List<WxMenu> childMenus = new ArrayList<>(); for (WxMenu menu : wxMenus) { if (StringUtils.isNotBlank(menu.getParent_id())) { if (menu.getParent_id().equals(id)) { childMenus.add(menu); } } } for (WxMenu menu : childMenus) { //資料庫動態儲存選單的url,此時判斷url為空的,則是節點選單(存在子選單) if (StringUtils.isBlank(menu.getMenu_url())) { // 遞迴呼叫 menu.setChildMenus(getChildmenus(menu.getMenu_id(),wxMenus)); } } if (childMenus.size() == 0) { return null; } return childMenus; } }
service類 WxUserService.java
public interface WxUserService { //獲取所有選單 List<WxMenu> getAllMenus(); } service實現類: @Service("wxUserService") public class WxUserServiceImpl implements WxUserService { @Autowired private WxUserMapper wxUserMapper; @Override public List<WxMenu> getAllMenus() { return wxUserMapper.getAllMenus(); } } mapper: public interface WxUserMapper { List<WxMenu> getAllMenus(); }
mybatis sql :
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.yinlong.wxmini.mapper.WxUserMapper"> <!-- 獲取所有選單 --> <select id="getAllMenus" resultType="com.yinlong.wxmini.entity.WxMenu"> select * from wxmini_menus wm order by wm.menu_sort asc </select> </mapper> 最後,前端樣式使用 layui ,html + js 如下: <ul id="app-4" class="layui-nav layui-nav-tree" lay-shrink="all" lay-filter="layadmin-system-side-menu"> <li data-name="home" class="layui-nav-item layui-nav-itemed"> <div v-for="menu in menus" > <a href="javascript:;" lay-tips="主頁" lay-direction="2"> <i class="layui-icon layui-icon-home"></i> <cite>{{ menu.menu_name }}</cite> </a> <dl v-for="child in menu.childMenus" style="padding: 0px !important;" class="layui-nav-child"> <dd data-name="console" > <a class="v-href-menu" lay-href="javascript:void(0)" >{{ child.menu_name }}</a> </dd> </dl> </div> </li> </ul> <script type="text/javascript" th:src="@{/layuiadmin/layui/layui.js}"></script> <script type="text/javascript" th:src="@{/layuiadmin/vue.js}" ></script> <script type="text/javascript" th:src="@{/layuiadmin/layui/jquery-3.2.1.min.js}" ></script> <script> $(document).ready(function(){ $.get("/index/loadAuthMenus",function(data,status){ var vm = new Vue({ el: '#app-4',data: { menus: data.data.menus } }) }); }); </script>
最後效果圖如下:
總結
以上所述是小編給大家介紹的springboot + vue 實現遞迴生成多級選單,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回覆大家的。在此也非常感謝大家對我們網站的支援!
如果你覺得本文對你有幫助,歡迎轉載,煩請註明出處,謝謝!