LayUI+Shiro implementiert ein dynamisches Menü und erinnert sich an das Beispiel der Menüerweiterung

<Abhängigkeiten>

        <!--Ali FastJson-Abhängigkeit-->
        <Abhängigkeit>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.39</version>
        </Abhängigkeit>
        <!--Berechtigungskontrolle-->
        <Abhängigkeit>
            <groupId>org.apache.shiro</groupId>
            <artifactId>shiro-spring-boot-starter</artifactId>
            <version>1.4.0-RC2</version>
        </Abhängigkeit>

        <!-- Kompatibel mit Shiro von Thymeleaf -->
        <Abhängigkeit>
            <groupId>com.github.theborakompanioni</groupId>
            <artifactId>Thymeleaf-Extras-Shiro</artifactId>
            <version>2.0.0</version>
        </Abhängigkeit>

        <Abhängigkeit>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </Abhängigkeit>
        <Abhängigkeit>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </Abhängigkeit>
        <Abhängigkeit>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.4</version>
        </Abhängigkeit>

        <Abhängigkeit>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>Laufzeit</scope>
            <optional>wahr</optional>
        </Abhängigkeit>
        <Abhängigkeit>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>Laufzeit</scope>
        </Abhängigkeit>
        <Abhängigkeit>
            <groupId>org.projektlombok</groupId>
            <artifactId>Lombok</artifactId>
            <optional>wahr</optional>
        </Abhängigkeit>
        <Abhängigkeit>
            <groupId>org.springframework.boot</groupId>
            <artifactId>Spring-Boot-Starter-Test</artifactId>
            <scope>Test</scope>
        </Abhängigkeit>
    </Abhängigkeiten>

/**
 * @Autor wxhntmy
 */
@Getter
@Setter
öffentliche Klasse Menü {
    privater String-Name;
    privates String-Symbol;
    private String-URL;
    privater Boolescher Wert versteckt;
    private List<MenuList>-Liste;
}

/**
 * @Autor wxhntmy
 */
@Getter
@Setter
öffentliche Klasse MenuList {
    privater String-Name;
    private String-URL;

    öffentliche Menüliste(Stringname, String-URL) {
        dieser.name = Name;
        diese.url = URL;
    }
}

/**
 * @Autor wxhntmy
 */
