How to design side menu bar from json file using s

2019-08-03 18:49发布

问题:

Am trying to design a side menu in jsp home page using json file with spring mvc below is my three files, jsp page contains a code that the way which i am looking to design side menu the json file contains menu and sub menu data, in the spring controller i read json file and validate the user after validation i have send the data to jsp which i am getting from json file and make its menu and sub menu two different menu as r1 and r2

here what i am facing the problem is how to json data from spring controller to jsp and make it as menu and sub menu

    user 
      adduser
      deleteuser
      updateuser
job
add job
delete job
update job

jsp

<li>
                        <a href="#"><!-- <i class="fa fa-wrench fa-fw"></i> -->User<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="javascript:void(0)">add user</a>
                            </li>
                            <li>
                                <a href="javascript:void(0)">delete user</a>
                            </li>
                            <li>
                                <a href="javascript:void(0)">update user</a>
                            </li>

                        </ul>
                        <!-- /.nav-second-level -->
                    </li>

                    <li>
                        <a href="#"><!-- <i class="fa fa-wrench fa-fw"></i> -->job<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="javascript:void(0)">add job</a>
                            </li>
                            <li>
                                <a href="javascript:void(0)">delete job</a>
                            </li>
                            <li>
                                <a href="javascript:void(0)">update job</a>
                            </li>

                        </ul>
                        <!-- /.nav-second-level -->
                    </li>

Json file

