avue的前后端数据传输教程

素颜马尾好姑娘i 2023-10-08 16:18 33阅读 0赞

**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:[{
        }]