springboot开发web应用

系统管理员 2021-09-21 02:34 539阅读 0赞

我们知道，在web开发时，一般都会涉及到很多的静态资源，如js、image、css文件等。

SpringBoot的默认的静态文件目录是：

*  /static
 *  /public
 *  /resources
 *  /META-INF/resources

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZW1lbmdydWkxMg_size_16_color_FFFFFF_t_70][]

所以一般上我们只需要把静态文件放入前面的四个任一一个即可。默认都放在static下，对应路径即为：src/main/resources/static。

而从官网文档里也可以获悉，为了实现动态的html，SpringBoot是通过模版引擎进行页面结果渲染的，主要有以下几种：

*  Thymeleaf
 *  FreeMarker
 *  Velocity
 *  Groovy
 *  Mustache

对于模版引擎而言，SpringBoot默认存放模版文件的路径为src/main/resources/templates，当然也可以通过配置文件进行修改的。因为不同的模版引擎对应的配置属性是不一样，所以在具体讲解模版引擎时，会提到的。

当然了，使用jsp也是可以的，但官方已经不建议使用JSP了，本文也会讲解下SpringBoot下JSP的支持的，毕竟有很多老的项目还是使用JSP居多的。

知道了以上的一些默认配置和知识点后，就可以进行模版引擎的集成使用了。本章节主要讲解下常用的FreeMarker、Thymeleaf及JSP三个的集成和使用，其他的基本用法都一样，就是各模版引擎的语法的差异了。

### 整合 Freemarker ###

FreeMarker是一款模板引擎： 即一种基于模板和要改变的数据，并用来生成输出文本(HTML网页，电子邮件，配置文件，源代码等)的通用工具。

![20200123201521969.jpeg][]

添加POM依赖

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

1.application.properties配置加入相关配置：

# 缓存配置 开发阶段应该配置为false 因为经常会改
    spring.freemarker.cache=false
    # 模版后缀名 默认为ftl
    spring.freemarker.suffix=.ftl
    # 文件编码
    spring.freemarker.charset=UTF-8
    # 模版加载的目录
    spring.freemarker.template-loader-path=classpath:/templates/
    # 配置
    # locale    该选项指定该模板所用的国家/语言选项
    # number_format    指定格式化输出数字的格式：currency、
    # boolean_format    指定两个布尔值的语法格式,默认值是true,false
    # date_format,time_format,datetime_format    定格式化输出日期的格式
    # time_zone    设置格式化输出日期时所使用的时区
    # 数字千分位标识
    spring.freemarker.settings.number_format=,##0.00

题外话：详细的配置可参org.springframework.boot.autoconfigure.freemarker.FreeMarkerProperties类

2.编写控制层

FreemarkerController.java:

//因为是返回页面 所以不能是@RestController
    @Controller
    @RequestMapping("/freemarker")
    public class FreemarkerController {
        
        //正常和springmvc设置返回参数是意义的用法了
        @GetMapping("/map")
        public String index(String name,ModelMap map) {
            map.addAttribute("name", name);
            map.addAttribute("from", "lqdev.cn");
            //模版名称，实际的目录为：src/main/resources/templates/freemarker.html
            return "freemarker";
        }
        
        @GetMapping("/mv")
        public String index(String name,ModelAndView mv) {
            mv.addObject("name", name);
            mv.addObject("from", "lqdev.cn");
            //模版名称，实际的目录为：src/main/resources/templates/freemarker.html
            return "freemarker";
        }
    }

3.编写模版文件

在resources目录下创建templates目录，然后新建freemarker.ftl:

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8" />
        <title>freemarker简单示例</title>
    </head>
    <body>
    <h1>Hello Freemarker</h1>
    
    
    <h2>名称：${name!}，来自：${from}</h2>
    </body>
    </html>

4.启动应用，访问：http://127.0.0.1:8080/freemarker/mv或者 http://127.0.0.1:8080/freemarker/map就能查看页面了。

