三、Web开发-CSDN博客

本文链接：https://blog.csdn.net/qq_40824748/article/details/112747683

微服务项目

前后端分离

前端 -----------------vue----------------前端工程师

后端-------------springboot------------后端工程师

动静分离 -------> 部署cdn上

cdn----------------->减少带宽距离传输–减少自己服务器带宽

静态资源访问

在我们开发Web应用的时候，需要引用大量的js、css、图片等静态资源。

默认配置

Spring Boot默认提供静态资源目录位置需置于classpath下，目录名需符合如下规则：

/static

/public

/resources

/META-INF/resources

举例：我们可以在src/main/resources/目录下创建static，在该位置放置一个图片文件。启动程序后，尝试访问http://localhost:8080/D.jpg。

如能显示图片，配置成功。

渲染Web页面

controller—视图层渲染我们页面 – 视图层页面跳转
service------业务逻辑层 – 访问jspn格式
dao-- --------数据库访问层

前后端

渲染Web页面

在之前，我们都是通过@RestController来处理请求，所以返回的内容为json对象。那么如果需要渲染html页面的时候，要如何实现呢？

模板引擎能够非常好的帮助seo搜索到该网页

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

上手开发动态网站。

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

Thymeleaf
FreeMarker
Velocity
Groovy
Mustache

Spring Boot建议使用这些模板引擎，避免使用JSP，若一定要使用JSP将无法实现Spring Boot的多种特性，具体可见后文：

支持JSP的配置当你使用上述模板引擎中的任何一个，它们默认的模板配置路径为：src/main/resources/templates。

当然也可以修改这个路径，具体如何修改，可在后续各模板引擎的配置属性中查询并修改。

YML与Properties用法

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

使用yml可以减少配置文件的重复性。

例如：application.properties配置

dudu.name=dudu
dudu.age=14

前面都一样、配置较多时会冗余

package com.dudu.service;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
/**
 * @Author 嘟嘟嘟
 * @ClassName MemberService
 * @Project springboot-helloword
 * @CreateTime 2021/1/17 14:47
 */
@RestController
public class MemberService {
    @Value("${dudu.name}")
    private String name;
    @Value("${dudu.age}")
    private String age;
    @RequestMapping("/getPropertise")
    public String getPropertise(){
        return name+"--"+age;
    }
}

在读取本地的配置文件时需要用到 @Value注解

例如：application.yml配置

dudu: 
  name: lala
  age: 22

在企业中application.yml方式用的是比较多的；

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

pom文件引入FreeMarker

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

controller层

@Controller
public class FreeMarkerIndexController {
    @RequestMapping("/index")
    public String freemarkerIndex(Map<String,String> result, HttpServletRequest request){
        //Map<String, String> result与HttpServletRequest request一样
        //request.setAttribute("name","dudu");HttpServletRequest request一样
        result.put("name","dudu");
        System.out.println("mfsl");
        //model.addAttribute("name","dudu");
        return "freemarkerIndex";
    }
}

静态资源.ftl文件

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

不要忘了配置.yml文件

spring:
  freemarker:
    suffix: .ftl

Freemarker其他用法

FreeMarkerIndexController:

@Controller
public class FreeMarkerIndexController {
    @RequestMapping("/index")
    public String freemarkerIndex(Map<String,Object> result, HttpServletRequest request){
        //Map<String, String> result与HttpServletRequest request一样
        //request.setAttribute("name","dudu");HttpServletRequest request一样
        result.put("name","dudu");
        //0为男、1为女
        result.put("sex","0");
        result.put("age",22);
        ArrayList<String> userlist=new ArrayList<>();
        userlist.add("dudu");
        userlist.add("xianggang");
        result.put("userlist",userlist);
        //model.addAttribute("name","dudu");
        return "freemarkerIndex";
    }

}

freemarkerIndex:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" />
    <title></title>
</head>
<body>
${name}
<#if sex=='0'>
    男
    <#elseif sex=='1'>
    女
    <#else>
    其他
</#if>
<#if age gt 17><!--这里的数字要注意，这里是int类型、controller里也要是int、要保持一致-->
    成年了
    <#else>
    未成年
</#if>
<#list userlist as user>
    ${user}
</#list>
</body>
</html>

yml的一些配置：

dudu:
  name: dd
  age: 25
spring:
  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
server:
  servlet:
    encoding:
      force: true
      charset: UTF-8

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

什么是thymeleaf

thymeleaf是一款用于渲染XML/XHTML/HTML5内容的模板引擎，类似JSP，Velocity，FreeMaker等，它也可以轻易的与Spring MVC等Web

框架进行集成作为Web应用的模板引擎。

加入依赖;

<!--引入thymeleaf的依赖-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

yml 配置文件

###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

controller层

@Controller
public class MyThymeleafController {
    @RequestMapping("/myThymeleaf")
    public String myThymeleaf(HttpServletRequest request, Map<String,Object> result){
        //request.setAttribute("user",new UserEntity("dudu",22));  这种写法可能会引起静态页面误报
        result.put("user",new UserEntity("dudu",22));//并不一定能解决误报问题、但尽量用此方法
        return "myThymeleaf";
    }
}

entity层

public class UserEntity {//这里没有用lombok
    private String userName;
    private Integer age;
    public UserEntity(String userName, Integer age) {
        this.userName = userName;
        this.age = age;
    }
    public String getUserName() {
        return userName;
    }
    public Integer getAge() {
        return age;
    }
}

静态页面

在使用thymeleaff时，静态页面需要添加：xmlns:th=“http://www.thymeleaf.org”

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

thymeleaf循环、if判断

controller层：

@Controller
public class MyThymeleafController {
    @RequestMapping("/myThymeleaf")
    public String myThymeleaf(HttpServletRequest request, Map<String,Object> result){
        //request.setAttribute("user",new UserEntity("dudu",22));
        //result.put("user",new UserEntity("dudu",22));
        ArrayList<UserEntity> userEntities = new ArrayList<>();
        userEntities.add(new UserEntity("dudu1",22));
        userEntities.add(new UserEntity("dudu2",23));
        userEntities.add(new UserEntity("dudu3",24));
        userEntities.add(new UserEntity("dudu4",25));
        result.put("userlist",userEntities);
        return "myThymeleaf";
    }
}

静态资源页面：

<!DOCTYPE html>
<!--需要在HTML文件中加入以下语句： -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Show User</title>
</head>
<body>
<table>
    姓名:<span th:text="${user.userName}"></span><br/>
    年龄:<span th:text="${user.age}"></span>
    <ul th:each="user:${userlist}">
        <li th:text="${user.userName}"></li>
        <li th:text="${user.age}"></li>
    </ul>
    <span th:if="${user.age>17}">成年</span>
    <span th:if="${user.age<17}">未成年</span>

</table>
</body>
</html>```