微服务实战笔记-学成在线-day07

知识点

• springboot中实体字段为dType 传到前台json为dtype的原因与解决方案
• vue中watch的基本用法
• element-ui中MessageBox的自定义校验
• mybatis中collection的用法

1. springboot中实体字段为dType 传到前台json为dtype的原因与解决方案

原因

springboot 使用fastjson 在对象的序列化和反序列化的时候对字段进行了处理

解决方案

在bean的get方法上添加@JsonProperty注解

@Data
@ToString
@Document(collection = "sys_dictionary")
public class SysDictionary {

    @Id
    private String id;

    @Field("d_name")
    private String dName;

    @Field("d_type")
    private String dType;

    @Field("d_value")
    private List<SysDictionaryValue> dValue;

    @JsonProperty("dName")
    public String getDName() {
        return dName;
    }
    @JsonProperty("dType")
    public String getDType() {
        return dType;
    }
    @JsonProperty("dValue")
    public List<SysDictionaryValue> getDValue() {
        return dValue;
    }
}

2. vue中watch的基本用法

​ 在vue中可以用watch来响应数据的变化，watch有以下几个特性:

• 第一次绑定数据的时候不去监听，如果第一次绑定的时候也要监听 需要设置immediate:true
• watch中默认只监听当前对象，如果需要监听当前对象中依赖的对象，那么需要设置deep:true

watch:{
    data:{
      handler:function(newVal,oldVal){
        	// 值改变的时候干什么
    	},  
         immediate:true,//第一次绑定也监听
             deep:true// 监听对象内部属性
    }
        
}

样例: 当list 发生改变的时候，让table自动选中第一行数据

watch: {
      // 通过监听实现table加载后自动选中第一行
      list: function () {
        this.$nextTick(function () {
          if (this.list && this.list.length) {
            this.$refs.lefTable.setCurrentRow(this.list[0])
          }
        })
      }
    },

3.element-ui中MessageBox的自定义校验

弹出框点击确认前对数据进行自定义校验

this.$prompt('请输入名称', '新增', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValidator: (value => {
              // 自定义的校验在这实现
            if (value === null || value.length == 0) {
              return false;
            }
            return true;
          }),
          inputErrorMessage: '名称不可为空!'
        }).then(({value}) => {
          cmsApi.config_add({name: value}).then(res => {
            this.query()
          })
        });

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MnWLpo96-1590325743498)(.\img\image-20200524173309078.png)]

4.mybatis中collection的用法

对于树型数据结构，mybatis可以通过xml直接配置，不再需要在程序里面自己处理

使用到的关键是resultMap中的2个标签 id 和collection

mapper.xml 文件

  <resultMap id="nodeMap" type="com.xuecheng.framework.domain.course.ext.TeachplanNode">
        <id column="one_id" property="id"></id>
        <result column="one_name" property="pname"></result>
        <collection property="children" ofType="com.xuecheng.framework.domain.course.ext.TeachplanNode">
            <id column="two_id" property="id"></id>
            <result column="two_name" property="pname"></result>
            <collection property="children" ofType="com.xuecheng.framework.domain.course.ext.TeachplanNode">
                <id column="three_id" property="id"></id>
                <result column="three_name" property="pname"></result>
            </collection>
        </collection>
    </resultMap>

    <select id="selectList" parameterType="java.lang.String" resultMap="nodeMap">
        select a.id one_id,a.pname one_name,
        b.id two_id,b.pname two_name,
        c.id three_id,c.pname three_name
        from teachplan a left join teachplan b on a.id = b.parentid left
        join teachplan c on b.id = c.parentid where a.grade = 1
        <if test="_parameter != null and _parameter != ''">
            and a.courseid = #{courseId,jdbcType=VARCHAR}
        </if>
        order by a.orderby,b.orderby,c.orderby
    </select>

java实体类

public class TeachplanNode extends Teachplan {

    List<TeachplanNode> children;

}

效果图