@Konfiguration
öffentliche Klasse ShiroConfig {
    /**
     * Interceptor konfigurieren * <p>
     * Definieren Sie die Berechtigungen zum Abfangen von URLs, Priorität von oben nach unten 1). anon: anonymer Zugriff, keine Anmeldung erforderlich 2). authc: Anmeldung erforderlich 3). logout: Abmelden 4).
     * Rollen: Rollenfilter * <p>
     * URL-Übereinstimmungsstil 1). ?: entspricht einem Zeichen, z. B. entspricht /admin? /admin1, aber nicht /admin oder /admin/; 2).
     * *: stimmt mit null oder mehr Zeichenfolgen überein, z. B. stimmt /admin* mit /admin oder /admin123 überein, aber nicht mit /admin/1; 2).
     * **: stimmt mit null oder mehr Pfaden im Pfad überein, z. B. stimmt /admin/** mit /admin/a oder /admin/a/b überein
     * <p>
     * Konfigurieren Sie den Sprungpfad für erfolgreiche und fehlgeschlagene Authentifizierung*/
    @Bohne
    öffentliche ShiroFilterFactoryBean shiroFilterFactoryBean(SecurityManager securityManager) {
        ShiroFilterFactoryBean shiroFilterFactoryBean = neue ShiroFilterFactoryBean();
        shiroFilterFactoryBean.setSecurityManager(securityManager);
        Map<String, String> filterChainDefinitionMap = neue LinkedHashMap<String, String>();

        // Anonymer Zugriff auf statische Ressourcen filterChainDefinitionMap.put("/layui/**", "anon");
        filterChainDefinitionMap.put("/js/**", "anon");
        filterChainDefinitionMap.put("/admin/**", "anon");

        filterChainDefinitionMap.put("/**/*.eot", "anon");
        filterChainDefinitionMap.put("/**/*.svg", "anon");
        filterChainDefinitionMap.put("/**/*.svgz", "anon");
        filterChainDefinitionMap.put("/**/*.ttf", "anon");
        filterChainDefinitionMap.put("/**/*.woff", "anon");
        filterChainDefinitionMap.put("/**/*.woff2", "anon");
        filterChainDefinitionMap.put("/**/*.gif", "anon");

        filterChainDefinitionMap.put("/favicon.ico", "anon");

        filterChainDefinitionMap.put("/login", "anon");
        filterChainDefinitionMap.put("/menu", "anon");
        filterChainDefinitionMap.put("/Benutzer/Anmeldung", "anon");

        // Benutzerabmeldung filterChainDefinitionMap.put("/logout", "logout");


        // Andere Pfade erfordern eine Identitätsauthentifizierung und stehen normalerweise am Ende mit der niedrigsten Priorität filterChainDefinitionMap.put("/**", "authc");

        shiroFilterFactoryBean.setFilterChainDefinitionMap(filterChainDefinitionMap);
        //Anmeldepfad shiroFilterFactoryBean.setLoginUrl("/login");
        // Startseite //shiroFilterFactoryBean.setSuccessUrl("/index");
        //Überprüfung des Sprungpfads fehlgeschlagen shiroFilterFactoryBean.setUnauthorizedUrl("/error");
        gibt shiroFilterFactoryBean zurück;
    }

    /**
     * SecurityManager Sicherheitsmanager; der Kern von Shiro* 
     * @zurückkehren
     */
    @Bohne
    öffentlicher DefaultWebSecurityManager SicherheitsManager() {
        DefaultWebSecurityManager defaultWebSecurityManager = neuer DefaultWebSecurityManager(myRealm());
        gibt defaultWebSecurityManager zurück;
    }

    /**
     * Benutzerdefinierter Bereich
     * 
     * @zurückkehren
     */
    @Bohne
    öffentliches MeinReich meinReich() {
        MeinRealm myRealm = neues MeinRealm();
        myRealm.setCredentialsMatcher(myCredentialsMatcher());
        gib myRealm zurück;
    }

    /**
     * Verschlüsselungsmethode konfigurieren * @return
     */
    @Bohne
    öffentliche MyCredentialsMatcher myCredentialsMatcher() {
        gibt einen neuen MyCredentialsMatcher() zurück;
    }

    /**
     * Shiro-Lebenszyklusprozessor konfigurieren */
    @Bohne
    öffentlicher LifecycleBeanPostProcessor lifecycleBeanPostProcessor() {
        gibt einen neuen LifecycleBeanPostProcessor() zurück;
    }

    /**
     * Proxy-Klassen automatisch erstellen. Wenn sie nicht hinzugefügt werden, werden Shiros Anmerkungen möglicherweise nicht wirksam.
     */
    @Bohne
    @DependsOn({ "lifecycleBeanPostProcessor" })
    öffentlicher DefaultAdvisorAutoProxyCreator AdvisorAutoProxyCreator() {
        DefaultAdvisorAutoProxyCreator advisorAutoProxyCreator = neuer DefaultAdvisorAutoProxyCreator();
        adviserAutoProxyCreator.setProxyTargetClass(true);
        RückkehrberaterAutoProxyCreator;
    }

    /**
     * Shiro-Anmerkungen aktivieren*/
    @Bohne
    öffentlicher AuthorizationAttributeSourceAdvisor authorizationAttributeSourceAdvisor() {
        AuthorizationAttributeSourceAdvisor authorizationAttributeSourceAdvisor = neuer AuthorizationAttributeSourceAdvisor();
        authorizationAttributeSourceAdvisor.setSecurityManager(securityManager());
        Rückgabewert: authorizationAttributeSourceAdvisor;
    }

    @Bohne
    öffentlicher ShiroDialect shiroDialect() {
        gibt neuen ShiroDialect() zurück;
    }
}

