spring-boot中引入thymeleaf

作为一只后端程序员,想要开发一个管理系统,自己包揽前后端工作。
怎么又简单,又好看?
程序框架已经搭好,java spring-boot,查了下thymeleaf是spring-boot推荐的模板框架,那就用它啦。

1. dependencies

compile group: 'org.springframework.boot', name: 'spring-boot-starter-thymeleaf', version: '1.5.8.RELEASE'

2. application.properties

测试时选择不使用缓存

spring.thymeleaf.cache=false

3. 目录结构

根据官方推荐

  • 把页面(比如hello.html)放在 \src\main\resources\templates 下
  • 把静态资源(比如1.jpg, jquery.js)放在 \src\main\resources\static 下

4. 找不到静态资源怎么办?

按照网上给的一些demo,写好了controller,html,可是html中的静态资源找不到,资源在static/css文件夹下。尝试了修改路径,怎么改都不成。

"../../static/css/bootstrap.min.css"
          th:href="@{/css/bootstrap.min.css}" rel="stylesheet" type="text/css" />

在各个可疑目录下都放了一张1.jpg图像,尝试访问,还是返回404。查了日志,发现静态资源被拦截了。

解决办法如下:

@Configuration
@EnableWebMvc
public class MvcConfiguration extends WebMvcConfigurerAdapter {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**")
                .addResourceLocations("classpath:/static/");
        super.addResourceHandlers(registry);
    }
}

5. 怎样不重启刷新html?

加上配置:

spring.thymeleaf.cache=false

如果使用的开发工具是 idea ,修改 html 后使用 Ctrl + Shift + F9,Rebuild一下工程就可以了。

6. 想要好看怎么办?

写前端代码的能力战五渣,又想要一个看起来吊炸天的页面,用模板!!!

在网上搜索bootstrap主题模板,比如我下的这个,http://usebootstrap.com/download-theme/adminlte 很适合做管理系统。

下载后解压到工程的static文件夹下,就可以看到模板效果了。预览方式:

  1. 我用的Intellij IDEA 2017,在其中打开html文件,鼠标hover到文件中,右上方就有浏览器图标,点一下就能预览啦。
  2. 127.0.0.1:port/index.html 把工程在本地启动起来,访问。

给张模板截图,左侧那一排,各种组件的样例。自己照着参考下就好啦。
spring-boot中引入thymeleaf_第1张图片

最后吐槽一下这个模板,把头部、底部、左侧边栏这些公共区域写在几个公共文件里不好么?代码拷贝了无数份,写的哪哪儿都是。

你可能感兴趣的:(架构设计,浏览器前端)