SpringMVC学习

在学习之前

SSM: SpringMVC是我们ssm学习过程中的最后一部分, MVC三层结构

SpringMVC + Vue + SprngBoot + SpringCloud + (Linux)

重点: SpringMVC的执行流程

Spring

MVC:模型(dao, service) 视图 (jsp)控制器 (Servlet)
dao
service
servlet :转发,重定向
jsp/html

前端数据传输实体类

比如有一个实体类中具有用户名、密码、生日、爱好等多个属性

而在前端进行登录操作时仅传入了用户名与密码两个值

这个时候我们需要新建一个实体类的对象吗? 这会造成大量的浪费(其余字段都是为null值)

所以有的时候在pojo下可能还有细分

pojo:实体类中有User类, 包含所有属性

pojo下可能还有vo包,包内可能有UserVo类,仅包含用户名和密码两个属性, 用于提供给登录时使用

或者还有可能存在一些其它的分类, 如dto等, 相当于将pojo中的User拆分出当前需要使用的一部分来单独作为一个类

1、什么是MVC

  • MVC是模型(Model)、视图(View)、控制器(Controller)的简写,是一种软件设计规范。
  • 是将业务逻辑、数据、显示分离的方法来组织代码。
  • MVC主要作用是降低了视图与业务逻辑间的双向偶合
  • MVC不是一种设计模式,MVC是一种架构模式。当然不同的MVC存在差异。

**Model(模型):**数据模型,提供要展示的数据,因此包含数据和行为,可以认为是领域模型或JavaBean组件(包含数据和行为),不过现在一般都分离开来:Value Object(数据Dao) 和 服务层(行为Service)。也就是模型提供了模型数据查询和模型数据的状态更新等功能,包括数据和业务。

**View(视图):**负责进行模型的展示,一般就是我们见到的用户界面,客户想看到的东西。

**Controller(控制器):**接收用户请求,委托给模型进行处理(状态改变),处理完毕后把返回的模型数据返回给视图,由视图负责展示。 也就是说控制器做了个调度员的工作。

最典型的MVC就是JSP + servlet + javabean的模式。

在这里插入图片描述

1.1、Model1时代

  • 在web早期的开发中,通常采用的都是Model1。
  • Model1中,主要分为两层,视图层和模型层。

在这里插入图片描述

Model1优点:架构简单,比较适合小型项目开发;

Model1缺点:JSP职责不单一,职责过重,不便于维护;

1.2、Model2时代

Model2把一个项目分成三部分,包括视图、控制、模型。

在这里插入图片描述

用户发请求

  1. Servlet接收请求数据,并调用对应的业务逻辑方法
  2. 业务处理完毕,返回更新后的数据给servlet
  3. servlet转向到JSP,由JSP来渲染页面
  4. 响应给前端更新后的页面

职责分析:

Controller:控制器

  1. 取得表单数据
  2. 调用业务逻辑
  3. 转向指定的页面

Model:模型

  1. 业务逻辑
  2. 保存数据的状态

View:视图

  1. 显示页面

Model2这样不仅提高的代码的复用率与项目的扩展性,且大大降低了项目的维护成本。Model 1模式的实现比较简单,适用于快速开发小规模项目,Model1中JSP页面身兼View和Controller两种角色,将控制逻辑和表现逻辑混杂在一起,从而导致代码的重用性非常低,增加了应用的扩展性和维护的难度。Model2消除了Model1的缺点。

1.3、回顾Servlet

  1. 新建一个Maven工程当做父工程, 添加相应的依赖

    <dependencies>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>5.1.9.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.2</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
    </dependencies>
    
  2. 建立一个Moudle:springmvc-01-servlet , 添加Web app的支持!

  3. 导入servlet 和 jsp 的 jar 依赖

    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>servlet-api</artifactId>
        <version>2.5</version>
    </dependency>
    <dependency>
        <groupId>javax.servlet.jsp</groupId>
        <artifactId>jsp-api</artifactId>
        <version>2.2</version>
    </dependency>
    
  4. 编写一个Servlet类,用来处理用户的请求

    package com.hassder.servlet;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    
    public class HelloServlet extends HttpServlet {
    
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            // 1 获取前端参数
            String method = req.getParameter("method") ;
            if (method.equals("add")){
                req.getSession().setAttribute("msg" , "执行了add方法");
            }
            if (method.equals("delete")){
                req.getSession().setAttribute("msg" , "执行了delete方法");
            }
    
            // 2 获取业务层
            // 这里没有业务 不调用业务层
    
            // 3 视图转发或者重定向
            // 转发
            req.getRequestDispatcher("/WEB-INF/jsp/test.jsp").forward(req,resp);
    
    
        }
    
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            doGet(req, resp);
        }
    }
    
  5. 编写test.jsp,在WEB-INF目录下新建一个jsp的文件夹,新建test.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Title</title>
    </head>
    <body>
        ${msg}
    </body>
    </html>
    
  6. 在web.xml中注册Servlet

    <?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
             version="4.0">
        <servlet>
            <servlet-name>hello</servlet-name>
            <servlet-class>com.hassder.servlet.HelloServlet</servlet-class>
        </servlet>
        <servlet-mapping>
            <servlet-name>hello</servlet-name>
            <url-pattern>/hello</url-pattern>
        </servlet-mapping>
    
        <!--设置超时时间为15分钟-->
        <!--<session-config>
            <session-timeout>15</session-timeout>
        </session-config>-->
    
        <!--配置欢迎页(默认为index.jsp)-->
        <!--<welcome-file-list>
            <welcome-file>index.jsp</welcome-file>
        </welcome-file-list>-->
    
    </web-app>
    
  7. 配置Tomcat,并启动测试

    • localhost:8080/user?method=add
    • localhost:8080/user?method=delete

测试结果:

初始界面:

在这里插入图片描述

测试结果:

在这里插入图片描述

在这里插入图片描述

2、什么是SpringMVC

概述

Spring MVC是Spring Framework的一部分,是基于Java实现MVC的轻量级Web框架。

查看官方文档:https://docs.spring.io/spring/docs/5.2.0.RELEASE/spring-framework-reference/web.html#spring-web

我们为什么要学习SpringMVC

Spring MVC的特点:

  1. 轻量级,简单易学
  2. 高效 , 基于请求响应的MVC框架
  3. 与Spring兼容性好,无缝结合
  4. 约定优于配置
  5. 功能强大:RESTful、数据验证、格式化、本地化、主题等
  6. 简洁灵活

Spring的web框架围绕DispatcherServlet [ 调度Servlet ] 设计。

DispatcherServlet的作用是将请求分发到不同的处理器。从Spring 2.5开始,使用Java 5或者以上版本的用户可以采用基于注解形式进行开发,十分简洁;

正因为SpringMVC好 , 简单 , 便捷 , 易学 , 天生和Spring无缝集成(使用SpringIoC和Aop) , 使用约定优于配置 . 能够进行简单的junit测试 . 支持Restful风格 .异常处理 , 本地化 , 国际化 , 数据验证 , 类型转换 , 拦截器 等等…所以我们要学习 .

最重要的一点还是用的人多 , 使用的公司多 .

中心控制器

Spring的web框架围绕DispatcherServlet设计。 DispatcherServlet的作用是将请求分发到不同的处理器。从Spring 2.5开始,使用Java 5或者以上版本的用户可以采用基于注解的controller声明方式。

Spring MVC框架像许多其他MVC框架一样, 以请求为驱动 , 围绕一个中心Servlet分派请求及提供其他功能DispatcherServlet是一个实际的Servlet (它继承自HttpServlet 基类)

在这里插入图片描述

SpringMVC的原理如下图所示:

当发起请求时被前置的控制器拦截到请求,根据请求参数生成代理请求,找到请求对应的实际控制器,控制器处理请求,创建数据模型,访问数据库,将模型响应给中心控制器,控制器使用模型与视图渲染视图结果,将结果返回给中心控制器,再将结果返回给请求者。

在这里插入图片描述

SpringMVC执行原理

在这里插入图片描述

图为SpringMVC的一个较完整的流程图,实线表示SpringMVC框架提供的技术,不需要开发者实现,虚线表示需要开发者实现。

简要分析执行流程

  1. DispatcherServlet表示前置控制器,是整个SpringMVC的控制中心。用户发出请求,DispatcherServlet接收请求并拦截请求。
    • 我们假设请求的url为 : http://localhost:8080/SpringMVC/hello
    • 如上url拆分成三部分:
    • http://localhost:8080服务器域名
    • SpringMVC部署在服务器上的web站点
    • hello表示控制器
    • 通过分析,如上url表示为:请求位于服务器localhost:8080上的SpringMVC站点的hello控制器。
  2. HandlerMapping为处理器映射。DispatcherServlet调用HandlerMapping,HandlerMapping根据请求url查找Handler。
  3. HandlerExecution表示具体的Handler,其主要作用是根据url查找控制器,如上url被查找控制器为:hello。
  4. HandlerExecution将解析后的信息传递给DispatcherServlet,如解析控制器映射等。
  5. HandlerAdapter表示处理器适配器,其按照特定的规则去执行Handler。
  6. Handler让具体的Controller执行。
  7. Controller将具体的执行信息返回给HandlerAdapter,如ModelAndView。
  8. HandlerAdapter将视图逻辑名或模型传递给DispatcherServlet。
  9. DispatcherServlet调用视图解析器(ViewResolver)来解析HandlerAdapter传递的逻辑视图名。
  10. 视图解析器将解析的逻辑视图名传给DispatcherServlet。
  11. DispatcherServlet根据视图解析器解析的视图结果,调用具体的视图。
  12. 最终视图呈现给用户。

