一、SpringMVC 基本概述1.1 三层架构和MVC1.1.1 三层架构三层架构是软件设计中经典的分层架构模式其核心思想是将应用程序划分为三个职责明确的逻辑层次实现 高内聚低耦合 的设计目标。表现层Presentation Layer直接与用户交互负责接收用户输入并展示处理结果主要功能请求接收、参数验证、响应处理、页面渲染技术实现Servlet、html/vue、Spring MVC 等业务逻辑层Business Logic Layer核心业务处理中心实现业务规则和流程主要功能业务逻辑处理、事务管理、权限控制、数据校验技术实现纯 Java 类、Spring Bean 等数据访问层Data Access Layer负责与数据源交互执行数据的 CRUD 操作主要功能数据库连接管理、SQL 执行、结果映射技术实现JDBC、MyBatis、Hibernate 等三层架构的调用关系是表现层调用业务逻辑层业务逻辑层调用数据访问层各层之间通过接口交互降低了系统的耦合度便于维护和扩展。1.1.2 MVC模型MVC 全名是 Model View Controller是模型(model)视图(view)控制器(controller)的缩写是一种用于设计创建 Web 应用程序表现层的模式。MVC 中每个部分各司其职Model模型通常指的就是我们的数据模型。作用一般情况下用于封装数据。View视图通常指的就是我们的 jsp 或者 html。作用一般就是展示数据的。通常视图是依据模型数据创建的。Controller控制器是应用程序中处理用户交互的部分。作用一般就是处理程序逻辑的。它相对于前两个不是很好理解这里举个例子例如我们要保存一个用户的信息该用户信息中包含了姓名性别年龄等等。这时候表单输入要求年龄必须是 1~100 之间的整数。姓名和性别不能为空。并且把数据填充到模型之中。此时除了 js 的校验之外服务器端也应该有数据准确性的校验那么校验就是控制器的该做的。当校验失败后由控制器负责把错误页面展示给使用者。如果校验成功也是控制器负责把数据填充到模型并且调用业务层实现完整的业务需求。1.2 SpringMVC 概述Spring MVC 是 Spring 框架的 Web 模块基于 MVCModel-View-Controller设计模式用于构建灵活、松耦合的 Web 应用程序。核心特点基于组件的轻量级框架易于集成和扩展强大的 URL 映射和参数绑定机制支持多种视图技术JSP、Thymeleaf、FreeMarker 等与 Spring 框架无缝集成便于使用 Spring 的其他功能支持 RESTful 风格的 URL 设计提供拦截器机制可实现权限控制、日志记录等横切功能支持国际化、数据验证、文件上传等 Web 开发常见需求1.3 SpringMVC在三层架构中的位置Spring MVC 属于三层架构中的表现层是用户请求进入应用系统的入口点主要负责客户端 → Spring MVC表现层 → 业务逻辑层 → 数据访问层 → 数据库Spring MVC 在三层架构中的具体职责接收客户端发送的 HTTP 请求解析请求参数并进行验证根据请求信息调用相应的业务逻辑层方法接收业务逻辑层返回的数据将数据封装并以合适的格式HTML、JSON 等响应给客户端1.4 Spring MVC 执行原理Spring MVC的执行流程大致如下1. 用户发送请求至前端控制器DispatcherServlet。2. DispatcherServlet收到请求调用HandlerMapping处理器映射器。3. 处理器映射器找到具体的处理器(可以根据xml配置、注解进行查找)生成处理器对象及处理器拦截器(如果有则生成)一并返回给DispatcherServlet。4. DispatcherServlet调用HandlerAdapter处理器适配器。5. HandlerAdapter经过适配调用具体的处理器(Controller也叫后端控制器)。6. Controller执行完成返回ModelAndView。7. HandlerAdapter将controller执行结果ModelAndView返回给DispatcherServlet。8. DispatcherServlet将ModelAndView传给ViewReslover视图解析器。9. ViewReslover解析后返回具体View。10. DispatcherServlet根据View进行渲染视图即将模型数据填充至视图中。DispatcherServlet响应用户。1.5 SpringMVC 常用组件1. 前端控制器DispatcherServlet用户请求到达前端控制器它就相当于 MVC 模式中的 C(controller)DispatcherServlet 是整个流程控制的中心由它调用其它组件处理用户的请求DispatcherServlet 的存在降低了组件之间的耦合性。DispatcherServlet本质上就是servlet。2. 处理器映射器HandlerMappingHandlerMapping 负责根据用户请求找到 Handler 即处理器SpringMVC 提供了不同的映射器实现不同的映射方式例如配置文件方式实现接口方式注解方式等。3. 处理器适配器HandlerAdapter通过 HandlerAdapter 对处理器进行执行这是适配器模式的应用通过扩展适配器可以对更多类型的处理器进行执行。4. 处理器Handler 【自定义的类似于servlet】它就是我们开发中要编写的具体业务控制器。由 DispatcherServlet 把用户请求转发到 Handler。由Handler 对具体的用户请求进行处理。5. 视图解析器View ResolverView Resolver 负责将处理结果生成 View 视图View Resolver 首先根据逻辑视图名解析成物理视图名即具体的页面地址再生成 View 视图对象最后对 View 进行渲染将处理结果通过页面展示给用户。6. ModelAndView封装处理结果Model和视图信息View的对象Model存储处理后的数据View指定要渲染的视图名称7. 视图ViewSpringMVC 框架提供了很多的 View 视图类型的支持包括jstlView、freemarkerView、pdfView等。最常用的视图就是 jsp。一般情况下需要通过页面标签或页面模版技术将模型数据通过页面展示给用户需要由程序员根据业务需求开发具体的页面总结 SpringMVC是一个基于组件开发的框架一个中心三个基本点SpringMVC提供的不需要用户开发。一个中心 前端控制器 DispatcherServlet三个基本点• 处理器映射器• 处理器适配器• 视图解析器mvc:annotation-driven标签说明在 SpringMVC 的各个组件中处理器映射器、处理器适配器、视图解析器称为 SpringMVC 的三大组件。使用 mvc:annotation-driven 自动加载 RequestMappingHandlerMapping处理映射器和RequestMappingHandlerAdapter 处 理 适 配 器 可 用 在 SpringMVC.xml 配 置 文 件 中 使 用mvc:annotation-driven替代处理映射器和适配器的配置一般开发中都需要该标签。注意我们只需要编写处理具体业务的控制器以及视图。二、RequestMapping 注解RequestMapping 它是Spring MVC 中用于映射请求的核心注解是对你请求的虚拟地址映射到某个方法上。作用用于建立请求 URL 和处理请求方法之间的对应关系位置类上请求URL 的第一级访问目录。此处不写的话就相当于应用的根目录方法上请求 URL 的第二级访问目录与类上的使用ReqquestMapping标注的一级目录一起组成访问虚拟路径基本用法:常用属性:1.value/path指定请求的 URL 路径java运行RequestMapping(value /detail)// 或RequestMapping(path /detail)简化注解GetMapping处理 GET 请求PostMapping处理 POST 请求PutMapping处理 PUT 请求DeleteMapping处理 DELETE 请求2.method指定请求的 HTTP 方法java运行RequestMapping(value /save, method RequestMethod.POST)//简化PostMapping(/save3.params指定请求必须包含的参数RequestMapping(value /search, params name)RequestMapping(value /search, params {name, age!18})4.headers指定请求必须包含的请求头RequestMapping(value /info, headers Acceptapplication/json)5.produces指定响应的文本格式和编码RequestMapping(value /data, produces application/json;charsetUTF-8)三、Spring MVC 基于 Vue3 前后端分离案例说明:本案例实现一个简单的用户列表展示功能后端使用纯 Spring MVC 框架提供用户数据查询接口前端使用 Vue3 发送异步请求获取数据并展示跨域处理通过前端代理方式/后端过滤器方式解决跨域问题记住既然涉及到服务器了我们在创建项目的时候就需要创建maven的web项目允许后端需要部署在服务器上去运行。注意问题tomcat和servletApi的兼容问题tomcat9及以下兼容的是javax包下的相关servlet的APItomcat10及以上兼容的是jakarta下的servlet的API同时jackson版本也提升同时因为Spring 6.x与Jakarta EE兼容而我们现在使用的是spring5.x,tomcat10因此两种版本最好的就是降低tomcat版本因此我们要么降tomcat版本但是依赖servlet-api否则依赖jakarta.servlet-apiweb.xml文件命名空间和约束也需要提升:3.1 后端实现3.1.1 Maven 依赖配置pom.xmlSpring MVC项目的Maven依赖配置project xmlnshttp://maven.apache.org/POM/4.0.0 xmlns:xsihttp://www.w3.org/2001/XMLSchema-instance xsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd modelVersion4.0.0/modelVersion groupIdcom.sy/groupId artifactIdday11_springmvc/artifactId packagingwar/packaging version1.0-SNAPSHOT/version properties spring.version5.3.20/spring.version jackson.version2.13.3/jackson.version servlet-api.version3.1.0/servlet-api.version /properties dependencies !-- Spring Core -- dependency groupIdorg.springframework/groupId artifactIdspring-core/artifactId version${spring.version}/version /dependency !-- Spring Web -- dependency groupIdorg.springframework/groupId artifactIdspring-web/artifactId version${spring.version}/version /dependency !-- Spring MVC -- dependency groupIdorg.springframework/groupId artifactIdspring-webmvc/artifactId version${spring.version}/version /dependency !-- Servlet API -- dependency groupIdjavax.servlet/groupId artifactIdjavax.servlet-api/artifactId version${servlet-api.version}/version scopeprovided/scope /dependency !-- Jackson (JSON处理) -- dependency groupIdcom.fasterxml.jackson.core/groupId artifactIdjackson-databind/artifactId version${jackson.version}/version /dependency !-- Lombok -- dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId version1.18.24/version scopeprovided/scope /dependency /dependencies build plugins plugin groupIdorg.apache.maven.plugins/groupId artifactIdmaven-compiler-plugin/artifactId version3.8.1/version configuration source11/source target11/target /configuration /plugin /plugins /build /project3.1.2 Web 配置web.xmlSpring MVC的Web配置信息3.1.3 Spring MVC 配置springmvc.xmlSpring MVC核心配置springmvc.xml3.1.4 实体类User.java3.1.5 控制器UserController.java3.2 前端实现Vue33.2.1 项目创建与依赖安装3.2.2 创建用户列表组件在src下创建User.vue组件templatediv classuser-list-containerh2用户列表/h2!-- 用户表格 --table classuser-tabletheadtrthID/thth姓名/thth年龄/thth邮箱/th/tr/theadtbodytr classuser-rowtd1/tdtd柳岩/tdtd18/tdtdliuyan126.com/td/tr/tbody/table!-- 无数据提示 --div v-ifusers.length 0 classno-data暂无用户数据/div/div/templatescript setup/scriptstyle scoped.user-list-container {max-width: 1000px;margin: 2rem auto;padding: 0 1rem;font-family: Arial, sans-serif;}h2 {color: #333;text-align: center;margin-bottom: 1rem;}.refresh-btn {padding: 0.5rem 1rem;background-color: #007bff;color: white;border: none;border-radius: 4px;cursor: pointer;margin-bottom: 1rem;transition: background-color 0.3s;}.refresh-btn:hover {background-color: #0056b3;}.loading, .no-data {text-align: center;padding: 2rem;color: #666;}.error-message {text-align: center;padding: 1rem;color: #dc3545;background-color: #f8d7da;border-radius: 4px;margin: 1rem 0;}.user-table {width: 100%;border-collapse: collapse;box-shadow: 0 2px 4px rgba(0,0,0,0.1);}.user-table th,.user-table td {padding: 0.8rem 1rem;text-align: left;border-bottom: 1px solid #eee;}.user-table th {background-color: #f8f9fa;font-weight: bold;color: #444;}.user-row:hover {background-color: #f8f9fa;}/style3.2.3 配置路由3.2.4 入口组件向服务端发送异步请求功能实现:3.2.5 优化Axios异步请求创建 Axios 工具类在src下创建api目录 axiosinstance.js创建 request.js 文件在api下创建api目录 request.js修改 User.vue 组件3.3 运行项目1.部署后端启动idea服务器2.启动前端bashnpm run dev前端应用默认运行在http://localhost:5173/3.访问应用:打开浏览器访问 http://localhost:8080/day11_springmvc/user/findAllUsers即可看到从后端获取的用户列表数据但是我们发现不能成功获取数据甚至报错3.4 跨域解决方案之前我们讲过前端的解决方案今天我们来讲解一下后端的解决方案我们需要编写一个过滤器放行所有的消息头请求基本就可以解决package com.sy.filter; import javax.servlet.*; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; /** * 自定义跨域过滤器处理前后端跨域问题 */ public class CorsFilter implements Filter { Override public void init(FilterConfig filterConfig) throws ServletException { // 初始化操作可留空 } Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { // 转换为HTTP请求和响应对象 HttpServletRequest httpRequest (HttpServletRequest) request; HttpServletResponse httpResponse (HttpServletResponse) response; // 设置允许跨域的源地址*表示允许所有源 httpResponse.setHeader(Access-Control-Allow-Origin, *); // 设置允许的请求方法 httpResponse.setHeader(Access-Control-Allow-Methods, GET, POST, PUT, DELETE, OPTIONS); // 设置允许的请求头 httpResponse.setHeader(Access-Control-Allow-Headers, Content-Type, X-Requested-With, accept, origin, Access-Control-Request-Method, Access-Control-Request-Headers); // 设置预检请求的缓存时间秒 httpResponse.setHeader(Access-Control-Max-Age, 3600); // 允许携带Cookie httpResponse.setHeader(Access-Control-Allow-Credentials, true); // 如果是OPTIONS请求直接返回200 if (OPTIONS.equalsIgnoreCase(httpRequest.getMethod())) { httpResponse.setStatus(HttpServletResponse.SC_OK); return; } // 继续处理请求 chain.doFilter(request, response); } Override public void destroy() { // 销毁操作可留空 } }Access-Control-Allow-Origin: *允许所有源访问当前资源生产环境中可指定具体域名Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS允许的 HTTP 请求方法Access-Control-Allow-Headers允许的请求头Access-Control-Max-Age: 3600预检请求OPTIONS的缓存时间减少重复预检特殊处理 OPTIONS 请求:对于预检请求直接返回 200不需要继续处理这种后端解决跨域的方式适用于生产环境配置一次即可全局生效无需前端额外处理。同时需要在服务器加载的时候读取到在web.xml添加或者添加注解加载或者: