Springboot+mybatis+Jsp+ztree2.5简单的小demo

当你把项目跑起来的时候，首先演示一下运行结果。浏览器输入http://localhost:8080/menu

具体实现：

这是后台的基本架构，这里注意由于整合Jsp所以，在application.properties中需要添加下面的配置

##jsp配置# 页面默认前缀目录spring.mvc.view.prefix=/WEB-INF/jsp/# 响应页面默认后缀spring.mvc.view.suffix=.jsp# 自定义属性，可以在Controller中读取application.hello=Hello kongl

1. pom.xml

  <!-- Spring Boot 启动父依赖 -->    <parent>        <groupId>org.springframework.boot</groupId>        <artifactId>spring-boot-starter-parent</artifactId>        <version>1.4.1.RELEASE</version>    </parent>    <properties>        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>        <mybatis-spring-boot>1.2.0</mybatis-spring-boot>        <mysql-connector>5.1.39</mysql-connector>    </properties>    <dependencies>        <!-- Spring Boot Web 依赖 -->        <dependency>            <groupId>org.springframework.boot</groupId>            <artifactId>spring-boot-starter-web</artifactId>        </dependency>        <!-- jsp 的支持.-->        <dependency>            <groupId>javax.servlet</groupId>            <artifactId>javax.servlet-api</artifactId>            <scope>provided</scope>        </dependency>        <dependency>            <groupId>javax.servlet</groupId>            <artifactId>jstl</artifactId>        </dependency><!-- tomcat 的支持.-->        <dependency>            <groupId>org.springframework.boot</groupId>            <artifactId>spring-boot-starter-tomcat</artifactId>            <scope>provided</scope>        </dependency>        <dependency>            <groupId>org.apache.tomcat.embed</groupId>            <artifactId>tomcat-embed-jasper</artifactId>            <scope>provided</scope>        </dependency>        <!-- 热部署依赖-->        <dependency>            <groupId>org.springframework.boot</groupId>            <artifactId>spring-boot-devtools</artifactId>            <optional>true</optional>           <scope>true</scope>        </dependency>           <!-- Spring Boot Test 依赖 -->        <dependency>            <groupId>org.springframework.boot</groupId>            <artifactId>spring-boot-starter-test</artifactId>            <scope>test</scope>        </dependency>        <!-- Spring Boot Mybatis 依赖 -->        <dependency>            <groupId>org.mybatis.spring.boot</groupId>            <artifactId>mybatis-spring-boot-starter</artifactId>            <version>${mybatis-spring-boot}</version>        </dependency>        <!-- MySQL 连接驱动依赖 -->        <dependency>            <groupId>mysql</groupId>            <artifactId>mysql-connector-java</artifactId>            <version>${mysql-connector}</version>        </dependency>        <!-- Junit -->        <dependency>            <groupId>junit</groupId>            <artifactId>junit</artifactId>            <version>4.12</version>        </dependency>    </dependencies>    <build>        <plugins>            <plugin>                <groupId>org.springframework.boot</groupId>                <artifactId>spring-boot-maven-plugin</artifactId>                <configuration>                    <!--fork :  如果没有该项配置，devtools不会起作用，即应用不会restart -->                    <fork>true</fork>                </configuration>            </plugin>        </plugins>   </build></project>

pom.xml都有注释，这里要注意的是jsp的支持，以及devtools热部署的支持。

2、 前端页面

ztree一个树插件，这里用到的版本是2.5,不同的版本api不同，如果想用最新请到官网下载。
这是menuitem.jsp的部分代码，注意这里的

其中id=“tree”，然后自己定义这课树的属性，数据便能显示出来。

<TD width=230px align=left valign=top style="BORDER-RIGHT: #999999 1px dashed">            <ul id="tree" class="tree" style="width:230px; overflow:auto;"></ul>        </TD>

部分js

var menuitem = {    setting:{        isSimpleData: true,        treeNodeKey: "mid",        treeNodeParentKey: "pid",        showLine: true,        root:{             isRoot:true,            nodes:[]        },        //设置事件        callback:{             beforeClick: getCurrentNode,                onClick : zTreeOnClick //这里的名字需要和自己定义的一致            }    },    /**     * 加载树     */    loadMenuitemTree:function(){    //menu1便是一个url请求，返回的data是一个json数据        $.post("menu1",null,function(data){            $("#tree").zTree(menuitem.setting,data);        });    }};function getCurrentNode(treeId, treeNode) {    curNode = treeNode;    zTreeOnClick(curNode);}function zTreeOnClick(treeNode){    //alert(treeNode.mid);    $("#testIframe", window.parent.document).attr("src", "userlist?depId="+treeNode.mid);}$().ready(function(){    menuitem.loadMenuitemTree();});

这里的添加功能使用model模态框，简单好用。

<input type="button" class="button purple" value="添加"    data-toggle="modal" data-target="#myModal"    sytle="padding-bottom: 0px;padding-top:3px" />

模态框

<!-- 模态框（Modal） -->    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"        aria-labelledby="myModalLabel" aria-hidden="true">        <div class="modal-dialog">            <div class="modal-content">                <div class="modal-header">                    <button type="button" class="close" data-dismiss="modal"                        aria-hidden="true">&times;</button>                    <h4 class="modal-title" id="myModalLabel">添加用户</h4>                </div>                <form action="#" id="userform" method="post">                    <div class="modal-body">                        <div class="form-group">                        <input type="hidden" id="depId" name="depId" value="${depId}"/>                            <label class="col-sm-2 control-label no-padding-right"                                for="form-field-1"> 用户名 :</label>                            <div class="col-sm-9">                                <input type="text" id="form-field-1" placeholder="name"                                    class="col-xs-4 col-sm-6" name="name" />&nbsp;(用户名必须唯一)                            </div>                        </div>                    </div>                                      <div class="modal-footer">                        <button type="button" class="btn btn-default" data-dismiss="modal" onclick="checks()">关闭                        </button>                        <input type="submit" class="btn btn-primary" value="提交" onclick="usersave()"/>                    </div>                </form>            </div>            <!-- /.modal-content -->        </div>        <!-- /.modal -->    </div>

3、 Controller

@RequestMapping("/menu")    public String showMuenList(Model model){        return "menuitem";    }    @RequestMapping("/menu1")    @ResponseBody    public List<Menuitem> muenList(Model model){        return menuitemService.findAll();    }    @RequestMapping("/userlist")    public String userlist(Model model,@RequestParam(value = "depId", required = true) Long depId){        List<User> userlist=userService.findUserByDepId(depId);        model.addAttribute("depId", depId);        model.addAttribute("userlist", userlist);        return "userlist";    }    @RequestMapping("/add")    public String addUser(User user){        int n=userService.insert(user);        if (n!=0) {            return "redirect:/userlist?depId="+user.getDepId();         }        return "fail";    }

这个controller就不在赘述，比较简单。本demo设计到两个表一个menuitem表，一个user表，实现功能是点击一个菜单，可以显示本菜单用户，以及新增用户。

本demo比较简单，可能有很多小漏洞，但基本思路可以跑起来，就当做自己的笔记，本人菜鸟一枚，请大神指教。