前言
作者第一次做前端项目,做的是后台管理系统。使用的是网上现有的后台管理前端框架 iview-admin 2.0
代码:https://github.com/iview/iview-admin
文档:https://www.iviewui.com/docs/guide/start
下面是开发过程中碰到的问题,详细记录在此
1 axios 请求后台接口
1.1 get请求
前端请求代码如下所示,method指定成get,headers参数无特殊要求
export const getUserPage = ({current,userName,userStatus,schoolId,startTime,endTime,size}) => {
return axios.request({
url: state.state.queryHost+'/api/users',
method: 'get',
params:{
current:current,
userName:userName,
userStatus:userStatus,
schoolId:schoolId,
startTime:startTime,
endTime:endTime,
size:size
},
headers:{
'token': state.state.token
}
})
}
后端接口接受入参采用@Valid接受,格式如下
@ApiOperation("用户列表")
@GetMapping("/users")
public Object schoolList(@Valid UserListParam userListParam) {
Page page = new Page(userListParam.getCurrent(), userListParam.getSize());
PageInfo pageResult = userService.userPage(page, userListParam);
return ResultUtil.createSuc(pageResult);
}
UserListParam类如下所示:
/**
* 用户列表的搜索参数
* @author zmchen
* Create Time : 2018/9/16
*/
@Data
public class UserListParam {
@ApiModelProperty(value = "用户昵称")
@Size(message = "超过最大长度 100 !", max = 100)
private String userName;
@ApiModelProperty(value = "用户状态0-正常1-冻结2-全部")
@Size(message = "超过最大长度 1 !", max = 1)
private String userStatus;
@ApiModelProperty(value = "用户所属学校id")
@Size(message = "超过最大长度 32 !", max = 32)
private String schoolId;
@ApiModelProperty(value = "注册时间-min值")
private String startTime;
@ApiModelProperty(value = "注册时间-max值")
private String endTime;
@ApiModelProperty(value = "当前页数")
private Integer current = 1;
@ApiModelProperty(value = "每页记录数")
private Integer size = 10;
}
1.2 post请求
前端传参新增data参数,若后端接口需要json格式的数据,则需要在headers参数中设置Content-type,请求示例如下所示:
export const changeUserStatus = ({userId,userStatus}) => {
const data = {userId, userStatus};
return axios.request({
url: state.state.queryHost+'/api/users/changeStatus',
method: 'post',
data,
headers: {
'Content-Type': 'application/json;charset=UTF-8',
'token': state.state.token
}
})
}
后端接口接受入参采用@RequestBody接受,格式如下:
@ApiOperation("修改用户状态")
@PostMapping("/users/changeStatus")
public BaseDto updateUser(@RequestBody ChangeUserStatusParam param) {
return userService.changeUserStatus(param.getUserId(), param.getUserStatus());
}
ChangeUserStatusParam类如下所示:
/**
* @author zmchen
* Create Time : 2018/9/26
*/
@Data
public class ChangeUserStatusParam {
@ApiModelProperty(value = "用户id")
@Size(message = "超过最大长度 32 !", max = 32)
private String userId;
@ApiModelProperty(value = "用户状态 0-正常 1-冻结")
@Size(message = "超过最大长度 1 !", max = 1)
private String userStatus;
}