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

ZLY_2004

已于 2023-07-01 11:22:58 修改

阅读量978

点赞数 2

分类专栏： java 文章标签： spring boot java

于 2023-03-28 20:33:01 首次发布

本文链接：https://blog.csdn.net/ZLY_2004/article/details/129821954

版权

java 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本项目采用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样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="stylesheet" href="./css/login.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>

<!-- 创建封装容器 -->
<div class="container" id="container">
    <!-- 注册页面 -->
    <div class="form-container  sign-up-container">
        <form action="/loginDemo/addUser" method="post">
            <h1>sign up</h1>
            <!-- 公共组件 -->
            <div class="social-container">
                <a href="#"><i class="fa fa-qq"></i></a>
                <a href="#"><i class="fa fa-weixin"></i></a>
                <a href="#"><i class="fa fa-weibo"></i></a>
            </div>
            <input type="text" name="username" id="userName" placeholder="username...">
            <input type="email" name="email" id="email" placeholder="Email...">
            <input type="password" name="password" id="password" placeholder="Password...">
            <button>sign up</button>
        </form>
    </div>

    <!-- 登录页面 -->
    <div class="form-container sign-in-container">
        <form action="/loginDemo/login" method="get">
            <h1>sign in</h1>
            <!-- 公共组件 -->
            <div class="social-container">
                <a href="#"><i class="fa fa-qq"></i></a>
                <a href="#"><i class="fa fa-weixin"></i></a>
                <a href="#"><i class="fa fa-weibo"></i></a>
            </div>
            <input type="text" name="username" id="username" placeholder="Email..." >
            <input type="password" name="password" id="password" placeholder="Password...">
            <a href="#" class="forget">forget your password</a>
            <button>sign up</button>
        </form>
    </div>

    <!-- 覆盖容器 -->
    <div class="overlay-container">
        <div class="overlay">

            <!-- 覆盖左边 -->
            <div class="overlay-penal overlay-left-container">
                <h1>welcome back!</h1>
                <p>
                    To keep connected with us please login with your personal info
                </p>
                <button class="ghost" id="signIn">sign in</button>
            </div>

            <!-- 覆盖右边 -->
            <div class="overlay-penal overlay-right-container">
                <h1>Hello Friend!</h1>
                <p>
                    Enter your personal details and start journey with us
                </p>
                <button class="ghost" id="signUp">sign up</button>
            </div>
        </div>
    </div>
</div>
<script src="./js/login.js"></script>
</body>
</html>