3、HelloMVC

  1. 新建一个Moudle:spring-02-hellomvc,导入依赖
  2. 配置web.xml, 注册DispatcherServlet
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <!--1.注册DispatcherServlet-->
    <servlet>
        <servlet-name>springmvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <!-- 关联一个springmvc配置文件:[servlet-name]-servlet.xml-->
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:springmvc-servlet.xml</param-value>
        </init-param>
        <!--启动级别-1-->
        <load-on-startup>1</load-on-startup>
    </servlet>

    <!--/ 匹配所有的请求: (不包括.jsp)-->
    <!--/* 匹配所有的请求: (包括.jsp)-->
    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

</web-app>
  1. 编写SpringMVC的配置文件, 名称为springmvc-servlet.xml(配置的servlet名-servlet.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"
         xsi:schemaLocation="http://www.springframework.org/schema/beans
         http://www.springframework.org/schema/beans/spring-beans.xsd">
</beans>
  1. 在springmvc-servlet.xml中添加处理器映射器,处理器适配器以及视图解析器
<!--添加处理器映射器-->
<bean class="org.springframework.web.servlet.handler.BeanNameUrlHandlerMapping"/>
<!--添加处理器适配器-->
<bean class="org.springframework.web.servlet.mvc.SimpleControllerHandlerAdapter"/>

<!-- 视图解析器:DispatcherServlet给他的ModelAndView-->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="internalResourceViewResolver">
    <!--前缀-->
    <property name="prefix" value="/WEB-INF/jsp/"/>
    <!--后缀-->
    <property name="suffix" value=".jsp"/>
</bean>

​ 这一段代码是"死"的

  1. 编写我们要操作业务的Controller, 要么实现Controller接口, 要么添加注解, 需要返回一个ModelAndView来封装数据、视图
package com.hassder.controller;

import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.Controller;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

// 注意: 这里我们先导入Controller接口
public class HelloController implements Controller {
    @Override
    public ModelAndView handleRequest(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws Exception {
        //ModelAndView 模型和视图
        ModelAndView mv = new ModelAndView() ;

        // 封装对象, 放在ModelAndView中, Model
        mv.addObject("msg" , "HelloSpringMVC!") ;
        // 封装要跳转的视图, 放在ModelAndView中
        mv.setViewName("hello"); //结合前缀与后缀 完整路径为/WEB-INF/jsp/hello.jsp
        return mv ;
    }
}
  1. 在springmvc-servlet.xml中将自己的类交给SpringIOC容器, 注册bean
<!--Handler-->
<bean id="/hello" class="com.hassder.controller.HelloController"/>
  1. 写我们要跳转的页面, 用来显示我们在ModelAndView中存放的数据
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Title</title>
    </head>
    <body>
        ${msg}
    </body>
</html>
  1. 配置Tomcat

在这里插入图片描述

  1. 运行结果

在这里插入图片描述

4、基于注解实现SpringMVC

  1. 新建一个Moudle: springmvc-03-annotation

  2. 为了防止Maven出现资源过滤的问题, 可以在pom.xml中进行如下配置(前面已经用过很多次了, 只要是Maven项目就可以加上这一段, 可以加在当前Moudle, 也可以加在父依赖中):

<!--Maven由于他的约定大于配置,我们之后可能会遇到我们写的配置文件无法被导出或者生效的问题-->
<!--在build中配置resources,来防止我们资源导出的问题-->
<!--先放在主项目的pm.xml文件内,可能无法生效,如果无法生效,可以将其复制粘贴到我们需要的子项目的pom.xml中去-->
<build>
    <resources>
        <resource>
            <directory>src/main/resources</directory>
            <includes>
                <include>**/*.properties</include>
                <include>**/*.xml</include>
            </includes>
            <filtering>true</filtering>
        </resource>
        <resource>
            <directory>src/main/java</directory>
            <includes>
                <include>**/*.properties</include>
                <include>**/*.xml</include>
            </includes>
            <filtering>true</filtering>
        </resource>
    </resources>
</build>
  1. 在pom.xml中引入相关依赖(在父项目中已经导入过的那些)
  2. 编写web.xml, 注册DispatcherServlet
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee 				http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <!--1.注册DispatcherServlet-->
    <servlet>
        <servlet-name>springmvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <!-- 关联一个springmvc配置文件:[servlet-name]-servlet.xml-->
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:springmvc-servlet.xml</param-value>
        </init-param>
        <!--启动级别-1-->
        <load-on-startup>1</load-on-startup>
    </servlet>

    <!--/ 匹配所有的请求: (不包括.jsp)-->
    <!--/* 匹配所有的请求: (包括.jsp)-->
    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

</web-app>
  1. 编写springmvc配置文件springmvc-servlet.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:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       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">

    <!--自动扫描包, 让指定包下的注解生效, 由IOC容器统一管理-->
    <context:component-scan base-package="com.hassder.controller"/>

    <!--让Spring MVC 不处理静态资源-->
    <mvc:default-servlet-handler />

    <!--
    支持MVC注解驱动
        让spring中一般采用@RequestMapping注解来完成映射关系
        要想使@RequestMapping注解生效
        必须向上下文中注册DefaultAnnotationHandlerMapping
        和一个AnnotationMethodHandlerAdapter实例
        这两个实例分别在类级别和方法级别处理
        而annotation-driven配置帮助我们自动完成上述两个实例的注入
    -->
    <mvc:annotation-driven />

    <!-- 视图解析器:DispatcherServlet给他的ModelAndView-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="internalResourceViewResolver">
        <!--前缀-->
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <!--后缀-->
        <property name="suffix" value=".jsp"/>
    </bean>

</beans>
  1. 创建对应的控制类, controller
package com.hassder.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/hello")
public class HelloController {

    @RequestMapping("/h1") // http://localhost:8080/03/hello/h1
    public String hello(Model model){
        // 封装数据
        model.addAttribute("msg" , "Hello,SpringMVCAnnotation!") ;
        
        return "hello" ; //会被视图解析器处理
    }
}
  1. 完善前端视图和controller之间的对应(在/WEB-INF/jsp下创建对应的.jsp文件, 如在这里就是hello.jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Title</title>
</head>
<body>
    <p>hello.jsp界面</p>
    ${msg}
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Title</title>
</head>
<body>
    <p>hello.jsp界面</p>
    ${msg}
</body>
</html>
  1. 启动Tomcat, 测试

在这里插入图片描述

在使用SpringMVC过程中必须配置的三大件:

处理器映射器处理器适配器视图解析器

通常,我们只需要手动配置视图解析器, 而处理器映射器和处理器适配器只需要开启注解驱动即可, 从而省去了大段的xml配置

5、Controller配置总结

新建一个Moudle: springmvc-04-controller 添加web支持

实现Controller的方式有三种:

  • 实现Controller接口
  • 使用@Controller注解(推荐)

5.1、 实现Controller接口

  1. 配置web.xml:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <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-servlet.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>
  1. 配置springmvc-servlet.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"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd">

    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="internalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <property name="suffix" value=".jsp"/>
    </bean>

</beans>
  1. 编写controller:
package com.hassder.controller;

import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.Controller;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

// 只要实现了Controller接口的类,就是一个控制器
public class ControllerTest1 implements Controller {
    @Override
    public ModelAndView handleRequest(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws Exception {

        ModelAndView mv = new ModelAndView();
        mv.addObject("msg" , "ControllerTest1") ;
        mv.setViewName("test1");
        return mv;
    }
}
  1. 编写页面test1.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Title</title>
    </head>
    <body>
        <p>test1页面</p>
        ${msg}
    </body>
</html>
  1. 在springmvc-servlet.xml中注册bean:
<bean name="/t1" class="com.hassder.controller.ControllerTest1"/>
  1. 启动Tomcat, 测试:

在这里插入图片描述

5.2、使用@Controller注解(推荐)

  1. 配置web.xml:

web.xml和使用Controller接口实现时一样,

  1. 配置springmvc-servlet.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:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       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">

    <context:component-scan base-package="com.hassder.controller"/>
    <!--下面两个不加也有可能不会报错-->
    <mvc:default-servlet-handler />
    <mvc:annotation-driven />
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="internalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <property name="suffix" value=".jsp"/>
    </bean>

</beans>
  1. 编写controller:
package com.hassder.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller // 代表这个类会被Spring接管
// 这个类中的所有方法, 如果返回值是String 且是具体页面可以跳转 那么就会被视图解析器解析
public class ControllerTest2 {

    @RequestMapping("/t2")
    public String test2(Model model){

        model.addAttribute("msg" , "ControllerTest2") ;
        return "test1" ;
    }
}

  1. 编写页面:

页面无变化, 仍然使用之前的页面

  1. 启动Tomcat, 测试:

在这里插入图片描述

总结

控制器Controller:

  • 控制器复杂提供访问应用程序的行为,通常通过接口定义或注解定义两种方法实现。
  • 控制器负责解析用户的请求并将其转换为一个模型。
  • 在Spring MVC中一个控制器类可以包含多个方法
  • 在Spring MVC中,对于Controller的配置方式有很多种

实现Controller接口

  • 实现Controller接口是定义控制器中较老的一种办法

  • 一个控制器中只能有一个方法, 如果需要多个方法则需要定义多个Controller, 比较麻烦

使用@Controller注解(推荐)

  • @Controller注解类型用于声明Spring类的实例是一个控制器(在讲IOC的时候还提到了另外3个注解)
  • Spring可以使用扫描机制来找到应用程序中所有基于注解的控制器类, 为了保证Spring能找到你的控制器, 需要在配置文件中声明组件扫描

并且, 我们可以看到, 在我们使用两种不同的方式测试时, 所使用的jsp页面都是同一个, 这说明jsp页面(视图)是可以复用的,控制器与页面(视图)之间是弱耦合关系

6、RestFul风格

概念

Restful就是一个资源定位及资源操作的风格。不是标准也不是协议,只是一种风格。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

功能

  • 资源:互联网所有的事物都可以被抽象为资源
  • 资源操作:使用POST、DELETE、PUT、GET,使用不同方法对资源进行操作。
  • 分别对应 添加、 删除、修改、查询。

传统方式操作资源 :通过不同的参数来实现不同的效果!方法单一,post 和 get

  • http://127.0.0.1/item/queryItem.action?id=1 查询,GET
  • http://127.0.0.1/item/saveItem.action 新增,POST
  • http://127.0.0.1/item/updateItem.action 更新,POST
  • http://127.0.0.1/item/deleteItem.action?id=1 删除,GET或POST

使用RESTful操作资源 : 可以通过不同的请求方式来实现不同的效果!如下:请求地址一样,但是功能可以不同!

  • http://127.0.0.1/item/1 查询,GET
  • http://127.0.0.1/item 新增,POST
  • http://127.0.0.1/item 更新,PUT
  • http://127.0.0.1/item/1 删除,DELETE

6.1、使用传统方式:

  1. 新建一个类RestFluController:
package com.hassder.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class RestFluController {

    @RequestMapping("/add")
    public String test3(int a , int b , Model model){

        int res = a+ b ;
        model.addAttribute("msg","结果为"+res) ;
        return "test1" ;
    }
}
  1. 启动Tomcat, 测试:

直接进/add:

在这里插入图片描述

500错误 ,因为还需要a,b两个参数

传入参数:

在这里插入图片描述

在传统方式下我们直接使用?与&进行传参 如下:

http://localhost:8080/04/add?a=1&b=2

表示传入参数a=1 , b=2

6.2、使用RestFul风格

  1. 修改RestFluController类如下:
package com.hassder.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class RestFluController {

    // 使用RestFul风格时, 在想要使用RestFul风格传递的参数前使用@PathVariable注解
    // 而后就可以在路径中获取参数值
    @RequestMapping("/add/{a}/{b}")
    public String test3(@PathVariable int a , @PathVariable int b , Model model) {

        int res = a + b;
        model.addAttribute("msg", "结果为" + res);
        return "test1";
    }
}
  1. 启动Tomcat, 测试:

在这里插入图片描述

在RestFul风格下我们使用/来进行传参

http://localhost:8080/04/add/1/3

表示传入参数a=1 , b=3

但是这只是一种简单的方式, 并没有实现使用相同的路径完成不同的操作

实际上@RequestMapping注解是可以有两个参数的:

@RequestMapping(value = "/add/{a}/{b}" , method = RequestMethod.GET)
@RequestMapping(path = "/add/{a}/{b}" , method = RequestMethod.POST)

之前我们使用的只是第一个参数, 当只使用第一个参数的时候 value是可以省略的(使用path也可以, name也可以, 但是使用 name可能存在一些未知的问题)

如果我们在两个不同的方法上面使用同样的value值, 则两个方法的路径相同, 此时,method的值必须不同, method值表示提交方式, 如果我们使用get方式提交数据, 则进入method值为RequestMethod.GET的方法, 如果我们使用post方式提交, 则进入method值为RequestMethod.POST的方法,

测试如下:

修改RestFluController类如下:

package com.hassder.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class RestFluController {
    @RequestMapping(path = "/add/{a}/{b}" , method = RequestMethod.POST)
    public String test3(@PathVariable int a , @PathVariable int b , Model model) {

        int res = a + b;
        model.addAttribute("msg", "post方式的结果为" + res);
        return "test1";
    }

    @RequestMapping(path = "/add/{a}/{b}" , method = RequestMethod.GET)
    public String test4(@PathVariable int a , @PathVariable int b , Model model) {

        int res = a + b;
        model.addAttribute("msg", "get方式的结果为" + res);
        return "test1";
    }
}

我们使用同样的路径不同的提交方式配置了两个方法, 测试时我们需要使用不同的提交方式来对同样的路径进行提交. 这时候我们还需要一个表单页面来进行post提交(直接在浏览器的url栏输入值进行提交为get方式提交)

为了便于测试, 我们直接在web下编写form.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>from表单</title>
</head>
<body>
<%--便于测试 直接将参数写在action内(为了支持RestFul风格)--%>
<form action="/04/add/1/2" method="post">
    <input type="submit">
</form>
</body>
</html>

启动Tomcat, 进行测试, 结果如下图所示:

在这里插入图片描述

左边页面是我们进入表单页面后点击提交按钮后使用post方式提交后的结果, 而右边页面则是我们直接在url栏输入提交值(get方式)后提交的结果, 可以看到二者的页面内容不同, 即msg的值不同, 对应我们两个不同的方法, 也就是说,我们在同路径的情况下,执行了不同的方法, 获取到了不同的值, 这也提高了路径的复用

值得一提的是, @RequestMapping注解还有四个派生注解, 分别是:

  • @GetMapping
  • @PostMapping
  • @DeleteMapping
  • @PatchMapping

分别对应四种不同的提交方式

以@GetMapping和@PostMapping注解为例, 如下列代码所示, 下列代码的功能与上面测试的代码效果完全相同

package com.hassder.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

@Controller
public class RestFluController {

    @PostMapping("/add/{a}/{b}")
    public String test3(@PathVariable int a , @PathVariable int b , Model model) {

        int res = a + b;
        model.addAttribute("msg", "post方式的结果为" + res);
        return "test1";
    }

    @GetMapping("/add/{a}/{b}")
    public String test4(@PathVariable int a , @PathVariable int b , Model model) {

        int res = a + b;
        model.addAttribute("msg", "get方式的结果为" + res);
        return "test1";
    }
}

7、重定向与转发

7.1、不使用视图解析器

通过SpringMVC来实现重定向与转发,可以不需要视图解析器

在测试之前, 将springmvc-servlet.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:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       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">

    <context:component-scan base-package="com.hassder.controller"/>
    <!--下面两个不加也有可能不会报错-->
    <!--<mvc:default-servlet-handler />
    <mvc:annotation-driven />-->
    <!--<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="internalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <property name="suffix" value=".jsp"/>
    </bean>-->

    <!--<bean name="/t1" class="com.hassder.controller.ControllerTest1"/>-->

</beans>

新建一个ModelTest1类:

package com.hassder.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

@Controller
public class ModelTest1 {

    @RequestMapping("/m1/t1")
    public String test(Model model){
        model.addAttribute("msg" , "ModelTest1") ;

        // 相应的 使用这种方式也可以实现重定向的操作
        // 在路径前加上一个redirect: 即可
        return "redirect:/form.jsp" ;
        // 或者使用显示说明来表示这是一个转发
        // 即在路径前加上forward:来表示这是一个转发
        // return "forward:/WEB-INF/jsp/test1.jsp" ;

        // 在不使用视图解析器的情况下, 可以使用完整的路径来进行转发,
        // 前面加"/"代表转发
        // return "/WEB-INF/jsp/test1.jsp" ;
    }
}

7.2、使用视图解析器

将视图解析器添加回来

修改ModelTest1类:

package com.hassder.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

@Controller
public class ModelTest1 {

    @RequestMapping("/m1/t1")
    public String test(Model model){
        model.addAttribute("msg" , "ModelTest1") ;
        
        // 而进行转发时 则直接写页面名即可
        return "test1" ;
        // 在使用视图解析器的时候,进行重定向还是一样的操作
        // return "redirect:/form.jsp";

        /*
        不使用视图解析器
        // 相应的 使用这种方式也可以实现重定向的操作
        // 在路径前加上一个redirect: 即可
        // return "redirect:/form.jsp" ;
        // 或者使用显示说明来表示这是一个转发
        // 即在路径前加上forward:来表示这是一个转发
        // return "forward:/WEB-INF/jsp/test1.jsp" ;

        // 在不使用视图解析器的情况下, 可以使用完整的路径来进行转发,
        // 前面加"/"代表转发
        // return "/WEB-INF/jsp/test1.jsp" ;*/
    }
}

