SpringBoot-Web开发_springboot属于动态网站吗?-CSDN博客

本文链接：https://blog.csdn.net/wuzj1314/article/details/123800818

1.静态资源规则与定制化

1.1 默认静态资源

（1）静态资源默认目录：

类路径classpath：/META‐INF/resources

classpath：/resources

classpath：/static

classpath：/public

只要静态资源放在以上这些路径下，访问时：当前项目根路径/+静态资源名就可以访问。

localhost:8080/1.jpg

因为默认是根路径/**，所以静态资源访问无前缀。

【注意】：如果在Controller类中也访问1.jpg，那么到底出来的是谁呢？

@RestController
public class Test {
    @RequestMapping("/1.jpg")
    public String test1(){
        return "hello";
    }
}

出来的是Controller类中的hello

原理：请求进来，先去Controller看能不能处理，不能处理的所有请求就都交给静态资源处理，如果静态资源也不能处理就报404。

（2）如果想加前缀，给静态资源访问时指定前缀，需要修改yml文件中。

spring.mvc.static-path-pattern=/xxx/**

spring:

  mvc:

    static-path-pattern: res/**

1.2 自定义静态资源目录

更改默认静态资源目录，更改后原先系统默认的那四个目录下的静态资源就访问不到了。

spring:

  web:

    resources:

      static-locations: [classpath:abc,classpath:xix]这个数组里面classpath冒号后面不能有空格，不然执行会报错

1.3 webjar方式

webjars：将需要使用的静态资源打成jar包，我们如果需要就将整个jar导入本项目就可以使用了。

例如:以JQuery为例来使用一下webjars方式

1.https://www.webjars.org/--- 静态资源打成jar包查看位置

2.在pom.xml文件中导入JQuery的jar依赖

<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>jquery</artifactId>
    <version>3.5.1</version>
</dependency>

http://localhost:8080/webjars/jquery/3.5.1/dist/jquery.js

2. welecom和favicon功能

2.1 欢迎页支持

静态资源路径下index.html。

可以配置静态资源路径，但不可以配置静态资源访问前缀，否则导致index.html不能被默认访问。

2.2 网站图标

favicon 是一个图标，显示在浏览器选项卡或窗口中，以及与特定站点相关的书签或收藏夹列表中。如果浏览器没有找到自定义的网站图标，它会显示默认的网站图标。

把favicon.ico图标放在静态资源访问目录下即可。

3.模板引擎--Thymeleaf

SpringBoot默认不支持JSP，需要引入第三方模板引擎技术实现页面渲染。

由于springboot是以jar包的方式打包程序的，而不是web项目,再者在springboot中我们用的是嵌入式的tomcat服务器，因此springboot项目是不支持动态页面的运行，所以如果我们都将页面处理成静态页面的话，那么到时候见加载数据的时候就需要大量的js来向后台请求数据回填到静态页面上，这样的话就会比较麻烦。所用springboot才为我们提供了模板引擎。

常见的模板引擎有JSP、Velocity、Freemarker、Thymeleaf

SpringBoot为我们推荐Thymeleaf模板引擎；因为他语法更简单，功能更强大。

3.1基本语法

表达式名字	语法	用途
变量取值	${…}	获取请求域，session域，对象域…
选择变量	*{…}	获取上下文对象值
消息	#{…}	获取国际化等值
链接	@{…}	生成链接
片段表达式	~{…}	jsp:include作用，引入公共页面

3.2 thymeleaf简单使用

（1）引入Starter

<dependency>

    <groupId>org.springframework.boot</groupId>

    <artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

（2）规则

页面.html必须放入templates目录下。在src/main/resources/templates/，将html模板创建在templates下，thymeleaf就能自动渲染。

（3）html页面引入thymeleaf命名空间

这样就会有th:的提示

（4）小注意事项

@Controller

public class SuccessController {

    @RequestMapping("/success")

    public String success() {

        return "success";

    }

}

（5）浏览器访问

model方式

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="UTF-8">

    <title th>Title</title>

</head>

<body>

<h1 th:text="${name}"></h1>

<ul>

    <li><h2  th:text="${id}"></h2></li>

    <li><h2  th:text="${name}"></h2></li>

    <li><h2  th:text="${age}"></h2></li>

    <li><h2  th:text="${address}"></h2></li>

</ul>

</body>

</html>

@Controller

public class SuccessController {

    @RequestMapping("/success")

    public String success(Model model) {

        //model中的数据会被放在请求域中，request。setAttribute("a",xx)

        model.addAttribute("name","竞宝");

        model.addAttribute("id","520");

        model.addAttribute("age","23");

        model.addAttribute("address","西安");

        return "success";

    }

}

Map方式

@RequestMapping(value = "/test1")

public  String  testHello1(Map<String,Object> map){

    map.put("id",1001);

    map.put("name","张三");

    map.put("age",23);

    map.put("address","西安");

    return "mytest";

}

注意:

1.请求处理方法的【参数】，是给模板包装数据【1.Map<String,Object> map 2.Model model】。

2.请求处理方法的返回值，是html模板的名称，不用带“.html”的后缀。

4.跨域

4.1 为什么会出现跨域问题

出于浏览器的同源策略限制。同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

4.2 什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

跨域示例：

第一个项目里面的端口默认没改，8080端口

@RestController

public class TestController {

//    @CrossOrigin("http://localhost:8081")

    @RequestMapping("/hello")

    public String test(){

        return "hello,world";

    }

}

第二个项目更改端口：8081

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-3.5.0.min.js"></script>

</head>

<body>

    <div id="app"></div>

    <input type="button" value="GET" onclick="getData()">

    <script>

        function getData(){

            $.get('http://localhost:8080/hello',function (msg){

                $("#app").html(msg);

            });

        }

    </script>

</body>

</html>

解决办法：@CrossOrigin("http://localhost:8081")

4.3跨域解决方法

4.3.1 @CrossOrigin("xxx")

在Controller上使用@CrossOrigin注解,该类下的所有接口都可以通过跨域访问

4.3.2 CORS全局配置-实现WebMvcConfigurer

新建一个跨域配置类，实现WebMvcConfigurer接口，重写addCorsMappings（）方法

/**

跨域配置

*/

@Configuration

public class WebMvcConfig implements WebMvcConfigurer {

    @Override

    public void addCorsMappings(CorsRegistry registry) {

        registry.addMapping("/**").

                allowedOrigins("http://localhost:8081").//允许跨域的域名，可以用*表示允许任何域名使用

                allowedMethods("*").//允许任何方法

                allowedHeaders("*").//允许任何请求头

                maxAge(3600);

    }

}