/**
 * Benutzerdefinierte Shiro-Passwortüberprüfung * @author wxhntmy
 */
öffentliche Klasse MyCredentialsMatcher implementiert CredentialsMatcher {

    @Ressource
    privater UserMapper userMapper;

    @Überschreiben
    öffentliches Boolean doCredentialsMatch(AuthenticationToken token, AuthenticationInfo info) {

        BenutzernamePasswortToken utoken = (BenutzernamePasswortToken) Token;

        String-Passwort = neuer String (utoken.getPassword());
        String-Benutzername = utoken.getUsername();

        Benutzer Benutzer = userMapper.getUserById(Benutzername);

        gibt user.getPwd().equals(Passwort) zurück;
    }
}

/**
 * @Autor wxhntmy
 */
öffentliche Klasse MyRealm erweitert AuthorizingRealm {

    @Ressource
    privater RoleMapper Rollenmapper;
    @Ressource
    privater UserRoleListMapper userRoleListMapper;

    //Autorisierung @Override
    geschützte AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principalCollection) {

        SimpleAuthorizationInfo authorizationInfo = neue SimpleAuthorizationInfo();

        Benutzer Benutzer = (Benutzer) PrincipalCollection.getPrimaryPrincipal();
        wenn (Benutzer == null) {
            gibt null zurück;
        }


        Liste<Benutzerrollenliste> Rollenlisten = userRoleListMapper.getUserRoleByUserId(user.getId());

        Liste<Rolle> Rollen = roleMapper.getAllRoles();

        wenn (Rollenlisten != null und !Rollenlisten.istEmpty()) {
            für (UserRoleList roleList : roleLists) {
                für (Rolle Rolle : Rollen) {
                    wenn (Objekte.equals(roleList.getRole_id(), role.getId())) {
                        authorizationInfo.addRole(role.getRole());
                    }
                }
            }
        }
        Rückgabeberechtigungsinfo;
    }

    //Authentifizierung@Override
    geschützte AuthenticationInfo doGetAuthenticationInfo(AuthenticationToken authenticationToken) throws AuthenticationException {
        //Anmeldebenutzerkonto abrufen UsernamePasswordToken utoken = (UsernamePasswordToken) authenticationToken;

        //Das vom Benutzer eingegebene Passwort abrufen String password = new String(utoken.getPassword());
        String-Benutzername = utoken.getUsername();

        Benutzer Benutzer = neuer Benutzer();

        user.setId(Benutzername);
        Benutzer.setPwd(Passwort);

        //Der eindeutige Name des aktuellen Realm-Objekts. Rufen Sie die Methode getName() der übergeordneten Klasse auf. String realmName = getName();

        // Holen Sie sich den Salt-Wert, d. h. den Benutzernamen ByteSource salt = ByteSource.Util.bytes(password);

        SimpleAuthenticationInfo info = neue SimpleAuthenticationInfo (Benutzer, Passwort, Salt, RealmName);

        Rückgabeinfo;

    }

}