总结:

转发:

转发的路径是不变的, 访问的路径就是当前指定的路径, 所以需要视图解析器来对路径进行解析

在这里插入图片描述

重定向:

重定向的路径是会发生改变的, 本来就是访问了一个其它的路径, 实际上是不需要视图解析器的, 需要指定完整路径

在这里插入图片描述

8、接收请求参数及数据回显

8.1、接收请求参数

8.1.1、提交的域名称和处理方法的参数名一致

如我们在springmvc-04-controller中的RestFluController类中的方法:

@RequestMapping("/add")
public String test3(int a , int b , Model model){

    int res = a+ b ;
    model.addAttribute("msg","结果为"+res) ;
    return "test1" ;
}

在这里插入图片描述

在路径中我们直接使用a=1&b=2的方式传递参数, 由于a,b与此路径处理方法中的参数名一致, 所以可以直接接收

8.1.2、提交的域名称和处理方法的参数名不一致

如果我们提交的域名称和处理方法的参数名不一致, 那么,可以在处理方法的参数上添加@RequestParam注解来解决, 如下所示:

@RequestMapping("/add")
public String test3(@RequestParam("a") int c , @RequestParam("b") int d , Model model){

    int res = c+ d ;
    model.addAttribute("msg","结果为"+res) ;
    return "test1" ;
}

在这里插入图片描述

我们在处理方法中使用的参数名为c,d, 而在路径中提交的参数名为a,b, 这个时候我们在处理方法的参数上使用@RequestParam注解, 可以将其作用看成是取别名, 只要路径中提交的参数名与别名相同, 就会对应的获取到值

8.1.3、提交的是一个对象

当前端提交的数据是一个对象时, 我们有两种方式来处理

  • 将对象的所有属性作为处理方法的参数, 这种方法与上面一样,不再多说(可以现象一下, 如果对象的属性较多时,会有多麻烦)
  • 使用一个实体类来接收

下面演示使用实体类接收的办法

创建一个实体类User:

package com.hassder.pojo;

import java.util.Objects;

public class User {
    private int id ;
    private String name ;
    private int age ;

    public User() {
    }

