第18次 · 页面跳转与JSON响应

第1/7页 · 先知道今天要做什么

先从一个熟悉的场景想一想：这节课的代码在帮我们解决什么问题？

先来一个生活里的画面

同学问你“借书在哪里办”，你可以带他到办证窗口，也可以递给他一张写有信息的纸。返回页面与返回 JSON 也是两种不同回应：一个找视图，一个直接给数据。浏览器看到一串 JSON，未必是页面坏了。

你已经会的知识

用前面课的类、方法、参数和返回值来读本次例子。遇到新名字先看下一页；不用一开始读完整个工程。

为什么要学这一课

沿用 register 页面与 User JSON 两个现成例子，比较“返回页面名字”和“返回对象数据”。

今天完成的事情

比较返回页面与返回 JSON，再修改 JSON 中的一个值。

这课在哪里做

看到什么才算完成一小步

1. /showPageByString：核对register页面。
2. 修改getUser的username再部署：/getUser 的JSON出现新值。
3. 修改p1.proName：/addProducts只有第一项名称变化。

阅读顺序

第2页查新词，第3页读这一份工程的代码，第4页先找文件和入口。第5页在 IDEA 按步骤修改；第6页对照效果和问题；第7页用自己的话复盘。

操作位置

下载、解压、打开、修改和运行在本机 IDEA；教学网站用于看讲义、下载资源、保存草稿和提交。先准备 JDK17，按第5页导入 Maven 工程。

来源：第06章 Spring MVC数据绑定和响应 · 课件第101、102、103页（课件页码，不是教材印刷页码）

第2/7页 · 把新词说清楚

先把本课用得到的名字认清；看到名字时回到真实文件定位。

新词与本课含义

把生活画面对应到教材代码

类比怎样用

先借这个画面记住分工，再回到本课文件逐项定位。生活里的角色只是类比，程序的实际行为以教材代码、配置和本机观察为准。

先对照文件名

src/main/java/com/itheima/controller/DataController.java 是本次主阅读文件，位置在 04_源代码/chapter06 内。目录、类、方法和对象登记名是四种不同名字，不要随意互相替换。

读代码时只问三个问题

1. 它从哪里得到输入：方法参数、XML、请求还是数据库？
2. 它调用哪个具体方法：到同一个工程中查这个名字。
3. 结果从哪里看：Run 控制台、请求响应还是数据库？本课第1页检查表给出位置。

先不用背术语

先能找到文件、指出一行的动作并描述输出。术语用来给已经看过的动作命名，不用它替代操作过程。

来源：第06章 Spring MVC数据绑定和响应 · 课件第101、102、103页（课件页码，不是教材印刷页码）

第3/7页 · 先看一个小例子

下面的教材片段来自本课下载项目；新增练习代码会另外标明。不要把节选直接当完整文件覆盖。

先猜一猜，读完代码再回答

return “register” 与 JSON 中 username=“register” 是一回事吗？

三个具体例子：先给输入，再想结果

把例子用起来

这些是课堂推演，帮你看清“只改一个输入，结果怎样变化”。涉及数据库的编号、余额和数量是示意，动手时换成教师提供的真实练习数据；在 IDEA 写下自己的预测，再运行核对。

打开这一份文件

04_源代码/chapter06/src/main/java/com/itheima/controller/DataController.java。在 IDEA 双击打开；以下只是它的第41—60行，完整类、import 和配置仍保留在项目中。

DataController.java：先读这一段

04_源代码/chapter06/src/main/java/com/itheima/controller/DataController.java 第41—60行

    public User getUser()  {
        User user = new User();
        user.setUsername("heima2");
        return user;
    }
    @RequestMapping("addProducts")
    @ResponseBody
    public List<Product> addProducts()  {
        Product p1 = new Product();
        p1.setProId("p001");
        p1.setProName("矿泉水");
        Product p2 = new Product();
        p2.setProId("p002");
        p2.setProName("三文鱼");
        ArrayList<Product> products = new ArrayList<>();
        products.add(p1);
        products.add(p2);
        return products;
    }
}

