写一个前后端登陆注册功能基于layui和ssm

好的，我将为您提供一个基于layui和ssm的前后端登录注册功能示例。

1. 后端实现

我们使用SSM框架搭建后端，具体步骤如下：

（1）创建一个Maven项目，添加以下依赖：

<dependencies>
    <!-- Spring -->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-context</artifactId>
        <version>5.2.9.RELEASE</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>5.2.9.RELEASE</version>
    </dependency>

    <!-- MyBatis -->
    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis</artifactId>
        <version>3.5.6</version>
    </dependency>
    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis-spring</artifactId>
        <version>2.0.6</version>
    </dependency>

    <!-- 数据库相关依赖 -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>8.0.21</version>
    </dependency>

    <!-- Servlet API -->
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>javax.servlet-api</artifactId>
        <version>4.0.1</version>
        <scope>provided</scope>
    </dependency>

    <!-- JSON -->
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>fastjson</artifactId>
        <version>1.2.73</version>
    </dependency>
</dependencies>

（2）创建数据库

我们需要在MySQL中创建一个名为`user`的数据库，并在其中创建一个名为`user_info`的表，其DDL语句如下：

CREATE DATABASE user;

USE user;

CREATE TABLE user_info (
  id INT(11) NOT NULL AUTO_INCREMENT,
  username VARCHAR(50) NOT NULL,
  password VARCHAR(50) NOT NULL,
  PRIMARY KEY (id)
) ENGINE=INNODB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4;

（3）创建实体类

我们创建一个名为`User`的实体类，用于存储用户信息：

public class User {
    private Integer id;
    private String username;
    private String password;

    // getter 和 setter 方法省略
}

（4）创建DAO层

我们创建一个名为`UserDAO`的接口，用于定义用户信息的增删改查操作：

public interface UserDAO {
    int insert(User user);
    int deleteById(Integer id);
    int update(User user);
    User selectById(Integer id);
    User selectByUsername(String username);
}

然后我们创建一个名为`UserDAOImpl`的实现类，用于具体实现接口中的方法：

@Repository
public class UserDAOImpl implements UserDAO {
    @Autowired
    private SqlSessionFactory sqlSessionFactory;

    @Override
    public int insert(User user) {
        try (SqlSession session = sqlSessionFactory.openSession(true)) {
            return session.insert("UserMapper.insert", user);
        }
    }

    @Override
    public int deleteById(Integer id) {
        try (SqlSession session = sqlSessionFactory.openSession(true)) {
            return session.delete("UserMapper.deleteById", id);
        }
    }

    @Override
    public int update(User user) {
        try (SqlSession session = sqlSessionFactory.openSession(true)) {
            return session.update("UserMapper.update", user);
        }
    }

    @Override
    public User selectById(Integer id) {
        try (SqlSession session = sqlSessionFactory.openSession()) {
            return session.selectOne("UserMapper.selectById", id);
        }
    }

    @Override
    public User selectByUsername(String username) {
        try (SqlSession session = sqlSessionFactory.openSession()) {
            return session.selectOne("UserMapper.selectByUsername", username);
        }
    }
}

这里我们使用了MyBatis的注解方式进行SQL映射。

（5）创建Service层

我们创建一个名为`UserService`的接口，用于定义用户信息的业务逻辑操作：

public interface UserService {
    boolean register(User user);
    User login(String username, String password);
}

然后我们创建一个名为`UserServiceImpl`的实现类，用于具体实现接口中的方法：

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserDAO userDAO;

    @Override
    public boolean register(User user) {
        User userInDB = userDAO.selectByUsername(user.getUsername());
        if (userInDB != null) {
            return false;
        }
        return userDAO.insert(user) > 0;
    }

    @Override
    public User login(String username, String password) {
        User userInDB = userDAO.selectByUsername(username);
        if (userInDB == null || !userInDB.getPassword().equals(password)) {
            return null;
        }
        return userInDB;
    }
}

（6）创建Controller层

我们创建一个名为`UserController`的控制器，用于处理前端请求：

@RestController
public class UserController {
    @Autowired
    private UserService userService;

    @PostMapping("/register")
    public String register(User user) {
        boolean isSuccess = userService.register(user);
        if (isSuccess) {
            return "success";
        } else {
            return "fail";
        }
    }

    @PostMapping("/login")
    public String login(String username, String password) {
        User userInDB = userService.login(username, password);
        if (userInDB != null) {
            return JSON.toJSONString(userInDB);
        } else {
            return "fail";
        }
    }
}

这里我们使用了`@RestController`注解，表示该类会将方法返回的数据直接返回给前端，而不是跳转到一个页面。

2. 前端实现

我们使用layui框架搭建前端，具体步骤如下：

（1）引入layui的CSS和JS文件

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.min.css">
    <script src="https://cdn.staticfile.org/layui/2.5.7/layui.min.js"></script>
</head>

<body>
    <!-- 界面设计省略 -->
</body>

</html>

（2）编写界面设计

我们在页面中添加两个表单，用于输入用户名和密码，并添加两个按钮，一个用于注册，一个用于登录：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.min.css">
    <script src="https://cdn.staticfile.org/layui/2.5.7/layui.min.js"></script>
</head>

<body>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md-offset3 layui-col-md6">
                <form class="layui-form" action="">
                    <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 class="layui-btn" lay-submit lay-filter="login">登录</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>

</html>

（3）添加JavaScript代码

我们添加以下JavaScript代码，用于与后端进行交互：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.min.css">
    <script src="https://cdn.staticfile.org/layui/2.5.7/layui.min.js"></script>
</head>

<body>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md-offset3 layui-col-md6">
                <form class="layui-form" action="">
                    <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 class="layui-btn" lay-submit lay-filter="login">登录</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

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

            // 注册事件
            form.on('submit(register)', function (data) {
                var username = data.field.username;
                var password = data.field.password;
                $.post('/register', {
                    username: username,
                    password: password
                }, function (res) {
                    if (res === 'success') {
                        layer.msg('注册成功');
                    } else {
                        layer.msg('注册失败');
                    }
                });
                return false;
            });

            // 登录事件
            form.on('submit(login)', function (data) {
                var username = data.field.username;
                var password = data.field.password;
                $.post('/login', {
                    username: username,
                    password: password
                }, function (res) {
                    if (res === 'fail') {
                        layer.msg('登录失败');
                    } else {
                        var user = JSON.parse(res);
                        layer.msg('登录成功，欢迎您，' + user.username);
                    }
                });
                return false;
            });
        });
    </script>
</body>

</html>

这里我们使用了JQuery的`$.post`方法向后端发送请求，并根据返回值进行相应的操作。

至此，一个基于layui和ssm的前后端登录注册功能就完成了。