22年11月工作笔记整理（前端）

一、3D知识学习

1.hdr是指高动态范围图像，可以提供更多的动态范围和图像细节，利用每个曝光时间相对应最佳细节的LDR图像来合成最终HDR图像，能够更好的反映出真实环境中的视觉效果。
2.GLB文件是以图形语言传输格式（glTF）保存的3D模型，它以二进制格式存储有关3D模型的信息，包括节点层级、摄像机、材质、动画和网格。GLB文件是GLTF文件的二进制版本。

二、vue知识学习

1.在vue2中，v-for的优先级更高；在vue3中v-if的优先级更高
2.使用websocket实时更新后端接口数据

//以实时更新天气为例
methods: {
            // 获取天气
            async getTheWeather() {
                // 先通过接口请求一次当前天气状况
                let res = await 接口名({});
                if(res.code === 200) {
                    // 这里将接口获取到的天气数据放入 data 中的 weather 中即可
                    ...
 
                    // 然后打开 websocket 实时接收
                    this.connectWebSocket();
                }
            },
            // websocket
            connectWebSocket (){
                let _this = this;
                if ("WebSocket" in window) {
                    console.log("浏览器支持 WebSocket!");
                    // 打开一个 webSocket
                    let url ='xxxxxxxxxxx'; // 给你提供数据推送的地址
                    let ws = new WebSocket(`url`);
                    // 连接成功
                    ws.onopen = function () {
                        // Web Socket 已连接上，使用 send() 方法发送数据
                        ws.send("这是发送的测试数据");
                        console.log('连接成功');
                    };
                    // 接收数据处理
                    ws.onmessage = function (evt) {
                        let received_msg = evt.data;
                        // 这里将天气数据放入 data，然后天气就更新了
                        ...
                    };
                    // 连接报错
                    ws.onerror = function () {
                        console.log('连接报错...');
                    }
                    // 连接关闭
                    ws.onclose = function () {
                        // 关闭 websocket
                        console.log("连接已关闭...");
                    }
                } else {
                    // 浏览器不支持 WebSocket
                    console.log("您的浏览器不支持 WebSocket!");
                }
            },
 
        },
        mounted() {
            // 获取当地天气
            this.getTheWeather();
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

如果想要带有重连机制的，可以 npm i reconnecting-websocket 安装，
引入import ReconnectingWebSocket from ‘reconnecting-websocket’;
创建对象的时候把WebSocket改为ReconnectingWebSocket
3.el-pagination组件控制下一页的按钮禁用，可以给total置为0

三、css知识学习

1.给网页加上漂亮的顶部阴影效果：

body:before {
          content: "";
          position: fixed;
          top: -10px;
          left: 0;
          width: 100%;
          height: 10px;
          box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          z-index: 100;
}
1
2
3
4
5
6
7
8
9
10

2.鼠标样式cursor:default默认 pointer小手 move移动 text文本 not-allowed禁止
3.outline绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

outline:outline-color||outline-style||outline-width
1

4.css3新增的poiner-events能够调用禁用元素的鼠标事件。

.disabled{poiner-events:none}
1

5.设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
6.flex属性是flex-grow（放大）、flex-shrink（缩小）和flex-basis宽度的简写，默认值为0 1 auto，后两个属性可选。
7.flex-basis优先级比width高，flex-basis是按照最小内容宽度显示，类似于min-width。
8.当使用背景图的时候，如果背景图是作为边框来使用的，可以对内部元素设置padding-top:1px;相当于预留1px的边框出来。
9.scss变量使用，定义：$ 变量名:x；使用：$ 变量名。
10.学习grid布局的参考链接 https://blog.csdn.net/leilei__66/article/details/122360901
11.拖拽+grid布局实现可拖拽排序功能

//html
<div class="theme-layout">
      <div
        class="theme-box"
        v-for="item in menuListChecked"
        :key="item.routeName"
        draggable="true"
        @dragstart="dragStart($event, item)"
        @dragover.prevent="dragOver($event, item)"
        @dragenter="dragEnter($event, item)"
        @dragend="dragEnd($event, item)"
      >
        <component :is="item.routeName" />
      </div>
    </div>
//js
data() {
    return {
      dragStartTarget: null, // 开始拖拽的对象
      dragEndTarget: null, // 拖拽结束的目标对象
 menuListChecked: [], // 勾选的主题组,
    }
  },
methods:{
  /**
     * @description: 拖拽开始事件
     * @author: zhangyu
     */
    dragStart(e, item) {
      this.dragStartTarget = item
    },
/**
     * @description: 拖拽结束事件
     * @author: zhangyu
     */
    dragEnd() {
      // 拖拽开始目标和拖拽结束目标一致，则位置未发生变化
      if (this.dragEndTarget.routeName === this.dragStartTarget.routeName) {
        return
      }
      // 拖拽开始目标与拖拽结束目标换位置
      let newItems = [...this.menuListChecked]
      const src = newItems.findIndex(
        s => s.routeName === this.dragStartTarget.routeName
      )
      const dst = newItems.findIndex(
        d => d.routeName === this.dragEndTarget.routeName
      )
      newItems.splice(src, 1, ...newItems.splice(dst, 1, newItems[src]))

      this.menuListChecked = newItems
      this.$store.dispatch('menu/setMenuListChecked', this.menuListChecked)

      // 逻辑处理后清空值
      this.$nextTick(() => {
        this.dragStartTarget = null
        this.dragEndTarget = null
      })
    },
 /**
     * @description: 移动拖动对象事件
     * @author: zhangyu
     */
    dragOver(e) {
      e.dataTransfer.dropEffect = 'move'
    },
    /**
     * @description: 拖动后首次在进入目标对象事件
     * @author: zhangyu
     */
    dragEnter(e, item) {
      this.dragEndTarget = item
    }
  }
}
//css
  .theme-layout {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(235px auto);
    gap: 8px 16px;
    grid-template-areas:
      'a i j e'
      'b . . f'
      'c . . g'
      'd . . h';

    .theme-box:nth-child(1) {
      grid-area: a;
    }
    .theme-box:nth-child(2) {
      grid-area: b;
    }
    .theme-box:nth-child(3) {
      grid-area: c;
    }
    .theme-box:nth-child(4) {
      grid-area: d;
    }
    .theme-box:nth-child(5) {
      grid-area: e;
    }
    .theme-box:nth-child(6) {
      grid-area: f;
    }
    .theme-box:nth-child(7) {
      grid-area: g;
    }
    .theme-box:nth-child(8) {
      grid-area: h;
    }
    .theme-box:nth-child(9) {
      grid-area: i;
    }
    .theme-box:nth-child(10) {
      grid-area: j;
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

12.echarts给不同柱子或者线配置不同的颜色代码

series: [{
                     itemStyle: {
                                normal: {
                                    //每根柱子颜色设置
                                    color: function(params) {
                                        let colorList = [
                                            "#c23531",
                                            "#2f4554",
                                            "#61a0a8",
                                            "#d48265",
                                            "#91c7ae",
                                            "#749f83"
                                        ];
                                        return colorList[params.dataIndex];
                                    }
                             }
                   },
        }]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

四、项目知识学习

1.前端搭建流水线：打开流水线，然后照着其他的前端流水线拷贝过来用，把项目名改为自己的，普通高级都要配置，端口号前面是80，最后一个找一个大家都没用过的，最后把端口号告诉后端，后端配置一下。