JavaWeb 开发02 web实验

原创已于 2022-03-09 12:45:07 修改 · 941 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #java #intellij-idea #spring boot #javaweb

于 2022-03-08 22:28:41 首次发布

SpringBoot 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了Thymeleaf在Java Web开发中的关键作用，包括其优雅模板设计、Spring集成和自定义功能。通过步骤演示如何在Spring Boot项目中配置和使用Thymeleaf，以及实现实例登录页面和跳转。

Thymeleaf现代的Java模板引擎

Thymeleaf is a modern server-side Java template engine for both web
and standalone environments.

Thymeleaf’s main goal is to bring elegant natural templates to your
development workflow — HTML that can be correctly displayed in
browsers and also work as static prototypes, allowing for stronger
collaboration in development teams.

With modules for Spring Framework, a host of integrations with your
favourite tools, and the ability to plug in your own functionality,
Thymeleaf is ideal for modern-day HTML5 JVM web development — although
there is much more it can do.

Thymeleaf使用:

引入Starter:

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

自动配置的策略

所有thymeleaf的配置值都在 ThymeleafProperties
配置好了 SpringTemplateEngine
配好了 ThymeleafViewResolver
我们只需要直接开发页面

1.创建一个新的项目

2.配置资源

首先下载admin压缩文件(密码:2xc3)并解压：

将文件夹中的资源都放入resources的static包中:

在这里插入图片描述

将页面放入templates中：

在这里插入图片描述

3.在controller包中新建一个IndexController.java作为登录页面的控制层：

在这里插入图片描述

package com.it.springbootoracle.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class IndexController {
    /**
     * 来登录页 设置当进入localhost时跳转到登录界面
     * @return
     */
    @GetMapping(value = {"/","/login"})
    public String loginPage(){

        return "login";
    }

//    @PostMapping("/login")
//    public String main(User user, HttpSession session, Model model){ //RedirectAttributes
//
//        if(StringUtils.hasLength(user.getUserName()) && "123456".equals(user.getPassword())){
//            //把登陆成功的用户保存起来
//            session.setAttribute("loginUser",user);
//            //登录成功重定向到main.html;  重定向防止表单重复提交
//            return "redirect:/main.html";
//        }else {
//            model.addAttribute("msg","账号密码错误");
//            //回到登录页面
//            return "login";
//        }
//    }
//
//    /**
//     * 去main页面
//     * @return
//     */
//    @GetMapping("/main.html")
//    public String mainPage(HttpSession session, Model model){
//
//        //最好用拦截器,过滤器
//        Object loginUser = session.getAttribute("loginUser");
//        if(loginUser != null){
//            return "main";
//        }else {
//            //session过期，没有登陆过
//            //回到登录页面
//            model.addAttribute("msg","请重新登录");
//            return "login";
//        }
//    }

}

4.运行项目，输入`http://localhost:8080/`，成功登录访问页面：

在这里插入图片描述

5.之后进行主页面的编辑(登录页面后跳转的页面就是主页面)

首先将index页面放入templates并改名为main:

在这里插入图片描述
找到之前的login.html:

lang="en"后添加`xmlns:th="http://www.thymeleaf.org`

action="index.html"后添加th语句:`method="post" th:action="@{/login}"`

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>Login</title>

    <link href="css/style.css" rel="stylesheet">
    <link href="css/style-responsive.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>

<body class="login-body">

<div class="container">

    <form class="form-signin" action="index.html" method="post" th:action="@{/login}">
        <div class="form-signin-heading text-center">
            <h1 class="sign-title">Sign In</h1>
            <img src="images/login-logo.png" alt=""/>
        </div>
        <div class="login-wrap">
            <input type="text" class="form-control" placeholder="User ID" autofocus>
            <input type="password" class="form-control" placeholder="Password">

            <button class="btn btn-lg btn-login btn-block" type="submit">
                <i class="fa fa-check"></i>
            </button>

            <div class="registration">
                Not a member yet?
                <a class="" href="registration.html">
                    Signup
                </a>
            </div>
            <label class="checkbox">
                <input type="checkbox" value="remember-me"> Remember me
                <span class="pull-right">
                    <a data-toggle="modal" href="#myModal"> Forgot Password?</a>

                </span>
            </label>

        </div>

        <!-- Modal -->
        <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">Forgot Password ?</h4>
                    </div>
                    <div class="modal-body">
                        <p>Enter your e-mail address below to reset your password.</p>
                        <input type="text" name="email" placeholder="Email" autocomplete="off" class="form-control placeholder-no-fix">

                    </div>
                    <div class="modal-footer">
                        <button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
                        <button class="btn btn-primary" type="button">Submit</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- modal -->

    </form>

</div>


<!-- Placed js at the end of the document so the pages load faster -->

<!-- Placed js at the end of the document so the pages load faster -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modernizr.min.js"></script>

</body>
</html>

6.在IndexController中添加一下跳转页面语句:

    @PostMapping("/login")
    public String main(String username,String password){
        return "main";
    }

启动项目，测试启动情况

在这里插入图片描述

7.为进一步测试，在bean包下新建一个User类:

在这里插入图片描述
User.java

package com.it.springbootoracle.bean;

import lombok.Data;

@Data
public class User {
    private String userName;
    private String password;

	public String getUserName() {
        return userName;
    }

    public String getPassword() {
        return password;
    }
}

进入到login.html -> 在30行左右找到`div class="login-wrap"`字段,在其下方添加:

        <div class="login-wrap">
        	<label style="color: red" th:text="${msg}"></label>
            <input type="text" name="userName" class="form-control" placeholder="User ID" autofocus>
            <input type="password" name="password" class="form-control" placeholder="Password">

回到IndexController.java:

package com.it.springbootoracle.controller;

import com.it.springbootoracle.bean.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

import javax.servlet.http.HttpSession;
@Controller
public class IndexController {
    /**
     * 来登录页
     * @return
     */
    @GetMapping(value = {"/","/login"})
    public String loginPage(){

        return "login";
    }

    @PostMapping("/login")
    public String main(User user, HttpSession session, Model model){ //RedirectAttributes

        if(StringUtils.hasLength(user.getUserName()) && "123456".equals(user.getPassword())){
            //把登陆成功的用户保存起来
            session.setAttribute("loginUser",user);
            //登录成功重定向到main.html;  重定向防止表单重复提交
            return "redirect:/main.html";
        }else {
            model.addAttribute("msg","账号密码错误");
            //回到登录页面
            return "login";
        }
    }
    
    /**
     * 去main页面
     * @return
     */
    @GetMapping("/main.html")
    public String mainPage(HttpSession session, Model model){

        //最好用拦截器,过滤器
        Object loginUser = session.getAttribute("loginUser");
        if(loginUser != null){
            return "main";
        }else {
            //session过期，没有登陆过
            //回到登录页面
            model.addAttribute("msg","请重新登录");
            return "login";
        }
    }

}

测试登录的各种情况:

在这里插入图片描述

修改主页用户名

在main.html中找到John Doe名称(370行左右)，用Thymeleaf的行内命名法进行替换

<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <img src="images/photos/user-avatar.png" alt="" />
        [[${session.loginUser.userName}]]
    <span class="caret"></span>
</a>

ctrl+F9刷新html文件