关于一些Freemarker的语法这里就不说明了，大家可到官网查看下：[https://freemarker.apache.org/docs/index.html][https_freemarker.apache.org_docs_index.html]或者，中文参考(可能版本不是最新)：[http://freemarker.foofun.cn/toc.html][http_freemarker.foofun.cn_toc.html]

### 整合 Thymeleaf ###

Thymeleaf是一个XML/XHTML/HTML5模板引擎，可用于Web与非Web环境中的应用开发。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式，因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。相对于编写逻辑或代码，开发者只需将标签属性添加到模板中即可。接下来，这些标签属性就会在DOM（文档对象模型）上执行预先制定好的逻辑。

添加pom依赖

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

1.application.properties配置加入相关配置：

# 启用缓存:建议生产开启
    spring.thymeleaf.cache=false 
    # 建议模版是否存在
    spring.thymeleaf.check-template-location=true 
    # 是否启用
    spring.thymeleaf.enabled=true 
    # 模版编码
    spring.thymeleaf.encoding=UTF-8 
    # 应该从解析中排除的视图名称列表（用逗号分隔）
    spring.thymeleaf.excluded-view-names= 
    # 模版模式
    spring.thymeleaf.mode=HTML5 
    # 模版存放路径
    spring.thymeleaf.prefix=classpath:/templates/ 
    # 模版后缀
    spring.thymeleaf.suffix=.html

2.编写控制层

ThymeleafController.java:

@Controller 	//不是@RestController
    @RequestMapping("/thymeleaf")
    public class ThymeleafController {
    
        // 正常和springmvc设置返回参数是意义的用法了
        @GetMapping("/map")
        public String index(String name, ModelMap map) {
            map.addAttribute("name", name);
            map.addAttribute("from", "lqdev.cn");
            // 模版名称，实际的目录为：src/main/resources/templates/thymeleaf.html
            return "thymeleaf";
        }
    
        @GetMapping("/mv")
        public ModelAndView index(String name) {
            ModelAndView mv = new ModelAndView();
            mv.addObject("name", name);
            mv.addObject("from", "lqdev.cn");
            // 模版名称，实际的目录为：src/main/resources/templates/thymeleaf.html
            mv.setViewName("thymeleaf");
            return mv;
        }
    }

3.编写模版文件

thymeleaf.html

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
    <head lang="en">
        <meta charset="UTF-8" />
        <title>thymeleaf简单示例</title>
    </head>
    <body>
    <h1>Hello thymeleaf</h1>
    
    <h2 th:text="'名称：'+${name}+'，来自：'+${from}">默认值</h2>
    </body>
    </html>

4.启动应用，访问：http://127.0.0.1:8080/thymeleaf/mv?name=xmr 或者 http://127.0.0.1:8080/thymeleaf/map?name=xmr 就能查看页面了。

### JSP支持 ###

虽然SpringBoot官方已经不建议使用jsp了。但在一些老的项目迁移时，jsp的支持是毋庸置疑的。所以还是需要兼容的。

添加pom依赖加入

<dependency>
        <groupId>org.apache.tomcat.embed</groupId>
        <artifactId>tomcat-embed-jasper</artifactId>
    </dependency>
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jstl</artifactId>
    </dependency>

注意:创建SpringBoot整合JSP，一定要为war类型，否则会找不到页面

1.application.properties配置加入相关配置：

#jsp 支持
    spring.mvc.view.suffix=.jsp
    spring.mvc.view.prefix=/WEB-INF/jsp/

2.编写控制层

JspController.java

@Controller
    @RequestMapping("/jsp")
    public class JspController {
        
        //正常和springmvc设置返回参数是意义的用法了
            @GetMapping("/map")
            public String index(String name,ModelMap map) {
                map.addAttribute("name", name);
                map.addAttribute("from", "lqdev.cn");
                //模版名称，实际的目录为：src/main/webapp/jsp/index.html
                return "index";
            }
            
            @GetMapping("/mv")
            public ModelAndView index(String name) {
                ModelAndView mv = new ModelAndView();
                mv.addObject("name", name);
                mv.addObject("from", "lqdev.cn");
                //模版名称，实际的目录为：src/main/webapp/jsp/index.html
                mv.setViewName("index");
                return mv;
            }
    }

3.在webapp/WEB-INF/jsp目录下编写jsp文件

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charsetUTF-8">
    <title>jsp示例</title>
    </head>
    <body>
    <h1>Hello Jsp</h1>
    <h2 >名称：${name}，来自：${from}</h2>
    </body>
    </html>

5.启动应用，访问：http://127.0.0.1:8080/jsp/mv?name=xmr 或者 http://127.0.0.1:8080/jsp/map?name=xmr 就能查看页面了。

![20200123202206554.jpeg][]

由于本人水平有限，写作中多有不足，还请不吝赐教

参考：

[https://my.oschina.net/xiedeshou/blog/1923553][https_my.oschina.net_xiedeshou_blog_1923553]

[https://www.cnblogs.com/moonlightL/p/7891806.html][https_www.cnblogs.com_moonlightL_p_7891806.html]

[http://blog.didispace.com/springbootweb/][http_blog.didispace.com_springbootweb]

[http://www.ityouknow.com/springboot/2016/02/03/spring-boot-web.html][http_www.ityouknow.com_springboot_2016_02_03_spring-boot-web.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZW1lbmdydWkxMg_size_16_color_FFFFFF_t_70]: /images/20210920/333936087911449eb0a159625eb07f2b.png
[20200123201521969.jpeg]: /images/20210920/549bd22801674d73a5b3153dfa5ddec5.png
[https_freemarker.apache.org_docs_index.html]: https://freemarker.apache.org/docs/index.html
[http_freemarker.foofun.cn_toc.html]: http://freemarker.foofun.cn/toc.html
[20200123202206554.jpeg]: /images/20210920/3fe2e9679d1f49278f0369869ff2e7ca.png
[https_my.oschina.net_xiedeshou_blog_1923553]: https://my.oschina.net/xiedeshou/blog/1923553
[https_www.cnblogs.com_moonlightL_p_7891806.html]: https://www.cnblogs.com/moonlightL/p/7891806.html
[http_blog.didispace.com_springbootweb]: http://blog.didispace.com/springbootweb/
[http_www.ityouknow.com_springboot_2016_02_03_spring-boot-web.html]: http://www.ityouknow.com/springboot/2016/02/03/spring-boot-web.html