前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Spring Boot---(16)Spring Boot使用Thymeleaf开发web页面

Spring Boot---(16)Spring Boot使用Thymeleaf开发web页面

作者头像
IT云清
发布2019-01-22 10:58:55
5790
发布2019-01-22 10:58:55
举报
文章被收录于专栏:IT云清

摘要:Spring官方不推荐使用JSP来开发WEB,而是推荐使用如下几种模板引擎来开发:

Thymeleaf(Spring官方推荐) FreeMarker Velocity Groovy Mustache

这里以Thymeleaf为例,介绍如何和Spring Boot集成,开发web项目;由于我不是做前端的,所以这里只是介绍个入门,让你写个页面可以访问到,我这里以表单上传为例。

注意:页面如果炸了请访问:点击这里

1.pom.xml

先引入thymeleaf需要的依赖。

代码语言:javascript
复制
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>

2.写个页面

我们新建springBoot项目时,目录结构中,resource结构如下:

resource

--static:默认存放css等文件

--templates:默认存放我们写得页面

我们现在在template下创建一个文件上传页面:upload.html,里面写上简单的文件上传的代码:

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>文件上传</title>
</head>
    <body>
        <form method="POST" enctype="multipart/form-data" action="/upload/uploadBlog">
            <p>文件:<input type="file" name="file"/></p>
            <p><input type="submit" value="上传" /></p>
        </form>
    </body>
</html>

再创建一个欢迎页面:index.html

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
</head>
<body>
<h1>hello ,this is java4all club</h1>
</body>
</html>

3.controller

写一个接口,当访问这个接口时,页面跳转到这个文件上传页面:

代码语言:javascript
复制
package com.java4all.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.multipart.MultipartFile;

/**
 * Created by lightClouds917
 * Date 2018/2/7
 * Description:文件上传
 */
@Controller
@RequestMapping("upload")
public class UploadController {

    @RequestMapping(value = "toUploadBlog",method = RequestMethod.GET)
    public String toUploadBlog(){
        return "upload";
    }


    @RequestMapping(value = "uploadBlog")
    public String uploadBlog(MultipartFile file){
        String fileName = file.getOriginalFilename();
        String name = file.getName();
        return "index";
    }

}

4.访问

我们现在启动项目,访问:http://localhost:8080/upload/toUploadBlog

我们选择文件,点击上传,会进入我们action="/upload/uploadBlog"此接口,然后就可以对文件进行解析或者处理了。

5.重点

为什么,我们接口中,返回值是个字符串,为什么会跳转到一个页面呢?

注意:

1.我们这个类,头上不是@RestController,而是@Controller,所以,并不会返回json串。

2.当你返回index时,Thymeleaf的默认参数中,有以下两个:

代码语言:javascript
复制
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

所以,当返回index时,其实会跳转到:/templates/index.html。

6.错误

初次尝试时,启动项目可能会有如下错误:

元素类型 "meta" 必须由匹配的结束标记 "</meta>" 终止。

是说页面的标签,meta标签没有结尾。给个结尾就可以了,如下:

代码语言:javascript
复制
<meta charset="UTF-8">
代码语言:javascript
复制
<meta charset="UTF-8"/>

7.常用配置参考

点击:Spring Boot---(17)Spring Boot常用配置项

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018年02月08日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档