SpringBoot（3）登陆和thymelef抽取公共页面

最新推荐文章于 2023-07-07 14:16:44 发布

hyc9528

最新推荐文章于 2023-07-07 14:16:44 发布

阅读量190

点赞数

分类专栏： SpringBoot 文章标签： spring boot spring

本文链接：https://blog.csdn.net/hyc9528/article/details/109455928

版权

SpringBoot 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1. 登陆

注意：使用thymelef模版引擎时想要页面实时刷新页面需要

禁用thymelef的缓存

# 禁用模版引擎的缓存
spring.thymeleaf.cache=false

页面修改完按ctrl+F9重新编译

编写LoginController

完成login.html

<body class="text-center">
		<form class="form-signin" action="dashboard.html" th:action="@{/user/login}" method="post">
			<img class="mb-4" th:src="@{/asserts/img/bootstrap-solid.svg}" src="asserts/img/bootstrap-solid.svg" alt="" width="72" height="72">
			<h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">Please sign in</h1>
			<!--判断msg中有没有字符串-->
			<p style="color: red" th:if="${not #strings.isEmpty(msg)}" th:text="${msg}"></p>
			<label class="sr-only" th:text="#{login.username}">Username</label>
			<input type="text" name="username" class="form-control" th:placeholder="#{login.username}" placeholder="Username" required="" autofocus="">
			<label class="sr-only" th:text="#{login.password}">Password</label>
			<input type="password" name="password" class="form-control" th:placeholder="#{login.password}" placeholder="Password" required="">
			<div class="checkbox mb-3">
				<label>
          <input type="checkbox" value="remember-me" > [[#{login.remember}]]
        </label>
			</div>
			<button class="btn btn-lg btn-primary btn-block" type="submit" th:text="#{login.btn}">Sign in</button>
			<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
			<a class="btn btn-sm" th:href="@{/index.html(l='zh_CN')}">中文</a>
			<a class="btn btn-sm" th:href="@{/index.html(l='en_US')}">English</a>
		</form>

	</body>

编写LoginControlelr

@Controller
public class LoginController {


    //@RequestMapping(value = "/user/login",method = RequestMethod.POST)
    @PostMapping(value = "/user/login")
    public String login(@RequestParam("username") String username,
                        @RequestParam("password") String password,
                        Map<String,Object> map){
        if(!StringUtils.isEmpty(username) && "123456".equals(password)){
            //登录成功,防止表单重复提交，重定向到主页
            return "redirect:/main.html";
        }
        //登录失败
        map.put("msg","用户名密码错误");
        return "login";
    }
}

重定向到主页防止表单重复提交
在配置类中加上：

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        //浏览器发送 /wuhu 来到　success页面
        registry.addViewController("/wuhu").setViewName("success");
        registry.addViewController("/").setViewName("login");
        registry.addViewController("/index.html").setViewName("login");
        //为主页添加视图控制器
        registry.addViewController("/main.html").setViewName("dashboard");
    }

2. thymelef抽取公共页面

抽取公共片段

    <nav th:fragment="header" class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
		<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#" >[[${session.loginUser}]]</a>
		<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
		<ul class="navbar-nav px-3">
			<li class="nav-item text-nowrap">
				<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">Sign out</a>
			</li>
		</ul>
	</nav>

引入公共页面

~{templatename::selector} 模版名::选择器
~{templatename::fragmentname} 模版名::片段名

    <!--引入抽取的topbar-->
	<!--模版名：会使用thymelef的前后缀配置规则-->
	<div th:insert="~{dashboard::topbar}"></div>

默认效果：
insert的公共片段在div的标签中

三种引入公共片段的th属性：
th:insert: 将公共片段整个插入到声明元素中
th:replace：将声明引入的元素替换为公共片段
th:include：将被引入的片段的内容包含进这个标签中

<footer th:fragment="copy">  
    &copy; 2011 The Good Thymes Virtual Grocery
</footer>

引入方式
<body>
  ...
  <div th:insert="footer :: copy"></div>
  <div th:replace="footer :: copy"></div>
  <div th:include="footer :: copy"></div>  
</body>

效果
<body>
  ...
  <div>   
    <footer>    
    &copy; 2011 The Good Thymes Virtual Grocery    
    </footer> 
  </div>
  <footer>   
    &copy; 2011 The Good Thymes Virtual Grocery  
  </footer>
  <div>    
    &copy; 2011 The Good Thymes Virtual Grocery
  </div>  
</body>

3. 侧边栏连接高亮

thymelef在引入公共代码时可以使用参数

1. 引入公共页面时如果参数为main.html则class设为nav-link active否则没有active

<a class="nav-link active"
    th:class="${activeUri=='main.html'?'nav-link active':'nav-link'}"
    href="#" th:href="@{/main.html}">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home">
        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
        <polyline points="9 22 9 12 15 12 15 22"></polyline>
    </svg>
    Dashboard <span class="sr-only">(current)</span>
</a>
2. 引入公共页面并传参

<!--引入sidebar-->
<div th:replace="commons/bar::#sidebar(activeUri='main.html')"></div>

hyc9528

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot（3）登陆和thymelef抽取公共页面

1. 登陆注意：使用thymelef模版引擎时想要页面实时刷新页面需要禁用thymelef的缓存# 禁用模版引擎的缓存spring.thymeleaf.cache=false页面修改完按ctrl+F9重新编译编写LoginController完成login.html<body class="text-center"> <form class="form-signin" action="dashboard.html" th:action="@{/user/l
复制链接

扫一扫

专栏目录