1、新建一个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>
