Springboot+thymeleaf+layui登录注册demo

最新推荐文章于 2025-07-04 10:46:51 发布

w710962610

最新推荐文章于 2025-07-04 10:46:51 发布

阅读量9.6k

点赞数 4

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/w710962610/article/details/80696531

java 专栏收录该内容

1 篇文章

订阅专栏

本博客介绍了一个基于SpringBoot框架结合Thymeleaf模板引擎、LayUI及JQuery前端框架的项目实践，重点讲解了项目配置、DAO层实现及控制器层的基本操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新手小白上路，做一次博客记录下开发遇见的问题。

我们选用的框架是springboot，

模板选用是thymeleaf（spring boot默认不支持jsp，当然也可以通过配置来使用，但是官方推荐用thymeleaf模板，就选择了这个。），

前端框架使用了layui和jquery，

数据库选用的是mysql。

整体目录结构。

配置

spring.datasource.driver-class-name = com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/test1?useUnicode=true&characterEncoding=utf-8
spring.datasource.username=root
spring.datasource.password=
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource  
# \u521D\u59CB\u5316\u5927\u5C0F\uFF0C\u6700\u5C0F\uFF0C\u6700\u5927
spring.datasource.initialSize=5    
spring.datasource.minIdle=5    
spring.datasource.maxActive=20    
# \u914D\u7F6E\u83B7\u53D6\u8FDE\u63A5\u7B49\u5F85\u8D85\u65F6\u7684\u65F6\u95F4
spring.datasource.maxWait=60000
mybatis.mapper-locations=classpath*:mapper/*Mapper.xml  
mybatis.type-aliases-package=com.example.demo.entity 

server.port=8080
spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.check-template-location=true
spring.thymeleaf.suffix=.html
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.servlet.content-type=text/html
spring.thymeleaf.mode=HTML5
spring.mvc.static-path-pattern=/static/**

以上是application配置。

重点是spring.mvc.static-path-pattern=/static/**这句不配置的话加载不到静态资源。

对，我们用到了通用mapper，这里有个要记录的点。

@MapperScan(basePackages = "com.example.demo.dao")
@SpringBootApplication
public class DemoApplication {
	@Autowired
	public static void main(String[] args) {
		SpringApplication.run(DemoApplication.class, args);
	}
}

在启动springboot的文件中要加上注解@MapperScan(basePackages = "com.example.demo.dao")以及对应的dao层的包。

还有一点是扫描dao层接口时，dao层接口不能直接继承mapper，这样会报错的。

baseDao:

public interface BaseMapper <T>extends
        tk.mybatis.mapper.common.BaseMapper<T>,
        SelectByExampleMapper<T>,
        DeleteByExampleMapper<T>,
        SelectCountByExampleMapper<T>,
        UpdateByExampleSelectiveMapper<T>,
        UpdateByExampleMapper<T> {
}

然后你要使用的UserDao进行继承，这样就可以通过扫描。

@Controller
@RequestMapping(value = "/user")
public class DemoController {
    @Autowired
    private UserService userService;
    private static final Logger LOGGER = LoggerFactory.getLogger(DemoController.class);
    @RequestMapping(value = "/hello")
    public String firstController(){
        return "login";
    }
    @RequestMapping(value = "/login")
    public String login(String account, String password, HttpServletRequest request){
        if(account != null && password != null){
           User user =  userService.getUser(account,password);
           request.setAttribute("result",new ResultModle("200","success!",user));
            return "user/user";
        }
        request.setAttribute("result",new ResultModle("404","fail!"));
        return "login";
    }
    @RequestMapping(value = "/returnReg")
    public String returnReg(){
        return "reg";
    }
    @RequestMapping(value = "/checkAccount.action")
    @ResponseBody
    public ResultModle checkAccount(String account){
        System.out.println(account+"sdfhjkasdhjkfdshjkfhjkasfhjkdsadhjkfhjk lsdfhjklsadhjklfkhjsdafweyuiorfgyudvbvh djkhgtfuic vbhnjkds");
        if(userService.checkAccount(account) == 0) {
            return new ResultModle("200", "SUCCESS");
    }
        return new ResultModle("404", "Fail");
    }
}

Cotroller层代码。这里没有什么需要注意的。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{../static/layui/css/layui.css}"/>
    <style>
        .window{
            width: 400px;
            position: absolute;
            margin-left: -200px;
            margin-top: -80px;
            top: 50%;
            left: 50%;
            display: block;
            z-index: 2000;
            background: #fff;
            padding: 20 0;
        }
    </style>
</head>
<body style="background: #f1f1f1;">
<div class="window">
    <form  class="layui-form" method="post" action="/user/login">
        <div class="layui-form-item" style="margin-right: 100px;margin-top: 20px;">
            <label class="layui-form-label">用户名：</label>
            <div class="layui-input-block">
                <input type="text" name="account" required  lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" >
            <label class="layui-form-label">密    码：</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <input type="checkbox" name="" title="写作" lay-skin="primary" checked>
            <div style="margin-left: 50px;margin-bottom: 10px;" class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>保持登录7天</span><i class="layui-icon"></i></div>
            <div style="text-align: center;">
                <input type="submit" class="layui-btn"  value="登      录"/>
                <a href="/user/returnReg" class="layui-btn">注      册</a>
            </div>
        </div>
    </form>
</div>
</body>
</html>

登录页面代码，这里还没有全部写好。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{../static/layui/css/layui.css}"/>
    <script type="text/javascript" src="/static/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#account").blur(function(){
                $.ajax({
                    url:'/user/checkAccount.action',
                    type:'post',
                    data:{
                        account:$("#account").val()
                    },
                    success:function (data) {
                        if(data.code == 200){
                            alert("账号可以使用");
                            $("#account").css("background-color","#00FF00");
                        }else if(data.code == 404){
                            alert("账号已被注册");
                            $("#account").css("background-color","#FF0000");
                        }
                    }
                })
            });
        });
    </script>
    <style>
        .window{
            width: 400px;
            position: absolute;
            margin-left: -200px;
            margin-top: -80px;
            top: 50%;
            left: 50%;
            display: block;
            z-index: 2000;
            background: #fff;
            padding: 20 0;
        }
    </style>
</head>
<body style="background: #f1f1f1;">
<div class="window">
    <form  class="layui-form" method="post" action="/user/login">
        <div class="layui-form-item" style="margin-right: 100px;margin-top: 20px;">
            <label class="layui-form-label">用户名：</label>
            <div class="layui-input-block">
                <input type="text" name="account" required  lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input" id="account">
            </div>
        </div>
        <div class="layui-form-item" >
            <label class="layui-form-label">密    码：</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" id="password">
            </div>
        </div>
        <div class="layui-form-item" >
            <label class="layui-form-label">再   次   输   入   密   码：</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" id="spassword">
            </div>
        </div>
        <div class="layui-form-item">
            <input type="checkbox" name="" title="写作" lay-skin="primary" checked>
            <div style="margin-left: 50px;margin-bottom: 10px;" class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>保持登录7天</span><i class="layui-icon"></i></div>
            <div style="text-align: center;">
                <input type="submit" class="layui-btn"  value="注      测"/>
            </div>
        </div>
    </form>


</div>

</body>
</html>

注册代码。这里有些需要注意的，再写这一块时，我发现两个问题：

1.写的js代码不放到头标签中不能使用，加载不出来。

2.写ajax时，url指定时直接写url:/user/**时模板会找到templates目录下，不能直接找到接口。要在接口后的路径以及url的路径后加上.action才行。

那位大佬看到了帮我解释一下为什么？不胜感激。