第三章 springboot和静态资源交互

1.导入freemaker模板引擎jar包

在pom.xml中引入如下代码:

<dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>

引入jar包

2. 配置springboot freemarker模板引擎

在application.properties中加入如下配置:

#模板引擎编码
spring.freemarker.charset=UTF-8
#模板文件后缀（不一定就是html）
spring.freemarker.suffix=.html
#响应类型及编码
spring.freemarker.content-type=text/html; charset=utf-8
#模板文件位置
spring.freemarker.template-loader-path=classpath:/templates
#web上下文对象
spring.freemarker.request-context-attribute=ctx

2.访问静态资源文件
下载easyui:http://www.jeasyui.com/download/downloads/jquery-easyui-1.9.7.zip
3.easyui下载后解压，放到项目static目录下的js文件夹中(手动创建js文件夹)

image.png

4.浏览器上访问easyui中的静态资源文件
http://localhost:8080/js/jquery-easyui-1.9.7/readme.txt
http://localhost:8080/js/jquery-easyui-1.9.7/demo/datagrid/custompager.html
http://localhost:8080/js/jquery-easyui-1.9.7/demo/datagrid/complextoolbar.html
5.在templates目录下创建complextoolbar.html

image.png

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DataGrid Complex Toolbar - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="${ctx.contextPath}/js/jquery-easyui-1.9.7/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${ctx.contextPath}/js/jquery-easyui-1.9.7/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${ctx.contextPath}/js/jquery-easyui-1.9.7/demo/demo.css">
    <script type="text/javascript" src="${ctx.contextPath}/js/jquery-easyui-1.9.7/jquery.min.js"></script>
    <script type="text/javascript" src="${ctx.contextPath}/js/jquery-easyui-1.9.7/jquery.easyui.min.js"></script>
</head>
<body>
    <h2>DataGrid Complex Toolbar</h2>
    <p>The DataGrid toolbar can be defined from a &lt;div&gt; markup, so you can define the layout of toolbar easily.</p>
    <div style="margin:20px 0;"></div>
    <table class="easyui-datagrid" title="DataGrid Complex Toolbar" style="width:700px;height:250px"
            data-options="rownumbers:true,singleSelect:true,url:'${ctx.contextPath}/js/jquery-easyui-1.9.7/demo/datagrid/datagrid_data1.json',method:'get',toolbar:'#tb',footer:'#ft'">
        <thead>
            <tr>
                <th data-options="field:'itemid',width:80">Item ID</th>
                <th data-options="field:'productid',width:100">Product</th>
                <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
                <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
                <th data-options="field:'attr1',width:240">Attribute</th>
                <th data-options="field:'status',width:60,align:'center'">Status</th>
            </tr>
        </thead>
    </table>
    <div id="tb" style="padding:2px 5px;">
        Date From: <input class="easyui-datebox" style="width:110px">
        To: <input class="easyui-datebox" style="width:110px">
        Language: 
        <select class="easyui-combobox" panelHeight="auto" style="width:100px">
            <option value="java">Java</option>
            <option value="c">C</option>
            <option value="basic">Basic</option>
            <option value="perl">Perl</option>
            <option value="python">Python</option>
        </select>
        <a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a>
    </div>
    <div id="ft" style="padding:2px 5px;">
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
    </div>
</body>
</html>

5.创建ViewController类用于访问templates目录下complextoolbar.html

package com.xbb.springboot.tutorial.web;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("view")
public class ViewController {

    
    /**
     * http://localhost:8080/view/complextoolbar
     * @param path1
     * @return
     */
    @RequestMapping(value = "/{path1}")
    public String view1(@PathVariable("path1")String path1) {
        return path1;
    }
    
}

http://localhost:8080/view/complextoolbar
http://localhost:8080/js/jquery-easyui-1.9.7/demo/datagrid/datagrid_data1.json