先看第1个动作

PageController.showPageByString 返回 register，交给视图解析。

先看第2个动作

DataController.getUser 先创建 User 并设 username。

先看第3个动作

@ResponseBody 表明返回值转为响应数据，所以浏览器能看到JSON。

先看第4个动作

addProducts 返回两件商品的列表，这是数组响应，不是带页码和total的分页接口。

先读再动手

先在 IDEA 找到以上几行，逐项说出它们做什么。第5页会明确告诉你改哪一行、加到哪个大括号里、运行哪个入口；今天只改那几处。

来源：第06章 Spring MVC数据绑定和响应 · 课件第101、102、103页（课件页码，不是教材印刷页码）

第4/7页 · 一步一步做出来

先认清项目、文件和运行入口；保持同一个例子，再去第5页做个人修改。

本课项目目录

04_源代码/chapter06/pom.xml；选择直接包含 pom.xml 和 src 的这一层。

把这条路线讲成一段小故事

1. 请求某个方法
2. 读取方法返回值
3. 有 ResponseBody 则写响应数据
4. 否则按视图配置找页面

先完成打开项目这一步

1. 在讲义顶部点“下载代码资源”。等 ZIP 下载完成，在电脑文件管理器找到它，右键选择“全部提取/解压”，先解压成普通文件夹。不要直接在 ZIP 预览窗口中打开 Java 文件。
2. 把解压目录复制一份作为自己的本课练习副本，例如 lesson-课次-学号。保留原包不改，后续课需要同章工程时可继续自己的副本，也可从原包重新开始。
3. 按本页列出的“本课项目目录”进入到直接含 pom.xml 和 src 的那一层。整个 ZIP 解压目录、04_源代码 外层都不是这次的 Maven 项目根目录。
4. 打开 IntelliJ IDEA。欢迎页点 Open（打开）；已打开别的项目则点 File → Open。选择本课 pom.xml，出现选项时选 Open as Project（作为项目打开），或直接选它所在目录。已有项目时用 New Window，避免混淆。
5. 导入后选择已安装的 JDK17，打开 Maven 面板 Reload All Maven Projects；依赖完成、代码无编译错误后再运行。

沿这些真实文件找代码

不要急着执行

先核对第3页类名、包名与配置；本课没有要求的数据库与功能不要临时加进去。

本页先定位，第5页再修改运行

下面说明本课的运行方式，先找到对应按钮。到第5页完成指定配置、新建文件或修改代码后，再按这些步骤执行；还不存在的类或测试方法先不要运行。

本课怎样启动：部署到 Tomcat

1. 此工程打包方式是 WAR，Controller 没有 main，不能直接右键运行控制器。先使用教师已准备的 JDK17 与兼容本章 Spring6/Jakarta 的 Tomcat10.1 环境。
2. IDEA 有 Tomcat 集成功能时：Run → Edit Configurations → + → Tomcat Server → Local；Server 页点 Configure 选择教师给的 Tomcat 解压目录，JRE 选17，记下 HTTP port（例如8080）。
3. Deployment 页点 + → Artifact，选择本工程 war exploded；没有 artifact 时先在 Project Structure → Artifacts 配置 Web Application: Exploded → From Modules，选本课模块。Application context 设 /lesson，保存配置。访问地址就是 http://localhost:实际端口/lesson 加本课路径。
4. 点击刚配置的 Tomcat 运行按钮，等控制台明确部署完成后再请求；只启动 Tomcat 但未部署工程，访问本课接口会404。
5. IDEA 版本没有 Tomcat 菜单时：在 Maven 面板 Lifecycle 双击 package，确认 BUILD SUCCESS；到 target 找实际 .war 文件，将它复制到教师给的 Tomcat/webapps，再运行 Tomcat/bin 中对应系统的启动脚本。上下文是 WAR 文件名去掉 .war。由教师先演示这个替代流程，不另找 Controller.main。
6. 每次改 Java/XML 后 Save All，先停止旧实例，再重新部署并启动。用集成配置可重新 Run；手工 WAR 则重新 package、停服、替换自己的 WAR 与旧解压目录后启动。刷新浏览器不能代替重新编译部署。
7. 控制台启动错误先核对本章 pom、JDK、Tomcat兼容与配置；未成功部署时先记录问题请教师检查原包，不能用后续页面的预测结果冒充运行成功。

