zoukankan      html  css  js  c++  java
  • Thymeleaf(一)---引入js/css文件

    th:href="@{/static/css/style.css}"
    th:src="@{/static/js/thymeleaf.js}"

    index.html

     <head>
            <meta charset="UTF-8">
            <title>首页</title>
            <link rel="stylesheet" type="text/css" media="all" href="/static/css/style.css" th:href="@{/static/css/style.css}"/>
            <script type="text/javascript" src="/static/js/thymeleaf.js" th:src="@{/static/js/thymeleaf.js}"></script>
            <script>
                testFunction();
            </script>
    
        </head>
        <body>
            <h1 th:text="#{title}"></h1>
            <h1 th:text="${message}"></h1>
    
            <div class="showing">
                <p th:text="${name}" >name</p>
                <p th:text="'Hello! ' + ${name} + '!'" >hello world</p>
                <p th:text="'Hello!'+ ${name}+'!'" >hello world</p>
            </div>
    
        </body>

    application.yml

    spring:
       mvc:
          static-path-pattern: /static/**
       resources:
          static-locations: classpath:/static/
    
       #开始thymeleaf设置
       thymeleaf:
       #禁用模板缓存
          cache: false
     #设置文字消息
       messages:
          encoding: UTF-8
          basename: message_zh_CN

    controller:

       @GetMapping("/h")
        public String t(Model model){
            String title="标题";
            String message="first thymeleaf !!";
            String name="牡蛎";
            model.addAttribute("message",message);
            model.addAttribute("title",title);
            model.addAttribute("name",name);
            return "index";
        }

    js/css

    function testFunction(){
        alert("test Thymeleaf.js!");
    }
    
    
    div.showing{
        80%;
        margin:20px auto;
        border:1px solid grey;
        padding:30px;
    }
    
    .even{
        background-color: red;
    }
    .odd{
        background-color: green;
    }

     

  • 相关阅读:
    动态规划
    nginx访问静态资源403
    转)服务器CPU占用100%的问题排查
    linux下脚本设置开机自启服务
    在蓝鲸标准运维上进行原子开发
    Django model数据排序
    Mac tar压缩命令,去除隐藏文件
    vue 简单的分页功能实现二
    vue 简单的分页功能实现一
    安装 libmagic in Mac OS (for Python-magic)
  • 原文地址:https://www.cnblogs.com/crazy-lc/p/12255924.html
Copyright © 2011-2022 走看看