前端面试+学习

0、用html+css写的页面，接接口：

方法一：可以引入vue进行接接口，调接口，渲染数据。axios

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var app = new Vue({
        el: "#data",
        data () {
            return {
                data1: [],
            }
        },
        mounted() {
            this.test()
        },
        methods: {
            test () {
                let _this=this;
axios.get('https://www.xxx.com/xx?cpOrderId=CP-2004-05276')
                    .then(function (response) {
                        _this.data1=response.data.data;
                        console.log(response.data);
                        console.log(_this.data1);
                        console.log(_this.data1.projName);
                        console.log(_this.data1.sendTime.length);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
               }
        }
    })
</script>

方法二：可以引入jquery进行接接口，调接口，渲染数据。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(function () {
    $.ajax({
      url: 'https://www.xxx.com/xx?cpOrderId=CP-2004-05276',
      success: function (res) {
        console.log(res)
      }
    })
  })
</script>

1、从输入一个url到浏览器页面展示都经历了哪些过程？

一般会经历以下几个过程：
1、首先，在浏览器地址栏中输入url
2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。
3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。
4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。
5、握手成功后，浏览器向服务器发送http请求，请求数据包。
6、服务器处理收到的请求，将数据返回至浏览器
7、浏览器收到HTTP响应
8、读取页面内容，浏览器渲染，解析html源码
9、生成Dom树、解析css样式、js交互
10、客户端和服务器交互
11、ajax查询

其中，步骤2的具体过程是：
浏览器缓存：浏览器会记录DNS一段时间，因此，只是第一个地方解析DNS请求；
操作系统缓存：如果在浏览器缓存中不包含这个记录，则会使系统调用操作系统，获取操作系统的记录(保存最近的DNS查询缓存)；
路由器缓存：如果上述两个步骤均不能成功获取DNS记录，继续搜索路由器缓存；
ISP缓存：若上述均失败，继续向ISP搜索。

2、关于vue传参

3、如何在调用一个函数的时候，使函数只被调用一次。

在循环里面就给写个限制条件，让它只循环一次

比如在循环外面定义一个flage 为true

在循环里面判断flage为true就执行调用函数，同时把flage改为false

var flag = true;
if (flag){
    // 显示时加载默认数据
    Controller.api.handleInitOverduetable(); //（调用的函数）
    flag = false;
}
else{
    return;
}

4、HTTP 与 HTTPS 的区别

HTTP（HyperText Transfer Protocol：超文本传输协议）是一种用于分布式、协作式和超媒体信息系统的应用层协议。

简单来说就是一种发布和接收 HTML 页面的方法，被用于在 Web 浏览器和网站服务器之间传递信息。

HTTP 默认工作在 TCP 协议 80 端口，用户访问网站 http:// 打头的都是标准 HTTP 服务。

HTTP 协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。

HTTPS（Hypertext Transfer Protocol Secure：超文本传输安全协议）是一种透过计算机网络进行安全通信的传输协议。HTTPS 经由 HTTP 进行通信，但利用 SSL/TLS 来加密数据包。HTTPS 开发的主要目的，是提供对网站服务器的身份认证，保护交换数据的隐私与完整性。

5、如果改不了样式的话，极大可能是因为使用了组件，它的样式被封在组件的很多层里面，这个时候可以用 深度选择器 

6、vue for循环中常见问题之求和(合计)

例：求后台返回数据

this.dataInfo 中某个字段（item.totalSum）的和，只需添加computed,然后模板中直接可以使用totalSumAll (不需要再data中声明)

computed:{
  totalSumAll(){
    let totalSumAll = 0;
    this.dataInfo.map((item) => {totalSumAll += item.totalSum})
    return totalSumAll
  },
}

注：工作项目之余的学习综合，有侵权部分请联系本人删除