一、目录结构

spring boot 使用jsp以及js，css实例

二、配置

application.properties

spring.mvc.view.prefix=/views/
spring.mvc.view.suffix=.jsp

三、controller

@Controller
public class UserController {
    
    @Autowired
    private UserService userService;
    
    @RequestMapping("/user/index")
    public String index(){
        return "zTree";
    }
    
 
}

访问入口为

http://localhost:8080/test_boot/user/index

test_boot为项目路径

四、jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
 <HEAD>
  <TITLE> ZTREE DEMO </TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/demo.css" type="text/css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/zTreeStyle.css" type="text/css">
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.ztree.core.js"></script>
  <SCRIPT LANGUAGE="JavaScript">
   var zTreeObj;
   // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
   var setting = {};
   // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
   var zNodes = [
   {name:"test1", open:true, children:[
      {name:"test1_1"}, {name:"test1_2"}]},
   {name:"test2", open:true, children:[
      {name:"test2_1"}, {name:"test2_2"}]}
   ];
   $(document).ready(function(){
      zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
   });
  </SCRIPT>
 </HEAD>
<BODY>
<div>
   <ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>
</HTML>

注意：css，js，image文件的根路径在spring boot的static文件夹，css文件夹在static下面

导入css

导入图片

点击访问controller的方法

点击访问jsp

spring boot 使用jsp以及js，css实例

一、目录结构

二、配置

三、controller

四、jsp页面

相关推荐