    public User(int id, String name, int age) {
        this.id = id;
        this.name = name;
        this.age = age;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    @Override
    public boolean equals(Object o) {
        if (this == o) return true;
        if (o == null || getClass() != o.getClass()) return false;
        User user = (User) o;
        return id == user.id &&
                age == user.age &&
                Objects.equals(name, user.name);
    }

    @Override
    public int hashCode() {
        return Objects.hash(id, name, age);
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", age=" + age +
                '}';
    }
}

添加一个处理方法:

@GetMapping("/t5")
public String test5(User user , Model model){
    model.addAttribute("msg" , "前端接收的对象为"+user) ;
    return "test1" ;
}

启动Tomcat, 测试:

在这里插入图片描述

可以看到, 当我们提交的各属性名与User类的属性名相同, 且处理方法是使用User类型对象来接收的时候, 会自动将前端传入的数据封装成一个user对象

需要注意的是: 前端传入的数据名必须与实体类中的字段名相同, 否则就无法获取到名字不同的数据(其它相同的属性可以正常获取, 而不同的属性则为null)

8.2、数据回显

数据回显有三种方式:

  • 通过ModelAndView
  • 通过Model
  • 通过ModelMap

通过ModelAndView和通过Model

这两种方式都是我们前面一直在使用的, 这里不再多说

通过ModelMap

虽然我们没有使用过ModelMap, 但是实际上在使用过程中, 基本与Model没有区别

对比:

  • Model: 只有寥寥几个方法,只适合用于储存数据, 简化了新手对于Model对象的操作和理解
  • ModelMap: 继承了LinkedMap, 除了实现自身的一些方法, 同样的继承LinkedMap的方法和特性
  • ModelAndView: 可以在存储数据的同时, 设置返回的逻辑视图, 进行控制展示层的跳转

一般情况而言, 使用Model就可以满足我们的需求

9、乱码问题

9.1、乱码情况

将之前的form.jsp表单至如下:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>from表单</title>
</head>
<body>

<form action="e/t1" method="post">
    <input type="text" name="name">
    <input type="submit">
</form>
</body>
</html>

写一个处理方法:

package com.hassder.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class EncodingController {

    @PostMapping("/e/t1")
    public String test1(String name , Model model){
        System.out.println(name);
        model.addAttribute("msg" , name);
        return "test1" ;
    }

}

启动Tomcat, 测试:

在这里插入图片描述

首先进入表单页面, 在输入框输入中文,而后点击提交

在这里插入图片描述

可以看到, 我们在表单中输入的中文变成了乱码, 且在程序中输出时就已经是乱码了, 这说明是在表单数据提交到后台程序, 后台程序接收数据的时候就已经将中文变成了乱码

可以将提交方式修改为get后再次尝试(虽然get方式和post方式基本一样,但是还是存在一些细微区别的, 可以都尝试一下)(修改表单的提交方式为get 还需要修改处理方法上的注解)

在这里插入图片描述

不试不知道, 一试就发现问题了, get方式并没有出现乱码问题, 经过查阅资料,发现,在Tomcat8.0以上的版本中, Tomcat自己帮我们解决了get方式的乱码问题, 但是使用post方式提交还是会存在乱码问题

9.2、解决方式

使用过滤器解决

SpringMVC自带有解决中文乱码的办法:

在web.xml文件中配置如下过滤器:

<!--配置过滤器, springmvc提供的过滤器, 固定写法-->
<filter>
    <filter-name>encoding</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
        <param-name>encoding</param-name>
        <param-value>utf-8</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>encoding</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

这是SpringMVC自带的一个过滤器, 我们只需要复制粘贴即可使用, 无需进行更改, 使用这个过滤器已经可以解决掉极大部分的中文乱码问题了(建议以后可以在所有项目的web.xml里都进行这个配置), 但是在极端条件下可能还会存在个别无法解决的问题, 所以,这里还有一个大佬写的过滤器(可能比SpringMVC自带的还要强大):

package com.hassder.filter;
 
import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletRequestWrapper;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.util.Map;
 
/**
 * 解决get和post请求 全部乱码的过滤器
 */
public class GenericEncodingFilter implements Filter {
 
    @Override
    public void destroy() {
    }
 
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        //处理response的字符编码
        HttpServletResponse myResponse=(HttpServletResponse) response;
        myResponse.setContentType("text/html;charset=UTF-8");
 
        // 转型为与协议相关对象
        HttpServletRequest httpServletRequest = (HttpServletRequest) request;
        // 对request包装增强
        HttpServletRequest myrequest = new MyRequest(httpServletRequest);
        chain.doFilter(myrequest, response);
    }
 
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }
 
}
 
//自定义request对象,HttpServletRequest的包装类
class MyRequest extends HttpServletRequestWrapper {
 
    private HttpServletRequest request;
    //是否编码的标记
    private boolean hasEncode;
    //定义一个可以传入HttpServletRequest对象的构造函数,以便对其进行装饰
    public MyRequest(HttpServletRequest request) {
        super(request);// super必须写
        this.request = request;
    }
 
    // 对需要增强方法 进行覆盖
    @Override
    public Map getParameterMap() {
        // 先获得请求方式
        String method = request.getMethod();
        if (method.equalsIgnoreCase("post")) {
            // post请求
            try {
                // 处理post乱码
                request.setCharacterEncoding("utf-8");
                return request.getParameterMap();
            } catch (UnsupportedEncodingException e) {
                e.printStackTrace();
            }
        } else if (method.equalsIgnoreCase("get")) {
            // get请求
            Map<String, String[]> parameterMap = request.getParameterMap();
            if (!hasEncode) { // 确保get手动编码逻辑只运行一次
                for (String parameterName : parameterMap.keySet()) {
                    String[] values = parameterMap.get(parameterName);
                    if (values != null) {
                        for (int i = 0; i < values.length; i++) {
                            try {
                                // 处理get乱码
                                values[i] = new String(values[i]
                                        .getBytes("ISO-8859-1"), "utf-8");
                            } catch (UnsupportedEncodingException e) {
                                e.printStackTrace();
                            }
                        }
                    }
                }
                hasEncode = true;
            }
            return parameterMap;
        }
        return super.getParameterMap();
    }
 
    //取一个值
    @Override
    public String getParameter(String name) {
        Map<String, String[]> parameterMap = getParameterMap();
        String[] values = parameterMap.get(name);
        if (values == null) {
            return null;
        }
        return values[0]; // 取回参数的第一个值
    }
 
    //取所有值
    @Override
    public String[] getParameterValues(String name) {
        Map<String, String[]> parameterMap = getParameterMap();
        String[] values = parameterMap.get(name);
        return values;
    }
}

使用方法就是在自己的类中将这个过滤器类加进去, 然后在web.xml中进行类似上面过滤器的配置即可(需要修改<filter-class>的路径, 修改成你自己放的这个类的路径即可)

也可以再将提交方式修改为get后再次测试 (本人测试没有问题)

注意: 解决乱码只能解决原本正确的中文在数据传递过程中导致的乱码问题, 如果用户在客户端输入的原本就是乱码, 那么这是无法解决的

10、JSON

10.1、基础

现在是前后端分离的时代

后端不熟后端,提供接口,提供数据

中间普遍使用JSON,JSON是一种轻量级的数据交换格式

前端独立部署,负责渲染后端的数据

JSON的特点:

  • 采用完全独立与编程语言的文本格式来存储和表示数据
  • 简洁和清晰的层次结构使得JSON成为理想的数据交换语言
  • 易于人阅读和编写, 同时也易于机器解析和生成, 并有效地提升网络传输效率

在JavaScript语言中, 一切都是对象, 因此, 任何JavaScript支持的类型都可以通过JSON来表示, 例如字符串、数字、对象、数组等, 看看他的要求和语法格式:

  • 对象表示为键值对, 数据由逗号分隔
  • 花括号保存对象
  • 方括号保存数组

JSON键值对是用来保存JavaScript对象的一种方式, 和JavaScript对象的写法也大同小异, 键/值对组合中的键名写在前面并用双引号""包裹, 使用冒号:分隔, 然后紧接着值, 如下所示:

{"name":"Hassder"}
{"age":"22"}
{"sex":"男"}

JSON是JavaScript对象的字符串表示法, 它使用文本表示一个JS对象的信息, 本质是一个字符串

var obj = {a:'Hello',b:'World'}; // 这是一个对象(注意键名也是可以使用引号包裹的)
var json = '{"a":"Hello","b":"World"}'; // 这是一个JSON字符串(整体由引号包裹)

10.2、JSON和JavaScript对象互转

要实现从JSON字符串转换为JavaScript对象, 使用JSON.parse()方法即可:

var obj = JSON.parse('{"a":"Hello","b":"World"}');
// 结果是{a:'Hello',b:'World'}

要实现从JavaScript对象转换为JSON字符串, 使用JSON.stringify()方法即可:

var json = JSON.stringify({a:'Hello',b:'World'});
// 结果是'{"a":"Hello","b":"World"}'

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">

        // 编写一个JavaScript对象
        // 在ES6起, 定义变量并不只有var一种方式 还有let和const
        // 要具体了解的可以自行了解
        var user = {
            name:"Hassder",
            age:22,
            sex:"男"
        };

        //输出js对象信息
        console.log(user) ;
        console.log("================") ;
        // 将js对象转换为JSON对象
        var json1 = JSON.stringify(user) ;
        console.log(json1) ;
        console.log("================") ;
        // 将JSON对象转换为js对象
        var js1 = JSON.parse(json1)
        console.log(js1) ;
    </script>

</head>
<body>

</body>
</html>

输出结果:

在这里插入图片描述

10.3、在Java中生成JSON对象

在Java中生成JSON对象的工具:

  • jackson
  • fastjson

10.3.1 jackson

  1. 导入jackson的jar包:
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.10.0</version>
</dependency>
  1. 配置pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <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-servlet.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>

    <filter>
        <filter-name>encoding</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>encoding</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

</web-app>
  1. 配置springmvc-servlet.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:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       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">

    <context:component-scan base-package="com.hassder.controller"/>
    <mvc:default-servlet-handler />
    <mvc:annotation-driven />
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="internalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <property name="suffix" value=".jsp"/>
    </bean>

</beans>
  1. 编写实体类User:
package com.hassder.pojo;

import java.util.Objects;

public class User {
    private String name ;
    private int age ; 
    private String sex ;

    public User() {
    }

