Springboot整合html页面

最新推荐文章于 2025-03-21 08:47:38 发布

b15735105314

最新推荐文章于 2025-03-21 08:47:38 发布

阅读量6.9k

点赞数 3

分类专栏： SpringBoot 文章标签： springboot

本文链接：https://blog.youkuaiyun.com/b15735105314/article/details/109153213

版权

SpringBoot 专栏收录该内容

27 篇文章

订阅专栏

1、添加依赖

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

2、配置

spring:
  thymeleaf:
    mode: LEGACYHTML5
    encoding: UTF-8
    prefix: classpath:/templates/            # 静态页面所在的路径，一般在resources文件加下创建
    suffix: .html

3、controller中返回页面

    @RequestMapping("login")
    public String hello(String returnUrl,
                        Model model,
                        HttpServletRequest request,
                        HttpServletResponse response){
        model.addAttribute("returnUrl", returnUrl);

        // TODO 添加登录校验

        // 用户未登录，则跳转到sso的登录界面
        return "login";
    }

4、页面跳转与重定向

这里的页面跳转与地址重定向只说return方式的，不考虑response或者其他方式的。

跳转到页面：return "xxx"; （xxx 是页面文件的名称）

示例：

    @RequestMapping("login")
    public String hello(String returnUrl,
                        HttpServletRequest request,
                        HttpServletResponse response){
        // 跳抓到login.html页面
        return "login";
    }

重定向：return "redirect:url";

示例：

    @RequestMapping("login")
    public String hello(HttpServletRequest request,
                        HttpServletResponse response){
       
         return "redirect:http://127.0.0.1:8080/index.html";
    }

5、跳转时后端传输数据到页面，方法使用model参数，model参数的使用情况与request/response一样，不接受任何参数，只是需要在方法中调用。

示例：

    @RequestMapping("login")
    public String hello(String returnUrl,
                        Model model,
                        HttpServletRequest request,
                        HttpServletResponse response){
        // 将需要在页面中显示的数据放入到model中即可
        model.addAttribute("returnUrl", returnUrl);

        // 获取并、验证全局会话是否有效
        String userTicket = getCookie(COOKIE_USER_TICKET, request);
        boolean isVaild = verifyUserTicket(userTicket);
        if(isVaild){
            // 用户已在sso端登录过，创建临时会话并返回
            String userTmpTicket = createTmpTicket();
            return "redirect:" + returnUrl + "?tmpTicket=" + userTmpTicket;
        }

        // 用户未登录，则跳转到sso的登录界面
        return "login";
    }

前端页面显示model中的数据：${xxx}

示例：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>SSO单点登录</title>
</head>
<body>
<h1>欢迎访问单点登录系统</h1>
<form action="doLogin" method="post">
    <input type="text" name="username" placeholder="请输入用户名"/>
    <input type="password" name="password" placeholder="请输入密码"/>
    <input type="hidden" name="returnUrl" th:value="${returnUrl}">
    <input type="submit" value="提交登录"/>
</form>
<span style="color:red" th:text="${errmsg}"></span>

</body>
</html>

注：这种在后端使用model传输数据到页面的形式，并不适合前后端分离的情况。