springboot+mybatis-plus+layui+ajax实现登录按钮与注册按钮

实现步骤如下：

1.在pom.xml文件中添加依赖：

<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.4.3</version>
</dependency>
<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-generator</artifactId>
    <version>3.4.3</version>
</dependency>

2.在application.properties或application.yml文件中配置数据源、mybatis-plus以及Lombok。

spring.datasource.username=xxx
spring.datasource.password=xxx
spring.datasource.url=jdbc:mysql://xxx:3306/xxx?useUnicode=true&characterEncoding=utf8
spring.datasource.driver-class-name=com.mysql.jdbc.Driver

mybatis-plus.mapper-locations=classpath:mapper/*Mapper.xml
mybatis-plus.global-config.id-type=auto
mybatis-plus.global-config.db-config.logic-delete-value=1
mybatis-plus.global-config.db-config.logic-not-delete-value=0

# 使用Lombok
spring.devtools.restart.enabled=true
spring.devtools.restart.exclude=target/**,classpath:/META-INF/maven/**,classpath:/META-INF/resources/**,classpath:/resources/**,classpath:/static/**,classpath:/public/**
spring.freemarker.suffix=.html
spring.freemarker.template-loader-path=classpath:/templates/

3.创建对应的数据库表、实体类以及Mapper接口。例如：

CREATE TABLE `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(20) NOT NULL,
  `password` varchar(20) NOT NULL,
  PRIMARY KEY (`id`)
)

public class User {
    private int id;
    private String username;
    private String password;
    // 省略 getter 和 setter
}

public interface UserMapper extends BaseMapper<User> {
}

4.创建登录按钮和注册按钮的HTML页面，使用Layui进行美化，并使用Ajax技术实现后台数据交互。例如：

<!-- 登录 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>登录</legend>
</fieldset>
<div class="layui-form-item">
  <label class="layui-form-label">用户名</label>
  <div class="layui-input-block">
    <input type="text" name="username" 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-block">
    <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="login">立即登录</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>

<!-- 注册 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>注册</legend>
</fieldset>
<div class="layui-form-item">
  <label class="layui-form-label">用户名</label>
  <div class="layui-input-block">
    <input type="text" name="username" 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-block">
    <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="register">立即注册</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>

<script>
  layui.use('form', function() {
    var form = layui.form;

    // 监听登录按钮
    form.on('submit(login)', function(data) {
      $.ajax({
        type: "POST",
        url: "/login",
        data: data.field,
        dataType: "json",
        success: function(result) {
            if (result.code == 200) {
              layer.msg("登录成功");
            } else {
              layer.msg("登录失败");
            }
          },
          error: function() {
            layer.msg("登录异常");
          }
      });
      return false;
    });

    // 监听注册按钮
    form.on('submit(register)', function(data) {
      $.ajax({
        type: "POST",
        url: "/register",
        data: data.field,
        dataType: "json",
        success: function(result) {
            if (result.code == 200) {
              layer.msg("注册成功");
            } else {
              layer.msg("注册失败");
            }
          },
          error: function() {
            layer.msg("注册异常");
          }
      });
      return false;
    });

  });
</script>

5.在Spring Boot中创建对应的Controller，并编写对应的登录和注册方法。例如：

@RestController
public class UserController {

    @Autowired
    private UserMapper userMapper;

    // 登录
    @PostMapping("/login")
    public Result login(@RequestBody User user) {
        QueryWrapper<User> wrapper = new QueryWrapper<>();
        wrapper.eq("username", user.getUsername());
        wrapper.eq("password", user.getPassword());
        User result = userMapper.selectOne(wrapper);
        if (result != null) {
            return Result.success("登录成功");
        } else {
            return Result.fail("登录失败");
        }
    }

    // 注册
    @PostMapping("/register")
    public Result register(@RequestBody User user) {
        int result = userMapper.insert(user);
        if (result == 1) {
            return Result.success("注册成功");
        } else {
            return Result.fail("注册失败");
        }
    }

}

6.启动Spring Boot应用程序，访问对应的HTML页面即可看到登录和注册按钮，并且支持后台数据交互。

注意事项：

1.使用Ajax进行数据交互时，需要添加Content-Type：application/json请求头，并且请求数据需要转换为JSON格式。
2.使用Layui进行页面美化时，在使用form表单提交数据时需要监听submit事件，并对表单数据进行验证。
3.在使用mybatis-plus时，需要在Mapper接口中继承BaseMapper接口，并且在application.properties或application.yml文件中进行相关配置。