Springboot+ thymeleaf+ easyui （不含数据库） demo

这段时间的一个工作任务是要实现一个本地的管理工具，之前的版本都是使用的javaGUI的界面；但自己对于GUI的使用非常不熟悉，所以就提出使用也买呢的方式实现。由于之前听过说过springboot的大名，所以就决定使用该框架，边学边用。

好在spring官方的文档还是比较多的，稍微看了一下，发现入门比较简单，另外工作任务的也只是需求本地使用，所以需求的功能也不会太苛刻。公司网络限制，只好在家里学好了，再把demo发到公司邮箱。

通过查看文档与比较各个技术难点，初步确定了标题的技术栈，下载了springboot  thymeleaf easyui jquery文档就开始搭建demo，目标是实现web项目的基本购价。

1、直接导出官方的文件上传的demo，稍加修改之后，实现了一个较为流畅的demo;

首先是项目结构图：

然后是具体的各个文件内容：

1.1pom.xml  由于thymeleaf 包含了boot-starter-web，所以不需要重复依赖，具体的配置解释可以看http://blog.csdn.net/chszs/article/details/50610474

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion>

<groupId>org.xiehf.own</groupId>
<artifactId>ToBePro</artifactId>
<version>1.0-SNAPSHOT</version>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>1.3.6.RELEASE</version>
</parent>

<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-hateoas</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional>
</dependency>

<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.16.6</version>
</dependency>
</dependencies>

<properties>
<java.version>1.8</java.version>
</properties>

<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>

</project>

1.2application没什么可说的，直接全部默认的话就可以省下不少代码量，如需要特殊的配置@bean再补充

@SpringBootApplication
public class Application {

public static void main(String[] args) {
SpringApplication.run(Application.class,args);
}
}

1.3首页controller，预留model是为了初始化的时候返回数据

@Controller
public class BaseController {

@RequestMapping(value = "/",method = RequestMethod.GET)
public String home(Model model){

return "index";
}
}

1.4uploadcontroller,文件上传（Result是一个返回结果的对象，封装信息）

@Controller
@RequestMapping("/file")
public class FileUploadController {

private static final Logger LOG = LoggerFactory.getLogger(FileUploadController.class);

public static final String ROOT = "upload-dir";

@RequestMapping(value = "/upload", method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE)
@ResponseBody
public Result handleFileUpload(@RequestParam("file") MultipartFile file) {
if (!file.isEmpty()) {
Result result = null;
InputStream inputStream = null;
try {
inputStream = file.getInputStream();
String originalFilename = file.getOriginalFilename();
Files.copy(inputStream, Paths.get(ROOT, originalFilename));
System.out.println("OK");
result = new Result(true, "", originalFilename);
} catch (FileAlreadyExistsException e) {
System.out.println("FileAlreadyExistsException");
result =new Result(true, "FileAlreadyExistsException");
} catch (DirectoryNotEmptyException e) {
System.out.println("DirectoryNotEmptyException");
result =new Result(true, "DirectoryNotEmptyException");
} catch (UnsupportedOperationException e) {
System.out.println("UnsupportedOperationException");
result =new Result(true, "UnsupportedOperationException");
} catch (SecurityException e) {
System.out.println("SecurityException");
result =new Result(true, "SecurityException");
} catch (IOException e) {
System.out.println("IOException");
result =new Result(true, "IOException");
} finally {
if (null != inputStream) {
try {
inputStream.close();
} catch (IOException e) {
System.out.println("close failed");
}
}
}
return result;
}
return null;
}

1.5index首页easyUI的模版，thymeleaf所有的引用路径都要用th:前缀使用@｛｝包含,为了实际开发效率，可以同时设置静态引入：
比如：有href =""和 th:href="@{}" 这样就可以直接不启动spring也能浏览了。

<link rel="stylesheet" type="text/css" href="../static/easyui/themes/default/easyui.css" th:href="@{easyui/themes/default/easyui.css}"/>

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>home page</title>
<link rel="stylesheet" type="text/css" href="../static/easyui/themes/default/easyui.css" th:href="@{easyui/themes/default/easyui.css}"/>
<link rel="stylesheet" type="text/css" href="../static/easyui/themes/icon.css" th:href="@{easyui/themes/icon.css}"/>
<link rel="stylesheet" type="text/css" href="../static/easyui/themes/color.css" th:href="@{easyui/themes/color.css}"/>
<script type="text/javascript" src="../static/jquery/jquery.min.js" th:src="@{jquery/jquery.min.js}"></script>
<script type="text/javascript" src="../static/jquery/ajaxfileupload.js" th:src="@{jquery/ajaxfileupload.js}"></script>
<script type="text/javascript" src="../static/easyui/jquery.easyui.min.js" th:src="@{easyui/jquery.easyui.min.js}"></script>
<script type="text/javascript" src="../static/js/upload.js" th:src="@{js/upload.js}"></script>
</head>
<body class="easyui-layout" >
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
<div id="panel" class="easyui-panel" title="My Panel"
style="width:500px;height:150px;padding:10px;background:#fafafa;"
data-options="iconCls:'icon-save',closable:false,fit:true,
collapsible:true,minimizable:false,maximizable:false">
<table>
<tr><td>File to upload:</td><td><input type="file" name="file" id="upfile" readonly="readonly"/></td></tr>
<a id="btn" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="upload();">upload</a>
</table>
<div>
<img id="loading" th:src="@{image/process.gif}" style="display: none;" height="200px" width="200px"/>
<div id="file-list">
</div>
<div id="serverResponse"></div>
</div>
</div>
</div>
</body>
</html>

2、启动，直接main方法就可以看到控制台的启动了，spring自己封装了很多日志，我使用的是logback，配置文件如下：

<?xml version="1.0" encoding="UTF-8" ?>
<configuration scan="true" scanPeriod="60 seconds" debug="false">
<!-- ch.qos.logback.core.ConsoleAppender 控制台输出 -->
<appender name="CONSOLE" class="ch.qos.logback.core.ConsoleAppender">
<encoder>
<pattern>%-5level %d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %logger{36} - %msg%n</pattern>
</encoder>
</appender>

<!-- ch.qos.logback.core.rolling.TimeBasedRollingPolicy 文件输出 -->
<appender name="FILE" class="ch.qos.logback.core.rolling.RollingFileAppender">
<file>logs/logFile.log</file>
<rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
<!-- daily rollover -->
<fileNamePattern>logs/logFile.%d{yyyy-MM-dd}.log</fileNamePattern>
<!-- keep 30 days' worth of history capped at 3GB total size -->
<maxHistory>30</maxHistory>
<!--<totalSizeCap>3GB</totalSizeCap>-->
</rollingPolicy>
<encoder>
<pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger{36} - %msg%n</pattern>
</encoder>
</appender>

<root level="INFO">
<appender-ref ref="FILE" />
<appender-ref ref="CONSOLE" />
</root>

</configuration>

另外 application.properties的配置项很多，可以自行按照需求配置。

server.port=8088
spring.thymeleaf.prefix=classpath:/templates/
multipart.maxFileSize=50Mb
multipart.maxRequestSize=50Mb

demo建立了，实际就可以按照需求进行扩展了。另外单元测试与SSM框架很类似，只不过注解加载的是application类，而不是配置文件。