avue的前后端数据传输教程

1 后端写好查询接口。
在service实现类里实现查询功能，利用mybatis-plus的queryWrapper查出数据，并用list接收。示例：

@Override
	public List<ImageRunLog> getLogListByRecordId(Long recordId) {
    
    
		IImageRunLogService runLogService = SpringUtil.getBean(IImageRunLogService.class);
		LambdaQueryWrapper<ImageRunLog> queryWrapper = new LambdaQueryWrapper<>();
		LambdaQueryWrapper<ImageRunLog> eq = queryWrapper.eq(ImageRunLog::getId, recordId);
		List<ImageRunLog> list = runLogService.list(eq);
		return list;
	}

然后在controller里调用该接口，用list接收结果，注意方法名与注解路径对应好，然后return R.data(list)传至前端。示例：

@GetMapping("/getLogListByRecordId")
	@ApiOperationSupport(order = 8)
	@ApiOperation(value = "根据id获一条", notes = "传入recordId")
	public R<List<ImageRunLog>> getLogListByRecordId(Long recordId) {
    
    
		List<ImageRunLog> list = imageRunLogService.getLogListByRecordId(recordId);
		return R.data(list);
	}

2 前端接收处理数据
在js文件中写出同名方法，将对应参数对应好，注意url的路径。示例：

export const getLogListByRecordId = (recordId) => {
    
    
		return request({
    
    
			url: '/api/plugin-run-log/imagerunlog/getLogListByRecordId',
			method: 'get',
			params: {
    
    recordId}
		})
	}

在vue文件中给参数赋值并输出。在openwin()或onLoad()里赋值给data：

console.log(row)
        getLogListByRecordId(row.id).then(res => {
    
    
          console.log(res)
          this.logData = res.data.data;
        });

之后在对应的logOption { column: [ ] }里将prop字段与entity里的属性一一对应，作为列名展示数据即可：

logOption: {
    
    
          height:'auto',     //表格高度
          calcHeight: 30,    //表格高度差（主要用于减去其他部分让表格高度自适应）
          tip: false,
          border: true,      //表格边框是否显示
          dialogClickModal: true,
          showHeader:true,
          excelBtn:true,    //表格导出按钮是否显示
          addBtn:false,      //是否显示添加按钮
          editBtn:false,     //是否显示编辑按钮
          delBtn:false,      //是否显示删除按钮
          // excelBtn:false,    //表格导出按钮是否显示
          labelWidth:120,    //表单前面的标题长度
          refreshBtn: false, //表格上面小的 刷新按钮
          columnBtn: false,  //表格上面小的 列表按钮
          searchBtn: false,  //表格上面小的 搜索按钮
          menu: false,        //是否显示操作栏
          column: [
            {
    
    
              label: "日志id",   //表格的列名
              prop: "id",
              hide:true         //是否隐藏
            },
            {
    
    
              label: "任务类型",
              prop: "taskType",
            },
            {
    
    
              label: "任务唯一码",
              prop: "taskCode",
            },
            {
    
    
              label: "一行日志",
              prop: "message",
            },

          ]
        },
        /*从log表中获取数据*/
        logData:[{
    
    }]