    public User(String name, int age, String sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    @Override
    public boolean equals(Object o) {
        if (this == o) return true;
        if (o == null || getClass() != o.getClass()) return false;
        User user = (User) o;
        return age == user.age &&
                Objects.equals(name, user.name) &&
                Objects.equals(sex, user.sex);
    }

    @Override
    public int hashCode() {
        return Objects.hash(name, age, sex);
    }

    @Override
    public String toString() {
        return "User{" +
                "name='" + name + '\'' +
                ", age=" + age +
                ", sex='" + sex + '\'' +
                '}';
    }
}
10.3.1.1 返回单个对象

编写处理方法:

package com.hassder.controller;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.hassder.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class UserController {


    @RequestMapping("/j1")
    @ResponseBody // 添加此注解后此方法不会走视图解析器, 会直接返回一个字符串
    public String json1() throws JsonProcessingException {

        // 使用jackson 其包下有一个ObjectMapper
        ObjectMapper mapper = new ObjectMapper();
        // 创建一个对象
        User user = new User("Hassder1",1,"男") ;

        String str = mapper.writeValueAsString(user);
        System.out.println(str);
        return str ;
    }

}

注意这里的新东西:

  • @ResponseBody注解
  • jackson下的ObjectMapper类下的writeValueAsString方法用于将Java对象转换为JSON对象

启动Tomcat, 测试:

在这里插入图片描述

又出现了中文乱码的问题,怎么解决呢?

在@RequestMapping注解中有一个produces属性, 可以对其属性值做以下设置来解决JSON的乱码问题:

@RequestMapping(value = "/j1",produces = "application/json;charset=utf-8")

但是这种方式好像有点麻烦,每一个@RequestMapping注解里都需要写上一长串, 那么有什么一劳永逸的方法吗?

我们可以通过在springmvc-servlet.xml配置文件中添加一段配置来一劳永逸的解决这个问题.这一段代码是"死"的, 不需要进行修改,只要使用了JSON就直接在此配置文件中添加这一段配置即可

<!--JSON乱码问题配置-->
<!--"死"的代码,只要使用了JSON就直接在此配置文件中添加这一段配置即可-->
<mvc:annotation-driven>
    <mvc:message-converters register-defaults="true">
        <bean class="org.springframework.http.converter.StringHttpMessageConverter">
            <constructor-arg value="UTF-8"/>
        </bean>
        <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
            <property name="objectMapper">
                <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
                    <property name="failOnEmptyBeans" value="false"/>
                </bean>
            </property>
        </bean>
    </mvc:message-converters>
</mvc:annotation-driven>

开启Tomcat, 测试:

在这里插入图片描述

还有一点:

我们刚才是在类上使用@Controller注解, 在不需要使用视图解析器的具体方法上使用@ResponseBody注解, 那么如果我们一个类中所有的方法都不需要视图解析器, 就可以把这两个注解使用一个注解来代替, 直接在类上使用@RestController注解即可,如下:

package com.hassder.controller;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.hassder.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

@RestController // 此类中的所有方法都不会使用视图解析器
public class UserController {


    @RequestMapping("/j1")
    // @ResponseBody // 添加此注解后此方法不会走视图解析器, 会直接返回一个字符串
    public String json1() throws JsonProcessingException {

        // 使用jackson 其包下有一个ObjectMapper
        ObjectMapper mapper = new ObjectMapper();
        // 创建一个对象
        User user = new User("Hassder1",1,"男") ;

        String str = mapper.writeValueAsString(user);

        System.out.println(str);
        return str ;
    }

}
10.3.1.2 返回对象集合

如果我们需要将一个User类型对象的集合返回,也是同样的操作, 如下所示:

@RequestMapping("/j2")
public String json2() throws JsonProcessingException {
    List<User> userList = new ArrayList<>() ;
    User user1 = new User("Hassder1",1,"男") ;
    User user2 = new User("Hassder2",1,"男") ;
    User user3 = new User("Hassder3",1,"男") ;
    User user4 = new User("Hassder4",1,"男") ;
    userList.add(user1);
    userList.add(user2);
    userList.add(user3);
    userList.add(user4);
    return new ObjectMapper().writeValueAsString(userList) ;
}

启动Tomcat, 测试:

在这里插入图片描述

可以看到, 返回了一个JSON集合(最外层使用方括号包裹), 集合内是四个JSON对象(每个对象由由尖括号包裹),集合内对象与对象之间以逗号分隔

10.3.1.3 返回时间对象
10.3.1.3.1 使用SimpleDateFormat

如果我们想要返回一个时间, 我们第一反应可能想到的是下面这种操作:

@RequestMapping("/j3")
public String json3() throws JsonProcessingException {
    // 希望返回时间
    return new ObjectMapper().writeValueAsString(new Date()) ;
}

那么我们启动Tomcat来测试一下:

在这里插入图片描述

可以看到, 直接返回一个new Date()的结果是一串数字, 这一串数字是时间戳, 也就是说,直接使用date进行解析,得到的JSON对象是时间戳, 那么,我们如果希望得到我们熟悉的年月日这种格式的时间,应该怎么做呢

使用下面这种办法:

@RequestMapping("/j3")
public String json3() throws JsonProcessingException {
    // 希望返回时间
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss") ;
    return new ObjectMapper().writeValueAsString(sdf.format(new Date())) ;
}

启动Tomcat,测试:
在这里插入图片描述

就是我们想要的结果, 没有问题

10.3.1.3.2 使用ObjectMapper中的configure

使用mapper对象中的configure方法, 取消mapper将时间转换为时间戳的设定

然后通过mapper.setDateFormat(SimpleDateFormat对象)来为mapper自定义一个时间格式

这样通过mapper将Java中的date对象转换为JSON对象之后, 就是我们自己定义的时间格式了

代码如下:

@RequestMapping("/j3")
public String json3() throws JsonProcessingException {
    
    // 希望返回时间
    ObjectMapper mapper = new ObjectMapper();

    // 取消mapper中使用时间戳的格式
    mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS,false);
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss") ;

    // 自己为mapper定义一个时间格式
    mapper.setDateFormat(sdf) ;

    // 这样通过mapper转换的时间就是我们设置的格式了
    return mapper.writeValueAsString(new Date()) ;
}

启动Tomcat, 进行测试 :

在这里插入图片描述

10.3.1.4 优化

在我们上面生成JSON对象的过程中, 每一个方法中都需要我们手动创建一个ObjectMapper对象,并且调用其writeValueAsString方法, 好像还是有点复杂, 该如何优化呢?

我们可以自己写一个工具类:

package com.hassder.utils;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.SerializationFeature;

import java.text.SimpleDateFormat;

public class JsonUtils {
    
    public static String getJson(Object object){
        return getJson(object , "yyyy-MM-dd HH:mm:ss") ;
    }
    
    public static String getJson(Object object , String dateFormat){
        ObjectMapper mapper = new ObjectMapper();
        mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS,false);
        SimpleDateFormat sdf = new SimpleDateFormat(dateFormat) ;
        mapper.setDateFormat(sdf) ;
        try {
            return mapper.writeValueAsString(object) ;
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
        return null ;
    }
}

然后在我们需要转换为JSON对象的时候, 直接调用工具类中的方法即可. 修改一些上面的代码, 如下:

  1. 返回单个对象:
@RequestMapping("/j1")
// @ResponseBody // 添加此注解后此方法不会走视图解析器, 会直接返回一个字符串
public String json1() throws JsonProcessingException {
    // 创建一个对象
    User user = new User("Hassder1",1,"男") ;
    return JsonUtils.getJson(user) ;
}
  1. 返回对象集合:
@RequestMapping("/j2")
public String json2() throws JsonProcessingException {
    List<User> userList = new ArrayList<>() ;
    User user1 = new User("Hassder1",1,"男") ;
    User user2 = new User("Hassder2",1,"男") ;
    User user3 = new User("Hassder3",1,"男") ;
    User user4 = new User("Hassder4",1,"男") ;
    userList.add(user1);
    userList.add(user2);
    userList.add(user3);
    userList.add(user4);
    return JsonUtils.getJson(userList) ;
}
  1. 返回时间对象:
@RequestMapping("/j3")
public String json3() throws JsonProcessingException {

    return JsonUtils.getJson(new Date() , "yyyy-MM-dd HH:mm:ss") ;

    // 或者 使用工具类中的默认格式
    // return JsonUtils.getJson(new Date()) ;
}

这样就可以进一步简化我们的代码量

10.3.2 fastjson

  1. 导入jar包
<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.60</version>
</dependency>
  1. 编写处理方法(4,5,6分别对应上面的1,2,3,功能相同):
@RequestMapping("/j4")
public String json4() throws JsonProcessingException {

    // 创建一个对象
    User user = new User("Hassder1",1,"男") ;

    String str = JSON.toJSONString(user) ;

    System.out.println(str);
    return str ;
}

@RequestMapping("/j5")
public String json5() throws JsonProcessingException {
    List<User> userList = new ArrayList<>() ;
    User user1 = new User("Hassder1",1,"男") ;
    User user2 = new User("Hassder2",1,"男") ;
    User user3 = new User("Hassder3",1,"男") ;
    User user4 = new User("Hassder4",1,"男") ;
    userList.add(user1);
    userList.add(user2);
    userList.add(user3);
    userList.add(user4);
    return JSON.toJSONString(userList) ;
}

@RequestMapping("/j6")
public String json6() throws JsonProcessingException {

    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss") ;

    // 这样通过mapper转换的时间就是我们设置的格式了
    return JSON.toJSONString(sdf.format(new Date()));
}
总结:

fastjson 三个主要的类

  • 【JSONObject 代表 json 对象 】
    • JSONObject实现了Map接口, 猜想 JSONObject底层操作是由Map实现的。
    • JSONObject对应json对象,通过各种形式的get()方法可以获取json对象中的数据,也可利用诸如size(),isEmpty()等方法获取"键:值"对的个数和判断是否为空。其本质是通过实现Map接口并调用接口中的方法完成的。
  • 【JSONArray 代表 json 对象数组】
    • 内部是有List接口中的方法来完成操作的。
  • 【JSON 代表 JSONObject和JSONArray的转化】
    • JSON类源码分析与使用
    • 仔细观察这些方法,主要是实现json对象,json对象数组,javabean对象,json字符串之间的相互转化。