@RestController
öffentliche Klasse LoginController {

    @Ressource
    privater RoleMapper Rollenmapper;
    @Ressource
    privater UserRoleListMapper userRoleListMapper;
    @Ressource
    privater UserMapper userMapper;

    @RequestMapping(Wert = "/Benutzer/Anmeldung", Methode = RequestMethod.GET)
    öffentliche Msg<String> getUserByName(@RequestParam String Benutzer,
                                     @RequestParam String-Kennwort,
                                     @RequestParam String Benutzertyp,
                                     @RequestParam String-Box) {


        Rolle Rolle = roleMapper.getRoleByRoleName(Benutzertyp);
        Benutzer uUser = userMapper.getUserById(Benutzer);
        wenn (uUser == null){
            return Msg.fail("BenutzerUnexit");
        }
        //Anmeldeüberprüfung UsernamePasswordToken token = neuer UsernamePasswordToken(Benutzer, Passwort);
        Betreff Betreff = SecurityUtils.getSubject();
        versuchen {
            Betreff.Login(Token);
        } Fang (AuthenticationException e) {
            return Msg.fail("Passwortfehler");
        }
        //Legen Sie die Ablaufzeit für die Anmeldung in Millisekunden fest. Hier ist sie auf 30 Minuten eingestellt SecurityUtils.getSubject().getSession().setTimeout(1800000);
        return Msg.ok("Erfolg");
    }
}

@Regler
öffentliche Klasse PageController {

    @Ressource
    privater UserMapper userMapper;

    @RequestMapping(Wert = "/login", Methode = RequestMethod.GET)
    öffentliche Zeichenfolge Login(){
        gib "login" zurück;
    }

    @RequestMapping(Wert = "/Benutzer/Index", Methode = RequestMethod.GET)
    öffentlicher String-Index (Modellmodell) {

        Benutzer Benutzer = (Benutzer) SecurityUtils.getSubject().getPrincipal();

        Benutzer uuser = userMapper.getUserById(user.getId());

        if (StringUtils.isEmpty(Benutzer)) {
            gibt "Umleitung:/Login" zurück;
        }

        model.addAttribute("Benutzer", uuser);

        gib "Index" zurück;
    }
}

/**
 * @Autor wxhntmy
 */
