vue后台获取登录用户ip地址和所在地

1.项目需要拿到登录账号的ip和所在地

  // 获取ip地址
        fetch('https://api.ipify.org?format=json').
          then(response => response.json()).
          then(data => {
            const ip = data.ip
            //通过ip地址获取所在地
            fetch(`https://api.vore.top/api/IPdata?ip=${ip}`).
              then((res) => res.json()
                .then((data) => {
                  console.log(data);
                })
              )
          })
          .catch(error => { console.error(error) })

2.免费的api可以直接调用使用,但是可能需要做好跨域,我因为用的是Fantastic-admin框架,应该本身就有跨域所以没有报错,可以正常获取到返回值,打印一下data看下

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端vue项目引入echart,可以通过以下步骤来通过接口获取数据: 第一步,安装echart库和vue-echarts库。 在命令行中运行以下命令来安装echart和vue-echarts库: ```shell npm install echarts vue-echarts ``` 第二步,引入echart和vue-echarts库。 在vue项目的入口文件(通常是main.js)中引入echart和vue-echarts库: ```javascript import Vue from 'vue' import ECharts from 'vue-echarts' import 'echarts' Vue.component('v-chart', ECharts) ``` 第三步,在组件中使用vue-echarts来展示图表。在需要展示图表的vue组件中,通过调用echart的接口获取数据,并将数据传入到vue-echarts中进行渲染: ```javascript <template> <v-chart :options="chartOptions" /> </template> <script> export default { data() { return { chartOptions: {} } }, methods: { fetchData() { // 通过接口获取数据 // 这里可以使用axios或者其他网络请求库来调用接口获取数据 // 假设获取到的数据为responseData let responseData = { /* 获取到的数据 */ } // 将数据传入echart的options中 this.chartOptions = { // 这里根据echart的配置要求,将responseData中的数据传入到options中 } } }, mounted() { // 在组件挂载后调用fetchData方法来获取数据并渲染图表 this.fetchData() } } </script> ``` 通过以上步骤,我们可以在vue项目中引入echart,并通过接口获取数据来展示图表。这样就可以实现在前端vue项目中使用echart来展示动态数据的图表。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值