当你把项目跑起来的时候,首先演示一下运行结果。浏览器输入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
- 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">×</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" /> (用户名必须唯一)
</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比较简单,可能有很多小漏洞,但基本思路可以跑起来,就当做自己的笔记,本人菜鸟一枚,请大神指教。