Spring MVC 是 Spring 提供的一个基于 MVC 设计模式的轻量级 Web 开发框架。
JSTL(Java server pages standarded tag library,即JSP标准标签库)是由JCP(Java community Proces)所制定的标准规范,它主要提供给Java Web开发人员一个标准通用的标签库。
Springmvc: https://docs.spring.io/spring-framework/docs/current/reference/html/web.html
JSTL: https://tomcat.apache.org/taglibs/standard/
1. 开发环境
系统:Windows 10 Home
开发工具:IntelliJ IDEA 2020.1.4 (Community Edition)
Java, Maven 和 IDEA 的安装配置过程,见IDEA创建Maven Quickstart项目
2. 在 IDEA上创建项目
Name: SpringmvcLogin
GroupId: com.example
ArtifactId: SpringmvcLogin
项目目录结构、如何添加 tomcat7-maven-plugin,参考 IDEA创建Maven Webapp项目
3. 导入 spring-webmvc, servlet, jstl
访问 http://www.mvnrepository.com/,查询 ...
修改 pom.xml
<project ... >
...
<dependencies>
...
<!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.1</version>
<scope>provided</scope>
</dependency>
<!-- https://mvnrepository.com/artifact/javax.servlet/jstl -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<!-- https://mvnrepository.com/artifact/taglibs/standard -->
<dependency>
<groupId>taglibs</groupId>
<artifactId>standard</artifactId>
<version>1.1.2</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.springframework/spring-web -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>4.3.9.RELEASE</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>4.3.9.RELEASE</version>
</dependency>
...
</dependencies>
...
</project>
在IDE中项目列表 -> 点击鼠标右键 -> Maven -> Reload Project
4. 支持 SpringMVC
1) 修改 src/main/webapp/WEB-INF/web.xml
<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app>
...
<!-- Spring mvc 适配器 -->
<servlet>
<servlet-name>springMVC</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:springmvc-beans.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>springMVC</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
...
</web-app>
2) 添加 src/main/resources/springmvc-beans.xml (中间目录如果不存在,新建目录,下同)
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd"
default-init-method="init"
default-destroy-method="destroy">
<!-- Scan package -->
<context:component-scan base-package="com.example"/>
<mvc:annotation-driven />
<!-- MVC viewResolver -->
<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/jsp/"/>
<property name="suffix" value=".jsp"/>
</bean>
</beans>
5. 支持静态资源 (html/js/css/images)
1) 修改 src/main/resources/springmvc-beans.xml
<beans ...>
...
<!-- html,css,js,images -->
<mvc:resources location="/static/" mapping="/static/**" />
...
</beans>
新建目录 src/main/webapp/static
2) 添加 jQuery
从 https://jquery.com/ 下载 JQuery 包,添加到:
src/main/webapp/static/js/jquery-1.12.2.min.js
* jQuery版本根据项目需要,这里用1.12.2, CSS和图片也是放到static目录下
3) 添加 src/main/webapp/static/test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Static HTML</title>
<script language="javascript" src="js/jquery-1.12.2.min.js"></script>
</head>
<body>
<h3>Static HTML Page</h3>
<p> </p>
<p id="message"></p>
<script type="text/javascript">
$(document).ready(function() {
console.log("Static HTML Page");
$("#message").html("JQuery is ready");
});
</script>
</body>
</html>
http://localhost:9090/static/test.html
6. 添加 Login 拦截器
1)添加 src/main/java/com/example/interceptor/LoginInterceptor.java
package com.example.interceptor;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;
public class LoginInterceptor implements HandlerInterceptor {
@Override
public boolean preHandle(HttpServletRequest request,
HttpServletResponse response, Object handler) throws Exception {
// Session
if (request.getSession().getAttribute("logged_user") != null)
return true;
// 请求转发
//request.getRequestDispatcher(request.getContextPath() + "/login").forward(request, response);
// 重定向
response.sendRedirect(request.getContextPath() + "/login");
return false;
}
@Override
public void postHandle(HttpServletRequest request, HttpServletResponse response,
Object handler, ModelAndView modelAndView) throws Exception {
// TODO Auto-generated method stub
}
@Override
public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception exception) throws Exception {
// TODO Auto-generated method stub
}
}
2) 修改 src/main/resources/springmvc-beans.xml
<beans ...>
...
<!-- Interceptors -->
<mvc:interceptors>
<mvc:interceptor>
<mvc:mapping path="/**" />
<mvc:exclude-mapping path="/static/**" />
<mvc:exclude-mapping path="/login" />
<mvc:exclude-mapping path="/login/post" />
<mvc:exclude-mapping path="/logout" />
<bean class="com.example.interceptor.LoginInterceptor" />
</mvc:interceptor>
</mvc:interceptors>
...
</beans>
7. 视图和控制器
1) 添加 src/main/webapp/WEB-INF/jsp/home.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Home</title>
<script language="javascript" src="${pageContext.request.contextPath}/static/js/jquery-1.12.2.min.js"></script>
</head>
<body>
<h3>Home Page</h3>
<c:if test="${not empty sessionScope.logged_user}">
<p style="width: 100%; text-align: right;">Welcome ${sessionScope.logged_user}, <a href="${pageContext.request.contextPath}/logout">Logout</a></p>
</c:if>
<p> </p>
<c:if test="${not empty message}">
<p style="color: blue;">${message}</p>
</c:if>
<script type="text/javascript">
$(document).ready(function() {
console.log("Home Page");
});
</script>
</body>
</html>
2) 添加 src/main/webapp/WEB-INF/jsp/login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login</title>
<script language="javascript" src="${pageContext.request.contextPath}/static/js/jquery-1.12.2.min.js"></script>
</head>
<body>
<h3>Login Page</h3>
<p> </p>
<c:if test="${not empty message}">
<p style="color: red;">${message}</p>
</c:if>
<form id="loginForm" method="post" action="${pageContext.request.contextPath}/login/post">
<p>Username: <input type="text" id="username" name="username" value="" /></p>
<p>Password: <input type="password" id="password" name="password" value="" /></p>
<p><input type="button" value="Login" onClick="javascript: login()" /></p>
</form>
<script type="text/javascript">
$(document).ready(function() {
console.log("Login Page");
});
function login() {
var username = $("#username").val();
if (username == '') {
alert("Please enter username");
$("#username").focus();
return;
}
var password = $("#password").val();
if (password == '') {
alert("Please enter password");
$("#password").focus();
return;
}
$("#loginForm").submit();
}
</script>
</body>
</html>
3) 添加 src/main/java/com/example/controller/IndexController.java
package com.example.controller;
import javax.servlet.http.HttpSession;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.ui.ModelMap;
@Controller
@RequestMapping("/")
public class IndexController {
@RequestMapping(method = RequestMethod.GET)
public String home(ModelMap modelMap) {
modelMap.addAttribute("message", "Springmvc Login Demo");
return "home";
}
@RequestMapping(value="/login", method = RequestMethod.GET)
public String login() {
return "login";
}
@RequestMapping(value="/login/post", method = RequestMethod.POST)
public String loginPost(String username, String password, HttpSession session, ModelMap modelMap) {
if ("admin".equals(username) && "123456".equals(password)) {
session.setAttribute("logged_user", username);
return "redirect:/";
}
modelMap.addAttribute("message", "Invalid username or password");
return "login";
}
@RequestMapping(value = "/logout", method = RequestMethod.GET)
public String logout(HttpSession session) {
session.invalidate();
return "redirect:/login";
}
}
8. 运行
跳转到第 2 步,在IDEA里用 tomcat7-maven-plugin 运行 (参考 IDEA创建Maven Webapp项) 。
Tomcat 环境下,注解里的 “/” 和 src/main/webapp/index.jsp 会有冲突,可以删除 index.jsp, 或在 WEB-INF/web.xml 添加:
<welcome-file-list>
<welcome-file>springMVC</welcome-file>
</welcome-file-list>
访问 http://localhost:9090 会自动跳转到 http://localhost:9090/login
Username: admin
Password: 123456