Java框架篇_02 SpringBoot整合web开发


整合静态资源

在我们开发Web应用的时候,需要引用大量的js、css、图片等静态资源。
Spring Boot默认提供静态资源目录需置于classpath下,目录需符合如下规则:

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

举个例子,我们可以在src/main/resources/目录下创建static,在该位置放置一个图片文件。启动程序后,尝试访问http://localhost:8080/picture.jpg。如能显示图片,则配置成功。
在这里插入图片描述
在这里插入图片描述

YML与Properties

SpringBoot支持两种配置方式,一种是properties文件,一种是yml。

配置文件的使用:
在resources目录下创建application.properties文件
在这里插入图片描述
文件中内容举例:

symc.name=forward
symc.age=21

那么如何读取到这个文件呢?

定义属性,使用@Value1配置文件可以把配置文件的赋给对应的属性。

@SpringBootApplication
@RestController
public class ConfigPropertiesService {
    @Value("${symc.name}")
    private String name;
    @Value("${symc.age}")
    private Integer age;

    @RequestMapping("/getProperties")
    public String getProperties() {
        return "name:" + name + "\nage:" + age;
    }
}
@SpringBootApplication
public class App {
    public static void main(String[] args) {
        SpringApplication.run(ConfigPropertiesService.class,args);
    }
}

启动服务,访问
在这里插入图片描述

还可以使用yml的方式,过程都是一样的,就是配置文件不一样:
在这里插入图片描述
配置文件中的内容:

symc:
  name: Forward
  age: 21

很明显,properties相比yml比较冗余,所以推荐使用yml。

渲染web页面

我们之前是通过@RestController来处理请求,返回的格式为json对象。那么如果需要渲染html页面的时候,要如何实现呢?

这时我们可以用到模板引擎 2,它能够非常好的帮助seo 3搜索到该网页。

在动态HTML实现上Spring Boot依然可以完美胜任,并且提供了多种模板引擎的默认配置支持,所以在推荐的模板引擎下,我们可以很快的上手开发动态网站。

Spring Boot提供了默认配置的模板引擎主要有以下几种:

  • Thymeleaf
  • FreeMarker
  • Velocity
  • Groovy
  • Mustache

Spring Boot建议使用这些模板引擎,避免使用JSP,若一定要使用JSP将无法实现Spring Boot的多种特性。
当你使用上述模板引擎中的任何一个,它们默认的模板配置路径为:src/main/resources/templates。当然也可以修改这个路径,具体如何修改,可在后续各模板引擎的配置属性中查询并修改。

使用Freemarker模板引擎渲染web视图

在pom.xml文件中引入依赖:

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

创建一个controller包,在resources目录下创建templates文件夹,现在我们的service包用于返回json对象,controller用于页面跳转

在这里插入图片描述
在controller下创建如下类FreemarkerIndexController
这里不能使用@RestController了,因为他会返回一个json,应该用@Controller

@Controller
public class FreemarkerIndexController {
    @RequestMapping("/freemarkerIndex")
    public String freemarkerIndex(Map<String,String> result){
        //转发到页面展示数据
        //Map类似于HttpServletRequest中的request.setAttribute("name","Forward")
        result.put("name","Forward");
        return "freemarkerIndex";
    }
}

在resources/templates下创建 * .ftl文件,里面放的是html代码:
在这里插入图片描述
${name}是请求响应的模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>
${name}
</body>
</html>

要注意,我们的运行程序入口,需要扫包,必须在执行类同级或以下,还有run()中推荐写当前类:

@SpringBootApplication
public class App {
    public static void main(String[] args) {
        SpringApplication.run(App.class);
    }
}

Freemarker配置

我们可以在application.yml文件中配置,我们可以在这里设置编码;可以设置模板文件结尾,默认是 .ftl,我们可以修改成公司规定的后缀;我们还可以设置模板文件目录,默认是/templates,我们一样可以修改。

spring:
  http:
    encoding:
      force: true
      ### 模版引擎编码为UTF-8
      charset: UTF-8
  freemarker:
    allow-request-override: false
    cache: false
    check-template-location: true
    charset: UTF-8
    content-type: text/html; charset=utf-8
    expose-request-attributes: false
    expose-session-attributes: false
    expose-spring-macro-helpers: false
    ## 模版文件结尾.ftl
    suffix: .ftl
    ## 模版文件目录
    template-loader-path: classpath:/templates

模板引擎条件判断用法

先整个例子:

