# Web开发 *** ## Thymeleaf 静态资源访问在我们开发 Web 应用的时候，需要引用大量的 js、css、图片等静态资源。Spring Boot 默认提供静态资源目录位置需置于 classpath 下，目录名需符合如下规则： * /static * /public * /resources * /META-INF/resources 举例：我们可以在 src/main/resources/ 目录下创建 static，在该位置放置一个图片文件。启动程序后，尝试访问新建一个 Spring Boot 应用，在 pom.xml 中加入所需的模板引擎模块，比如使用 thymeleaf 的话，只需要引入下面依赖： ```xml org.springframework.boot spring-boot-starter-thymeleaf ``` 创建一个 Spring MVC 的传统 Controller，用来处理根路径的请求，将解决渲染到 index 页面上，具体实现如下 ```java @Controller public class HelloController { @GetMapping("/") public String index(ModelMap map) { map.addAttribute("host", "http://www.abc.com"); return "index"; } } ``` 简要说明： * 在渲染到 index 页面的时候，通过 ModelMap，往页面中增加一个 host 参数，其值为 * return 的值 index 代表了要使用的模板页面名称，默认情况下，它将对应到 src/main/resources/templates / 目录下的 index.html 模板页面根据上一步要映射的模板，去模板路径 src/main/resources/templates 下新建模板文件 index.html，内容如下： ```html

Hello World

``` 在该页面的 body 中，包含了一个带有 Thymeleaf 属性的 h1 标签，该便签内容将绑定 host 参数的值。由于 Thymeleaf 通过属性绑定的特性。该模板页面同其他模板引擎不同，直接通过浏览器打开 html 页面，它是可以正常运作的，将会直接展现 Hello World 标题。这有利于开发页面的时候可以在非启动环境下验证应前端样式的正确性。如果启动程序后，访问 **Thymeleaf 的配置参数** 如有需要修改默认配置的时候，只需复制下面要修改的属性到 application.properties 中，并修改成需要的值： ```conf # Enable template caching. spring.thymeleaf.cache=true # Check that the templates location exists. spring.thymeleaf.check-template-location=true # Content-Type value. spring.thymeleaf.content-type=text/html # Enable MVC Thymeleaf view resolution. spring.thymeleaf.enabled=true # Template encoding. spring.thymeleaf.encoding=UTF-8 # Comma-separated list of view names that should be excluded from resolution. spring.thymeleaf.excluded-view-names= # Template mode to be applied to templates. See also StandardTemplateModeHandlers. spring.thymeleaf.mode=HTML5 # Prefix that gets prepended to view names when building a URL. spring.thymeleaf.prefix=classpath:/templates/ # Suffix that gets appended to view names when building a URL. spring.thymeleaf.suffix=.html spring.thymeleaf.template-resolver-order= # Order of the template resolver in the chain. spring.thymeleaf.view-names= # Comma-separated list of view names that can be resolved. ``` 举几个我们常用的配置内容： * 不想每次修改页面都重启修改 spring.thymeleaf.cache 参数，设置为 false * 不想使用 template 目录存放模板文件修改 spring.thymeleaf.prefix 参数，设置为你想放置模板文件的目录 * 不想使用 index 作为模板文件的扩展名修改 spring.thymeleaf.suffix 参数，设置为你想用的扩展名 * HTML5 的严格校验很烦人修改 spring.thymeleaf.mode 参数，设置为 LEGACYHTML5 *** ## ECharts ECharts是百度开源的一个前端组件。它是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。它提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。除了已经内置的包含了丰富功能的图表，ECharts 还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。在resources/templates目录下创建index.html页面 ```html Spring Boot中使用ECharts

``` 在页面内容中主要包含三部分： * `` 中通过 `