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