Spring MVC + JSP 實作簡易登入頁面完整教學

專案結構概覽

src/
 ├─ main/
 │   ├─ java/com/example/
 │   │   ├─ controller/LoginController.java
 │   │   ├─ service/UserService.java
 │   │   ├─ dao/UserDao.java
 │   │   └─ entity/User.java
 │   ├─ resources/
 │   │   ├─ application.properties
 │   │   └─ mybatis/mapper/UserMapper.xml
 │   └─ webapp/
 │       ├─ WEB-INF/views/login.jsp
 │       └─ static/css/style.css
 └─ test/

1. 實體類

@Data
public class User {
    private Long id;
    private String username;
    private String password; // 實務上應存雜湊值
    private String email;
}

2. DAO / Mapper (MyBatis 範例)

@Mapper
public interface UserDao {
    @Select("SELECT * FROM users WHERE username=#{username} AND password=#{password}")
    User findByUsernameAndPassword(@Param("username") String u, @Param("password") String p);
}

3. Service 層

@Service
public class UserService {
    @Autowired UserDao userDao;
    public User login(String username, String password) {
        return userDao.findByUsernameAndPassword(username, password);
    }
}

4. Controller

@Controller
@RequestMapping("/auth")
public class LoginController {
    @Autowired UserService userService;

    @GetMapping("/login")
    public String showLogin() { return "login"; } // 對應 login.jsp

    @PostMapping("/login")
    public String doLogin(@RequestParam String username,
                          @RequestParam String password,
                          HttpSession session,
                          Model model) {
        User user = userService.login(username, password);
        if (user != null) {
            session.setAttribute("loginUser", user);
            return "redirect:/dashboard"; // 登入成功導向
        }
        model.addAttribute("error", "帳號或密碼錯誤");
        return "login"; // 回登入頁顯示錯誤
    }

    @GetMapping("/logout")
    public String logout(HttpSession session) {
        session.invalidate();
        return "redirect:/auth/login";
    }
}

5. JSP 登入頁 (login.jsp)

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="form" uri="https://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html>
<head>
    <title>登入系統</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/style.css">
</head>
<body>
<div class="login-container">
    <h2>會員登入</h2>
    <c:if test="${not empty error}">
        <div class="alert alert-danger">${error}</div>
    </c:if>
    <form:form action="${pageContext.request.contextPath}/auth/login" method="POST" modelAttribute="user">
        <div class="form-group">
            <label>帳號</label>
            <form:input path="username" cssClass="form-control" placeholder="請輸入帳號"/>
        </div>
        <div class="form-group">
            <label>密碼</label>
            <form:password path="password" cssClass="form-control" placeholder="請輸入密碼"/>
        </div>
        <button type="submit" class="btn btn-primary btn-block">登入</button>
    </form:form>
</div>
</body>
</html>

6. 關鍵設定檔

application.properties

spring.datasource.url=jdbc:mysql://localhost:3306/mydb?useSSL=false&serverTimezone=Asia/Taipei
spring.datasource.username=root
spring.datasource.password=123456
spring.mvc.view.prefix=/WEB-INF/views/
spring.mvc.view.suffix=.jsp

安全性補充（生產環境必做）

• 密碼儲存使用 BCrypt：BCrypt.hashpw(raw, BCrypt.gensalt())。
• 登入成功發放 JWT 或 Session + CSRF Token。
• 啟用 HTTPS、設定 HttpOnly; Secure; SameSite=Strict Cookie 屬性。
• 限制登入失敗次數，防暴力破解。

總結

以上示範 Spring MVC + JSP + MyBatis 實作完整登入流程：Controller 接收 POST → Service 驗證 → DAO 查詢 → Session 存用戶 → 重導向。新手可先跑通此流程，再逐步加入加密、Token、攔截器等企業級功能。