Web前端最全vue如何根据ip地址获取实时当地城市、时间、天气(1)，web开发网上培训

性能优化

1.webpack打包文件体积过大？（最终打包为一个js文件）

2.如何优化webpack构建的性能

3.移动端的性能优化

4.Vue的SPA 如何优化加载速度

5.移动端300ms延迟

6.页面的重构

所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

1.1获取使用腾讯位置API资格

---

首先在https://lbs.qq.com/console/setting.html这个网页中 ， 申请你自己key，也就是密钥，有了这个密钥，你才有资格使用位置服务api；

1.2设置授权IP

---

申请后，然后在官网上设置你的key，找到　　key管理–》启用产品–》WebServiceAPI 选择授权IP 内容输入0.0.0.0-255.255.25.255

1.3使用API获取IP地理位置

---

这个接口是跨域的，腾讯给的方法是jsonp解决跨域，倘若是原生，我们可以直接用jq来进行jsonp跨域，可是axios根本不能进行jsonp跨域，网上查了半天，才找到vue中原来有一个依赖 vue-jsonp 用于专门解决jsonp跨域。

1.3.1处理跨域问题

安装下载vue-jsonp依赖

npm i -S vue-jsonp

在main.js中导入vue-jsonp

// 导入腾讯地图，获取用户当前位置

import VueJsonp from ‘vue-jsonp’

Vue.prototype.$jsonp = VueJsonp

Vue.use(VueJsonp)

1.3.2请求接口，获取数据

在date中先定义需要展示的数据

data() {

return {

// 当地信息（城市、时间、地点、天气）

local: {

// ip地址所在城市

city: ‘’,

// 所在城市温度

temperature: ‘’,

// 天气类型

type: ‘’,

// 时

hour: ‘’,

// 分

minute: ‘’,

// 月

month: ‘’,

// 日

date: ‘’,

// 星期几

day: ‘’,

// 出勤率echart数据

},

}

}

在methods中定义获取城市的方法getLocalCity，在created()中调用

getLocalCity() {

var data = {

key: ‘KSPBZ-V5L33-5EM3D-35N5X-DIY66-CRF7J’, //申请的密钥,写死就行

}

var url = ‘https://apis.map.qq.com/ws/location/v1/ip’ //这个就是地理位置信息的接口

data.output = ‘jsonp’

this.$jsonp(url, data)

.then((res) => {

this.local.city = res.result.ad_info.city

// 根据城市，获取当前天气和时间（在此先预留获取天气方法，完成后取消注释）

// this.getLocalWeather(this.local.city)

return res

})

.catch((error) => {

console.log(error)

})

},

2.根据获取的城市名称获取当地天气

================================================================================

2.1引入axios

---

安装axios

npm install axios

在main.js中引入axios

import axios from “axios”;

Vue.prototype.$axios = axios; //此处根据项目情况来配置

2.2使用接口，获取当地天气

---

2.2.1声明定时器

在data中声明定时器，用于后期的销毁

timeId: ‘’,

2.2.2使用接口获取实时天气数据

// 获取当地时间和天气

getLocalWeather(city) {

if (city && city !== ‘’) {

this.$axios

.get(‘http://wthrcdn.etouch.cn/weather_mini?city=’ + city)

.then((res) => {

// 获取当天数据

let todayWeather = res.data.forecast[0]

if (todayWeather !== ‘’) {

// 获取温度，取平均值

计算机网络

• HTTP 缓存

• 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

• HTTP 常用的请求方式，区别和用途？

• HTTPS 是什么？具体流程

• 三次握手和四次挥手

• 你对 TCP 滑动窗口有了解嘛？

• WebSocket与Ajax的区别

• 了解 WebSocket 嘛？

• HTTP 如何实现长连接？在什么时候会超时？

• TCP 如何保证有效传输及拥塞控制原理。

• TCP 协议怎么保证可靠的，UDP 为什么不可靠？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法

• 链表

• 字符串

• 数组问题

• 二叉树

• 排序算法

• 二分查找

• 动态规划

• BFS

• 栈

• DFS

• 回溯算法