@RestController
öffentliche Klasse MenuController {

    @Ressource
    privater RoleMapper Rollenmapper;
    @Ressource
    privater UserRoleListMapper userRoleListMapper;

    //Benutzermenüsammlung merken private Map<String, Map> menu_map = new HashMap<>();

    @RequestMapping(Wert = "/Menü", Methode = RequestMethod.GET)
    öffentliche Msg<Liste<Menü>> getMenu() {
        Benutzer Benutzer = (Benutzer) SecurityUtils.getSubject().getPrincipal();

        Liste<Menü> Liste = neue ArrayList<>();

        if (StringUtils.isEmpty(Benutzer)) {
            return Msg.fail(list, "Anmeldeinformationen sind abgelaufen! Bitte melden Sie sich erneut an!");
        }

        //Denken Sie daran, Map<String, Boolean> zu sammeln map_store = new HashMap<>();

        wenn (menu_map.containsKey(user.getId())){
            map_store = menu_map.get(Benutzer.getId());
        }

        Map<String, String> map = neue HashMap();
        List<Benutzerrollenliste> roleLists = userRoleListMapper.getUserRoleByUserId(user.getId());
        für (UserRoleList roleList : roleLists) {
            Rolle Rolle = roleMapper.getRoleByRoleId(roleList.getRole_id());
            map.put(role.getRole(), roleList.getUser_id());
        }
        Menü menu1 = neues Menü();
        menu1.setName("Startseite");
        menu1.setIcon("&#xe68e;");
        menu1.setUrl("/Benutzer/Index");
        menu1.setHidden(false);

        Liste<Menüliste> menuLists2 = neue ArrayList<>();
        menu1.setList(menüListen2);
        Liste.Hinzufügen(Menü1);


        wenn (map.containsKey("Student")){
            Menü menu2 = neues Menü();
            Menü menu3 = neues Menü();

            menu2.setName("Kursverwaltung");
            menu2.setIcon("&#xe609;");
            menu2.setUrl("");
            menu2.setHidden(map_store.getOrDefault("Kursverwaltung", false));
            Liste<Menüliste> Menülisten = neue ArrayListe<>();
            MenuList menuList1 = neue MenuList("Ausgewählte Kurse", "");
            MenuList menuList2 = neue MenuList("Wahlfächer", "");
            MenuList menuList22 = neue MenuList("Kursforum", "");
            Menülisten.Hinzufügen(Menüliste1);
            Menülisten.Hinzufügen(Menüliste2);
            menuLists.add(menuList22);
            menu2.setList(Menülisten);

            menu3.setName("Leistungsmanagement");
            menu3.setIcon("&#xe609;");
            menu3.setUrl("");
            menu3.setHidden(map_store.getOrDefault("Leistungsmanagement", false));
            Liste<Menüliste> menuLists3 = neue ArrayList<>();
            MenuList menuList3 = new MenuList("Kursergebnisse übermitteln", "");
            MenuList menuList33 = new MenuList("Kursprotokoll übermitteln", "");
            MenuList menuList4 = new MenuList("Ergebnisse des praktischen Trainingskurses", "");
            MenuList menuList5 = neue MenuList("Kursfragebogen", "");
            menuLists3.add(menuList3);
            menuLists3.add(menuList33);
            menuLists3.add(menuList4);
            menuLists3.add(menuList5);
            menu3.setList(menuLists3);

            Liste.Hinzufügen(Menü2);
            Liste.Hinzufügen(Menü3);
        }

        wenn (map.containsKey("Lehrer")){
            Menü menu2 = neues Menü();
            Menü menu3 = neues Menü();

            menu2.setName("Kursverwaltung");
            menu2.setIcon("&#xe609;");
            menu2.setUrl("");
            menu2.setHidden(map_store.getOrDefault("Kursverwaltung", false));
            Liste<Menüliste> Menülisten = neue ArrayListe<>();
            MenuList menuList1 = new MenuList("Fortbildungen des Professors", "");
            MenuList menuList2 = neue MenuList("Kursforum", "");
            Menülisten.Hinzufügen(Menüliste1);
            Menülisten.Hinzufügen(Menüliste2);
            menu2.setList(Menülisten);

            menu3.setName("Leistungsmanagement");
            menu3.setIcon("&#xe609;");
            menu3.setUrl("");
            menu3.setHidden(map_store.getOrDefault("Leistungsmanagement", false));
            Liste<Menüliste> menuLists3 = neue ArrayList<>();
            MenuList menuList3 = neue MenuList("Kurserfolgskontrolle", "");
            MenuList menuList33 = neue MenuList("Kursprotokoll-Genehmigung", "");
            MenuList menuList4 = new MenuList("Ergebnisse des praktischen Trainingskurses", "");
            menuLists3.add(menuList3);
            menuLists3.add(menuList33);
            menuLists3.add(menuList4);
            menu3.setList(menuLists3);

            Liste.Hinzufügen(Menü2);
            Liste.Hinzufügen(Menü3);
        }
        if (map.containsKey("Berufstätiger")){
            Menü menu2 = neues Menü();
            Menü menu3 = neues Menü();

            menu2.setName("Praxisorientiertes Lehrgangsmanagement");
            menu2.setIcon("&#xe609;");
            menu2.setUrl("");
            menu2.setHidden(map_store.getOrDefault("Praxisorientiertes Lehrgangsmanagement", false));
            Liste<Menüliste> Menülisten = neue ArrayListe<>();
            MenuList menuList1 = new MenuList("Zu genehmigende praktische Lehrgänge", "");
            MenuList menuList2 = new MenuList("Schulungskurse hinzufügen", "");
            MenuList menuList3 = new MenuList("Praktische Lehrgangsleitung", "");
            Menülisten.Hinzufügen(Menüliste1);
            Menülisten.add(Menüliste2);
            Menülisten.Hinzufügen(Menüliste3);
            menu2.setList(Menülisten);

            menu3.setName("Fragebogen veröffentlichen");
            menu3.setIcon("&#xe609;");
            menu3.setUrl("");
            menu3.setHidden(map_store.getOrDefault("Fragebogen veröffentlichen", false));
            Liste<Menüliste> Menülisten1 = neue ArrayListe<>();
            MenuList menuList11 = new MenuList("Fragebogen veröffentlichen", "");
            MenuList menuList21 = neue MenuList("Fragebogen zur Genesung", "");
            menuLists1.add(menuList11);
            menuLists1.add(menuList21);
            menu3.setList(menüListen1);

            Liste.Hinzufügen(Menü2);
            Liste.Hinzufügen(Menü3);
        }
        wenn (map.containsKey("admin")){
            Menü menu2 = neues Menü();
            Menü menu3 = neues Menü();

            menu2.setName("Benutzerverwaltung");
            menu2.setIcon("&#xe612;");
            menu2.setUrl("");
            menu2.setHidden(map_store.getOrDefault("Benutzerverwaltung", false));
            Liste<Menüliste> Menülisten = neue ArrayListe<>();
            MenuList menuList0 = neue MenuList("Benutzer hinzufügen", "");
            MenuList menuList1 = neue MenuList("Studentenkonto", "");
            MenuList menuList2 = neue MenuList("Lehrerkonto", "");
            MenuList menuList3 = new MenuList("Schulungsverantwortlicher Konto", "");
            Menülisten.add(Menüliste0);
            Menülisten.Hinzufügen(Menüliste1);
            Menülisten.Hinzufügen(Menüliste2);
            Menülisten.add(Menüliste3);
            menu2.setList(Menülisten);

            menu3.setName("Datenbankverwaltung");
            menu3.setIcon("&#xe857;");
            menu3.setUrl("");
            menu3.setHidden(map_store.getOrDefault("Datenbankverwaltung", false));
            Liste<Menüliste> menuLists3 = neue ArrayList<>();
            MenuList menuList4 = neue MenuList("Backup-Datenbank", "");
            MenuList menuList5 = neue MenuList("Datenbank wiederherstellen", "");
            menuLists3.add(menuList4);
            menuLists3.add(menuList5);
            menu3.setList(menuLists3);

            Liste.Hinzufügen(Menü2);
            Liste.Hinzufügen(Menü3);
        }

        Menü menu4 = neues Menü();
        menu4.setName("Systemeinstellungen");
        menu4.setIcon("&#xe620;");
        menu4.setUrl("");
        menu4.setHidden(map_store.getOrDefault("Systemeinstellungen", false));
        Liste<Menüliste> menuLists4 = neue ArrayList<>();
        MenuList menuList5 = new MenuList("Persönliche Informationen ändern", "");
        MenuList menuList6 = neue MenuList("Passwort ändern", "");
        MenuList menuList7 = neue MenuList("Cache leeren", "");
        menuLists4.add(menuList5);
        menuLists4.add(menuList6);
        menuLists4.add(menuList7);
        menu4.setList(menuLists4);

        Menü menu5 = neues Menü();
        menu5.setName("Abmelden");
        menu5.setIcon("&#xe65c;");
        menu5.setUrl("/abmelden");
        menu5.setHidden(false);
        Liste<Menüliste> menuLists5 = neue ArrayList<>();
        menu5.setList(menuLists5);

        Liste.Hinzufügen(Menü4);
        Liste.Hinzufügen(Menü5);

        wenn (map.containsKey("Student")){
            return Msg.ok(Liste, "STU");
        }
        String-Nachricht = null;
        wenn (map.containsKey("Lehrer")){
            Nachricht = "TEA";
        }
        if (map.containsKey("Berufstätiger")){
            Nachricht = "PRI";
        }
        wenn (map.containsKey("admin")){
            Nachricht = "ADM";

        }
        return Msg.ok(Liste, Nachricht);
    }

    @RequestMapping(Wert = "/menu_storage", Methode = RequestMethod.GET)
    öffentliche Msg<String> menu_storage(@RequestParam String data) {

        JSONArray jsonArray = JSONArray.parseArray(Daten);
        Benutzer Benutzer = (Benutzer) SecurityUtils.getSubject().getPrincipal();

        if (StringUtils.isEmpty(Benutzer)) {
            return Msg.fail("Anmeldeinformationen sind abgelaufen! Bitte melden Sie sich erneut an!");
        }
        //Denken Sie daran, Map<String, Boolean> zu sammeln map_store = new HashMap<>();

        für (Objekt o: jsonArray) {
            JSONObject jsonObject = JSONObject.parseObject(o.toString());
            map_store.put(jsonObject.getString("Name"), Boolean.valueOf(jsonObject.getString("versteckt")));
        }

        menu_map.put(Benutzer.getId(), map_store);

        gibt Msg.ok() zurück;
    }
}

		let config = {};
        Funktion set_menu() {
            //ajax-Übermittlungsinformationen$.ajax({
                Typ: "get",
                asynchron: falsch,
                url: "/menu", // Die Anfrage wird an LoginServlet gesendet dataType: 'json',
                Erfolg: Funktion (Nachricht) {
                    wenn (msg.ok === true && msg.data) {
                        config["Name"] = msg.Nachricht;
                        config["Menü"] = msg.data;
                    }
                    wenn (msg.ok === false) {
                        window.location.href = "/abmelden";
                    }
                    wenn (!msg.data) {
                        window.location.href = "/abmelden";
                    }
                },
                Fehler: Funktion (Nachricht) {
                    // Führe diese Funktion aus, wenn die Anforderung fehlschlägt layer.alert('Anforderung der Menüdaten fehlgeschlagen!!!', function (index) {
                        //etwas tun
                        Ebene.schließen(Index);
                    });
                }
            });
        }

        Menü festlegen();


        $(Dokument).bereit(Funktion () {
            //löschen$(".del").click(function () {
                var url = $(this).attr("href");
                var id = $(this).attr("Daten-ID");

                layer.confirm('Möchten Sie wirklich löschen?', {
                    btn: ['OK', 'Abbrechen']
                }, Funktion () {
                    $.get(URL, Funktion (Daten) {
                        wenn (Datencode === 1) {
                            $(id).fadeOut();
                            layer.msg(data.msg, {icon: 1});
                        } anders {
                            layer.msg(data.msg, {icon: 2});
                        }
                    });
                }, Funktion () {
                    layer.msg("Sie haben den Löschvorgang abgebrochen!");
                });
                gibt false zurück;
            });
        })

        layui.use('Formular', Funktion () {
            var form = layui.form,
                Ebene = layout.ebene;
        });

        var vue = neuer Vue({
            el: '#app',
            Daten: {
                Webname: Konfigurationsname,
                Speisekarte: [],
                Adresse: []
            },
            erstellt: Funktion () {
                dieses.Menü = Konfigurationsmenü;
                dies.thisActive();
                dies.thisAttr();
            },
            Methoden: {
                //Denken Sie daran, onActive zu schließen: function (pid, id = false) {
                    Daten lassen;
                    wenn (id === false) {
                        Daten = dieses.Menü[PID];
                        wenn (data.url.length > 0) {
                            dieses.Menü.fürJeden((v, k) => {
                                v.aktiv = falsch;
                                v.list.fürJeden((v2, k2) => {
                                    v2.active = falsch;
                                })
                            })
                            Daten.aktiv = wahr;
                        }
                        Daten.versteckt = !Daten.versteckt;
                    } anders {
                        dieses.Menü.fürJeden((v, k) => {
                            v.aktiv = falsch;
                            v.list.fürJeden((v2, k2) => {
                                v2.active = falsch;
                            })
                        })
                        Daten = dieses.Menü[PID].Liste[ID];
                    }

                    dies.updateStorage();
                    wenn (data.url.length > 0) {
                        wenn (Daten.Ziel) {
                            wenn (Daten.Ziel === '_blank') {
                                Fenster.öffnen(Daten.URL);
                            } anders {
                                Fenster.Standort.href = Daten.URL;
                            }
                        } anders {
                            Fenster.Standort.href = Daten.URL;
                        }
                    }
                },

                //Menü-Cache aktualisieren updateStorage() {
                    //sessionStorage.menu = JSON.stringify(dieses.menu);
                    $.ajax({
                        Typ: "get",
                        asynchron: falsch,
                        url: "/menu_storage", // Die Anfrage wird an LoginServlet-Daten gesendet: {
                            "Daten": JSON.stringify(dieses.Menü)
                        },
                        Datentyp: "json",
                        Erfolg: Funktion (Nachricht) {

                        },
                        Fehler: Funktion (Nachricht) {
                            // Führen Sie diese Funktion aus, wenn die Anforderung fehlschlägt. var index = layer.load();
                            Ebene.schließen(Index);
                            layer.alert('Anforderung der Menüdaten ist fehlgeschlagen!!!', function (index) {
                                //etwas tun
                                Ebene.schließen(Index);
                            });
                        }
                    });
                },
                //Menü hervorheben thisActive: function () {
                    let Pfadname = Fenster.Standort.Pfadname;
                    let host = fenster.standort.host;
                    lass pid = false;
                    lass id = false;
                    dieses.Menü.fürJeden((v, k) => {
                        sei url = v.url;
                        if (url.length > 0) {
                            wenn (url[0] !== '/' und url.substr(0, 4) !== 'http') {
                                URL = '/' + URL;
                            }
                        }
                        if (Pfadname === URL) {
                            pid = k;
                        }
                        v.list.fürJeden((v2, k2) => {
                            lass url = v2.url;

                            if (url.length > 0) {
                                wenn (url[0] !== '/' und url.substr(0, 4) !== 'http') {
                                    URL = '/' + URL;
                                }
                            }
                            if (Pfadname === URL) {
                                pid = k;
                                Ich würde sagen, k2;
                            }
                        })
                    })


                    wenn (id !== false) {
                        dieses.Menü[pid].list[id].active = true;
                    } anders {
                        wenn (pid !== false) {
                            dieses.Menü[pid].active = true;
                        }
                    }

                    dies.updateStorage();

                },
                //Aktuelle Position thisAttr: function () {
                    //Aktueller Standort let address = [{
                        Name: 'Homepage',
                        URL: „/Benutzer/Index“
                    }];
                    dieses.Menü.fürJeden((v, k) => {
                        v.list.fürJeden((v2, k2) => {
                            wenn (v2.aktiv) {
                                Adresse.push({
                                    Name: v.name,
                                    URL: "Javascript:;"
                                })
                                Adresse.push({
                                    Name: v2.name,
                                    URL: v2.URL,
                                })
                                diese.Adresse = Adresse;
                            }
                        })
                    })
                }
            }
        })

<ul Klasse="cl">
        <!--Top-Kategorie-->
        <li v-for="vo,index im Menü" :class="{hidden:vo.hidden}">
            <a href="javascript:;" rel="externes Nofollow" rel="externes Nofollow" :class="{active:vo.active}" @click="onActive(index)">
                <i class="layui-icon" v-html="vo.icon"></i>
                <span v-text="vo.name"></span>
                <i class="layui-icon arrow" v-show="vo.url.length==0">&#xe61a;</i> <i v-show="vo.active"
                                                                                      class="layui-icon aktiv">&#xe623;</i>
            </a>
            <!--Unterkategorie-->
            <div v-for="vo2,index2 in vo.list">
                <a href="javascript:;" rel="externes Nofollow" rel="externes Nofollow" :class="{active:vo2.active}" @click="onActive(index,index2)"
                   v-text="vo2.name"></a>
                <i v-show="vo2.active" class="layui-icon active">&#xe623;</i>
            </div>
        </li>
    </ul>