HeyCloud 文档

# 示例：编写查看用户数据的页面

设想我们正在开发一个用户数据管理的应用，在这个应用中我们已经建立了用户和 HeyCloud 帐号的对应关系，现在我们想要在一个页面中查看这个用户的数据。

示例使用 Vue 作为开发框架

# 1. 搭建页面框架

首先我们创建一个名为 user-data.html 的页面，这里的 accountId 可以从管理控制台中查询这个帐号的 ID 得到：

<!DOCTYPE html>
<html>
<meta charset="utf-8">

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>

<body>
  <div id="app">
    {{ accountId }}
  </div>

  <script>
  var app = new Vue({
    el: '#app',
    data: {
      accountId: '3897a3d3-3d32-4b6d-a138-489657278b70',
    },
  });
  </script>
</body>

</html>

在浏览器中打开这个页面，可以看到页面上显示出这个用户的 HeyCloud 帐号 ID。

# 2. 编写一个调用 API 获取数据列表的方法

下面在 Vue 实例的 methods 对象中，添加一个用于获取数据列表的 list() 异步函数，并在页面加载的时候调用。

mounted() {
  this.list();
},

methods: {

  list: function() {
    try {
      fetch('http://localhost:9000/heycloud/api/data/vdataset/list', {
          method: 'GET',
          mode: 'cors',
          headers: {
            'x-heycloud-account-id': this.accountId,
          },
        })
        .then(resp => resp.json())
        .then(resp => {
          const items = resp.result;
          console.log(items);
        });
    } catch (err) {
      console.log(err)
    }
  },

},

# 3. 将获取到的数据列表显示在页面上

首先在页面上添加表格：

<table style="width: 100%; text-align: center;">
  <thead>
    <tr>
      <th>标题</th>
      <th>坐标系统</th>
      <th>数据量</th>
      <th>创建时间</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="vdataset in vdatasets" :key="vdataset.id">
      <td>{{ vdataset.title }}</td>
      <td>{{ vdataset.sr }}</td>
      <td>{{ vdataset.count }}</td>
      <td>{{ vdataset.createdAt }}</td>
    </tr>
  </tbody>
</table>

然后在 API 请求获取到数据后，通过数据绑定更新到这个表格中：

const items = resp.result;

this.vdatasets.splice(0);
for (let item of items) {
  this.vdatasets.push(item);
}

# 4. 添加搜索和翻页

首先给页面添加三个参数：searchText、pageIndex、pageCount，分别代表搜索的文本、当前页位置、每页的条目数。

然后，在页面上添加输入搜索内容的输入框和搜索按钮，以及上一页、下一页按钮：

<div>
  <input v-model="searchText" type="text">
  <button @click="list">搜索</button>
</div>

<div>
  <button v-if="pageIndex>0" @click="prevPage">上一页</button>
  <button v-if="vdatasets.length>pageCount" @click="nextPage">下一页</button>
</div>

在请求 API 的时候，也需要把这几个参数带上：

const url = 'http://localhost:9000/heycloud/api/data/vdataset/list?' + new URLSearchParams({
  search: this.searchText,
  offset: this.pageIndex * this.pageCount,
  limit: this.pageCount + 1,
});

fetch(url, {
  method: 'GET',
  mode: 'cors',
  headers: {
    'x-heycloud-account-id': this.accountId,
  },
})
  .then(resp => resp.json())
  .then(resp => {
    const items = resp.result;

    this.vdatasets.splice(0);
    for (let item of items) {
      this.vdatasets.push(item);
    }
  });

# 5. 最终效果和代码

页面效果如下图：

最终的页面代码：

<!DOCTYPE html>
<html>
<meta charset="utf-8">

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>

<body>
  <div id="app">
    <div>
      <input v-model="searchText" type="text">
      <button @click="list">搜索</button>
    </div>

    <hr>

    <table style="width: 100%; text-align: center;">
      <thead>
        <tr>
          <th>标题</th>
          <th>坐标系统</th>
          <th>数据量</th>
          <th>创建时间</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="vdataset in vdatasets.slice(0, pageCount)" :key="vdataset.id">
          <td>{{ vdataset.title }}</td>
          <td>{{ vdataset.sr }}</td>
          <td>{{ vdataset.count }}</td>
          <td>{{ vdataset.createdAt }}</td>
        </tr>
      </tbody>
    </table>

    <hr>

    <div>
      <button v-if="pageIndex>0" @click="prevPage">上一页</button>
      <button v-if="vdatasets.length>pageCount" @click="nextPage">下一页</button>
    </div>
  </div>

  <script>
  var app = new Vue({
    el: '#app',

    data: {
      accountId: '3897a3d3-3d32-4b6d-a138-489657278b70',

      searchText: '',
      pageIndex: 0,
      pageCount: 3,
      vdatasets: [],
    },

    mounted() {
      this.list();
    },

    methods: {

      list: function() {
        try {
          const url = 'http://localhost:9000/heycloud/api/data/vdataset/list?' + new URLSearchParams({
            search: this.searchText,
            offset: this.pageIndex * this.pageCount,
            limit: this.pageCount + 1,
          });

          fetch(url, {
              method: 'GET',
              mode: 'cors',
              headers: {
                'x-heycloud-account-id': this.accountId,
              },
            })
            .then(resp => resp.json())
            .then(resp => {
              const items = resp.result;

              this.vdatasets.splice(0);
              for (let item of items) {
                this.vdatasets.push(item);
              }
            });
        } catch (err) {
          console.log(err)
        }
      },

      prevPage: function() {
        this.pageIndex--;
        this.list();
      },

      nextPage: function() {
        this.pageIndex++;
        this.list();
      },

    },
  });
  </script>
</body>

</html>

← 示例：将数据上图可视化 →