获取终端设备所在ip地址

此需求是因为之前好多大厂都实行记录终端ip信息，保障网络健康有序的发展下面讲解两个方案来获取用户终端IP信息

如图

调用腾讯位置服务获取终端设备所在ip地址

<!-- 文件位置：public/index.html-->
<!--output=jsonp 解决跨域-->
<script>
  window.callbackfunction = function(data) {
    sessionStorage.setItem('ipResultData', JSON.stringify(data.result))
  }
</script>
<script src="https://apis.map.qq.com/ws/location/v1/ip?output=jsonp&callback=callbackfunction&key='你的key'"></script>

<!--index.vue-->

const res = JSON.parse(sessionStorage.getItem('ipResultData'))
console.log('终端设备地址信息：', res);
if (res) {
    const { ip, location: { lat, lng }, ad_info: { province, city, district, adcode } } = res
    const clientIpAddress = {
      ip,
      lat, // 纬度
      lng, // 经度
      province, // 省
      city, // 市
      district, // 区
      adcode // 行政区域代码
    }
    this.$store.commit('formData/setClientIpAddress', clientIpAddress);
}

腾讯响应示例

{
"status": 0,
"message": "Success",
"request_id": "89e6aa40dff244a28481d48bf9f2729d",
"result": {
	"ip": "140.206.146.69",
	"location": {
		"lat": 31.23037,
		"lng": 121.4737
	},
	"ad_info": {
		"nation": "中国",
		"province": "上海市",
		"city": "上海市",
		"district": "",
		"adcode": 310000
	}
}

调用高德位置服务获取终端设备所在ip地址

<!--output=jsonp 解决跨域-->
axios.get('https://restapi.amap.com/v3/ip?output=jsonp&key='你的key'').then(res => {
        const { status, adcode, city, province, rectangle } = res.data
        const arr = rectangle.split(';')
        if (status === '1') {
          const clientIpAddress = {
            lat: arr[0],
            lng: arr[1],
            adcode,
            city,
            province
          }
          this.$store.commit('formData/setClientIpAddress', clientIpAddress);
        }
      })

高德响应示例

{
	"status": "1",
	"info": "OK",
	"infocode": "10000",
	"province": "上海市",
	"city": "上海市",
	"adcode": "310000",
	"rectangle": "120.8397067,30.77980118;122.1137989,31.66889673"
}

解决Vue跨域问题

跨域是因为浏览器的同源策略所导致，同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，同源是指：域名、协议、端口相同，非相同的域名，协议，端口就会出现跨域错误。

解决Vue跨域问题，

创建vue.config.js文件在项目根目录上

devServer: {
    open: false, // 启动服务后是否打开浏览器
    host: '0.0.0.0',
    port: 8080, // 服务端口
    https: false, // https:{type:Boolean}是否启用https
    hotOnly: false,
    // 设置代理，用来解决本地开发跨域问题，如果设置了代理，那你本地开发环境的axios的baseUrl要写为 '' ，即空字符串
    proxy: {
      '/api/': {
        target: 'http://www.baidu.com',  // 要代理访问的路径
        changeOrigin: true, // 运行跨域
        pathRewrite: {
          '^/api/': '' // 请求的时候，地址重写
        }
      }

    }
  }

创捷axios实例时，将baseUrl设置为 '/api/'

// .env文件

VUE_APP_GATEWAY_API = '/api/'
VUE_APP_BASE_URL = '/api/'

// axios实例
let baseUrl = process.env.VUE_APP_BASE_API; // 请求url
const instance = axios.create({
  baseURL: baseUrl,
  timeout: 30000,
  headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }
});

还可以

const http = axios.create({
  timeout: 30000,
  withCredentials: true,
  BASE_URL: '/api/'
  headers: {
     'Content-Type': 'application/json; charset=utf-8'
   }
})

css滤镜

918，铭记历史，官网主题色灰白色调，以表哀悼。应用实例代码

<!--9.18主题色变灰-->
    setInterval(function(){
        var date = new Date();
        var year = date.getFullYear();
        var moon = date.getMonth() + 1;
        var day = date.getDate();
        if(year == 2022 && moon == 9 &&　day == 18) {
            document.getElementsByTagName('html')[0].style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';
            document.getElementsByTagName('html')[0].style.webkitFilter = 'grayscale(100%)';
        } else {
            document.getElementsByTagName('html')[0].style.filter = '';
            document.getElementsByTagName('html')[0].style.webkitFilter = '';
        }
    }, 1000);

亦或者通过css使网站变成灰白色调，哀悼风格界面的代码

html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}

用户终端IP信息、位置服务、跨域、CSS滤镜（主题色变灰）

获取终端设备所在ip地址

解决Vue跨域问题

css滤镜