System.out.println("*******Java对象 转 JSON字符串*******");
String str1 = JSON.toJSONString(list);
System.out.println("JSON.toJSONString(list)==>"+str1);
String str2 = JSON.toJSONString(user1);
System.out.println("JSON.toJSONString(user1)==>"+str2);

System.out.println("\n****** JSON字符串 转 Java对象*******");
User jp_user1=JSON.parseObject(str2,User.class);
System.out.println("JSON.parseObject(str2,User.class)==>"+jp_user1);

System.out.println("\n****** Java对象 转 JSON对象 ******");
JSONObject jsonObject1 = (JSONObject) JSON.toJSON(user2);
System.out.println("(JSONObject) JSON.toJSON(user2)==>"+jsonObject1.getString("name"));

System.out.println("\n****** JSON对象 转 Java对象 ******");
User to_java_user = JSON.toJavaObject(jsonObject1, User.class);
System.out.println("JSON.toJavaObject(jsonObject1, User.class)==>"+to_java_user);

11、Ajax技术

可以当成是一种"异步无刷新请求"

在我们之前的操作中, 当我们进行某一个请求时, 会导致整个页面的刷新, 但是在实际应用过程中, 这是不必要的,很多地方并不需要整个页面的刷新, 而是只需要某一个部分的"局部刷新", 就足够了

比如说, 在我们使用浏览器的时候, 向搜索框输入某些内容之后, 在搜索框下方会出现很多与之关联的查找内容, 这些内容就是浏览器获取到我们的输入内容之后向服务器请求之后返回的数据, 但是在这个过程中,并没有发生整个浏览器页面的刷新行为

  • AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

  • AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

  • Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

  • 在 2005 年,Google 通过其 Google Suggest 使 AJAX 变得流行起来。Google Suggest能够自动帮你完成搜索单词。

  • Google Suggest 使用 AJAX 创造出动态性极强的 web 界面:当您在谷歌的搜索框输入关键字时,JavaScript 会把这些字符发送到服务器,然后服务器会返回一个搜索建议的列表。

  • 传统的网页(即不用ajax技术的网页),想要更新内容或者提交一个表单,都需要重新加载整个网页。

  • 使用ajax技术的网页,通过在后台服务器进行少量的数据交换,就可以实现异步局部更新。

  • 使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

11.1、Ajax初体验

在进行Ajax体验之前, 我们可以先使用前端的iframe标签来伪造一个类似于Ajax的效果

新建一个子Module: springmvc-06-ajax, 并进行一些初始配置:

  • 添加web支持
  • 注册DispatcherServlet(web.xml中)
  • 配置过滤器,解决乱码问题(这里使用spring本身提供的过滤器)
  • 配置applicationContext.xml
    • 注解驱动
    • 静态资源过滤
    • 视图解析器
  • 建包
  • 完成结构如图:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GR751DA9-1620952160828)(SpringMVCStudyPhoto/0034.png)]

各配置文件内容如下:

web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <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:applicationContext.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>
    
    <filter>
        <filter-name>encoding</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>encoding</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

applicationContext.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:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       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">

    <context:component-scan base-package="com.hassder.controller"/>
    <mvc:default-servlet-handler />
    <mvc:annotation-driven />

    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="internalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <property name="suffix" value=".jsp"/>
    </bean>

</beans>

然后测试配置是否正确, 编写AjaxController类, 添加一个请求处理方法, 如果请求能够正确进入, 则说明没有问题

package com.hassder.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController // 返回字符串, 不自动解析
public class AjaxController {

    @RequestMapping("/t")
    public String test(){
        return "hello" ;
    }
}

配置Tomcat:

在这里插入图片描述

启动Tomcat , 尝试能否进入/06/t :

在这里插入图片描述

进入成功, 说明环境配置没有问题

"伪造"Ajax:

我们编写一个text.html页面,如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe测试页面无刷新</title>
    <script>
        function go() {
            const url = document.getElementById("url").value;
            document.getElementById("iframe1").src = url ;
        }
    </script>
</head>
<body>
<div>
    <p>请输入地址: </p>
    <input type="text" id="url" value="请输入一个网址">
    <input type="button" value="提交" onclick="go()">
</div>
<div>
    <iframe  style="width: 100%;height: 500px" id="iframe1"></iframe>
</div>
</body>
</html>

页面效果如下图:

我们实现的效果就是, 当我们在输入框输入一个网址, 点击提交之后, 会自动在下面的iframe框中显示我们输入的网址的内容, 也就是说, 当我们点击了提交之后, 这个页面的内容发生了变化, 但是却没有进行页面刷新的操作

在这里插入图片描述

11.2、真正的Ajax

我们利用Ajax可以做到:

  • 注册时,输入用户名自动检测用户是否已经存在。
  • 登陆时,提示用户名密码错误
  • 删除数据行时,将行ID发送到后台,后台在数据库中删除,数据库删除成功后,在页面DOM中将数据行也删除。
  • …等等

jQuery.ajax

  • 纯JS原生实现的Ajax在这里并没有学习,直接使用jquery提供的,方便学习和使用,避免重复造轮子,有兴趣的话可以自己去了解下JS原生XMLHttpRequest !
  • Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。
  • jQuery 提供多个与 Ajax有关的方法。
  • 通过 jQuery Ajax方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页的被选元素中。
  • jQuery 不是生产者,而是JS的搬运工。
  • jQuery Ajax本质就是 XMLHttpRequest,对他进行了封装,更加方便我们调用!
jQuery.ajax(...)
       部分参数:
              url:请求地址
             type:请求方式,GETPOST1.9.0之后用method)
          headers:请求头
             data:要发送的数据
      contentType:即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
            async:是否异步
          timeout:设置请求超时时间(毫秒)
       beforeSend:发送请求前执行的函数(全局)
         complete:完成之后执行的回调函数(全局)
          success:成功之后执行的回调函数(全局)
            error:失败之后执行的回调函数(全局)
          accepts:通过请求头发送给服务器,告诉服务器当前客户端课接受的数据类型
         dataType:将服务器端返回的数据转换成指定类型
            "xml": 将服务器端返回的内容转换成xml格式
           "text": 将服务器端返回的内容转换成普通文本格式
           "html": 将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含JavaScript标签,则会尝试去执行。
         "script": 尝试将返回值当作JavaScript去执行,然后再将服务器端返回的内容转换成普通文本格式
           "json": 将服务器端返回的内容转换成相应的JavaScript对象
          "jsonp": JSONP 格式使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数

jQuery 下载: https://jquery.com/download/

在这里插入图片描述

一般开发过程中使用我标识的那一种jQuery, 这是完整版的, 查看源码比较方便, 第一个版本是精简版本, 去除了换行 空格等, 所以内存较少,但是对于开发人员来说, 可读性非常差, 而第三种在一般情况下基本不需要使用,

在我们目前使用过程中, 可以直接按以下方式将其添加进去, 但是在实际过程中, 真的可以这样吗?

在这里插入图片描述

然后, 需要在我们想要使用jQuery的地方,将其导入(如果之前没有在xml文件中配置静态资源过滤, 那么此时必须要进行配置了 , 否则无法添加jQuery)

<mvc:default-servlet-handler />

导入jQuery:

<script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>

注意这个script标签不能自闭合, 哪怕中间没有内容也不能自闭合

我们直接在首页index.jsp上进行修改, 如下:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>$Title$</title>

    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>

    <script>
      function a() {
        /*
        $.代表jQuery.
        这个方法表示的是以post方式提交
        提交的请求路径为url
        提交的数据为data {数据名, 数据值 }
        获取到返回数据之后进行的操作为success
        将返回的数据data弹出
        */
        $.post({
          url:"${pageContext.request.contextPath}/a1",
          data:{"name":$("#username").val()},
          success: function (data) {
            alert(data);
          }
        })
      }
    </script>
  </head>
  <body>

    <%--失去焦点的时候, 发起一个请求(携带信息)到后台--%>
    用户名:<input type="text" id="username" οnblur="a()">

  </body>
</html>

这个页面做的就是 当用户输入用户名之后(输入框失焦之后)就获取用户输入的信息, 并将用户输入的信息发送到后台,交给后台处理, 再将后台返回的结果弹出,然后我们进行后台处理代码的编写

@RequestMapping("/a1")
// 使用Model也可以
public void a1(String name , HttpServletResponse response) throws IOException {
    System.out.println("a1:param==>"+name);
    if ("hassder".equals(name)){
        response.getWriter().print("true");
    }else {
        response.getWriter().print("false");
    }
    System.out.println();
}

因为页面中data中的键为name, 所以我在后台方法接收的时候也应该用name作为参数名来接收, 然后判断, 如果用户输入的值是hassder就返回true 否则返回false 启动Tomcat, 测试(如果遇到404等错误, 先检查路径,确认无误后,如果还是不能解决问题, 可以尝试Maven中的clean) xhr:异步的请求

在这里插入图片描述

11.3、Ajax异步加载数据

模拟实际开发过程中我们需要做的事情

首先应该建一个实体类:

User类:

package com.hassder.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

// 添加了lombok 自己在pom.xml中引入
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private String name ;
    private int age ;
    private String sex ;
}

请求:

@RequestMapping("/a2")
public List<User> a2(){
    List<User> userList = new ArrayList<>() ;
    // 添加数据
    // 在实际开发过程中, 数据应该是调用service层逐步从数据库中获取到的
    userList.add(new User("一号",20,"男"));
    userList.add(new User("二号",18,"女"));
    userList.add(new User("三号",24,"男"));
    userList.add(new User("四号",19,"男"));

    return userList ;
}

