SpringBoot+SpringMVC实现简单的登录注册功能

目录

一：后端实现

后台代码

项目结构

 配置文件

前端代码

小结

---

本项目采用SpringBoot快速搭建后台 html前端页面快速写出页面帮助新手快速体验

使用的技术有sprintboot ,lombok,mybatis 等快速构建一个Web项目难点在于前端页面的编写

一：后端实现

SpringBoot项目搭建

后台代码

项目结构

 

 配置文件

server:
  port: 8081 # 端口
  servlet:
    context-path: /loginDemo #访问根路径
mybatis:
  mapper-locations: classpath:com.zly.Dao/*.xml # 映射文件路径
  type-aliases-package: com.zly.entity # 别名扫描
spring:
  mvc:
    view:
      prefix: /
      suffix: .html
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver # mysql 驱动
    url: jdbc:mysql://localhost:3306/login?useSSL=false # 连接
    username: #用户
    password: #密码

 主要后端代码

controller

@Controller
public class LoginController {
    @Autowired
    private UserService userService;
    @RequestMapping("/")
    public String home(HttpSession httpSession){
        Object token = httpSession.getAttribute("token");
        if (token==null){
            return "login";
        }
        if (token.equals("loginSuccess")){
            return "index";
        }else {
            return "login";
        }
    }
    @RequestMapping("/login")
    public String login(HttpServletRequest httpServletRequest,HttpSession httpSession) throws InterruptedException {
        String username = httpServletRequest.getParameter("username");
        String password = httpServletRequest.getParameter("password");
        if (username==null||password==null){
            return "login";
        }else {
            User user = userService.findByUsername(username);
            if (user.getPassword().equals(password)){
                //验证密码成功
                httpSession.setAttribute("token","loginSuccess");
                Thread.sleep(1000);
                return "index";
            }else {
                return "/";
            }
        }
    }
    @PostMapping("/addUser")
    public String addUser(HttpServletRequest httpServletRequest) {
        String username = httpServletRequest.getParameter("username");
        String password = httpServletRequest.getParameter("password");
        User user = new User();
        user.setUsername(username);
        user.setPassword(password);
        userService.addUser(user);
        return "redirect:/login";
    }
}

 dao

@Mapper
public interface UserDao {
    // 根据用户名查找用户
    @Select("select * from user where username = #{username}")
    User findByUsername(String username);
    // 添加用户
    @Insert("insert into user(username,password) values(#{username},#{password})")
    void addUser(User user);
}

 service

public interface UserService {
    /** 
     * 根据用户名查找用户
     * @param username 用户名
     * @return 用户
     */
    User findByUsername(String username);

    /**
     * 添加用户
     * @param user 用户
     */
    void addUser(User user);
}

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserDao userDao;
    @Override
    public User findByUsername(String username) {
        return userDao.findByUsername(username);
    }
    @Override
    public void addUser(User user) {
        userDao.addUser(user);
    }
}

 

前端代码

包括一些图标文件

以及css样式

    
    
    
    





    
    

        

            
sign up
            
            

                
                
                
            
            
            
            
            sign up
        
    

    
    

        

            
sign in
            
            

                
                
                
            
            
            
            forget your password
            sign up
        
    

    
    

        


            
            

                
welcome back!
                

                    To keep connected with us please login with your personal info
                
                sign in
            

            
            

                
Hello Friend!
                

                    Enter your personal details and start journey with us
                
                sign up
            
        
    

 页面效果

主要是通过css来实现页面的控制

 

小结

这个项目让大家快速了解登录页，很快写出一个可以使用且好看的登录页面

github连接GitHub - Zhongliuyang/login-demo: 一个简单好看的登录代码