网站开发学哪些,如何优化网站结构,wordpress自己电脑装,网页设计素材网站知乎MVC是一种思想而SpringMVC是具体的实现#xff08;Ioc和DI的关系#xff09;
在创建项目的时候勾选的SpringWeb框架就是SpringMVC框架
与浏览器建立连接
默认返回的是一个 view 视图。需要添加ResponseBody说明返回的是json数据。RestController是ControllerResponseBody…MVC是一种思想而SpringMVC是具体的实现Ioc和DI的关系
在创建项目的时候勾选的SpringWeb框架就是SpringMVC框架
与浏览器建立连接
默认返回的是一个 view 视图。需要添加ResponseBody说明返回的是json数据。RestController是ControllerResponseBody的组合注解
package app.controller;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;Controller
RequestMapping(/web)
public class WebController {// 返回数据GetMapping(/hello)ResponseBodypublic String hello() {return hello world.;}// 返回页面GetMapping(/index)public String index() {return /index.html;}
}
返回数据 返回页面
获取参数
参数请求类型
URL传参Ajax传参Form表单传参
获取单个参数
get1可以通过内置的servlet获取也可以直接给定一个和前端对应的参数获取
// 1.获取单个参数
GetMapping(/get1)
public HashMapString, String getParameter1(HttpServletRequest req, HttpServletResponse rep, String name) {return new HashMapString, String() {{put(req_name, req.getParameter(name));put(name, name);}};
}Postman测试get1接口
Fiddler抓包结果
获取对象
User对象
import lombok.Data;Data
public class User {private Integer id;private String name;private Integer age;private String sex;
}get2接口
// 2.获取对象
GetMapping(/get2)
public HashMapString, User getParameter2(User user) {return new HashMapString, User() {{put(user, user);}};
}Postman测试get2接口 Fiddler抓包
获取表单参数
get3接口
// 3.Form表单Ajax
RequestMapping(/get3)
public HashMapString, User getParameter3(User user) {return new HashMapString, User() {{put(user, user);}};
}Form表单 input标签中name属性值和后端对象字段名需要一致
form methodget action/get4divh1Form表单/h1span用户:/spaninput typetext namenamebr/span年龄:/spaninput typenumber nameagebr/span性别:/spaninput typetext namesexbr/input typesubmit value注册/div
/form表单提交数据之后会自动跳转到该接口F12查看URL时证明表单提交的数据依旧是和之前一样进行URL拼接的方式发送数据 前端Form表单从get改为post请求发现表单提交的数据get3接口可以正常获取
获取Ajax参数
一般Ajax发起HTTP请求的时候会为了节省数据大小采取JSON的格式传输
get3接口
// 3.Form表单Ajax
RequestMapping(/get3)
public HashMapString, User getParameter3(User user) {return new HashMapString, User() {{put(user, user);}};
}get请求不指定json格式data数据不封装为json
这里就按照要求规定JSON格式就转为JSON格式数据没要求就不做编排。按照规范编写代码减少后续不必要的测试步骤 Ajax代码
divh1Ajax/h1span用户:/spaninput typetext namename idnamebr/span年龄:/spaninput typenumber nameage idagebr/span性别:/spaninput typetext namesex idsexbr/input typebutton value注册 idsub-btnbr/input iddata hiddenhidden stylewidth: auto
/div
script src../js/jquery-3.7.1.min.js/scriptscript!--请求后端接口--document.getElementById(sub-btn).addEventListener(click, function () {$.ajax({url: /get3,type: get,//contentType: application/json,data: {name: document.getElementById(name).value,age: document.getElementById(age).value,sex: document.getElementById(sex).value},success: function (data) {// 后端是HashMap这种JSON数据格式的话就需要转换为字符串或者取值【这里直接取之】let result document.getElementById(data);result.value name:${data.user.name}、age:${data.user.age}、sex:${data.user.sex};result.hidden false;},error: function (xhr, status, error) {console.log(error);}});});
/script分析get请求会把发送的数据以键值的形式拼接在url后即使设定了参数类型为JSON格式但是依旧会遵循Ajax中的data数据这种key-value格式SpringMVC会自动根据URL的参数和对象的属性进行匹配因此可以形成映射关系 【不建议这么写因为已经设定了json格式但是data数据并没有完全封装成一个json对象这里是为了测试效果】 get请求指定json格式data数据封装为json
Ajax代码
divh1Ajax/h1span用户:/spaninput typetext namename idnamebr/span年龄:/spaninput typenumber nameage idagebr/span性别:/spaninput typetext namesex idsexbr/input typebutton value注册 idsub-btnbr/input iddata hiddenhidden stylewidth: auto
/divscript!--请求后端接口--document.getElementById(sub-btn).addEventListener(click, function () {$.ajax({url: /get3,type: get,contentType: application/json,data: JSON.stringify({name: document.getElementById(name).value,age: document.getElementById(age).value,sex: document.getElementById(sex).value}),success: function (data) {// 如果后端是HashMap这种JSON数据格式的话就需要转换为字符串console.log(data);let result document.getElementById(data);result.value name:${data.user.name}、age:${data.user.age}、sex:${data.user.sex};result.hidden false;},error: function (xhr, status, error) {console.log(error);}});});
/script分析接口报错400当封装data数据格式为JSON之后URL中的参数和后端接口get3中的参数由于无法映射成User对象就会报错
post请求不指定json格式data数据不封装为json
Ajax代码
divh1Ajax/h1span用户:/spaninput typetext namename idnamebr/span年龄:/spaninput typenumber nameage idagebr/span性别:/spaninput typetext namesex idsexbr/input typebutton value注册 idsub-btnbr/input iddata hiddenhidden stylewidth: auto
/div
script src../js/jquery-3.7.1.min.js/scriptscript!--请求后端接口--document.getElementById(sub-btn).addEventListener(click, function () {$.ajax({url: /get3,type: post,//contentType: application/json,data: {name: document.getElementById(name).value,age: document.getElementById(age).value,sex: document.getElementById(sex).value},success: function (data) {// 后端是HashMap这种JSON数据格式的话就需要转换为字符串或者取值【这里直接取之】let result document.getElementById(data);result.value name:${data.user.name}、age:${data.user.age}、sex:${data.user.sex};result.hidden false;},error: function (xhr, status, error) {console.log(error);}});});
/script分析Ajax的post请求其实和表单的post请求类似所以依旧可以获取到数据
post请求指定json格式data数据封装为json
Ajax代码
divh1Ajax/h1span用户:/spaninput typetext namename idnamebr/span年龄:/spaninput typenumber nameage idagebr/span性别:/spaninput typetext namesex idsexbr/input typebutton value注册 idsub-btnbr/input iddata hiddenhidden stylewidth: auto
/divscript!--请求后端接口--document.getElementById(sub-btn).addEventListener(click, function () {$.ajax({url: /get3,type: post,contentType: application/json,data: JSON.stringify({name: document.getElementById(name).value,age: document.getElementById(age).value,sex: document.getElementById(sex).value}),success: function (data) {// 如果后端是HashMap这种JSON数据格式的话就需要转换为字符串console.log(data);let result document.getElementById(data);result.value name:${data.user.name}、age:${data.user.age}、sex:${data.user.sex};result.hidden false;},error: function (xhr, status, error) {console.log(error);}});});
/script分析原因和之前get请求指定json格式data数据封装为json类似转为JSON对象之后无法和get3接口中User对象进行匹配只不过是不会报错的原因是此时post请求不用解析URL中的参数和后端接口去匹配而是将body中的数据去匹配此时body中的数据有JSON对象但是无法和get3接口中的User对象进行映射需要添加一个RequestBody注解才能实现JSON对象和后端接口参数中的User对象进行映射
获取JSON对象RequestBody
get5接口在对象参数前加一个RequestBody注解 RequestBody将前端数据映射为一个Java对象
// 4.JSON对象Postman测试
RequestMapping(/get4)
public String getParameter4(RequestBody User user) {return new HashMapString, User() {{put(user, user);}};
}前端Ajaxurl更改为get4请求方式为post
divh1Ajax/h1span用户:/spaninput typetext namename idnamebr/span年龄:/spaninput typenumber nameage idagebr/span性别:/spaninput typetext namesex idsexbr/input typebutton value注册 idsub-btnbr/input iddata hiddenhidden stylewidth: auto
/div
script src../js/jquery-3.7.1.min.js/scriptscript!--请求后端接口--document.getElementById(sub-btn).addEventListener(click, function () {$.ajax({url: /get4,type: post,contentType: application/json,data: JSON.stringify({name: document.getElementById(name).value,age: document.getElementById(age).value,sex: document.getElementById(sex).value}),success: function (data) {// 后端是HashMap这种JSON数据格式的话就需要转换为字符串或者取值【这里直接取之】let result document.getElementById(data);result.value name:${data.user.name}、age:${data.user.age}、sex:${data.user.sex};result.hidden false;},error: function (xhr, status, error) {console.log(error);}});});
/script获取文件RequestPart
// 5.获取文件
PostMapping(/get5)
public String getParameter5(String name, RequestPart(myfile) MultipartFile upLoadFile) throws IOException {// 获取文件名String fileName upLoadFile.getOriginalFilename();System.out.println(fileName);if (fileName ! null) {String filePath ClassUtils.getDefaultClassLoader().getResource(static).getPath() /;File file new File(filePath fileName);upLoadFile.transferTo(file);return 【 file.getName() 】上传成功;}return 上传失败;
}Postman测接口的时候需要文件名和后端RequestPart对应
获取Cookie/Session/Header
因为HTTP无状态浏览器默认会把当前网站所有Cookie发送给后端
/**** 6.获取 Cookie、Session 和 Header* 6.1 Cookie* Servlet方式获取: 获取全部Cookie* 注解方式获取: 获取1个Cookie*/
GetMapping(/get6)
public HashMapString, String getParameter6(HttpServletRequest request) {Cookie[] cookies request.getCookies();// true: 没有session就创建一个sessionfalse: 没有session就返回nullHttpSession session request.getSession(true);session.setAttribute(session_dir_jdk, System.getProperty(user.dir));session.setAttribute(session_dir_spring, ClassUtils.getDefaultClassLoader().getResource(app).getPath());String userAgent request.getHeader(User-Agent);return new HashMapString, String() {{put(cookies, Arrays.toString(cookies));put(session_dir_jdk, session.getAttribute(session_dir_jdk).toString());put(session_dir_spring, session.getAttribute(session_dir_spring).toString());put(userAgent, userAgent);}};
}GetMapping(/get7)
public HashMapString, String getParameter7(CookieValue(JSESSIONID) String cookie_JSESSIONID,SessionAttribute(value session_dir_jdk, required true) String session_dir_jdk,SessionAttribute(value session_dir_spring, required true) String session_dir_spring,RequestHeader(User-Agent) String userAgent) {return new HashMapString, String() {{put(cookie_JSESSIONID, cookie_JSESSIONID);put(session_dir_jdk, session_dir_jdk);put(session_dir_spring, session_dir_spring);put(userAgent, userAgent);}};
}在浏览器手动设置Cookie
后端参数重命名RequestParam
如果前后端参数未统一管理则此时后端可以使用RequestParam重命名前后端参数值 前端
divinput typebutton value点击获取当前时间 idgetCurrentTImebrinput typedatetime-local hiddenhidden idshowCurrentTime
/divscript// 后端参数重命名document.getElementById(getCurrentTIme).addEventListener(click, function () {let nowTimeStamp new Date();let year nowTimeStamp.getFullYear();let month String(nowTimeStamp.getMonth() 1).padStart(2, 0);let day String(nowTimeStamp.getDate()).padStart(2, 0);let hour String(nowTimeStamp.getHours()).padStart(2, 0);let min String(nowTimeStamp.getMinutes()).padStart(2, 0);let sec String(nowTimeStamp.getSeconds()).padStart(2, 0);let time year - month - day hour : min : sec;jQuery.ajax({url: /get8,method: GET,contentType: text/plain,data: {time: time},success(data) {let showCurrentTime document.getElementById(showCurrentTime);showCurrentTime.hidden false;showCurrentTime.value data;},error(xhr, status, error) {window.alert(error: error);}});});
/script后端
GetMapping(/get8)
public String getParameter8(RequestParam(time, required false) String createTime) {return createTime;
}此时后端字段需要一个createTime但是前端却传的是time字段那么此时后端会无法接收到参数作为后端程序员可以通过参数重命名接收前端参数
获取URL中参数PathVariable
前端 127.0.0.1:8080/get9/张三/23/M
后端
// 获取URL中的参数
GetMapping(/get9/{name}/{age}/{sex})
public HashMapString, String getParameter9(PathVariable String name,PathVariable String age,PathVariable String sex) {return new HashMapString, String() {{put(name, name);put(age, age);put(sex, sex);}};
}请求转发与请求重定向
一般都是前端处理好但这一块属于面试常问的问题。因此做一个小小的梳理