在实际开发中, 如果需要返回一个List<User>, 应该是调用service层的方法来获取的,service层调用dao层的方法,然后调sql, 最终数据其实是从数据库中获取到的, 但是现在我们并没有建立对应的数据库,也没有service层和dao层, 所以我们直接手动添加数据,来模拟从数据库中获取到的数据

启动Tomcat, 直接访问查看效果:

在这里插入图片描述

直接/a2的方式,就是我们往常使用的,直接跳转了,那么我们要如何在一个页面中做到异步(页面不刷新)的显示呢, 比如说有一个显示全部use的按钮,点击了之后就会显示出所有的user, 但是在这个过程中并没有发生页面的跳转,刷新之类的操作

写出页面:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
    <script>
        $(function (){
            $("#btn").click(function (){
                /*
                $.post(url,param[可以省略],success)
                这是另一种写法,之前在index.jsp页面使用的写法也是可以的:
                $.post({
                  url:"这里删掉了/a1",
                  data:{"name":$("#username").val()},
                  success: function (data) {
                    alert(data);
                  }
                })
                */
                $.post("${pageContext.request.contextPath}/a2",function (data){

                    /*对数据进行操作*/
                    /*定义一个变量 html 拼接字符串
                    * let 是es6之后才有的 如果js版本低于es6,则全部为var
                     */
                    let html = "";
                    /*通过for循环来拼接, 有几个对象(几行数据)就拼接几次*/
                    for (let i = 0; i < data.length; i++) {
                        /*每一次for循环增加一行数据*/
                        html += "<tr>"+
                            "<td>"+data[i].name+"</td>"+
                            "<td>"+data[i].age+"</td>"+
                            "<td>"+data[i].sex+"</td>"+
                            "</tr>" ;
                    }
                    /*for循环结束(拼接完成)后, 通过.html()将其添加到id="content"的标签中去
                    * 添加有两种方式:.html()和.text(),在学习前端的时候应该学过了
                    * 在这里也是两种方式
                    * .html()添加进去的东西, 会被当成html页面元素(标签什么的)来解析展示
                    * .text()就是不管里面有没有标签,都是当成文本内容添加进去
                    * */
                    $("#content").html(html) ;
                })
            })
        });

    </script>
</head>
<body>
<input type="button" value="加载数据" id="btn">
<table>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tbody id="content">

    </tbody>
</table>

</body>
</html>

js很重要!

我们创建了一个表格, 除了表头之外,都为空, 然后为按钮添加了一个点击事件, 点击事件完成的工作就是:

点击按钮之后,就会向后台请求数据,然后将返回的数据进行解析,拼接, 拼接完成后再添加到表格中去,从而将数据展示出来, 达到不刷新页面就能完成请求展示数据的效果, 由于前端界面不是重点, 所以也没有进行美化, 重点在于异步加载数据

启动Tomcat. 测试:

在这里插入图片描述

11.4、Ajax验证用户名

前端页面:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>登录页面</title>
    <style type="text/css">
        * {
            margin: 0 ;
            padding: 0;
        }
        div {
            width: 200px;
            height: auto;
            background-color: aqua;
        }
        .center-in-center {
            position: absolute;
            top: 40%;
            left: 40%;
        }
        .sub {
            margin-left: 80px;
            width: 40px;
        }

    </style>

    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
    <script>
        $(function (){
            $("#userId").blur(function (){

                let st = "";
                $.post("${pageContext.request.contextPath}/a3",{"userId":$("#userId").val()},function (str){

                    if (str == "isNull"){
                        st = "用户名不可以为空" ;
                    }else if (str == "false"){
                        st = "您输入的用户名有误" ;
                    }
                    $("#span1").text(st) ;
                })
            })
            $("#uPwd").blur(function (){

                let st = "";
                $.post("${pageContext.request.contextPath}/a4",{"uPwd":$("#uPwd").val()},function (str){

                    if (str == "isNull"){
                        st = "密码不可以为空" ;
                    }else if (str == "false"){
                        st = "您输入的密码有误" ;
                    }
                    $("#span2").text(st) ;
                })
            })
        })
    </script>
</head>

<body>
<div class="center-in-center">
    账号:<input type="text" id="userId">
    <span id="span1" style="color: red ; font-weight: bold"></span>
    <br>
    密码:<input type="password" id="uPwd">
    <span id="span2" style="color: red ; font-weight: bold"></span>
    <br>
    <input type="submit" value="登录" class="sub" >
</div>
</body>
</html>

请求处理:

@RequestMapping("/a3")
public String a3(String userId){
    // 正常应该是从数据库查询到的数据
    List<Login> loginList = new ArrayList<>() ;
    loginList.add(new Login("1","111111"));
    loginList.add(new Login("2","222222"));
    loginList.add(new Login("3","333333"));
    loginList.add(new Login("4","444444"));
    loginList.add(new Login("5","555555"));
    loginList.add(new Login("6","666666"));
    String str = "isNull" ;
    for (int i = 0; i < loginList.size(); i++) {
        if (userId != ""){
            if (userId.equals(loginList.get(i).getUserId())){
                str = "true" ;
            }else {
                str = "false" ;
            }
        }
    }
    return str ;
}

@RequestMapping("/a4")
public String a4(String uPwd){
    // 正常应该是从数据库查询到的数据
    List<Login> loginList = new ArrayList<>() ;
    loginList.add(new Login("1","111111"));
    loginList.add(new Login("2","222222"));
    loginList.add(new Login("3","333333"));
    loginList.add(new Login("4","444444"));
    loginList.add(new Login("5","555555"));
    loginList.add(new Login("6","666666"));
    String str = "isNull" ;
    for (int i = 0; i < loginList.size(); i++) {
        if (uPwd != ""){
            if (uPwd.equals(loginList.get(i).getUPwd())){
                str = "true" ;
            }else {
                str = "false" ;
            }
        }
    }
    return str ;
}

我这里是单独使用了两个请求和两个处理方法, 实际上,两个共用一个请求和处理方法也可以实现, 在一个处理方法中同时接收用户名和密码, 但是前端传入的时候只传入一个, 这样就会导致另一个值为null, 然后在判断返回值的时候,先加上一层判断, 不为空的时候才进行选择, 如下图所示:

在这里插入图片描述

判断用户名(id)与pwd都使用同一个请求, 当我们传入用户名的时候, pwd为null 返回值就是对name的判断, 当我们传入pwd的时候, name为null, 返回值就是对pwd的判断

12、拦截器

概述

SpringMVC的处理器拦截器类似于Servlet开发中的过滤器Filter,用于对处理器进行预处理和后处理。开发者可以自己定义一些拦截器来实现特定的功能。

**过滤器与拦截器的区别:**拦截器是AOP思想的具体应用。

