Spring MVC 核心知识点学习笔记

Spring MVC 核心知识点学习笔记学习日期2026.03.19核心内容Spring MVC概述 RequestMapping注解 Vue3前后端分离案例 请求参数绑定一、Spring MVC 基本概述1. 核心定义Spring MVC是Spring框架的Web层核心组件基于MVCModel-View-Controller设计模式用于快速开发Java Web应用核心目标是解耦请求处理流程简化接口开发、参数接收、响应返回等操作。2. 核心作用接收前端HTTP请求映射到指定方法Controller自动完成请求参数与Java对象的绑定处理响应返回页面/JSON数据集成Spring容器支持依赖注入、AOP等特性。3. 最简执行流程新手必记前端请求 → DispatcherServlet前端控制器→ HandlerMapping映射处理器→ Controller业务处理→ ModelAndView/JSON → DispatcherServlet → 前端响应二、核心注解RequestMapping1. 核心作用标注在类/方法上用于映射HTTP请求路径指定哪个请求由哪个方法处理。2. 常用属性重点属性作用示例value/path指定请求路径核心RequestMapping(“/user/list”)method指定请求方式GET/POST等method RequestMethod.GETparams限制请求必须包含指定参数params “id!1”produces指定响应数据格式如JSONproduces “application/json”3. 代码示例// 类级别统一前缀ControllerRequestMapping(/user)// 所有方法的路径前缀为 /userResponseBody// 全局返回JSON前后端分离必加publicclassUserController{// 方法级别具体路径 指定请求方式RequestMapping(value/get,methodRequestMethod.GET)publicUsergetUserById(Integerid){// 模拟查询用户UserusernewUser();user.setId(id);user.setName(张三);returnuser;// 自动转为JSON返回}// 简化注解Spring4.3GetMapping RequestMapping(methodGET)GetMapping(/list)publicListUsergetUserList(){returnArrays.asList(newUser(1,张三),newUser(2,李四));}}4. 简化注解高频使用GetMapping→ GET请求查询PostMapping→ POST请求新增PutMapping→ PUT请求修改DeleteMapping→ DELETE请求删除三、Spring MVC Vue3 前后端分离案例核心目标后端提供JSON接口Vue3前端调用接口并渲染数据跨域问题是重点。步骤1后端Spring MVC准备1. 关键配置解决跨域// 跨域配置类前后端分离必加ConfigurationpublicclassCorsConfigimplementsWebMvcConfigurer{OverridepublicvoidaddCorsMappings(CorsRegistryregistry){registry.addMapping(/**)// 所有接口允许跨域.allowedOriginPatterns(*)// 允许所有域名生产环境指定具体域名.allowedMethods(GET,POST,PUT,DELETE)// 允许的请求方式.allowCredentials(true)// 允许携带Cookie.maxAge(3600);// 预检请求有效期秒}}2. 编写JSON接口RestController// Controller ResponseBodyRequestMapping(/api)publicclassApiController{// 提供给Vue3的查询接口GetMapping(/goods)publicListGoodsgetGoodsList(){// 模拟商品数据ListGoodsgoodsListnewArrayList();goodsList.add(newGoods(1,手机,2999.0));goodsList.add(newGoods(2,电脑,5999.0));returngoodsList;}}步骤2Vue3前端调用1. 安装Axios请求工具npminstallaxios--save2. 编写Vue组件调用后端接口template div h2商品列表/h2 ul li v-foritem in goodsList :keyitem.id {{ item.name }} - {{ item.price }}元 /li /ul /div /template script setup import { ref, onMounted } from vue; import axios from axios; // 定义响应式数据 const goodsList ref([]); // 页面加载后调用后端接口 onMounted(async () { try { // 调用Spring MVC接口替换为你的后端地址 const res await axios.get(http://localhost:8080/api/goods); goodsList.value res.data; // 接收后端JSON数据 } catch (error) { console.log(请求失败, error); } }); /script关键注意事项后端端口确保Tomcat端口默认8080未被占用跨域配置必须加CorsConfig否则Vue请求会被浏览器拦截数据格式后端返回JSON前端直接接收即可Axios自动解析。四、Spring MVC 请求参数绑定核心规则Spring MVC会自动将HTTP请求参数与方法参数绑定底层通过HandlerAdapter实现支持多种参数类型。场景1基本类型参数String/Integer等// 请求示例/api/getUser?id1name张三GetMapping(/getUser)publicUsergetUser(Integerid,Stringname){// id自动绑定请求参数idname绑定nameUserusernewUser();user.setId(id);user.setName(name);returnuser;}场景2实体类参数对象绑定// 实体类publicclassUser{privateIntegerid;privateStringname;privateIntegerage;// 必须有无参构造器 getter/setter否则绑定失败}// 请求示例/api/addUser?id2name李四age20PostMapping(/addUser)publicStringaddUser(Useruser){// user对象的属性自动绑定请求参数return新增用户user.getName();}场景3JSON格式参数前后端分离核心// 请求示例POST /api/updateUser请求体为JSON{id:1,name:张三,age:21}PostMapping(/updateUser)publicStringupdateUser(RequestBodyUseruser){// RequestBody将请求体的JSON转为User对象必加return更新用户user.getId();}场景4数组/集合参数// 请求示例/api/deleteUsers?ids1ids2ids3DeleteMapping(/deleteUsers)publicStringdeleteUsers(Integer[]ids){// 数组绑定多个同名参数return删除用户IDArrays.toString(ids);}易错点总结实体类必须有无参构造器否则参数绑定失败JSON参数必须加RequestBody否则无法解析参数名不一致时用RequestParam指定映射// 请求参数是userName方法参数是nameGetMapping(/test)publicStringtest(RequestParam(userName)Stringname){returnname;}五、核心总结 易错点1. 核心知识点RequestMapping路径映射核心简化注解GetMapping等更常用前后端分离后端加跨域配置 返回JSON前端用Axios调用参数绑定基本类型直接绑定JSON参数加RequestBody实体类需getter/setter。2. 常见错误跨域未配置Vue请求报CORS错误重复依赖Tomcat启动报spring_web片段冲突需清理Maven依赖RequestBody遗漏JSON参数绑定为null实体类无getter/setter参数绑定失败。3. 学习建议先跑通最简案例如查询接口Vue渲染再扩展复杂场景重点掌握RequestBody和跨域配置前后端分离高频考点遇到报错先看控制台优先排查依赖冲突和参数绑定问题。