纷享开发自定义组件并实现前后端交互|纷享实施顾问代码实战2

实现效果如下：

前端代码：

<template>

  <div>

    <template v-for="item in dlist">

      <div class="object-item">

        <fx-card :body-style="{ padding: '0px' }">

          <img src="https://imgb9.photophoto.cn/20141215/fenxiangxiaokebiaozhilogotupian-09854006_3.jpg" class="image">

          <div style="padding: 14px;">

            <span>{{item.name}}</span>

            <div class="bottom clearfix">

              <!-- <time class="time">{{ currentDate }}</time> -->

              <fx-button type="text" class="button">操作按钮</fx-button>

            </div>

          </div>

        </fx-card>

      </div>

    </template>

  </div>

   

</template>

<script>

export default {

  data() {

    return {

        dlist:[]

    }

  },

  created(){

    this._fetchList();

  },

  methods: {

     _fetchList(){

        console.log(FxUI.userDefine.call_controller("CstmCtrl_XZpia__c"));

        FxUI.userDefine.call_controller("CstmCtrl_XZpia__c").then((res)=>{  

//纷享自定义方法获取API name为"CstmCtrl_XZpia__c"的数据

          if(res.Result.StatusCode === 0){                                  //判断接口是否打开

            this.dlist = res.Value.functionResult.dataList;

          }

          console.log(res.Value.functionResult.dataList)

        })

    }

  },

}

</script>

<style lang="less" scoped>

  .object-item{

    width: 230px;

    display: inline-block;

    margin: 20px;

  }

  .object-item img{

    height: 200px;

  }

  </style>

后端代码：

主要的问题有两点：

1. 如何获取预定义对象Promise的值

使用.then 方法

1. find接口报错问题

通过研究文档发现，现在使用的是FQL构造实例化对象，和select进行查询

解决完问题后代码就可以正常运行了

这个案例中涉及到了一些vue和纷享的知识点

1. 这里我们可以看到，使用了v-for循环来实现item的遍历
2. 在<span>{{item.name}}</span>我们使用了vue中的占位符{{}}

1. 使用vue中的钩子函数created，在页面创建后加载
2. 使用纷享的自定义方法FxUI获取数据