SpringMVC请求处理
# SpringMVC请求处理
| 实验 | 内容 | 目标 |
|---|---|---|
| 实验1 | 使用普通变量，收集请求参数 | 测试普通value封装 |
| 实验2 | 使用@RequestParam，逐一封装多个参数 | 测试@RequestParam与required |
| 实验3 | 使用POJO，统一封装多个参数 | 测试bean封装 |
| 实验4 | 使用@RequestHeader获取请求头数据 | 测试@RequestHeader |
| 实验5 | 使用@CookieValue获取Cookie数据 | 测试@CookieValue |
| 实验6 | 使用POJO，级联封装复杂对象 | 测试级联封装 |
| 实验7 | 使用@RequestBody，封装JSON对象 | 测试JSON封装 |
| 实验8 | 使用@RequestPart/@RequestParam，封装文件对象 | 测试文件上传 |
| 实验9 | 使用HttpEntity，封装请求原始数据 | 测试HttpEntity |
| 实验10 | 使用原生Servlet API，获取原生请求对象 | 测试Servlet API |
- @RequestParam 只可以获取前端提交内容是Content-Type="application/x-www-form-urlencoded",不论是在URL后面的还是在请求体中的。
- 如果前端没有传递该字段，则后台默认该字段为NULL
- 如果前端没有输入该字段的值，则后台接收到该字段值为空字符串""
@RequestBody 获取请求体中的json字符串，将请求体中的json字符串转换成对象
MultipartFile 专门用来接收文件请求
- @RequestParam("headerImg") MultipartFile headerImgFile
- HttpEntity 封装请求原始数据
- HttpHeaders headers = entity.getHeaders();
- String body = entity.getBody();
- Servlet API 获取原生请求对象
- HttpServletReqest
- HttpServletResponse
在项目 static 下引入 index.html 文件。启动项目做以上实验
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 本网页使用layui框架编写； layui官网：https://layui.dev/ -->
<link href="https://cdn.bootcdn.net/ajax/libs/layui/2.9.15/css/layui.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.9.15/layui.min.js"></script>
<style>
.layui-col-xs6 {
padding: 10px;
}
</style>
</head>
<body>
<div class="layui-row">
<div class="layui-col-xs6">
<h1>SpringMVC - 请求测试</h1>
<div class="layui-collapse">
<div class="layui-colla-item">
<div class="layui-colla-title">实验1：使用普通变量，收集请求参数</div>
<div class="layui-colla-content" >
<div style="display: flex;justify-content: center">
<form class="layui-form" action="/handle01">
<div style="width: 250px;padding: 10px" >
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i>
</div>
<input type="text" name="username" placeholder="用户名" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-password"></i>
</div>
<input type="password" name="password" placeholder="密码"
class="layui-input" lay-affix="eye">
</div>
</div>
<div class="layui-form-item">
<div class="layui-row">
<div class="layui-col-xs12">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-cellphone"></i>
</div>
<input type="text" name="cellphone" placeholder="手机号" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<input type="checkbox" name="agreement" title="同意">
<a href="#terms" target="_blank" style="position: relative; top: 6px; left: -15px;">
<ins>用户协议</ins>
</a>
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid" lay-submit>注册</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="layui-colla-item">
<div class="layui-colla-title">实验2：使用@RequestParam，逐一封装多个参数</div>
<div class="layui-colla-content">
<div style="display: flex;justify-content: center">
<form class="layui-form" action="/handle02">
<div style="width: 250px;padding: 10px" >
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i>
</div>
<input type="text" name="username" placeholder="用户名" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-password"></i>
</div>
<input type="password" name="password" placeholder="密码"
class="layui-input" lay-affix="eye">
</div>
</div>
<div class="layui-form-item">
<div class="layui-row">
<div class="layui-col-xs12">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-cellphone"></i>
</div>
<input type="text" name="cellphone" placeholder="手机号" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<input type="checkbox" name="agreement" title="同意">
<a href="#terms" target="_blank" style="position: relative; top: 6px; left: -15px;">
<ins>用户协议</ins>
</a>
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid" lay-submit>注册</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="layui-colla-item">
<div class="layui-colla-title">实验3：使用POJO，统一封装多个参数</div>
<div class="layui-colla-content">
<div style="display: flex;justify-content: center">
<form class="layui-form" action="/handle03" method="post">
<div style="width: 250px;border: 5px solid black;padding: 10px" >
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i>
</div>
<input type="text" name="username" placeholder="用户名" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-password"></i>
</div>
<input type="password" name="password" placeholder="密码"
class="layui-input" lay-affix="eye">
</div>
</div>
<div class="layui-form-item">
<div class="layui-row">
<div class="layui-col-xs12">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-cellphone"></i>
</div>
<input type="text" name="cellphone" placeholder="手机号" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<input type="checkbox" name="agreement" title="同意">
<a href="#terms" target="_blank" style="position: relative; top: 6px; left: -15px;">
<ins>用户协议</ins>
</a>
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid" lay-submit>注册</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="layui-colla-item">
<div class="layui-colla-title">实验4：使用@RequestHeader获取请求头数据</div>
<div class="layui-colla-content">
<a type="button" class="layui-btn" href="/handle04">随便发个请求</a>
</div>
</div>
<div class="layui-colla-item">
<div class="layui-colla-title">实验5：使用@CookieValue获取Cookie数据</div>
<div class="layui-colla-content">
<a type="button" class="layui-btn" href="/handle05">随便又发个请求</a>
</div>
</div>
<div class="layui-colla-item">
<div class="layui-colla-title">实验6：使用POJO，级联封装复杂对象</div>
<div class="layui-colla-content">
<div style="display: flex;justify-content: center">
<form class="layui-form layui-form-pane" action="/handle06">
<div style="width: 400px;padding: 10px" >
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i>
</div>
<input type="text" name="username" placeholder="用户名" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-password"></i>
</div>
<input type="password" name="password" placeholder="密码"
class="layui-input" lay-affix="eye">
</div>
</div>
<div class="layui-form-item">
<div class="layui-row">
<div class="layui-col-xs12">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-cellphone"></i>
</div>
<input type="text" name="cellphone" placeholder="手机号" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-row">
<div class="layui-col-xs4">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-website"></i>
</div>
<input type="text" name="address.province" placeholder="省" class="layui-input">
</div>
</div>
<div class="layui-col-xs4">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-find-fill"></i>
</div>
<input type="text" name="address.city" placeholder="市" class="layui-input">
</div>
</div>
<div class="layui-col-xs4">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-tree"></i>
</div>
<input type="text" name="address.area" placeholder="区" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-item">
<label class="layui-form-label">爱好</label>
<div class="layui-input-block">
<input type="checkbox" name="hobby" value="足球" title="足球">
<input type="checkbox" name="hobby" value="篮球" title="篮球">
<input type="checkbox" name="hobby" value="乒乓球" title="乒乓球">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-item">
<label class="layui-form-label">年级</label>
<div class="layui-input-block">
<select name="grade">
<option value="一年级">一年级</option>
<option value="二年级">二年级</option>
<option value="三年级">三年级</option>
<option value="四年级">四年级</option>
</select>
</div>
</div>
</div>
<div class="layui-form-item">
<input type="checkbox" name="agreement" title="同意">
<a href="#terms" target="_blank" style="position: relative; top: 6px; left: -15px;">
<ins>用户协议</ins>
</a>
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid" lay-submit>注册</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="layui-colla-item">
<div class="layui-colla-title">实验7：使用@RequestBody，封装JSON对象</div>
<div class="layui-colla-content">
<button type="button" class="layui-btn layui-bg-blue">去Postman测试，自己带上【实验6】中数据的json</button>
</div>
</div>
<div class="layui-colla-item">
<div class="layui-colla-title">实验8：使用@RequestPart/@RequestParam，封装文件，测试文件上传</div>
<div class="layui-colla-content">
<div style="display: flex;justify-content: center">
<form class="layui-form layui-form-pane" action="/handle08" method="post" enctype="multipart/form-data">
<div style="width: 350px;padding: 10px" >
<div class="layui-form-item">
<fieldset class="layui-elem-field" style="background-color: lemonchiffon">
<legend>文件上传要求</legend>
<div class="layui-field-box">
<p>1. 表单：method=post</p>
<p>2. enctype="multipart/form-data"</p>
<p>3. 注意：SpringMVC对上传文件有大小限制（默认单文件最大：1MB；整个请求最大：10MB）</p>
</div>
</fieldset>
</div>
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i>
</div>
<input type="text" name="username" placeholder="用户名" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-password"></i>
</div>
<input type="password" name="password" placeholder="密码"
class="layui-input" lay-affix="eye">
</div>
</div>
<div class="layui-form-item">
<div class="layui-row">
<div class="layui-col-xs12">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-cellphone"></i>
</div>
<input type="text" name="cellphone" placeholder="手机号" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">头像</label>
<div class="layui-input-block">
<input type="file" name="headerImg" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">生活照</label>
<div class="layui-input-block">
<input type="file" name="lifeImg" multiple class="layui-input">
</div>
</div>
<div class="layui-form-item">
<input type="checkbox" name="agreement" title="同意">
<a href="#terms" target="_blank" style="position: relative; top: 6px; left: -15px;">
<ins>用户协议</ins>
</a>
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid" lay-submit>注册</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="layui-colla-item">
<div class="layui-colla-title">实验9：使用HttpEntity，封装请求原始数据</div>
<div class="layui-colla-content">
<a class="layui-btn layui-bg-blue" href="/handle09?user=admin&age=18">随便㕛发个请求</a>
</div>
</div>
<div class="layui-colla-item">
<div class="layui-colla-title">实验10：使用原生Servlet API，获取原生请求对象</div>
<div class="layui-colla-content">
<a class="layui-btn layui-bg-blue" href="/handle09?user=admin&age=18">随便叒发个请求</a>
</div>
</div>
</div>
</div>
<div class="layui-col-xs6">
<h1>SpringMVC - 响应测试</h1>
<div class="layui-collapse">
<div class="layui-colla-item">
<div class="layui-colla-title">实验1：返回json数据</div>
<div class="layui-colla-content">
<a type="button" class="layui-btn" href="/resp01">给个JSON</a>
</div>
</div>
<div class="layui-colla-item">
<div class="layui-colla-title">实验2：文件下载测试</div>
<div class="layui-colla-content">
<a type="button" class="layui-btn" href="/download">给个美女</a>
</div>
</div>
<div class="layui-colla-item">
<div class="layui-colla-title">实验3：使用Thymeleaf模版引擎，实现服务端渲染</div>
<div class="layui-colla-content">
<fieldset class="layui-elem-field" style="background-color: lemonchiffon">
<legend>服务端渲染</legend>
<div class="layui-field-box">
<h3>现在服务端渲染的方式用的很少了；项目基本都是前后分离。</h3>
<h3>这样各端专注于自己的开发，快速协同分工</h3>
<fieldset class="layui-elem-field" style="background-color: lightcyan">
<legend>前后分离</legend>
<div class="layui-field-box">
<h5>1. 前端开发人员编写独立的前端项目</h5>
<h5>2. 前端项目自己控制页面跳转逻辑</h5>
<h5>3. 后端仅需返回前端需要的JSON数据</h5>
<h5>4. 后端无需关心页面效果等问题</h5>
<h5>优点：分工明确，快速协同，专注用户体验</h5>
<h5>缺点：成本高，技术复杂，门槛高</h5>
</div>
</fieldset>
<fieldset class="layui-elem-field" style="background-color: lightcyan">
<legend>前后不分离(服务端渲染)</legend>
<div class="layui-field-box">
<h5>1. 后端开发人员要控制页面跳转逻辑（利用转发、重定向）</h5>
<h5>2. 服务器要拿到业务数据，全部填充到页面，然后整体把页面返回给客户端</h5>
<h5>3. 模版引擎作用：将数据填充到页面模板</h5>
<h5>4. JSP其实就是一种模板引擎</h5>
<h5>优点：弱前端、低成本、速度快</h5>
<h5>缺点：不专业、体验差、效率低、易扯皮</h5>
</div>
</fieldset>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</body>
<style>
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
Last Updated: 2025/12/02, 11:22:00