Spring Boot总结(4)---web开发

作者: 18587a1108f1 | 来源:发表于2017-08-31 10:31 被阅读256次

web开发是开发中至关重要的一部分,大部分的项目以web开发为基础。本篇开始结合实例讲述Spring Boot的Web开发支持。

之前建项目的时候已经知道,Spring Boot提供了spring-boot-starter-web为Web开发予以支持,提供了内嵌了的Tomcat和Spring MVC依赖。接下来会详细描述Spring Boot是如何支持web开发的。

1.Thymeleaf模板引擎

如果有过Spring项目开发经验的开发人员应该会知道,传统的Spring MVC项目中使用 JSP页面 来完成前端界面。
其不方便之处为:
1.无法独立于后端进行直接的调试;
2.JSP部分语法与html语法完全不同,语法对于前端开发人员而言又是一项新的学习负担;
3.前后端串联需要一定的人力和时间进行整合。

Spring Boot 提供大量模板引擎,如FreeMarker,Groovy,Thymeleaf等,Spring Boot中推荐使用Thymeleaf作为模板引擎,它提供了完美的Spring MVC支持。

Thymeleaf

Thymeleaf是一个java类库,是一个xml/xhtml/html5模板引擎,可作为MVC的web项目的view层。Thymeleaf提供一整套的语法来方便前端获取后端的数据。示例代码如下:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <link th:src="@{bootstrap/css/bootstrap-theme.min.css}">
</head>
<body>
  <span th:text="${title}">小标题<span>
  <a href="#" th:href="@{'/myIndex'}">返回首页</a>
  <li th:each="person:${people}">
    <span th:text="${person.name}">名字<span>
  </li>

<script th:inline="javascript">
    var me = [[${myself}]];
    console.log(me.name);
</script>

</body>
</html>

代码解释:
1.Thymeleaf在前端引入后非常方便调用,可通过"@{}"来引用静态资源,如<link th:src="@{bootstrap/css/bootstrap-theme.min.css}">;可通过"${}"来获取后端传来的model中的属性;也可以通过"[[${}]]"在js中获取model中的值。
2.我们注意到每处调值都是通过"th:"这样的语法实现,比如span中调取后端的值,我们使用<span th:text="${person.name}">名字<span>来将后端传来的peron.name的值替换掉span原来静态时的text内容“名字”
3.这样,我们在开发时,在没有后端开发好接口的时候,可以直接在浏览器中运行该html页面,查看页面效果;开发开发好传来数值时直接用Thymeleaf语法可以快速实现对接,从而降低了前后端的耦合度,大大提高了开发效率。

Tips:Thymeleaf语法这里仅举例了小小一部分,日后会 新开一篇文章 详细讲述 Thymeleaf语法 ,熟悉常用的大部分Thymeleaf语法对于使用Spring Boot做web开发非常有帮助。

2.web运行示例

我们新建JavaBean,为Person:

public class Person {
    private int id;
    private String name;
    private String sexy;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

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

    public String getSexy() {
        return sexy;
    }

    public void setSexy(String sexy) {
        this.sexy = sexy;
    }
}

新建Controller,名为PersonController,新建两个person,用于传入前端:

@Controller
@RequestMapping("/")
public class PersonController {

    @RequestMapping("")
    public String index(Model model) {
        List<Person> people = new ArrayList<>();
        Person boy = new Person();
        boy.setId(1001);
        boy.setName("weber");
        boy.setSexy("男");
        Person girl = new Person();
        girl.setId(1002);
        girl.setName("Alice");
        girl.setSexy("女");
        people.add(boy);
        people.add(girl);
        model.addAttribute("people", people);
        return "index";
    }
}

新建index.html,用于前端展示:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>index</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link th:src="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
</head>
<body>

<div style="text-align: center;margin:0 auto;width: 1000px; ">
    <h1>demo index</h1>
    <table width="100%" border="1" cellspacing="1" cellpadding="0">
        <tr>
            <td>id</td>
            <td>name</td>
            <td>sexy</td>
        </tr>
        <tr th:each="person : ${people}">
            <td th:text="${person.id}">007</td>
            <td th:text="${person.name}">weber</td>
            <td th:text="${person.sexy}">男or女</td>
        </tr>
    </table>
</div>
</body>
</html>

在Application中,启动入口与上篇代码基本一致:

@SpringBootApplication
@EnableAutoConfiguration(exclude={DataSourceAutoConfiguration.class,HibernateJpaAutoConfiguration.class})
public class DemoApplication {、
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}

写完后代码的目录结构如图:

目录结构
我们运行入口DemoApplication,打开网页输入:localhost:8080,运行结果如图所示:
页面效果

至此,使用spring boot+ thymeleaf 模板引擎的一个简单的web项目已经完成。

相关文章

网友评论

    本文标题:Spring Boot总结(4)---web开发

    本文链接:https://www.haomeiwen.com/subject/hkwfjxtx.html