第一种有两个属性值的情况可以使用post的resful方式：前端使用post请求方式发送一个json对象形如：{targetSemesterId：2017-2018，sourceSemesterId:2017-208}
后端接口使用的是post方式接收，然后使用@RequestParam分别接收对象中的两个属性值。
前端（react）代码如下：
// 节次沿用
copySubmit = () => {
this.refs.copyModal.validateFields((err, formData) => {
if (!err) {
followClassNodeInfo(formData, () => {
this.onSearch({param:{semesterId: formData.targetSemesterId}})
this.showCopyModal();
this.setState({
selectedRowKeys: []
})
})
}
})
}
其中formData中表示的就是一个对象：
如图
// 沿用节次信息
export function followClassNodeInfo(params, callback) {
insert(classNodeApi.followClassNode, null, params).then(response => {
if (response.code == '200') {
message.info('沿用成功');
callback();
} else {
if (response.message) {
message.error(response.message);
} else {
message.error('沿用失败');
}
}
});
}
后端的接口resource层：
@ApiOperation("添加时间资源_沿用节次")
@RequestMapping(value = "/followClassNode", method = RequestMethod.POST)
Result<?> followClassNode(
@ApiParam(value = "目标学年学期", required = true) String targetSemesterId,
@ApiParam(value = "来源学年学期", required = true) String sourceSemesterId);
@Override
public Result<?> followClassNode(
@RequestParam(value = "targetSemesterId", required = true) String targetSemesterId,
@RequestParam(value = "sourceSemesterId", required = true) String sourceSemesterId) {
SystemUserInfo systemUserInfo = SessionUtil.getSystemUserInfo(request); // 获取用户信息
String userId = "";
if (systemUserInfo != null) {
userId = systemUserInfo.getUserId(); // 用户Id
}
classNodeService.followClassNode(targetSemesterId, sourceSemesterId, userId);
return Result.buildSuccessResult();
}
其中原理就是使用RequestParam分别将对象中对应的名字的属性获取出来。
第二种方式是只有一个属性值的情况可以使用GET的resful方式：
后端的controller层使用GET方式接收：@RequestParam(value = "xm", required = false) String xm
@ApiOperation(value="审核人下拉框")
@RequestMapping(value = "/reviewPersonList/selectList", method = RequestMethod.GET)
public WebResponse<List<UserDTO>> personSelectList(@RequestParam(value = "xm", required = false) String xm) {
try {
List<UserDTO> list = processNodeService.personSelectList(xm);
return new WebResponse<List<UserDTO>>().success(list);
} catch (Exception e) {
logger.error(e.getMessage(), e);
return new WebResponse<List<UserDTO>>().failure(e.getMessage());
}
}
那么前端也是发送get请求方式，传递的参数需要组装成{xm:params}才能将传递成功，单独的params是不可以的
前端实现：
// 审核人下拉框，提供实时搜索
getReviewPersonList = (params) => {
reviewPersonList({xm:params},(data) => {
this.setState({
reviewPersonList:data
});
})
}
抽取出来的service如下：query
// 审核人下拉框
export function reviewPersonList(params, callback) {
query(processSettingApi.reviewPersonList, params).then(response => {
if (response.meta.statusCode == '200') {
callback(response.data);
} else {
if (response.meta.message) {
message.error(response.meta.message);
} else {
message.error('查询失败');
}
}
});
}
最底层的前端请求方式实现如下：
export function query(url, params) {
return new Promise((resolve, reject) => {
axios.get(url, {params: params}).then(res => {
resolve(res.data)
}).catch(err => {
reject(err.data)
})
})
}
第三种使用GET方式：有分页对象以及其他对象
后端接口接收方式：
@ApiOperation(value="分页查询流程节点列表", notes="分页查询流程节点列表")
@ApiImplicitParams({
@ApiImplicitParam(paramType = "query", name = "pageNum", dataType = "int", required = true, value = "当前页码", defaultValue = "1"),
@ApiImplicitParam(paramType = "query", name = "pageSize", dataType = "int", required = true, value = "每页条数", defaultValue = "5")
})
@RequestMapping(value = "/processNode/query", method = RequestMethod.GET)
public WebResponse<PageInfo<ProcessNodeDTO>> nodeQueryPage(@RequestParam("pageNum") int pageNum, @RequestParam("pageSize") int pageSize,
@ModelAttribute ProcessNodeDTO processNodeDto) {
try {
PageInfo<ProcessNodeDTO> pageInfo = processNodeService.nodeQueryPage(pageNum, pageSize, processNodeDto);
return new WebResponse<PageInfo<ProcessNodeDTO>>().success(pageInfo);
} catch (Exception e) {
logger.error(e.getMessage(), e);
return new WebResponse<PageInfo<ProcessNodeDTO>>().failure(e.getMessage());
}
}
其中@RequestParam("pageNum") int pageNum, @RequestParam("pageSize") int pageSize需要前端传递的分页对象中的pageNum，pageSize要一 一对象，前端传的是对象，后端使用@RequestParam会自动解析到。
使用@ModelAttribute ProcessNodeDTO processNodeDto表示可以使用一个对象接收前端传进来的一个参数如：{processId:33434},@ModelAttribute只能用于GET请求中。
（这里也可以改成使用@RequestParam(value = "processId", required = false) String processId有待验证是否可以）
前端代码如下：
// 查询流程节点信息
processNodeQuery({...params, processId: this.props.processId}, (data) => {
this.state.total = data.total;
this.setState({
loading: false,
dataSource: data.list
});
});
其中params格式是：使用{...params, processId: this.props.processId}的目的是将两个对象扩展成一个对象，这是es6的做法，叫做对象解构。
// 分页查询参数
params = {
pageNum: 1,
pageSize: 10
};
service层如下：
// 分页流程节点信息
export function processNodeQuery(params, callback) {
query(processSettingApi.processNodeQuery, params).then(response => {
if (response.meta.statusCode == '200') {
callback(response.data);
} else {
if (response.meta.message) {
message.error(response.meta.message);
} else {
message.error('查询失败');
}
}
});
}
底层实现原理如下：
export function query(url, params) {
return new Promise((resolve, reject) => {
axios.get(url, {params: params}).then(res => {
resolve(res.data)
}).catch(err => {
reject(err.data)
})
})
}
总结：前端传递一个对象{...params, processId: this.props.processId}，这个对象里面既有分页对象也有自己要传递的参数，这样传给后端之后，后端可以使用@RequestParam和@ModelAttribute分别解析出来。这个springmvc的特性
