详情页面数据渲染的思路复盘

 如图，点击<查看>按钮时，会打开详情页面，把这一条数据的详细内容给展示出来，如果单条数据的详情页面没有太复杂的join，就可以直接拿getList里这一条的数据去做渲染

因为在正常业务中，表设计一般会关联其他表的id，如关联产品表的id，那么如果此时页面更合适展示产品名称，而不是产品id，就可以在xml的主查询getList方法上做改造，让其关联产品表，在实体类加产品名称字段并加上@TableField(exist = false)注解，然后在页面调<查看>按钮的方法时,直接从row里面取，直接这样：this.DetailsForm=row;把拿到的这一行数据赋值给页面表单即可

下面记录一下最优雅的写法：

methods: {//打开dialog 初始化数据show(row) {//清空this.reset();console.log(row);this.DetailsForm=row;//这里直接把拿到的这一行数据塞到页面表单即可this.open = true;}
}

    data() {return {// 是否显示弹出层open: false,// 表单参数DetailsForm: {},// 表单校验rules: {}};},

后台xml：

<select id="selectList"  parameterType="String"resultType="XXX实体类"><include refid="selectXXXVo"/><where><if test="name!= null  and name!= ''">and t.name= #{name}</if><if test="params.beginTime != null and params.beginTime != '' and params.endTime != null and params.endTime != ''">and  DATE_FORMAT(t.paytime,'%Y-%m-%d') between #{params.beginTime} and #{params.endTime}</if></where>ORDER BY t.create_time DESC</select>

 在上面selectXXXVo方法里面详细写关联逻辑：

<sql id="selectDdcInsuranceOrderVo">select t.id,...等业务字段..t.订单名称,t.产品id,p.产品名称,              t.create_by,t.create_time,t.update_by,t.update_time,t.remarkfrom 订单表 tLEFT JOIN 产品表 p on p.id=t.产品id
</sql>

实体类加关联表的名称,记得加注解 @TableField(exist = false)：

@TableName(value = "表名")
@Data
public class DdcInsuranceOrder extends BusinessBaseEntity
{@TableField(exist = false)private static final long serialVersionUID = 1L;/** 订单id*/@TableId(value = "id", type = IdType.ASSIGN_UUID)@Excel(name = "订单id",sort =1)private String id;/** 保险产品id */@TableField(value = "produce_id")@Excel(name = "保险产品id",sort = 2)private String produceId;/** 保险名称 */@TableField(exist = false)@Excel(name = "保险名称",sort = 3)private String produceName;...等等业务字段
}

下面演示冗余的写法：

页面的列表点击<详情>按钮后，进入详情页面组件，show里面先清空，再拿到主键id，然后去发请求selectById，

methods: {//打开dialog 初始化数据show(row) {this.reset();const id = row.id;this.getData(id);//获取订单详情this.open = true;},/** 获取订单详情 */getData(id) {//可能需要重新定义查询车主详情信息接口getInsuranceOrder(id).then(response => {this.DetailsForm = response.data;this.open = true;});this.title = "支付流水详情";},// 表单重置reset() {this.DetailsForm = {};this.resetForm("form");},}

拿到selectById返回的数据发现返回的实体类里很多字段的数据是id，展示到页面无意义，需要关联查询，而使用MybatisPlus的eq（id）去查也只对单表有效，所以去再写一个selectById类似的接口？一层一层到dao层到业务逻辑层调xml？最后再手写关联查询的SQL？这里完全就不用，早就已经是冗余的操作了，完全没必要将请求打到后端来。

   <select id="select详情ById" parameterType="String"  resultType="实体类">select t.id,...等业务字段..t.订单名称,t.产品id,p.产品名称,              t.create_by,t.create_time,t.update_by,t.update_time,t.remarkfrom 订单表 tLEFT JOIN 产品表 p on p.id=t.产品idwhere t.id = #{id}</select>