本课入口是否需要新增

运行入口已在下载包中；第5页先做必要的配置或改动，再执行这个入口。JUnit 只运行指定方法，避免其它实验一起改数据。

完成修改后检查

记录一遍过程

在第5页按顺序改完，每次 Save All 再运行。写下本次实际入口、输入与结果，和表里的预期逐项对照；第一次未成功就按第6页定位。

来源：第06章 Spring MVC数据绑定和响应 · 课件第101、102、103页（课件页码，不是教材印刷页码）

第5/7页 · 换成自己的代码

下载项目后，在电脑的 IntelliJ IDEA 中一步一步修改、运行并检查；网站最后只接收你的作业。

本课在 IDEA 中完成什么

比较返回页面与返回 JSON，再修改 JSON 中的一个值。

今天就用这个具体版本练习

用户姓名填自己的英文名，第一件商品填“班级纪念笔”。分别保存页面观察与 JSON 观察，说明看到了哪一种响应。

这七页使用同一个工程例子

前面的代码阅读和下面的练习都使用本课下载项目。表中列出的文件已在包中；写明“新建”的文件由你按步骤在 IDEA 创建。先保留本地正确包名和目录，再按真实文件名提交修改后的文本。

本课项目目录

04_源代码/chapter06；选择这一层的 pom.xml。运行入口：src/main/java/com/itheima/controller/DataController.java。# 后面的文字表示要单独运行的测试方法。

第0步：下载、解压并在 IDEA 打开项目

1. 在讲义顶部点“下载代码资源”。等 ZIP 下载完成，在电脑文件管理器找到它，右键选择“全部提取/解压”，先解压成普通文件夹。不要直接在 ZIP 预览窗口中打开 Java 文件。
2. 把解压目录复制一份作为自己的本课练习副本，例如 lesson-课次-学号。保留原包不改，后续课需要同章工程时可继续自己的副本，也可从原包重新开始。
3. 按本页列出的“本课项目目录”进入到直接含 pom.xml 和 src 的那一层。整个 ZIP 解压目录、04_源代码 外层都不是这次的 Maven 项目根目录。
4. 打开 IntelliJ IDEA。欢迎页点 Open（打开）；已打开别的项目则点 File → Open。选择本课 pom.xml，出现选项时选 Open as Project（作为项目打开），或直接选它所在目录。已有项目时用 New Window，避免混淆。
5. 确认导入方式为 Maven。若出现信任提示，先核对这确实是本课程下载的工程再信任。等右下角索引与依赖下载结束，不在下载尚未完成时急着运行。
6. 点 File → Project Structure → Project，将 SDK 设为已安装的 JDK 17。列表没有17就按教师安装包先安装，再 Add SDK/JDK 选择实际安装目录；不要把语言级别选17当作JDK已安装。
7. 打开 View → Tool Windows → Maven，点击 Reload All Maven Projects（重新加载全部 Maven 项目）。若没有Maven面板，右键本课 pom.xml → Add as Maven Project。红色依赖仍存在时看下载错误，先解决网络/仓库和JDK配置。
8. 回到左侧 Project，按本课文件表展开目录并双击文件。Java包可能合并显示为 com.itheima；表中的 src/main/java 表示主代码，src/test/java 表示测试。先核对包名与文件名，再修改。

先找到这些真实文件

本课怎样启动：部署到 Tomcat

