如何在vue的数据大屏中请求到若依的接口

要设置跨域嘛我在放api的js中设置跨域数据大屏整个都黑屏了

引用皆我百晓生小程序回复内容作答：

在Vue的数据大屏中请求若依的接口，你需要确保以下几点：

确保你已经安装了axios库，可以使用npm install axios命令进行安装。
在你的Vue组件中，可以使用以下代码来发送请求：

import axios from 'axios';

axios.get('若依接口的URL')
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    // 处理错误
  });

如果你在请求若依接口时遇到跨域问题，你可以在若依接口所在的服务器端进行跨域设置。具体的跨域设置方法可以参考若依的文档或者询问若依的开发团队。
如果你在放置API的JS文件中设置了跨域，但整个数据大屏都黑屏了，可能是因为跨域设置不正确导致的。你可以检查一下跨域设置是否正确，并确保没有其他错误导致数据大屏黑屏。

希望以上信息对你有帮助！如果还有其他问题，请随时提问。

【相关推荐】

你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/649890
这篇博客你也可以参考下：学会在Vue项目中插入高德地图JS API与地图的相关设置，看这一篇就够了~（保姆级精简教学）

除此之外, 这篇博客: vue中对于高德地图API的调用、js封装以及刷新后地图不显示为空白的原因中的 函数封装和调用 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

下面进行地图函数的封装和调用
（1）首先在src文件夹下创建一个utils文件夹，在该文件夹下存放utilMap.js文件

之后开始编写该文件下的内容，封装异步加载地图的函数，并且刷新后地图不显示为空白的原因也在其中

// 异步加载高德地图
export default {
    loadMap (v = '1.4.15',
             key = '你申请的key值') {
        return new Promise(function (resolve, reject) {
            let hasLoaded = document.getElementById("amap");
            if(hasLoaded) { // 只加载一次
                //如果版本一致则直接返回，避免重复请求
                if(hasLoaded._version === v && hasLoaded._key === key){
                    resolve(window.AMap);
                    return;
                }
                document.head.removeChild(hasLoaded);
            }
            let script = document.createElement('script');
            script.type = 'text/javascript';
            script.id = "amap";
            script.src = `https://webapi.amap.com/maps?v=${v}&key=${key}&callback=initAMap`;
            //此处若缺失callback，则页面在刷新后地图会变为空白不显示
            script.onerror = reject;
            script._version = v;
            script._key = key;
            document.head.appendChild(script)
            window.initAMap = () => {
                resolve(window.AMap)
            }
        });
    },
}

（2）第二步，在src文件夹下再次创建一个core文件夹，里面新建一个use.js文件
在这里插入图片描述
然后我们开始写这个文件下的内容，就是引入url

import Vue from 'vue';
import mapUtil from "../utils/mapUtil";

//url
Vue.prototype.$mapUtil = mapUtil;

（3）第三步，将创建的use.js文件在main.js里申明，毕竟vue的命根子在这里

import Vue from 'vue'
import App from './App.vue'
import {router} from './router/index'
import './core/use'

Vue.config.productionTip = false

（4）第四步，在主文件夹下创建vue.config.js文件，该文件需要手动创建
在这里插入图片描述
内容配置为：

module.exports = {
    devServer: {
        port: 8080 //端口号配置
    },
    configureWebpack: {
        externals: {
            'AMap':'AMap' //高德地图配置
        }
    }
}

（5）第五步，就可以在所需要的页面配合绘制地图函数直接调用啦，完成前四步以后，下次调用地图就可以直接跳过了！！！

<script>
export default {
  name: 'Map',
  mounted() {
    let self = this;
    setTimeout(function () {
      self.initMap();
    },800) //延时加载地图，保证数据获取成功
  },
  methods:{
    initMap(){
      this.$mapUtil.loadMap('2.0').then(AMap =>{
        this.map = new AMap.Map('maps', {
          zoom: 3,
          center: [120, 40], //初始化地图中心点
          resizeEnable: true
        })
      }).catch(()=>{
        console.log('地图加载失败！')
      })
    },

  }
}
</script>

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^