2024年Web前端最全VUE+ECharts从数据库中获取数据（柱状图、扇形图）(1)，前端非技术面试

TCP协议

• TCP 和 UDP 的区别？
• TCP 三次握手的过程？
• 为什么是三次而不是两次、四次？
• 三次握手过程中可以携带数据么？
• 说说 TCP 四次挥手的过程
• 为什么是四次挥手而不是三次？
• 半连接队列和 SYN Flood 攻击的关系
• 如何应对 SYN Flood 攻击？
• 介绍一下 TCP 报文头部的字段
• TCP 快速打开的原理(TFO)
• 说说TCP报文中时间戳的作用？
• TCP 的超时重传时间是如何计算的？
• TCP 的流量控制
• TCP 的拥塞控制
• 说说 Nagle 算法和延迟确认？
• 如何理解 TCP 的 keep-alive？

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

浏览器篇

• 浏览器缓存?
• 说一说浏览器的本地存储？各自优劣如何？
• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？

2.2 Vue实现

---

1. 在动态交互前必须要有静态数据，是通过索引赋值的，所有值不能为空（绘制静态图形）；

2. 在template中申请一个div块，放所绘制的图形；

3. 需要加入watch监听

2.2.1 核心代码

created() {

this.$axios.get(“findPatientAge”).then((response) => {

console.log(response);

if (response.data.statusCode == 200) {

this.datay.length = 0; //清空数组

for (let i = 0; i < response.data.data.length; i++) {

this.datay.push(response.data.data[i]);

}

console.log(this.datay);

}

});

},

class=“HelloWorld echart-box”

id=“myChart1”

:style=“{width: ‘1000px’, height: ‘500px’,background:‘#ffffff’}”

2.3 结果展示

---

3. 扇形图及动态交互

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

3.1 后台实现

---

因为扇形是一个key,value的形式所以需要两个值；

1. 从数据库查出对应的值；

2. 向前端传入一个对象

@CrossOrigin

@RequestMapping(value = “/findPatientSex”, method = RequestMethod.GET)

public ActionResult findAllSexP() {

ActionResult actionResult = new ActionResult();

List allSexService = patientService.findAllSexService();

actionResult.setData(allSexService);

actionResult.setStatusCode(200);

return actionResult;

}

3.2 Vue实现

---

将传过来的对象加入数据源中，思路同柱状图

3.2.1 核心代码

created() {

this.$axios.get(“findPatientSex”).then((response) => {

console.log(response);

if (response.data.statusCode == 200) {

this.datas.length = 0; //清空数组

for (let i = 0; i < response.data.data.length; i++) {

this.datas.push(response.data.data[i]);

console.log(this.datas);

}

}

});

},

class=“HelloWorld echart-box”

id=“myChart1”

:style=“{width: ‘1000px’, height: ‘500px’,background:‘#ffffff’}”