vue对接帆软bi - 技术栈

前提条件

安装 Vue.js 项目：你需要先有一个已经初始化的 Vue 项目。如果没有，可以使用 Vue CLI 创建一个新项目：
bash 复制代码
```
vue create finebi-vue
```
帆软 BI 配置：确保你有帆软 BI 服务器的访问权限，并且能够获得 API 密钥或访问 token，以便能够从帆软 BI 获取数据。
CORS 支持：如果你的 Vue 应用和帆软 BI 是部署在不同的服务器上，需要处理 CORS（跨域资源共享）问题。可以在服务器上配置允许跨域请求，或者通过代理服务器来避免 CORS 问题。

步骤 1：安装 axios

为了与帆软 BI 的 API 进行交互，我们使用 axios 来发送 HTTP 请求。

首先，在你的 Vue 项目中安装 axios：

bash 复制代码

npm install axios

步骤 2：配置 axios

在 Vue 项目中创建一个新的服务文件，用于配置 axios。假设我们将此文件命名为 api.js。

javascript 复制代码

// src/services/api.js
import axios from 'axios';

// 创建一个 axios 实例
const api = axios.create({
  baseURL: 'http://your-finebi-server-url/api', // 帆软 BI 的 API 基本 URL
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your-token', // 使用 token 进行认证，替换为你自己的 token
  },
});

export default api;

步骤 3：获取帆软 BI 报表数据

假设你要获取某个报表的数据，可以在 Vue 组件中调用这个 API。

例如，在 Report.vue 中，你可以这样做：

vue 复制代码

<template>
  <div>
    <h1>帆软 BI 报表</h1>
    <div v-if="loading">加载中...</div>
    <div v-else>
      <iframe :src="reportUrl" width="100%" height="600px" frameborder="0"></iframe>
    </div>
  </div>
</template>

<script>
import api from '../services/api';

export default {
  data() {
    return {
      reportUrl: '', // 报表的 URL
      loading: true, // 是否正在加载
    };
  },
  mounted() {
    this.getReportData();
  },
  methods: {
    async getReportData() {
      try {
        // 调用帆软 BI 的接口获取报表
        const response = await api.get('/report', {
          params: { reportId: 'your-report-id' }, // 传入报表 ID
        });

        // 假设返回的数据中有报表的 URL
        this.reportUrl = response.data.url;
        this.loading = false;
      } catch (error) {
        console.error('获取报表失败:', error);
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped>
/* 你可以根据需要添加样式 */
</style>

步骤 4：部署和访问

确保你的 Vue 项目能够成功请求帆软 BI 服务器，并且 API 返回的数据正确。
你可以将 Vue 项目部署到你的服务器上，或者使用 Vue CLI 提供的本地开发服务器进行开发。

注意事项

认证和授权：帆软 BI 通常需要进行认证，因此你需要确保能够获取到正确的 API token 或其他认证方式。
跨域问题：如果 Vue 应用和帆软 BI 部署在不同的域上，可能会遇到跨域问题，需要在服务器端配置 CORS 支持，或者使用 Vue 的代理配置。
API 配置：不同版本的帆软 BI API 接口有所不同，具体使用哪些接口，可以参考官方文档。