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'" οnclick="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类，而不是配置文件。