@Controller
public class FreemarkerIndexController {
    @RequestMapping("/freemarkerIndex")
    public String freemarkerIndex(Map<String,Object> result){
        //转发到页面展示数据
        //Map类似于HttpServletRequest中的request.setAttribute("name","Forward")
        result.put("name","Forward");
        result.put("age",20);
        result.put("sex","男");
        ArrayList<String> userList = new ArrayList<String>();
        userList.add("Forward");
        userList.add("Gosling");
        result.put("users",userList);
        return "freemarkerIndex";
    }
}

再到freemarkerIndex.ftl

<body>
${name}<br>
<#--if-else的使用-->
<#--当遇到大于小于<>这样的,应使用(),不然会识别成标签-->
<#if (age>=18)>是个成年人
<#else >是未成年人
</#if>

<#if sex=="男">是个男人
    <#elseif sex=="女">是个女人
    <#else >可能是个人妖
</#if>
<#--list遍历-->
<#list users as user>
    ${user}
</#list>
</body>
</html>

在这里插入图片描述

使用thymeleaf渲染web页面

thymeleaf的使用

准备一个User实体类
在controller下创建ThymeleafIndexController 用于演示:

@Controller
public class ThymeleafIndexController {
    @RequestMapping("/thymeleafIndex")
    public String thymeleafIndex(HttpServletRequest request){
        request.setAttribute("user",new User("Forward Seen",21));
        return "thymeleafIndex";
    }
}

或者使用Map的方式也可以的,更推荐这种

@Controller
public class ThymeleafIndexController {
    @RequestMapping("/thymeleafIndex")
    public String thymeleafIndex(Map<String,Object> result){
//        request.setAttribute("user",new User("Forward Seen",21));
        result.put("user",new User("Forward Seen",21));
        return "thymeleafIndex";
    }
}

resources/application.yml下进行Thymeleaf的配置:

###ThymeLeaf配置
spring:
  thymeleaf:
    #prefix:指定模板所在的目录
    prefix: classpath:/templates/
    #check-tempate-location: 检查模板路径是否存在
    check-template-location: true
    #cache: 是否缓存,开发模式下设置为false,避免改了模板还要重启服务器,线上设置为true,可以提高性能。
    cache: true
    suffix:  .html
    encoding: UTF-8
    mode: HTML5

resources/templates/下创建在模板引擎文件thymeleafIndex.html,文件中代码模板如下:
在这里插入图片描述

<!DOCTYPE html>
<!--需要在HTML文件中加入以下语句: -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf Demo</title>
</head>
<body>
    年龄:<span th:text="${user.name}"></span>
    年龄:<span th:text="${user.age}"></span>
</body>
</html>

我的idea中会报红,不用搭理它。
在这里插入图片描述
App执行类,运行

@SpringBootApplication
public class App {
    public static void main(String[] args) {
        SpringApplication.run(App.class);
    }
}

在这里插入图片描述

条件和循环的使用

@Controller
public class ThymeleafIndexController {
    @RequestMapping("/thymeleafIndex")
    public String thymeleafIndex(Map<String,Object> result){
        result.put("user",new User("Forward Seen",21));
        ArrayList<User> users = new ArrayList<User>();
        users.add(new User("James Gosling",65));
        users.add(new User("Yellow Yin",21));
        result.put("users",users);
        return "thymeleafIndex";
    }
}
<!DOCTYPE html>
<!--需要在HTML文件中加入以下语句: -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf Demo</title>
</head>
<body>

<ul th:each="user:${users}">
    <li th:text="${user.name}"></li>
    <li th:text="${user.age}"></li>
</ul>
<span th:if="${user.age>=18}">成年人</span>
<span th:if="${user.age<18}">未成年</span>
</body>
</html>

在这里插入图片描述


  1. @Value是Spring提供的注解 ↩︎

  2. 模板引擎可以让(网站)程序实现界面与数据分离,业务代码与逻辑代码的分离,这就大大提升了开发效率,良好的设计也使得代码重用变得更加容易。 ↩︎

  3. SEO(Search Engine Optimization):搜索引擎优化,它是一种通过分析搜索引擎的排名规律,了解各种搜索引擎怎样进行搜索、怎样抓取互联网页面、怎样确定特定关键词的搜索结果排名的技术。搜索引擎采用易于被搜索引用的手段,对网站进行有针对性的优化,提高网站在搜索引擎中的自然排名,吸引更多的用户访问网站,提高网站的访问量,提高网站的销售能力和宣传能力,从而提升网站的品牌效应。 ↩︎

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值