1. 此工程打包方式是 WAR，Controller 没有 main，不能直接右键运行控制器。先使用教师已准备的 JDK17 与兼容本章 Spring6/Jakarta 的 Tomcat10.1 环境。
2. IDEA 有 Tomcat 集成功能时：Run → Edit Configurations → + → Tomcat Server → Local；Server 页点 Configure 选择教师给的 Tomcat 解压目录，JRE 选17，记下 HTTP port（例如8080）。
3. Deployment 页点 + → Artifact，选择本工程 war exploded；没有 artifact 时先在 Project Structure → Artifacts 配置 Web Application: Exploded → From Modules，选本课模块。Application context 设 /lesson，保存配置。访问地址就是 http://localhost:实际端口/lesson 加本课路径。
4. 点击刚配置的 Tomcat 运行按钮，等控制台明确部署完成后再请求；只启动 Tomcat 但未部署工程，访问本课接口会404。
5. IDEA 版本没有 Tomcat 菜单时：在 Maven 面板 Lifecycle 双击 package，确认 BUILD SUCCESS；到 target 找实际 .war 文件，将它复制到教师给的 Tomcat/webapps，再运行 Tomcat/bin 中对应系统的启动脚本。上下文是 WAR 文件名去掉 .war。由教师先演示这个替代流程，不另找 Controller.main。
6. 每次改 Java/XML 后 Save All，先停止旧实例，再重新部署并启动。用集成配置可重新 Run；手工 WAR 则重新 package、停服、替换自己的 WAR 与旧解压目录后启动。刷新浏览器不能代替重新编译部署。
7. 控制台启动错误先核对本章 pom、JDK、Tomcat兼容与配置；未成功部署时先记录问题请教师检查原包，不能用后续页面的预测结果冒充运行成功。

发送接口请求：GET 与 POST 分开操作

1. GET 请求可在电脑浏览器地址栏输入本机完整地址，结果页面或 JSON 在浏览器看，服务器输出在 IDEA 的 Run/Tomcat 控制台看。
2. POST/JSON 请求不能只在地址栏输入。IDEA 支持 HTTP Client 时，在项目根目录 New → File 建 lessonXX.http，按下方示例或教师已验证样例填方法、完整本机地址、Headers，空一行后写 JSON，再点请求左边运行图标。没有 HTTP Client 时，用教师提供的 Postman：New → HTTP Request → 选 POST → 填地址 → Body → raw → JSON → Send。
3. 需要登录凭据时在请求 Headers 增加本项目实际使用的 token 键，值用刚登录得到的凭据。文件上传则在 Postman Body 选 form-data、指定键名并将类型由 Text 切到 File。
4. 同时记录 HTTP 状态、业务返回码/提示、控制台和实际数据。HTTP200并不保证业务成功；请求示例中的中文占位值必须先替换，端口取启动日志。

第1步：在 IDEA 操作并核对

启动工程，访问 /showPageByString，检查它是否显示 register 页面；打开 PageController 对照 return “register”。这里返回的是视图名字。

第2步：在 IDEA 操作并核对

访问 /getUser，检查响应的 username；在 DataController 的 getUser 中把 setUsername(“heima2”) 换成自己的英文名字。保存、重新部署、再请求，核对 JSON 中值变化。

第3步：在 IDEA 操作并核对

找 getUser 上 @ResponseBody，再找 showPageByString 没有这个注解，写一句话区分“把对象变成响应数据”和“去找一个页面”。

第4步：在 IDEA 操作并核对

访问 /addProducts，看两个商品对象。只把 p1 的 proName 改成自己的商品名，重新部署，核对只有第一项名称变化。

第5步：在 IDEA 操作并核对

分别记录两个接口的真实 JSON 和页面路径；商品数组不是分页结构，本课先确认响应类型，分页总数与页码在后续课补充。

在本地写练习记录

1. 在 IDEA 项目根目录右键 New → File，新建 练习说明.md。填写改过的完整文件路径、方法或行位置，别只写“改了代码”。
2. 每组检查写输入/操作、预期、实际结果；文字输出从 Run 控制台抄，接口结果从本机请求抄，数据库结果写实际查到的值。未运行就写“未实测”，并说明卡在哪一步。
3. 临时故意写错的对象名、请求或配置按本课要求恢复，Save All。关闭再打开修改文件，确认本地改动保留；最终效果用最后一次重新运行检查。

