SpringBoot实战笔记:16_SpringBoot Web开发

16_SpringBoot Web开发

  • Web开发的核心内容是内嵌Servlet容器和SpringMVC
  • SpringBoot中是内嵌tomcat的
  • jetty也是Servlet容器

1,SpringBoot的Web开发支持

  • SpringBoot提供了 spring-boot-starter-web 为 Web 开发予以支持,其中为我们提供了内嵌的 TomcatSpringMVC 的依赖
  • Web的相关配置被放在 spring-boot-autoconfigure.jarorg.springframework.boot.autoconfigure.web

2,Thymeleaf 模板引擎

  • Thymeleaf 是一个Java类库,是一个 xml/xhtml/html5 的模板引擎,可以作为 MVC 的 Web 应用的 View 层
  • Thymeleaf 提供了额外的模块与 SpringMVC 集成,使用我们可以使用 Thymeleaf 完全替代 JSP

3,与 SpringMVC 集成

  • 在SpringMVC中,若要集成一个模板引擎的话,需要定义 ViewResolver ,而 ViewResolver 需要定义一个 View ,我们为JSP定义的 ViewResolver 如下所示:
    @Bean
    public InternalResourceViewResolver viewResolver(){
        InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();

        viewResolver.setPrefix("/WEB-INF/classes/views/");
        viewResolver.setSuffix(".jsp");

     //使用JstlView定义了一个InternalResourceViewResolver
        viewResolver.setViewClass(JstlView.class);

        return viewResolver;
    }
  • Thymeleaf 为我们定义好了 ThymeleafViewThymeleafViewResolver (默认使用 ThymeleafView

  • 而使用SpringBoot,会为我们对 Thymeleaf 进行自动配置

4,示例

  • 选择 Thymeleaf 依赖,其中会包含 web 依赖

1,创建Person类
package com.zyf.domain;

/**
 * Created by zyf on 2018/3/7.
 * 用来在模板页面展示数据用
 */
public class Person {
    private String name;
    private Integer age;

    public Person() {
    }

    public Person(String name, Integer age) {
        this.name = name;
        this.age = age;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }
}
2,引入 BootstrapjQuery

  • static 目录中存放静态资源(脚本样式,图片等)
  • templates 目录中存放页面
3,在 templates 下创建 index.html 页面
  • 通过 xmlns:th="http://www.thymeleaf.org" 命名空间,将静态页面转换为动态页面
  • 要进行动态处理的元素,需要使用 th: 为前缀(也就是要使用 thymeleaf 的语法)
  • 通过 @{} 引用 Web 静态资源,这个路径是相对于 resources/static/
  • 通过 @{} 访问 model 中的数据 (与 JSP 类似)
  • 注意:需要动态处理的内容,需要通过命名空间 th: 使用 thymeleaf 语法

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="x-ua-compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link th:href="@{bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{bootstrap/css/bootstrap-theme.min.css}" rel="stylesheet"/>
    <title>Titletitle>
head>
<body>
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">访问modelh3>
        div>

        <div class="panel-body">
            <span th:text="${singlePerson.name}">span>
        div>
    div>

    <div th:if="${not #lists.isEmpty(people)}">
        <div class="panel panel-primary">

            <div class="panel-heading">
                <h3 class="panel-title">列表h3>
            div>

            <div class="panel-body">
                <ul class="list-group">
                    
                    
                    <li class="list-group-item" th:each="person:${people}">
                        <span th:text="${person.name}">span>
                        <span th:text="${person.age}">span>
                        <button class="btn" th:onclick="'showName(\''+${person.name}+'\')'">获得名字button>
                    li>
                ul>
            div>
        div>

    div>

    <script th:src="@{jquery-3.2.1.min.js}" type="text/javascript">script>
    <script th:src="@{bootstrap/js/bootstrap.min.js}">script>

    <script th:inline="javascript">
        var single = [[${singlePerson}]];
        console.log(single.name + "/" + single.age);

        function showName(name) {
            console.log(name);
        }
    script>
body>
html>
4,数据准备
package com.zyf;

import com.zyf.domain.Person;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
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;

@Controller
@SpringBootApplication
public class Springboot06Application {

    @RequestMapping("/")
    public String index(Model model){
        Person single = new Person("abc",123);

        List people = new ArrayList<>();
        Person p1 = new Person("x",11);
        Person p2 = new Person("y",22);
        Person p3 = new Person("z",33);

        people.add(p1);
        people.add(p2);
        people.add(p3);

        model.addAttribute("singlePerson",single);
        model.addAttribute("people",people);

        return "index";
    }

    public static void main(String[] args) {
        SpringApplication.run(Springboot06Application.class, args);
    }
}
5,运行演示

6,控制台输出

你可能感兴趣的:(SpringBoot)