{
    "userid": "abc",
    "roles": ["admin"],
    "sidebar":  
    {           
                "job": ["addjob", "updatejob", "deletejob"]
            ,

                "user": ["adduaser", "deleteuser", "updateuser"]


    }   

Controller

 @RequestMapping(value = "/authenticateLogin", method = RequestMethod.POST)
            public   String loginAuthentication(HttpServletRequest request) {       
    String username=request.getParameter("userName");       
    JSONParser parser = new JSONParser();
    try {
        Object obj = parser.parse(new FileReader("d:\\test.json"));
        JSONObject jsonObject = (JSONObject) obj;

        String userID1 = (String) jsonObject.get("userid");
        if (username.equals(userID1)) {
            JSONArray rolesArray = (JSONArray) jsonObject.get("roles");
            String role = (String) rolesArray.get(0);
            if (role.equals("admin")) {

                JSONObject sideContent = (JSONObject) jsonObject.get("sidebar");
                JSONArray job = (JSONArray) sideContent.get("job");
                JSONArray user = (JSONArray) sideContent.get("user");

                ArrayList<String> jobArrayList = new ArrayList<String>();
                ArrayList<String> userArrayList = new ArrayList<String>();

                Iterator<String> iterator1 = job.iterator();
                while (iterator1.hasNext()) {                       
                    jobArrayList.add(iterator1.next());
                }
                Iterator<String> iterator2 = user.iterator();
                while (iterator2.hasNext()) {                       
                    userArrayList.add(iterator2.next());
                }                   
                return "";
            } 


            if(role.equals("user"))
            {
                JSONObject sideContent = (JSONObject) jsonObject.get("sidebar");
                JSONArray job = (JSONArray) sideContent.get("job");
                ArrayList<String> jobArrayList = new ArrayList<String>();
                Iterator<String> iterator1 = job.iterator();
                while (iterator1.hasNext()) {                       
                    jobArrayList.add(iterator1.next());
                }                   
                return "";
            }
        }           

    } catch (FileNotFoundException e) {
        e.printStackTrace();
    } catch (IOException e) {
        e.printStackTrace();
    } catch (ParseException e) {
        e.printStackTrace();
    }


    return "Error";

}

回答1:

I have done a sample 3 level menu with title,onclick path and icon.

Java side

    public static ArrayList<Menu> getMenuTree(){
    ArrayList<Menu> menuTree = new ArrayList<Menu>();
    menuTree.add(new Menu("Menu 1", "#", "fa fa-tachometer", getSub()));
    menuTree.add(new Menu("Menu 2", "./onclickPath", "fa fa-cogs", new ArrayList<Menu>()));
    menuTree.add(new Menu("Menu 3", "./onclickPath", "fa fa-cogs", new ArrayList<Menu>()));
    return menuTree ;
}

public static ArrayList<Menu> getSub(){
    ArrayList<Menu> menu = new ArrayList<Menu>();
    menu.add(new Menu("Sub Menu 1", "#", "icofont-dashboard", getSub2()));
    menu.add(new Menu("Sub Menu 2", "./onclickPath", "fa fa-cogs", new ArrayList<Menu>()));
    menu.add(new Menu("Sub Menu 3", "./onclickPath", "fa fa-cogs", new ArrayList<Menu>()));
    return menu ;
}
public static ArrayList<Menu> getSub2(){
    ArrayList<Menu> menu = new ArrayList<Menu>();
    menu.add(new Menu("Sub Menu 1A", "./onclickPath", "fa fa-line-chart", new ArrayList<Menu>()));
    menu.add(new Menu("Sub Menu 1B", "./onclickPath", "fa fa-cogs", new ArrayList<Menu>()));
    menu.add(new Menu("Sub Menu 1C", "./onclickPath", "fa fa-cogs", new ArrayList<Menu>()));
    return menu ;
}

Menu Bean Class

public class Menu {
private String title, url, icon;
private ArrayList<Menu> subMenu;

public Menu(String title, String url, String icon, ArrayList<Menu> subMenu) {
    this.title = title;
    this.url = url;
    this.icon = icon;
    this.subMenu = subMenu;
}

public String getTitle() {
    return title;
}

public void setTitle(String title) {
    this.title = title;
}

public String getUrl() {
    return url;
}

public void setUrl(String url) {
    this.url = url;
}

public String getIcon() {
    return icon;
}

public void setIcon(String icon) {
    this.icon = icon;
}

public ArrayList<Menu> issubMenu() {
    return subMenu;
}

public void setsubMenu(ArrayList<Menu> subMenu) {
    this.subMenu = subMenu;
}

public ArrayList<Menu> getSubMenu() {
    return subMenu;
}

public void setSubMenu(ArrayList<Menu> subMenu) {
    this.subMenu = subMenu;
}

public int getSize() {
    return subMenu.size();
}

}

JSP

<ul class="page-sidebar-menu">

            <c:forEach var="menu" items="${AaaTestController.getMenuTree()}">

                <li><a href="${menu.getUrl()}"> <i style="margin-right:5px;" class="${menu.getIcon()}"></i>
                        <c:choose><c:when test="${menu.getSize()>0}">
                        ${menu.getTitle()} <i style="float:right;" class="fa fa-angle-down"></i></a> 
                            <ul class="sub-menu">
                                <c:forEach var="subMenu" items="${menu.getSubMenu()}">
                                    <li><a href="${subMenu.getUrl()}"> <i  style="margin-right:2px;"  class="${subMenu.getIcon()}"></i>
                                        <c:choose><c:when test="${subMenu.getSize()>0}">
                                        ${subMenu.getTitle()} <i style="float:right; margin-right:23px;" class="fa fa-angle-down"></i></a> 
                                            <ul class="sub-menu">
                                                <c:forEach var="subMenu2" items="${subMenu.getSubMenu()}">
                                                    <li><a href="${subMenu2.getUrl()}"> <i  style="margin-right:3px;" class="${subMenu2.getIcon()}"></i>${subMenu2.getTitle()}</a></li>
                                                </c:forEach>
                                            </ul>
                                        </c:when>
                                        <c:otherwise>
                                      ${subMenu.getTitle()}</a> 
                                    </c:otherwise>
                                        </c:choose>
                                    </li>
                                </c:forEach>
                            </ul>
                        </c:when>
                        <c:otherwise>
                        ${menu.getTitle()}</a> 
                        </c:otherwise>
                        </c:choose>
                </li>

            </c:forEach>
 </ul>