最后才回网站交作业

本课代码的打开、修改、运行和检查都在本机 IDEA 完成。网站只用来下载讲义/资源和提交结果，不能运行 Java。完成后点讲义顶部“打开代码任务”，将自己在 IDEA 改过的文本文件复制到任务对应文件中；名称与模板不同就“＋ 添加文件”填写真实文件名，不为迁就网站模板改错本地包名。保留自己的旧草稿，只提交需要交的源码和练习说明。

保存与提交

添加练习说明.md 并核对本地运行记录 → 保存草稿 → 等显示已保存 → 正式提交并核对新增版本。草稿不计入正式提交次数。项目 ZIP 留在电脑，按教师指定方式另交；不要把 ZIP 二进制内容粘进文本编辑器。提交材料去掉真实密码与登录token。

来源：第06章 Spring MVC数据绑定和响应 · 课件第101、102、103页（课件页码，不是教材印刷页码）

第6/7页 · 出错时从哪里查

先保留现象，只检查这一课的同一条调用路线。一次改一处，再重跑确认。

常见现象

遇到问题，先演一遍这一条路线

请求某个方法 → 读取方法返回值 → 有 ResponseBody 则写响应数据 → 否则按视图配置找页面

用本课的输入复查

按本课路线检查

1. PageController.showPageByString 返回 register，交给视图解析。
2. DataController.getUser 先创建 User 并设 username。
3. @ResponseBody 表明返回值转为响应数据，所以浏览器能看到JSON。
4. addProducts 返回两件商品的列表，这是数组响应，不是带页码和total的分页接口。

需要老师帮忙时交这些

工程名 chapter06；运行入口 src/main/java/com/itheima/controller/DataController.java；你改的文件；输入或请求；第一段关键错误；本次预期与实际。截图之外保留错误文字，方便找到具体行。

把预测和实测分开

检查表是预期，不是替你运行过的证明。未在本机执行就写“未实测”；原教材配置或逻辑出现问题时记录原文件与现象，不写“系统判错”。

来源：第06章 Spring MVC数据绑定和响应 · 课件第101、102、103页（课件页码，不是教材印刷页码）

第7/7页 · 用自己的话讲一遍

用真实文件和本机结果说明你完成了什么；先说动作，再说术语。

回到第3页：你刚才猜对了吗？

return “register” 与 JSON 中 username=“register” 是一回事吗？

老师带你说清原因

不是。先看这个方法是否按视图处理或有 ResponseBody。一个用于找页面，另一个只是对象里的一段文字。

请换一个自己的例子

照着本课三个例子的写法，说清“我只改什么、预计哪一处变化、到哪里看结果”。不需要再发明一个陌生项目；用本课同一组文件和入口。

回答本课的两个问题

按这个顺序讲给同学听

1. 我打开的工程是 chapter06，本次阅读文件是 src/main/java/com/itheima/controller/DataController.java。
2. 我实际改了哪一行、加了哪个方法；指着 IDEA 的代码说明。
3. 我运行或请求的入口是 src/main/java/com/itheima/controller/DataController.java，输入是什么。
4. 我在控制台、响应或数据库看到了什么，与第1页预期有什么差异。
5. 我还有哪步没完成，保留了什么错误信息。

交作业前最后检查

文件与练习说明在 IDEA 已保存，正式提交的是自己的最终文本。下载包原样未改的部分标为参考；配置去掉真实密码和token。原有草稿不会被起始文件覆盖，需要时在代码任务查看本次起始文件对照。

课后再做一个小对照

只换本课检查表的一项输入，按同一入口重新执行，补一行预期和实际。没有环境时写明前置条件并停在实际完成的位置；不增加下一章的陌生功能。

来源：第06章 Spring MVC数据绑定和响应 · 课件第101、102、103页（课件页码，不是教材印刷页码）