2022-01-25 Springmvc+JSTL+JQuery基于拦截器的Login实例

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>&nbsp;</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>&nbsp;</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>&nbsp;</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

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容