过滤器

  • servlet规范中的一部分,任何java web工程都可以使用
  • 在url-pattern中配置了/*之后,可以对所有要访问的资源进行拦截

拦截器

  • 拦截器是SpringMVC框架自己的,只有使用了SpringMVC框架的工程才能使用
  • 拦截器只会拦截访问的控制器方法, 如果访问的是jsp/html/css/image/js是不会进行拦截的

12.1、自定义拦截器

想要自定义拦截器, 就必须实现HandlerInterceptor接口

新建一个Module: springmvc-07-intercepter, 添加web支持, 配置web.xml文件.applicationContext.xml文件等(参考其它module)

创建完毕后进行测试:

package com.hassder.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class TestController {

    @GetMapping("/t")
    public String test(){
        System.out.println("TestController==> test()执行了");
        return "没问题" ;
    }
}

启动Tomcat, 测试:

在这里插入图片描述

自定义一个拦截器, 实现HandlerInterceptor接口:

package com.hassder.config;

import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

// 需要在xml中配置
public class MyInterceptor implements HandlerInterceptor {

    @Override
    // return true; 执行下一个拦截器, 这一个通过 放行
    // return false; 不执行下一个拦截器
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        System.out.println("==================处理前=================");
        return true;
    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
        System.out.println("==================处理后=================");
    }

    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
        System.out.println("==================清理=================");
    }
}

这只是一个名义上的拦截器, 并没有执行任何实际上的拦截操作, 他是对所有请求都放行的

进行配置:

applicationContext.xml:

<!--拦截器配置-->
<mvc:interceptors>
    <mvc:interceptor>
        <!--/** 表示这个请求下面的所有请求-->
        <mvc:mapping path="/**"/>
        <bean class="com.hassder.config.MyInterceptor"/>
    </mvc:interceptor>
</mvc:interceptors>

重新启动Tomcat, 重新请求/t ,测试:

在这里插入图片描述

不知道大家看到这个输出结果有没有想到什么, 我们并没有改变之前的代码, 只是添加了一个拦截器类,和一段配置文件, 这样的输出结果

在方法执行之前执行, 在方法执行之后执行,还有最后执行, 让我想到的AOP, 横切, 只有preHandle()方法是在test()方法执行之前执行的, 所以 拦截的功能应该就写在preHandle()方法里, 因为肯定要在执行之前就拦截啊, 如果方法都执行完了,那还拦截什么呢, 后面的两个方法可以用来添加拦截日志, 所以,在我们这个地方, 只需要preHandle()方法就够用了

修改拦截器:

package com.hassder.config;

import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

// 需要在xml中配置
public class MyInterceptor implements HandlerInterceptor {

    @Override
    // return true; 执行下一个拦截器, 这一个通过 放行
    // return false; 不执行下一个拦截器
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        System.out.println("==================处理前=================");
        return false;
    }

}

我们去掉了两个暂时用不上的方法, 并且把return值改为了false, 其它不变, 再次重启Tomcat, 尝试访问/t :

在这里插入图片描述

在这里插入图片描述

可以看到我们进行了请求, 却没有任何结果, 控制台也没有输出请求方法里的内容, 说明并没有执行请求方法,这就是因为返回值改成了false, 将return改回true.

12.2、登录判断验证

使用拦截器做一个登录验证判断

  1. 有一个登陆页面,需要写一个controller访问页面。
  2. 登陆页面有一提交表单的动作。需要在controller中处理。判断用户名密码是否正确。如果正确,向session中写入用户信息。返回登陆成功。
  3. 拦截用户请求,判断用户是否登陆。如果用户已经登陆。放行, 如果用户未登陆,跳转到登陆页面

前端页面:

首页:index.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>$Title$</title>
  </head>
  <body>
  <h1><a href="${pageContext.request.contextPath}/user/goLogin">登录</a> </h1>
  <h1><a href="${pageContext.request.contextPath}/user/goMain">主页</a> </h1>
  </body>
</html>

登录页面:login.xml:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>登录</title>
</head>
<body>

<%--在web-inf下的所有页面和资源,只能通过controller,或者servlet进行访问--%>

<h1>登陆页面</h1>
<form action="${pageContext.request.contextPath}/user/login" method="post">
    用户名:    <input type="text" name="username">
    密码:     <input type="password" name="password">
    <input type="submit" value="登录">
</form>
</body>
</html>

主页main.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>main</title>
</head>
<body>
<h1>主页</h1>
<span>${username}</span>
<p>
    <a href="${pageContext.request.contextPath}/user/goOut" >注销</a>
</p>
</body>
</html>

LoginController类:

package com.hassder.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpSession;

@Controller
@RequestMapping("/user")
public class LoginController {

    @RequestMapping("/goMain")
    public String goMain(){
        return "main" ;
    }

    @RequestMapping("/goLogin")
    public String goLogin(){
        return "login" ;
    }

    @RequestMapping("/login")
    public String login(HttpSession session , String username , String password , Model model){

        model.addAttribute("username" , username) ;
        // 把用户的信息存在session中
        session.setAttribute("userLoginInfo",username);
        return "main" ;
    }

    @RequestMapping("/goOut")
    public String goOut(HttpSession session){

        session.removeAttribute("userLoginInfo");

        return "main" ;
    }

}

拦截器:

package com.hassder.config;

import org.springframework.web.servlet.HandlerInterceptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

public class LoginInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

        HttpSession session = request.getSession();

        if (session.getAttribute("userLoginInfo") != null){
            // 如果session中的userLoginInfo不为null 说明是登录的, 可以放行, 返回true
            return true;
        }

        if (request.getRequestURI().contains("goLogin")){
            // 如果是去往登录页面的, 也要放行
            return true ;
        }

        if (request.getRequestURI().contains("login")){
            // 向login的请求也要放行(说明正在登录)
            return true ;
        }

        // 其它情况下,说明没有登录, 不允许进入主页及主页往后的页面, 返回false
        request.getRequestDispatcher("/WEB-INF/jsp/login.jsp").forward(request,response);
        return false;
    }
}

拦截器配置:

<mvc:interceptor>
    <!--/** 表示这个请求下面的所有请求-->
    <mvc:mapping path="/user/**"/>
    <bean class="com.hassder.config.LoginInterceptor"/>
</mvc:interceptor>

13、文件上传与下载

概述

文件上传是项目开发中最常见的功能之一 ,springMVC 可以很好的支持文件上传,但是SpringMVC上下文中默认没有装配MultipartResolver,因此默认情况下其不能处理文件上传工作。如果想使用Spring的文件上传功能,则需要在上下文中配置MultipartResolver。

前端表单要求:为了能上传文件,必须将表单的method设置为POST,并将enctype设置为multipart/form-data。只有在这样的情况下,浏览器才会把用户选择的文件以二进制数据发送给服务器;

对表单中的 enctype 属性做个详细的说明:

  • application/x-www=form-urlencoded:默认方式,只处理表单域中的 value 属性值,采用这种编码方式的表单会将表单域中的值处理成 URL 编码方式。
  • multipart/form-data:这种编码方式会以二进制流的方式来处理表单数据,这种编码方式会把文件域指定文件的内容也封装到请求参数中,不会对字符编码。
  • text/plain:除了把空格转换为 “+” 号外,其他字符都不做编码处理,这种方式适用直接通过表单发送邮件。
<form action="" enctype="multipart/form-data" method="post">
    <input type="file" name="file"/>
    <input type="submit">
</form>

一旦设置了enctype为multipart/form-data,浏览器即会采用二进制流的方式来处理表单数据,而对于文件上传的处理则涉及在服务器端解析原始的HTTP响应。在2003年,Apache Software Foundation发布了开源的Commons FileUpload组件,其很快成为Servlet/JSP程序员上传文件的最佳选择。

  • Servlet3.0规范已经提供方法来处理文件上传,但这种上传需要在Servlet中完成。
  • 而Spring MVC则提供了更简单的封装。
  • Spring MVC为文件上传提供了直接的支持,这种支持是用即插即用的MultipartResolver实现的。
  • Spring MVC使用Apache Commons FileUpload技术实现了一个MultipartResolver实现类:CommonsMultipartResolver。因此,SpringMVC的文件上传还需要依赖Apache Commons FileUpload的组件。

13.1、准备工作

新建一个Module:springmvc-08-file , 添加web支持,配置文件web.xml ,applicationContext.xml等

在pom.xml中导入相应的jar包:

<!--文件上传-->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.3</version>
</dependency>
<!--servlet-api导入高版本的-->
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>javax.servlet-api</artifactId>
    <version>4.0.1</version>
</dependency>

在applicationContext.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:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       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">

    <context:component-scan base-package="com.hassder.controller"/>
    <!--静态资源过滤-->
    <mvc:default-servlet-handler />
    <mvc:annotation-driven />

    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
          id="internalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <property name="suffix" value=".jsp"/>
    </bean>

    <mvc:annotation-driven>
        <mvc:message-converters register-defaults="true">
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                <constructor-arg value="UTF-8"/>
            </bean>
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                <property name="objectMapper">
                    <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
                        <property name="failOnEmptyBeans" value="false"/>
                    </bean>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>

    <!--文件上传配置-->
    <!--这个id不能改-->
    <bean id="multipartResolver"  class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- 请求的编码格式,必须和jSP的pageEncoding属性一致,以便正确读取表单的内容,默认为ISO-8859-1 -->
        <property name="defaultEncoding" value="utf-8"/>
        <!-- 上传文件大小上限,单位为字节(10485760=10M) -->
        <property name="maxUploadSize" value="10485760"/>
        <property name="maxInMemorySize" value="40960"/>
    </bean>
</beans>

前端页面index.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>$Title$</title>
  </head>
  <body>
    <form action="${pageContext.request.contextPath}/upload" enctype="multipart/form-data" method="post">
      <input type="file" name="file"/>
      <input type="submit" value="upload">
      <a href="${pageContext.request.contextPath}/download">点击下载</a>
    </form>

  </body>
</html>

Controller类:

package com.hassder.controller;


import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.commons.CommonsMultipartFile;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.net.URLEncoder;

@Controller
public class FileController {

    //@RequestParam("file") 将name=file控件得到的文件封装成CommonsMultipartFile 对象
    //批量上传CommonsMultipartFile则为数组即可
    // 上传方式1
    @RequestMapping("/upload")
    public String fileUpload(@RequestParam("file") CommonsMultipartFile file , HttpServletRequest request) throws IOException {

        //获取文件名 : file.getOriginalFilename();
        String uploadFileName = file.getOriginalFilename();

        //如果文件名为空,直接回到首页!
        if ("".equals(uploadFileName)){
            return "redirect:/index.jsp";
        }
        System.out.println("上传文件名 : "+uploadFileName);

        //上传路径保存设置
        String path = request.getServletContext().getRealPath("/upload");
        //如果路径不存在,创建一个
        File realPath = new File(path);
        if (!realPath.exists()){
            realPath.mkdir();
        }
        System.out.println("上传文件保存地址:"+realPath);

        InputStream is = file.getInputStream(); //文件输入流
        OutputStream os = new FileOutputStream(new File(realPath,uploadFileName)); //文件输出流

        //读取写出
        int len=0;
        byte[] buffer = new byte[1024];
        while ((len=is.read(buffer))!=-1){
            os.write(buffer,0,len);
            os.flush();
        }
        os.close();
        is.close();
        return "redirect:/index.jsp";
    }

    /*
     * 采用file.Transto 来保存上传的文件
     */
    // 上传方式2
    @RequestMapping("/upload2")
    public String  fileUpload2(@RequestParam("file") CommonsMultipartFile file, HttpServletRequest request) throws IOException {

        //上传路径保存设置
        String path = request.getServletContext().getRealPath("/upload");
        File realPath = new File(path);
        if (!realPath.exists()){
            realPath.mkdir();
        }
        //上传文件地址
        System.out.println("上传文件保存地址:"+realPath);

        //通过CommonsMultipartFile的方法直接写文件(注意这个时候)
        file.transferTo(new File(realPath +"/"+ file.getOriginalFilename()));

        return "redirect:/index.jsp";
    }

    // 下载方式
    @RequestMapping(value="/download")
    public String downloads(HttpServletResponse response , HttpServletRequest request) throws Exception{
        //要下载的图片地址
        System.out.println("0000000");
        String  path = request.getServletContext().getRealPath("/upload");
        String  fileName = "基础语法.png";

        //1、设置response 响应头
        response.reset(); //设置页面不缓存,清空buffer
        response.setCharacterEncoding("UTF-8"); //字符编码
        response.setContentType("multipart/form-data"); //二进制传输数据
        //设置响应头
        response.setHeader("Content-Disposition",
                "attachment;fileName="+ URLEncoder.encode(fileName, "UTF-8"));

        File file = new File(path,fileName);
        //2、 读取文件--输入流
        InputStream input=new FileInputStream(file);
        //3、 写出文件--输出流
        OutputStream out = response.getOutputStream();

        byte[] buff =new byte[1024];
        int index=0;
        //4、执行 写出操作
        while((index= input.read(buff))!= -1){
            out.write(buff, 0, index);
            out.flush();
        }
        out.close();
        input.close();
        return null;
    }

}

注意: 上传的文件在out文件下的相应路径下, 尝试下载时, 将要下载的文件放在同目录下, 然后彻底重启Tomcat即可

END

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值