zoukankan      html  css  js  c++  java
  • SpringBoot学习笔记

    spring boot提供的大量的模板引擎,比如:freemarker,groovy,thymeleaf,velocity等。springboot中推荐使用Thymeleaf作为模板引擎,因为Thymeleaf对SpringMVC提供了完美的支持,可以很方便的集成。

    1.Thymeleaf语法基础

    Thymeleaf的语法可以参考官网:http://www.thymeleaf.org/  进行学习,其相对比较简单,下面列举出其常用的几个语法知识:

    • 命名空间

        html页面中引入thymeleaf命名空间,即<html xmlns:th=http://www.thymeleaf.org></html>,此时在html模板文件中动态的属性使用th:命名空间修饰

    • 引用静态资源文件,

      引入一些CSS和JS文件,语法格式为“@{}”,如@{/xxx.js }会引入/static目录下的/xxx.js文件

    • 访问spring-mvc中model的属性:“${}”

      如${user.name}可以获取model里的user对象的name属性

    • 循环

      在html的标签中,加入th:each=“value:${list}”形式的属性,如<span th:each=”user:${users}”></span>可以迭代users的数据,迭代出来的对象用user表示。

    •  判断

      在html标签中,加入th:if=”表达式”可以根据条件显示html元素 :<span th:if="${not #lists.isEmpty(users)}">  表示判断userd这个list是否为空

    •  时间的格式化

      ${#dates.format(blog.publishTime,'yyyy-MM-ddHH:mm:ss')},与java的语法类似

    • 字符串拼接

      th:href="'/user/delete/' + ${user.id}" 或者  th:href="${'/user/delete/' + user.id}

    • 在js中使用model的数据:  [ [ $ { user  } ] ]

    2.Thymeleaf与SpringBoot集成。

    我们知道,springmvc中要集成一个模板引擎的话,需要定义一个视图解析器(ViewResolver),而视图解析器有需要设置一个视图(View)。Thymeleaf为我们定义好了ThymeleafView和ThymeleafViewResolver,他提供了一个SpringTemplateEngine,用来驱动在SpringMVC下使用Thymeleaf作为模板引擎,他还提供了一个模板解析器(TemplateResolver),用来设置通用的模板引擎(prefix,suffix等)。

    我们在springboot的应用里,完全不需要手工集成,springboot也为我们自动配置好了一切。可以在

    org.springframework.boot.autoconfigure.thymeleaf.ThymeleafAutoConfiguration
    中看到对上述的ThymeleafViewResolver,TemplateResolver,templateEngine进行了相关的配置,我们只要在项目的pom.xml中引入thymeleaf即可:

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

    定义bean,用来传递数据。

    package com.example.demo.bean;
    
    /**
     * Created by Joker on 2017/9/8.
     */
    public class Customer {
        private Long customerId;
        private String customerName;
        private String address;
    
        public Customer() {
        }
    
        public Customer(Long customerId, String customerName, String address) {
            this.customerId = customerId;
            this.customerName = customerName;
            this.address = address;
        }
    
        public Long getCustomerId() {
            return customerId;
        }
    
        public void setCustomerId(Long customerId) {
            this.customerId = customerId;
        }
    
        public String getCustomerName() {
            return customerName;
        }
    
        public void setCustomerName(String customerName) {
            this.customerName = customerName;
        }
    
        public String getAddress() {
            return address;
        }
    
        public void setAddress(String address) {
            this.address = address;
        }
    }
    

    编写controller

    该控制器为前台返回了一个customer和一个List<Customer>,返回值“customer”是resource/templates下的html文件名:

    package com.example.demo.controller;
    
    import com.example.demo.bean.Customer;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    import java.util.ArrayList;
    import java.util.List;
    
    /**
     * Created by Joker on 2017/9/8.
     */
    @Controller
    public class CustomerController {
    
        @RequestMapping("/customer")
        public String getData(Model model){
            Customer customer=new Customer(1L,"阿里巴巴","杭州");
            List<Customer> list=new ArrayList<Customer>();
            list.add(new Customer(2L,"百度",  "北京"));
            list.add(new Customer(3L,"腾讯",  "深圳"));
            list.add(new Customer(4L,"华为",  "中国"));
    
            model.addAttribute("customer",customer);
            model.addAttribute("customers",list);
    
            return "customer";
        }
    }
    

    编写页面(resource/templates/customer.html):

    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8"/>
        <title>Thymeleaf Demo</title>
        <link th:href="@{/bootstrap.min.css}" rel="stylesheet"/>
    </head>
    <body>
    <div th:if="${not #lists.isEmpty(customers)}">
         <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">客户列表</h3>
            </div>
            <div class="panel-body">
                <table class="table table-bordered">
                    <tr th:each="item:${customers}">
                        <td th:text="${item.customerId}"></td>
                        <td th:text="${item.customerName}"></td>
                        <td th:text="${item.address}"></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <script th:inline="javascript">
        var single=[[${customer}]];
        console.info(single.customerName);
    </script>
    </body>
    </html>
    页面逻辑:将后台返回出来的客户列表在页面展示出来,在控制台打印出单个customer的名称。其中,使用
    <link th:href="@{/bootstrap.min.css}" rel="stylesheet"/>
    会引入recource/static下面对应的资源文件。使用 th:inline="javascript"可以让js访问model里面的数据。用 [ [ $ {customer} ] ]获得实际的值。

    效果:在浏览器输入:http://localhost:8881/customer  可以看见输出的结果如下


    如有错误,欢迎指正,不胜感激。


  • 相关阅读:
    JDBC
    MySQL 事务
    MySQL 处理海量数据时一些优化查询速度方法
    MySQL 分支和循环结构
    MySQL 分页查询和存储过程
    Oracle PL/SQL异常、存储过程和触发器
    Oracle PL/SQL游标
    mysql主键问题
    spring-springmvc code-based
    AOP实现原理
  • 原文地址:https://www.cnblogs.com/jerryyj/p/9621570.html
Copyright © 2011-2022 走看看