springmvc+thymeleaf简单登陆

最新推荐文章于 2023-06-10 21:57:46 发布

原创最新推荐文章于 2023-06-10 21:57:46 发布 · 372 阅读

1 ·

CC 4.0 BY-SA版权

thymeleaf 同时被 2 个专栏收录

11 篇文章

订阅专栏

springmvc

11 篇文章

订阅专栏

本文介绍了一个使用Spring MVC框架实现的简单登录系统。系统包括一个控制器类LoginWebController，用于处理登录请求和验证用户信息。通过注解@RequestMapping映射URL路径，@Autowired注入UserService进行用户数据操作。使用Thymeleaf作为模板引擎，创建了登录页面，包含用户名和密码输入框，以及提交按钮。同时，定义了LoginInfo类，用于封装表单数据。

controller

@Controller
public class LoginWebController {

    @Autowired
    private UserService userService;

    @RequestMapping("/login")
    public String login(Model model) {
        //设置一个模板去获取填写的form内容
        //将要提交的内容封装为一个类
        model.addAttribute("loginInfo",new LoginInfo());
        return "login";
    }

    @RequestMapping(value = "/loginCheck", method = RequestMethod.POST)
    public String login(@ModelAttribute(value = "loginInfo") LoginInfo loginInfo) {
        //获取填写的内容
        String userName = loginInfo.getUserName();
        String password = loginInfo.getPassword();
        //验证
        if(userService.selectUserName(userName) == null) {
            return "login";
        }else {
            if(userService.selectPasswordByUserName(userName).getPassword().equalsIgnoreCase(password)) {
                //跳转个人主页
                return "redirect:/home/"+userService.selectPasswordByUserName(userName).getUid()+"/1";
            }else {
                return "login";
            }
        }
    }
}

html

th:action="@{/loginCheck}"
th:object="${loginInfo}"
th:field=“userName”
th:field=“password”

<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
    <link rel="stylesheet" th:href="@{/css/me.css}">
    <link rel="stylesheet" th:href="@{/css/animate.css}">

</head>
<body>

<div class="ui mobile reversed stackable grid m-margin">
    <div class="ui segment m-container">
        <form th:action="@{/loginCheck}" th:object="${loginInfo}" th:method="post">
            <div class="ui middle aligned animated list">

                <div class="m-align"><h4 class="ui green header animated rubberBand m-opacity-tiny">iBlog</h4></div>
                <hr/>
                <div class="item m-padded-tb">
                    <a class="ui orange left ribbon label">Username</a>
                    <div class="content">
                        <div class="ui left icon input vertical-align">
                            <input type="text" th:field="*{userName}" placeholder="userName">
                            <i class="user icon"></i>
                        </div>
                    </div>
                </div>
                <div class="item m-padded-tb">
                    <a class="ui teal left ribbon label">Password</a>
                    <div class="content">
                        <div class="ui left icon input vertical-align">
                            <input type="password" th:field="*{password}" placeholder="password">
                            <i class="lock icon"></i>
                        </div>
                    </div>
                </div>
                <div class="m-align"><button type="submit" class="small ui pink button m-opacity-tiny">登陆</button>    </div>

            </div>
        </form>

    </div>
</div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
</body>
</html>

LoginInfo(form表单信息）

@Data
@NoArgsConstructor
@AllArgsConstructor
public class LoginInfo {
    private String userName;
    private String password;
}