springboot+html实现简单注册登录

目录

前端：

register.html

login.html

success.html

style.css 

 后端：

com.example.entity.User

数据库建表（user)

​编辑 com.example.mapper.UserMapper

 com.example.controller.UserController

注册逻辑：

登录逻辑：

application.properities

pom.xml 

调试：

注册：

登录：

前端：

register.html

    
    register
    


    
        注册
    
    
        
            
            
用户名
            
            
密码
            
            
已注册，去登录
        
    

login.html

    
    login
    
    


    
        登录
    
    
        
            
            
账号
            
            
密码
            
            
没有账号，去注册
        
    

success.html

    
    Title


登录成功

style.css 

*{
    margin: 0;
    padding: 0;
}
body{
    background: #f3f3f3;
}
.control{
    width: 340px;
    background: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 5px;
}
.item{
    width: 340px;
    height: 60px;
    background: #eeeeee;
}
.item div{
    width: 340px;
    height: 60px;
    display: inline-block;
    color: black;
    font-size: 18px;
    text-align: center;
    line-height: 60px;
    cursor: pointer;
}
.content{
    width: 100%;
}
.content div{
    margin: 20px 30px;
    display: none;
    text-align: left;
}
p{
    color: #4a4a4a;
    margin-top: 30px;
    margin-bottom: 6px;
    font-size: 15px;
}
.content input[type="text"], .content input[type="password"]{
    width: 100%;
    height: 40px;
    border-radius: 3px;
    border: 1px solid #adadad;
    padding: 0 10px;
    box-sizing: border-box;
}
.content input[type="submit"]{
    margin-top: 40px;
    width: 100%;
    height: 40px;
    border-radius: 5px;
    color: white;
    border: 1px solid #adadad;
    background: cyan;
    cursor: pointer;
    letter-spacing: 4px;
    margin-bottom: 40px;
}
.active{
    background: white;
}
.item div:hover{
    background: #f6f6f6;
}

 后端：

com.example.entity.User

@Data
@Accessors(chain = true)
@EqualsAndHashCode(callSuper = false)
@Table( "user")
public class User {
    private String username;
    private String password;
}

数据库建表（user)

 com.example.mapper.UserMapper

@Mapper
public interface UserMapper extends BaseMapper {
    @Select(value = "select u.username,u.password from user u where u.username=#{username}")
    User findUserByName(@Param("username") String username);
}

 com.example.controller.UserController

@Controller
@RequestMapping("user")
public class UserController {
    @Autowired
    private UserMapper userMapper;
    @RequestMapping("/register")
    public String register(User user, Model m) {
        if (user.getUsername()!=null&&userMapper.findUserByName(user.getUsername()) == null) {
            //判断用户是否已经存在
           if (!user.getUsername().isEmpty()) {
                //注册的时候，用户名不能为空
                if (!user.getPassword().isEmpty()) {
                    //注册 的时候,密码不能为空*/
                    userMapper.insert(user);
                    return "html/login";
                } else {
                    m.addAttribute("msg", "用户名已经存在！");
                    return "html/register";
                }
            } else {
                m.addAttribute("msg", "用户名不能为空！");
                return "html/register";
            }
        } else {
            m.addAttribute("msg", "密码不能为空！");
            return "html/register";
        }
    }
    @RequestMapping("/login" )
    public String login(  User user, Model m){
        User exitUser=userMapper.findUserByName(user.getUsername());
        if(user.getUsername()==null||user.getUsername().isEmpty()){
            m.addAttribute("msg","用户名不能为空");
            return "html/login";
        }
        if(user.getPassword()==null||user.getPassword().isEmpty()){
            m.addAttribute("msg","密码不能为空");
            return "html/login";
        }
        if(exitUser==null){
            m.addAttribute("msg","该用户未注册");
            return "html/login";
        }
        if(!user.getPassword().equals(exitUser.getPassword())){
            m.addAttribute("msg","用户输入的密码有误");
            return "html/login";
        }else{
            m.addAttribute("msg","登录成功");
            return "html/success";
    }
    }
}

注册逻辑：

1.判断要创建的用户在数据库是否存在，如果不存在就注册

2.注册的时候用户名不能为空

3.注册的时候密码不能为空

登录逻辑：

1.判断要登录的用户在数据库是否存在，如果存在就登录

2.登录的时候，输入的密码要与数据库里对应的用户的密码保持一致

3.登录的时候，输入用户名与密码不能为空

application.properities

spring.datasource.url=jdbc:mysql://localhost:3306/springboot?serverTimezone=GMT
spring.datasource.username=root
spring.datasource.password=1234

pom.xml 

    4.0.0
    
       org.springframework.boot
       spring-boot-starter-parent
       2.5.0
        
    
    com.example
    register-login
    0.0.1-SNAPSHOT
    register-login
    register-login
    
       1.8
    
    
       
          org.springframework.boot
          spring-boot-starter-web
       
       
          com.mysql
          mysql-connector-j
          8.0.33
          runtime
       
       
          org.projectlombok
          lombok
          true
       
       
          com.mybatis-flex
          mybatis-flex-spring-boot-starter
          1.6.4
       
       
          org.springframework.boot
          spring-boot-starter-test
          test
       
       
          org.springframework.boot
          spring-boot-starter-thymeleaf
       
       
          org.springframework.boot
          spring-boot-devtools
          true
       
       
       com.mybatis-flex
       mybatis-flex-spring-boot-starter
       1.6.4
       
       
          com.mybatis-flex
          mybatis-flex-spring-boot-starter
          1.6.4
       
       
          org.springframework.boot
          spring-boot-starter-data-jpa
       
    
    
       
          
             org.springframework.boot
             spring-boot-maven-plugin
             
                true
                
                   
                      org.projectlombok
                      lombok
                   
                
             
          
       
    

调试：

注册：

如果注册的用户在数据库中不存在，且注册的时候，用户名与密码都不为空，则跳转到

登录界面，反之，任意一个条件都不满足的话就不会跳转到登录界面

登录：

如果登录的用户在数据库中存在，且登录的时候，用户名不为空，密码不为，则跳转到

成功界面（success.html),反之，任意一个条件都不满足的话就不会跳转到成功界面。