Vue + iveiw-admin 后台管理平台开发踩坑-前端篇

前言

作者第一次做前端项目，做的是后台管理系统。使用的是网上现有的后台管理前端框架 iview-admin 2.0

官网：https://iview.github.io/

代码：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;
}

2 render函数的使用

转载于:https://my.oschina.net/chyblog/blog/2874320