diff --git a/2023/07/28/advice/index.html b/2023/07/28/advice/index.html index 5f99c88..d5ce191 100644 --- a/2023/07/28/advice/index.html +++ b/2023/07/28/advice/index.html @@ -148,18 +148,18 @@ @@ -389,12 +389,12 @@

+ - @@ -449,7 +449,7 @@

站点阅读时长 ≈ - 42 分钟 + 45 分钟
diff --git a/2023/08/01/recruitment-2023/index.html b/2023/08/01/recruitment-2023/index.html index 849c1e1..b2e780f 100644 --- a/2023/08/01/recruitment-2023/index.html +++ b/2023/08/01/recruitment-2023/index.html @@ -148,18 +148,18 @@ @@ -458,7 +458,7 @@

站点阅读时长 ≈ - 42 分钟 + 45 分钟

diff --git a/2023/08/03/tutorial-vscode/index.html b/2023/08/03/tutorial-vscode/index.html index 4524474..17655f1 100644 --- a/2023/08/03/tutorial-vscode/index.html +++ b/2023/08/03/tutorial-vscode/index.html @@ -148,18 +148,18 @@ @@ -503,7 +503,7 @@

站点阅读时长 ≈ - 42 分钟 + 45 分钟

diff --git a/2023/08/04/tutorial-git/index.html b/2023/08/04/tutorial-git/index.html index 1b3a4cf..c247040 100644 --- a/2023/08/04/tutorial-git/index.html +++ b/2023/08/04/tutorial-git/index.html @@ -148,18 +148,18 @@ @@ -446,7 +446,7 @@

站点阅读时长 ≈ - 42 分钟 + 45 分钟

diff --git a/2023/08/05/npm-install-ways/index.html b/2023/08/05/npm-install-ways/index.html index 359fc80..c9c0a34 100644 --- a/2023/08/05/npm-install-ways/index.html +++ b/2023/08/05/npm-install-ways/index.html @@ -148,18 +148,18 @@ @@ -427,7 +427,7 @@

参考 站点阅读时长 ≈ - 42 分钟 + 45 分钟

diff --git a/2023/08/16/tutorial-git-command/index.html b/2023/08/16/tutorial-git-command/index.html index c344218..67617f0 100644 --- a/2023/08/16/tutorial-git-command/index.html +++ b/2023/08/16/tutorial-git-command/index.html @@ -148,18 +148,18 @@ @@ -481,8 +481,8 @@

附录
- +
@@ -540,7 +540,7 @@

附录 站点阅读时长 ≈ - 42 分钟 + 45 分钟

diff --git a/2023/08/22/use-websocket-in-vue/index.html b/2023/08/22/use-websocket-in-vue/index.html index d485353..dc94a80 100644 --- a/2023/08/22/use-websocket-in-vue/index.html +++ b/2023/08/22/use-websocket-in-vue/index.html @@ -148,18 +148,18 @@ @@ -435,7 +435,7 @@

参考 站点阅读时长 ≈ - 42 分钟 + 45 分钟

diff --git a/2023/08/23/tutorial-style-guide/index.html b/2023/08/23/tutorial-style-guide/index.html index 92abbf3..7528aa4 100644 --- a/2023/08/23/tutorial-style-guide/index.html +++ b/2023/08/23/tutorial-style-guide/index.html @@ -148,18 +148,18 @@ @@ -565,7 +565,7 @@

参考 站点阅读时长 ≈ - 42 分钟 + 45 分钟

diff --git a/2023/08/26/note-nodeJs/index.html b/2023/08/26/note-nodeJs/index.html index 3d2c531..a5ec874 100644 --- a/2023/08/26/note-nodeJs/index.html +++ b/2023/08/26/note-nodeJs/index.html @@ -148,18 +148,18 @@ @@ -378,6 +378,9 @@

参考
+

参考 站点阅读时长 ≈ - 42 分钟 + 45 分钟

diff --git a/2023/09/27/data-structure-in-c/index.html b/2023/09/27/data-structure-in-c/index.html new file mode 100644 index 0000000..f184092 --- /dev/null +++ b/2023/09/27/data-structure-in-c/index.html @@ -0,0 +1,506 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +数据结构笔记 | Voilà + + + + + + + + + + + + + + + + +
+ +
+
+
+
+
+ + + +
+
+ +
+ + + +

Voilà

+ + +

moke's blog

+
+ +
+
+ +
+
+
+ + + + + + + +
+
+ + + +
+ +
+ + + +
+
+
+ +
+
+ +
+
+ +
+ + + + + +
+ +
+ + + + + +
+ + + +
+ + + + + + + +
+

+ 数据结构笔记 +

+ +
+
+ + + + + 发表于 + + + + + + + + 分类于 + + + + + + + + + + + 阅读次数： + + + + + + + + + Disqus： + + + + + + + + + + + + + 本文字数： + 711 + + + + + + 阅读时长 ≈ + 3 分钟 + +
+ +
+
+ + + + +
+

参考书籍：数据结构与算法分析（C语言描述） 原书第二版

+
+ + +

第1章 引论

递归的四条基本法则

+
    +
  • 基准情形：不用递归就能求解
    • +
  • 不断推进：递归调用必须能够朝着产生基本情形的方向推进
    • +
  • 设计法则：假设所有的递归调用都能运行
    • +
  • 合成效益法则（compound interest rule）：在求解一个问题的同一实例时，切勿在不同的递归调用中做重复性的工作
    • +
+

第2章 算法分析

+

计算任何事情不要超过一次

+
+

最大子序列和

算法1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
int MaxSubsequenceSum(const int A[], int N) {
    int ThisSum, MaxSum, i, j, k;
    
    MaxSum = 0;
    for (i = 0; i < N; i++) {
        for (j = i; j < N; j++) {
            ThisSum = 0;
            
            for (k = i; k <= j; k++){
                ThisSum += A[k];    /* 过分耗时 */
            }
            
            if(ThisSum > MaxSum) {
                MaxSum = ThisSum;
            }
        }
    }
    return MaxSum;
}
+

复杂度为O(N*3)

+

算法2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
int MaxSubSequenceSum(const int A[], int N) {
    int ThisSum, MaxSum, i, j;

    MaxSum = 0;
    for(i = 0; i < N; i++) {
        ThisSum = 0;

        for(j = i; j < N; j++) {
            ThisSum += A[j];

            if(ThisSum > MaxSum) {
                MaxSum = ThisSum;
            }
        }
    }

    return MaxSum;
}
+

复杂度为O(N*2)

+

算法3

分析知最大子序列和可能在三处出现，或者整个出现在输入数据的左半部，或者整个出现在右半部，或者跨越输入数据的中部从而占据左右两半部分。前两种情况可以递归求解，第三种情况的最大和可以通过求出前半部分的最大和（包括前半部分的最后一个元素）以及后半部分的最大和（包括后半部分的第一个元素）而得到。

+

递归调用的一般形式是通过传递输入的数组以及左（Left）边界和右（Right）边界，它们界定了数组待处理的部分。单行驱动程序通过传递数组以及边界 0 和 N-1 以启动该过程。

+
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
static int MaxSubSum(const int A[], int Left, int Right) {
    int MaxLeftSum, MaxRightSum;
    int MaxLeftBorderSum, MaxRightBorderSum;
    int LeftBorderSum, RightBorderSum;
    int Center, i;

    // Base Case
    if(Left == Right) {
        if(A[Left] > 0) {
            return A[Left];
        } else {
            return 0
        }
    }

    Center = (Left + Right)/2;  // assume N is even
    MaxLeftSum = MaxSubSum(A, Left, Center);
    MaxRightSum = MaxSubSum(A, Center + 1; right);

    MaxLeftBorderSum = 0; LeftBorderSum = 0;
    for(i = Center; i >= Left; i--) {
        LeftBorderSum += A[i];
        if(LeftBorderSum > MaxLeftBorderSum) {
            MaxLeftBorderSum = LeftBorderSum;
        }
    }

    MaxRightBorderSum = 0; RightBorderSum = 0;
    for(i = Center + 1; i <= Right; i++) {
        RightBorderSum += A[i];
        if(RightBorderSum > MaxRightBorderSum) {
            MaxRightBorderSum = RightBorderSum;
        }
    }

    return Max3(MaxLeftSum, MaxRightSum, MaxLeftBorderSum, MaxRightBorderSum);
}

int MaxSubsequenceSum(const int A[], int N) {
    return MaxSubSum(A, 0, N - 1);
}
+

复杂度为O(N)

+

算法4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
int MaxSubsequenceSum(const int A[], int N) {
    int ThisSum, MaxSum, j;

    ThisSum = MaxSum = 0;
    for(j = 0; j < N; j++) {
        ThisSum += A[j];

        if(ThisSum > MaxSum) {
            MaxSum = ThisSum;
        } else if (ThisSum < 0) {
            ThisSum = 0;    // clear ThisSum when negative
        }
    }

    return MaxSum;
}
+ +

在任意时刻，算法都能对它已经读入的数据给出子序列问题的正确答案，具有这种特性的算法叫做联机算法（on-line algorithm）。仅需要常量空间并以线性时间运行的联机算法几乎是完美的算法。

+ +
+ + + + + + +
+
+ + + + + + + +
+ +
+ +
+
+ +
+
+ +
+ © + 2023 + + + + moke +
+
+ + + + + 站点总字数： + 12k + + + + + + 站点阅读时长 ≈ + 45 分钟 + +
+
+ + + + + + + + + + + + + + + + +
+
由 Hexo & NexT.Mist 强力驱动 +
+ +
+
+ + +
+ + + +
+
+
+ + 0% +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/about/index.html b/about/index.html index 21e52e5..2029d13 100644 --- a/about/index.html +++ b/about/index.html @@ -149,18 +149,18 @@ @@ -225,7 +225,7 @@

联系方式

  • QQ：2061610579
    • -
  • email：2061610579@qq.com tobemoke@gmail.com
    • +
  • email：2061610579@qq.com tobemoke@gmail.com

校内职务

diff --git a/archives/2023/07/index.html b/archives/2023/07/index.html index e769679..e2598dd 100644 --- a/archives/2023/07/index.html +++ b/archives/2023/07/index.html @@ -147,18 +147,18 @@

Voilà

 @@ -208,7 +208,7 @@

Voilà

- 嗯..! 目前共计 9 篇日志。 继续努力。 + 嗯..! 目前共计 10 篇日志。 继续努力。
@@ -270,7 +270,7 @@

Voilà

站点阅读时长 ≈ - 42 分钟 + 45 分钟
diff --git a/archives/2023/08/index.html b/archives/2023/08/index.html index b3d7626..69e2854 100644 --- a/archives/2023/08/index.html +++ b/archives/2023/08/index.html @@ -147,18 +147,18 @@

Voilà

@@ -208,7 +208,7 @@

Voilà

- 嗯..! 目前共计 9 篇日志。 继续努力。 + 嗯..! 目前共计 10 篇日志。 继续努力。
@@ -410,7 +410,7 @@

Voilà

站点阅读时长 ≈ - 42 分钟 + 45 分钟
diff --git a/archives/2023/09/index.html b/archives/2023/09/index.html new file mode 100644 index 0000000..321ceea --- /dev/null +++ b/archives/2023/09/index.html @@ -0,0 +1,353 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +归档 | Voilà + + + + + + + + + + + + + + + + +
+ +
+
+
+
+
+ + + +
+
+ +
+ + + +

Voilà

+ + +

moke's blog

+
+ +
+
+ +
+
+
+ + + + + + + +
+
+ + + +
+ +
+ + + +
+
+
+ +
+
+ +
+
+ +
+ + + + + +
+ +
+ + + + + +
+
+
+ 嗯..! 目前共计 10 篇日志。 继续努力。 +
+ + +
+ 2023 +
+ + + + +
+
+ + + + +
+
+ +
+
+ +
+ © + 2023 + + + + moke +
+
+ + + + + 站点总字数： + 12k + + + + + + 站点阅读时长 ≈ + 45 分钟 + +
+
+ + + + + + + + + + + + + + + + +
+
由 Hexo & NexT.Mist 强力驱动 +
+ +
+
+ + +
+ + + +
+
+
+ + 0% +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2023/index.html b/archives/2023/index.html index f8a8b4a..f2311fe 100644 --- a/archives/2023/index.html +++ b/archives/2023/index.html @@ -147,18 +147,18 @@

Voilà

@@ -208,7 +208,7 @@

Voilà

- 嗯..! 目前共计 9 篇日志。 继续努力。 + 嗯..! 目前共计 10 篇日志。 继续努力。
@@ -216,6 +216,26 @@

Voilà

2023
+ +
@@ -430,7 +450,7 @@

Voilà

站点阅读时长 ≈ - 42 分钟 + 45 分钟
diff --git a/archives/index.html b/archives/index.html index c3872a2..eb3842e 100644 --- a/archives/index.html +++ b/archives/index.html @@ -147,18 +147,18 @@

Voilà

@@ -208,7 +208,7 @@

Voilà

- 嗯..! 目前共计 9 篇日志。 继续努力。 + 嗯..! 目前共计 10 篇日志。 继续努力。
@@ -216,6 +216,26 @@

Voilà

2023
+ +
@@ -430,7 +450,7 @@

Voilà

站点阅读时长 ≈ - 42 分钟 + 45 分钟
diff --git a/categories/GEE/index.html b/categories/GEE/index.html new file mode 100644 index 0000000..1a35849 --- /dev/null +++ b/categories/GEE/index.html @@ -0,0 +1,354 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +分类: GEE | Voilà + + + + + + + + + + + + + + + + +
+ +
+
+
+
+
+ + + +
+
+ +
+ + + +

Voilà

+ + +

moke's blog

+
+ +
+
+ +
+
+
+ + + + + + + +
+
+ + + +
+ +
+ + + +
+
+
+ +
+
+ +
+
+ +
+ + + + + +
+ +
+ + + + + +
+
+
+

GEE + 分类 +

+
+ + +
+ 2023 +
+ + + +
+
+ + + + +
+
+ +
+
+ +
+ © + 2023 + + + + moke +
+
+ + + + + 站点总字数： + 12k + + + + + + 站点阅读时长 ≈ + 45 分钟 + +
+
+ + + + + + + + + + + + + + + + +
+
由 Hexo & NexT.Mist 强力驱动 +
+ +
+
+ + +
+ + + +
+
+
+ + 0% +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/categories/experience/index.html b/categories/experience/index.html index 0877721..9dc6b7e 100644 --- a/categories/experience/index.html +++ b/categories/experience/index.html @@ -147,18 +147,18 @@ @@ -271,7 +271,7 @@

experience 站点阅读时长 ≈ - 42 分钟 + 45 分钟

diff --git a/categories/index.html b/categories/index.html index 1f020ab..c94f0f8 100644 --- a/categories/index.html +++ b/categories/index.html @@ -148,18 +148,18 @@ @@ -220,10 +220,10 @@

categories
- 目前共计 5 个分类 + 目前共计 6 个分类
- +
@@ -264,7 +264,7 @@

categories 站点阅读时长 ≈ - 42 分钟 + 45 分钟

diff --git a/categories/note/index.html b/categories/note/index.html index 2645402..865cfea 100644 --- a/categories/note/index.html +++ b/categories/note/index.html @@ -147,18 +147,18 @@ @@ -271,7 +271,7 @@

note 站点阅读时长 ≈ - 42 分钟 + 45 分钟

diff --git a/categories/npm/index.html b/categories/npm/index.html index 71c16b1..8d3b0cd 100644 --- a/categories/npm/index.html +++ b/categories/npm/index.html @@ -147,18 +147,18 @@ @@ -271,7 +271,7 @@

npm 站点阅读时长 ≈ - 42 分钟 + 45 分钟

diff --git a/categories/project/index.html b/categories/project/index.html index 39f2604..2a06f74 100644 --- a/categories/project/index.html +++ b/categories/project/index.html @@ -147,18 +147,18 @@ @@ -271,7 +271,7 @@

project 站点阅读时长 ≈ - 42 分钟 + 45 分钟

diff --git a/categories/recruitment/index.html b/categories/recruitment/index.html index e10c201..18bd30b 100644 --- a/categories/recruitment/index.html +++ b/categories/recruitment/index.html @@ -147,18 +147,18 @@ @@ -351,7 +351,7 @@

recruitment 站点阅读时长 ≈ - 42 分钟 + 45 分钟

diff --git a/comment-policy/index.html b/comment-policy/index.html index fc41e7d..2402d0a 100644 --- a/comment-policy/index.html +++ b/comment-policy/index.html @@ -148,18 +148,18 @@ @@ -262,7 +262,7 @@

comment-policy 站点阅读时长 ≈ - 42 分钟 + 45 分钟

diff --git a/css/main.css b/css/main.css index 062efe9..d803fb4 100644 --- a/css/main.css +++ b/css/main.css @@ -2850,7 +2850,7 @@ header.header { transition: all 0.2s ease-in-out; } .links-of-author a::before { - background: #ffab66; + background: #ff5eff; display: inline-block; margin-right: 3px; transform: translateY(-2px); diff --git a/index.html b/index.html index ccdac55..0c44d86 100644 --- a/index.html +++ b/index.html @@ -147,18 +147,18 @@

Voilà

@@ -204,6 +204,122 @@

Voilà

+
+ + + +
+ + + + + + + +
+

+ +

+ +
+
+ + + + + 发表于 + + + + + + + + 分类于 + + + + + + + + + + + + + Disqus： + + + + + + + + + + + + + 本文字数： + 711 + + + + + + 阅读时长 ≈ + 3 分钟 + +
+ +
+
+ + + + +
+
+

参考书籍：数据结构与算法分析（C语言描述） 原书第二版

+
+ +
+ + 阅读全文 » + +
+ + + +
+ + + + + +
+
+ +
+
+
+ + + + + + +
@@ -1324,7 +1440,7 @@

站点阅读时长 ≈ - 42 分钟 + 45 分钟

diff --git a/newPost.json b/newPost.json index cbf2c13..be95cfe 100644 --- a/newPost.json +++ b/newPost.json @@ -1 +1 @@ -{"title":"Node.js 笔记","id":"2023/08/26/note-nodeJs/","date_published":"08/26/2023","summary":"TimerZero Delay如果指定超时延迟为 0 ，回调函数将尽快执行，但在当前函数执行之后：\n12345setTimeout(() => { console.log('after ');}, 0);console.log(' before ');","url":"http://csumoke.com/2023/08/26/note-nodeJs/","tags":["javascript","node.js"],"categories":["note"]} \ No newline at end of file +{"title":"数据结构笔记","id":"2023/09/27/data-structure-in-c/","date_published":"09/27/2023","summary":"\n参考书籍：数据结构与算法分析（C语言描述） 原书第二版\n","url":"http://csumoke.com/2023/09/27/data-structure-in-c/","tags":["C","Data Structure"],"categories":["GEE"]} \ No newline at end of file diff --git a/schedule/index.html b/schedule/index.html index 9369df4..544fd05 100644 --- a/schedule/index.html +++ b/schedule/index.html @@ -148,18 +148,18 @@ @@ -263,7 +263,7 @@

schedule 站点阅读时长 ≈ - 42 分钟 + 45 分钟

diff --git a/search.xml b/search.xml index bc150d2..070a833 100644 --- a/search.xml +++ b/search.xml @@ -1,5 +1,43 @@ + + 数据结构笔记 + /2023/09/27/data-structure-in-c/ + +

参考书籍：数据结构与算法分析（C语言描述） 原书第二版

+ + + +

第1章 引论

递归的四条基本法则

+
    +
  • 基准情形：不用递归就能求解
    • +
  • 不断推进：递归调用必须能够朝着产生基本情形的方向推进
    • +
  • 设计法则：假设所有的递归调用都能运行
    • +
  • 合成效益法则（compound interest rule）：在求解一个问题的同一实例时，切勿在不同的递归调用中做重复性的工作
    • +
+

第2章 算法分析

+

计算任何事情不要超过一次

+
+

最大子序列和

算法1

int MaxSubsequenceSum(const int A[], int N) {
    int ThisSum, MaxSum, i, j, k;
    
    MaxSum = 0;
    for (i = 0; i < N; i++) {
        for (j = i; j < N; j++) {
            ThisSum = 0;
            
            for (k = i; k <= j; k++){
                ThisSum += A[k];    /* 过分耗时 */
            }
            
            if(ThisSum > MaxSum) {
                MaxSum = ThisSum;
            }
        }
    }
    return MaxSum;
}
+

复杂度为O(N*3)

+

算法2

int MaxSubSequenceSum(const int A[], int N) {
    int ThisSum, MaxSum, i, j;

    MaxSum = 0;
    for(i = 0; i < N; i++) {
        ThisSum = 0;

        for(j = i; j < N; j++) {
            ThisSum += A[j];

            if(ThisSum > MaxSum) {
                MaxSum = ThisSum;
            }
        }
    }

    return MaxSum;
}
+

复杂度为O(N*2)

+

算法3

分析知最大子序列和可能在三处出现，或者整个出现在输入数据的左半部，或者整个出现在右半部，或者跨越输入数据的中部从而占据左右两半部分。前两种情况可以递归求解，第三种情况的最大和可以通过求出前半部分的最大和（包括前半部分的最后一个元素）以及后半部分的最大和（包括后半部分的第一个元素）而得到。

+

递归调用的一般形式是通过传递输入的数组以及左（Left）边界和右（Right）边界，它们界定了数组待处理的部分。单行驱动程序通过传递数组以及边界 0 和 N-1 以启动该过程。

+
static int MaxSubSum(const int A[], int Left, int Right) {
    int MaxLeftSum, MaxRightSum;
    int MaxLeftBorderSum, MaxRightBorderSum;
    int LeftBorderSum, RightBorderSum;
    int Center, i;

    // Base Case
    if(Left == Right) {
        if(A[Left] > 0) {
            return A[Left];
        } else {
            return 0
        }
    }

    Center = (Left + Right)/2;  // assume N is even
    MaxLeftSum = MaxSubSum(A, Left, Center);
    MaxRightSum = MaxSubSum(A, Center + 1; right);

    MaxLeftBorderSum = 0; LeftBorderSum = 0;
    for(i = Center; i >= Left; i--) {
        LeftBorderSum += A[i];
        if(LeftBorderSum > MaxLeftBorderSum) {
            MaxLeftBorderSum = LeftBorderSum;
        }
    }

    MaxRightBorderSum = 0; RightBorderSum = 0;
    for(i = Center + 1; i <= Right; i++) {
        RightBorderSum += A[i];
        if(RightBorderSum > MaxRightBorderSum) {
            MaxRightBorderSum = RightBorderSum;
        }
    }

    return Max3(MaxLeftSum, MaxRightSum, MaxLeftBorderSum, MaxRightBorderSum);
}

int MaxSubsequenceSum(const int A[], int N) {
    return MaxSubSum(A, 0, N - 1);
}
+

复杂度为O(N)

+

算法4

int MaxSubsequenceSum(const int A[], int N) {
    int ThisSum, MaxSum, j;

    ThisSum = MaxSum = 0;
    for(j = 0; j < N; j++) {
        ThisSum += A[j];

        if(ThisSum > MaxSum) {
            MaxSum = ThisSum;
        } else if (ThisSum < 0) {
            ThisSum = 0;    // clear ThisSum when negative
        }
    }

    return MaxSum;
}
+ +

在任意时刻，算法都能对它已经读入的数据给出子序列问题的正确答案，具有这种特性的算法叫做联机算法（on-line algorithm）。仅需要常量空间并以线性时间运行的联机算法几乎是完美的算法。

+]]> + + GEE + + + C + Data Structure + + 一些建议 /2023/07/28/advice/ @@ -32,12 +70,12 @@ experience + backend csu advice university software engineering frontend - backend @@ -80,6 +118,38 @@ node.js + + npm install 的不同方式 + /2023/08/05/npm-install-ways/ + npm install -g –save ?

+ +
    +
  • npm install（在包目录中）
    根据package.json文件，将依赖安装到包目录中node_modules文件夹
    • +
  • npm install "module-name"
    安装特定依赖到包目录下
    • +
  • npm install -g "module-name"
    -g表明将模块安装到全局，将包安装到prefix文件夹而不是当前工作目录，{prefix}/lib/node_modules
    可通过以下命令查看 npm 相关配置：
    npm config ls
    +
    • +
  • npm install --save "module-name"
    --save表明模块安装并写入package.json的dependencies节点。--save等同于-S。
    • +
    • +
    • npm install --save-prod "module-name"
      包将出现在dependencies中，这是默认值
      • +
    +
    • +
    • +
    • npm install --save-dev "module-name"
      包将出现在devDependencies中，运行npm install --production或NODE_ENV值为production时不会自动下载模块。--save-dev等同于-D。
      • +
    +
    • +
+

npm uninstall "module_name"删除依赖同理。

+

总结

devDependencies节点下模块是开发时需要使用的，如辅助开发的压缩，部署后不需要，所以使用--save-dev形式安装。
dependencies节点下模块是运行时必备的，故采用--save（等同于--save-prod）安装。

+

参考

npm中文网——npm-install
NPM install -save 和 -save-dev 傻傻分不清

+]]> + + npm + + + frontend + npm + + 中南云麓谷研发部2023招新面试题 /2023/08/01/recruitment-2023/ @@ -126,146 +196,6 @@ frontend - - npm install 的不同方式 - /2023/08/05/npm-install-ways/ - npm install -g –save ?

- - -

npm uninstall "module_name"删除依赖同理。

-

总结

devDependencies节点下模块是开发时需要使用的，如辅助开发的压缩，部署后不需要，所以使用--save-dev形式安装。
dependencies节点下模块是运行时必备的，故采用--save（等同于--save-prod）安装。

-

参考

npm中文网——npm-install
NPM install -save 和 -save-dev 傻傻分不清

-]]> - - npm - - - frontend - npm - - - - 教程其一之VSCode - /2023/08/03/tutorial-vscode/ - 工欲善其事，必先利其器-从环境开始讲起

刚踏入计算机相关专业，却从未有编程经验？甚至从小到大第一次遇见计算机？没有关系，让我们从零开始讲起，一步一步从最最基础的开始讲起。
开篇先叠甲：以下所有内容仅源于于个人体验，请根据你使用最舒服的方式进行配置。

- - -

计算机环境

科学上网

如题，请确保你能通过科学上网访问Github。如若不能（或者你从未听过科学上网），请询问你身边的学长学姐。

-

安全软件

首先，如果你有良好的计算机使用习惯，日常远离p2p下崽器、xxx中文网，始终对于网络资源尤其是各类安装包保持警惕，安装软件的第一步是寻找官网且日常略过前三广告，那么恭喜你，可以卸载所有安全管家等。Windows安全中心绝对足敷使用，请打开它并开启所有必要的保护。

这个可以解决许多因安全软件拦截而产生的疑难杂症。请务必确保您的使用习惯足够良好，本站概不承担因卸载后猪脑过载导致的财产损失。

-

浏览器和搜索引擎

Chrome，Edge，Firefox三选其一（排名分先后）。
近乎所有的国产浏览器都是Chromium套壳+捆绑广告，请不要让它们污染你重金购入的电脑。
利用科学上网手段注册账号后，打开密码自动填充并在手机端下载相同浏览器，上网体验如德芙般丝滑。

请将默认浏览器设置为你最喜欢的御三家之一，搜索引擎推荐google/bing（前者更好，但需要保持科学上网）。作为高质量大学生，请不要使用百度搜索引擎。

-

益智小游戏，请指出图中真正的steam官网：

-

最基本的计算机环境已经配置完毕，电脑已经清爽许多，现在让我们叩开编程的大门，不妨先从环境入手。

-

Visual Studio Code：免费开源的轻量级代码编辑器

为什么是 VS Code ？

VS Code 的全称是 Visual Studio Code，是一款开源的、免费的、跨平台的、高性能的、轻量级的代码编辑器。

-

何为编辑器？何为IDE？

- -

微软有两种软件：一种是 VS Code，一种是其他软件。

-

VS Code 的特点

-

官网安装

免费？不是70r吗？

-

-

-

这就是为什么推荐google或bing搜索引擎，因为你真的能在国产搜索引擎看到这些。如果对是否是官网有疑问，请尤其注意他的域名。通过域名，能够分辨一大半的虚假官网。

-

真正的VSCode官网：https://code.visualstudio.com/，点开后你应该能看到如下网页。

-

请根据你的电脑型号（Windows or MacOS）选择对应Stable（*稳定）版本下载。安装过程不再赘述，其中注意Win本尽量选择安装路径为非C盘即可，否则后续很可能因为C盘爆满，Windows系统无法更新。

-

安装完成后打开软件，界面如下：

-

如果你对英文界面感觉不太好，那么第一步就是将VSCode设置为中文。以下有两种方法：

- -

解放右手，请熟记常用快捷键组合。

-

常见操作&使用技巧

1、快速生成HTML骨架

新建一个.html文件（如example.html），然后通过以下方式可快速生成HTML骨架：

-
    -
  1. 输入!（英文感叹号），然后按下Enter键
    2. -
  2. 输入html:5，然后按住Tab键
    生成的骨架如下：
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>
    3. -
-

小技巧：在HTML文件中输入lorem可生成一段占位文本。

-

2、并排编辑：上下左右显示多个文件窗口

Windows用户按住快捷键Ctrl + \（反斜杠，在你的Enter回车键上方），即可同时打开多个编辑器窗口，进行并排编辑。按快捷键Ctrl + 1切换到左侧窗口，Ctrl + 2切换到右侧窗口，以此类推。

-

-

部分插件推荐

安装插件

-

我们可通过点击上图中红框部分，即可在顶部输入框中查找想要安装的插件名，然后进行安装。安装完毕后部分插件会需要重启软件，插件才会生效。
另外，我们也可以通过访问官网的插件市场来安装插件：
VS Code 官网插件市场：https://marketplace.visualstudio.com/vscode

-

推荐的插件

0、基本插件
Chinese (Simplified) Language Pack for Visual Studio Code

中文语言插件，不必多言。

-
1、Git相关

还不熟悉Git？没事，先安装再说，后续我们一定会讲到or用上。

-
GitLens

Git管理神器，可视化仓库。

-
Local History

维护文件的本地历史记录，妈妈再也不用担心我代码忘记保存了。

-
2、代码显示增强
highlight-icemode

选中相同代码时高亮显示。安装后请关闭 VS Code 自带高亮，于用户设置添加"editor.selectionHighlight": false。

-
TODO Highlight

什么，手上的 bug 还没修完突然有事，正巧这时候有了思路？按照代码规范，可以在代码中加上 TODO 注释（区分大小写）。

-
// TODO:发现跳转bug，可能的解决思路为：······
-

或者

-
// FIXME: 如没有万分把握请勿删去此行注释，可能导致程序崩溃。
-

安装此插件后，打开命令面板（还记得快捷键吗？）输入TODO-Highlight，选择相关命令，我们就可以看到 todoList 清单。

-
3、图片相关插件
Polacode-2022

可优雅地分享你的代码截图，如下所示：

-

我们谴责愚蠢的拍屏主义者，Win+Shift+S截图为可接受的。

-
4、Markdown相关

本网站所有博客均由 Markdown 写成，其优点在于不用操心格式，随想随写，解放右手。推荐 VS Code + Markdown ，最好的笔记组合。

-
Markdown Preview Github Styling

以 Github 风格预览 Markdown 样式，简洁且优雅。左侧书写右侧预览。

-
5、通用工具
Live Server

在本地启动服务器，代码修改时实现热更新，不需要手动刷新页面。
使用方式：于代码页面点击右键，选择Open with Live Server。

-
WakaTime

统计在各安装了 WakaTime 插件的编程环境中写代码的时间，发现真实的自己。网站统计效果如下：

-
6、软件主题

想给你的 VS Code 换个皮肤？欢迎来到海澜之家！

- -

多端协作： VS Code 云同步

    -
  1. 上方菜单栏选择文件-首选项-打开设置同步
    2. -
  2. 选择需要同步的配置，全选即可
    3. -
  3. 通过 GitHub 账号登录
    4. -
  4. 同步完成后，菜单栏显示“设置同步已打开”
    5. -
-

什么，你还没有 GitHub 账号？注册啊！

-

写在最后

-

参考链接

Web-Master/00-前端工具
多有参考，如想进一步了解 VS Code 如快捷键及更进一步的配置，可阅读全文。
为什么要学Markdown？有什么用？

-]]> - - recruitment - - - frontend - software-engineering - - 教程其三之常用git命令 /2023/08/16/tutorial-git-command/ @@ -407,8 +337,8 @@ nothing added to commit but untracked files present (use "git add" to recruitment - software-engineering git + software-engineering @@ -462,6 +392,161 @@ nothing added to commit but untracked files present (use "git add" to software-engineering + + websocket 在 vue 中的使用 + /2023/08/22/use-websocket-in-vue/ + 依赖

socket.io-client

+
pnpm i socket.io-client
+ + + +

使用

    +
  1. 规范 socket api
    2. +
+
// socket.ts

import { reactive } from "vue"
import { io, Socket } from "socket.io-client"

class SocketService {
  socket: Socket
  state: any

  constructor() {
    this.state = reactive({
      id: "",
      room: "",
      sio: null,
      flag: 60,
      sid: "",
      heartbeatTimer: null
    })

    this.socket = io("/websocket", {
      autoConnect: false, // 禁止自动连接
      extraHeaders: {
        "Access-Control-Allow-Origin": "*" // 设置跨域请求头
      }
    })

    // connect, get_sid 只执行一次，采用 once
    this.socket.once("connect", () => {
      this.handleConnect()
    })

    this.socket.once("get_sid", (data) => {
      this.handleGetSid(data)
    })

    this.socket.on("join_room_result", (res) => {
      this.handleJoinRoomResult(res)
    })

    this.socket.on("test", (data) => {
      this.handleTest(data)
    })

    this.socket.on("leave", (room) => {
      this.handleLeave(room)
    })

    this.socket.on("leave_all", () => {
      this.handleLeaveAll()
    })

    this.socket.on("connect_error", (err) => {
      this.handleConnectError(err)
    })
  }

  connect() {
    this.socket.connect()
    console.log("socket connect")
  }

  disconnect() {
    this.handleLeaveAll()
    this.stopHeartbeat()
    this.socket.disconnect()
    console.log("socket disconnect")
  }

  joinRoom(room: string) {
    this.socket.emit("join", { rooms: [room] })
  }

  leaveRoom(room: string) {
    this.handleLeave(room)
  }

  leaveAll() {
    this.handleLeaveAll()
  }

  private handleConnect() {
    this.socket.emit("get_sid", {})
  }

  private handleGetSid(data: any) {
    this.state.sid = data.sid
    console.log("get_sid:", this.state.sid)
  }

  private handleJoinRoomResult(res: any) {
    console.log(res)
  }

  private handleTest(data: any) {
    console.log("test data:" + data)
  }

  // 离开指定房间
  private handleLeave(room: string) {
    this.socket.emit("leave", { rooms: [room] })
    console.log("leave room " + room)
  }

  // 离开所有房间
  private handleLeaveAll() {
    this.socket.emit("leave_all")
    console.log("leave all room")
  }

  // 处理连接错误
  private handleConnectError(err: any) {
    this.stopHeartbeat() // 停止心跳，避免不必要的心跳消息
    console.log(err)
  }
  
  // 启动心跳计时器
  private startHeartbeat() => {
    if(this.heartbeatTimer === null) {
        this.heartbeatTimer = setInterval(() => {
            this.sendHeartbeat()
        }, 15000) // 15秒发送一次心跳，可以根据需求调整
    }
  }

  // 停止心跳计时器
  private stopHeartbeat() => {
    if(this.heartbeatTimer !== null) {
        clearInterval(this.heartbeatTimer)
        this.heartbeatTimer = null
    }
  }

  // 发送心跳数据
  private sendHeartbeat() {
    this.socket.emit("heartbeat", { /* 心跳数据 */ })
  }
}

export const socketService = new SocketService()
export const socket = socketService.socket
export const state = socketService.state
+ +
    +
  1. 设置 url
    2. +
+
// vite.config.ts

proxy: {
    "/socket.io": {
        target: "http://example.com" // 代理目标（后端 socket URL ）
        ws: true, // 设置代理 WebSocket 连接
        changeOrigin: true, // 允许跨域
    }
}
+ +
    +
  1. 建立 socket 连接
    2. +
+

websocket 连接应在打开页面时建立，关闭页面时销毁，所以应选择在入口文件建立。

+
// App.vue

import { socketService } from "@/api/socket"
import { onBeforeUnmount } from "vue"

socketService.connect()

onBeforeMount(() => {
    socketService.disconnect()
})
+ +
    +
  1. 进入 socket 房间
    2. +
+

为保证浏览器性能，房间应该在进入特定路由时建立，离开特定路由时退出，所以选择在路由守卫文件编写相关逻辑。

+
// permission.ts

import router from "@/router"
import { socketService } from "@/api/socket"

router.afterEach((to, from) => {
    // 离开特定路由时离开对应房间
    if( from.name === "room-name" ) {
        socketService.leaveRoom("room-name")
    }

    // 进入特定路由时进入特定房间
    if( to.name !== "room-name" ) {
        socketService.joinRoom("room-name")
    }
})
+ +
    +
  1. 监听数据
    2. +
+

后端通过 WebSocket 发送的数据在前端页面渲染的部分，应在前端对应页面监听。

+
// index.vue

import { socket } from "@/api/socket"

const subscribeChannel = (channel: string) => {
    unsubscribeChannel(channel) // 避免重复订阅

    socket.on(channel, (data) => {
        // 处理数据...
    })
}

const unsubscribeChannel = (channel: string) => {
    socket.off(channel)
}
+ +

参考

WebSocket - Web Api 接口参考|MDN
Socket.io

+]]> + + project + + + frontend + vue + websocket + + + + 教程其一之VSCode + /2023/08/03/tutorial-vscode/ + 工欲善其事，必先利其器-从环境开始讲起

刚踏入计算机相关专业，却从未有编程经验？甚至从小到大第一次遇见计算机？没有关系，让我们从零开始讲起，一步一步从最最基础的开始讲起。
开篇先叠甲：以下所有内容仅源于于个人体验，请根据你使用最舒服的方式进行配置。

+ + +

计算机环境

科学上网

如题，请确保你能通过科学上网访问Github。如若不能（或者你从未听过科学上网），请询问你身边的学长学姐。

+

安全软件

首先，如果你有良好的计算机使用习惯，日常远离p2p下崽器、xxx中文网，始终对于网络资源尤其是各类安装包保持警惕，安装软件的第一步是寻找官网且日常略过前三广告，那么恭喜你，可以卸载所有安全管家等。Windows安全中心绝对足敷使用，请打开它并开启所有必要的保护。

这个可以解决许多因安全软件拦截而产生的疑难杂症。请务必确保您的使用习惯足够良好，本站概不承担因卸载后猪脑过载导致的财产损失。

+

浏览器和搜索引擎

Chrome，Edge，Firefox三选其一（排名分先后）。
近乎所有的国产浏览器都是Chromium套壳+捆绑广告，请不要让它们污染你重金购入的电脑。
利用科学上网手段注册账号后，打开密码自动填充并在手机端下载相同浏览器，上网体验如德芙般丝滑。

请将默认浏览器设置为你最喜欢的御三家之一，搜索引擎推荐google/bing（前者更好，但需要保持科学上网）。作为高质量大学生，请不要使用百度搜索引擎。

+

益智小游戏，请指出图中真正的steam官网：

+

最基本的计算机环境已经配置完毕，电脑已经清爽许多，现在让我们叩开编程的大门，不妨先从环境入手。

+

Visual Studio Code：免费开源的轻量级代码编辑器

为什么是 VS Code ？

VS Code 的全称是 Visual Studio Code，是一款开源的、免费的、跨平台的、高性能的、轻量级的代码编辑器。

+

何为编辑器？何为IDE？

+ +

微软有两种软件：一种是 VS Code，一种是其他软件。

+

VS Code 的特点

+

官网安装

免费？不是70r吗？

+

+

+

这就是为什么推荐google或bing搜索引擎，因为你真的能在国产搜索引擎看到这些。如果对是否是官网有疑问，请尤其注意他的域名。通过域名，能够分辨一大半的虚假官网。

+

真正的VSCode官网：https://code.visualstudio.com/，点开后你应该能看到如下网页。

+

请根据你的电脑型号（Windows or MacOS）选择对应Stable（*稳定）版本下载。安装过程不再赘述，其中注意Win本尽量选择安装路径为非C盘即可，否则后续很可能因为C盘爆满，Windows系统无法更新。

+

安装完成后打开软件，界面如下：

+

如果你对英文界面感觉不太好，那么第一步就是将VSCode设置为中文。以下有两种方法：

+ +

解放右手，请熟记常用快捷键组合。

+

常见操作&使用技巧

1、快速生成HTML骨架

新建一个.html文件（如example.html），然后通过以下方式可快速生成HTML骨架：

+
    +
  1. 输入!（英文感叹号），然后按下Enter键
    2. +
  2. 输入html:5，然后按住Tab键
    生成的骨架如下：
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>
    3. +
+

小技巧：在HTML文件中输入lorem可生成一段占位文本。

+

2、并排编辑：上下左右显示多个文件窗口

Windows用户按住快捷键Ctrl + \（反斜杠，在你的Enter回车键上方），即可同时打开多个编辑器窗口，进行并排编辑。按快捷键Ctrl + 1切换到左侧窗口，Ctrl + 2切换到右侧窗口，以此类推。

+

+

部分插件推荐

安装插件

+

我们可通过点击上图中红框部分，即可在顶部输入框中查找想要安装的插件名，然后进行安装。安装完毕后部分插件会需要重启软件，插件才会生效。
另外，我们也可以通过访问官网的插件市场来安装插件：
VS Code 官网插件市场：https://marketplace.visualstudio.com/vscode

+

推荐的插件

0、基本插件
Chinese (Simplified) Language Pack for Visual Studio Code

中文语言插件，不必多言。

+
1、Git相关

还不熟悉Git？没事，先安装再说，后续我们一定会讲到or用上。

+
GitLens

Git管理神器，可视化仓库。

+
Local History

维护文件的本地历史记录，妈妈再也不用担心我代码忘记保存了。

+
2、代码显示增强
highlight-icemode

选中相同代码时高亮显示。安装后请关闭 VS Code 自带高亮，于用户设置添加"editor.selectionHighlight": false。

+
TODO Highlight

什么，手上的 bug 还没修完突然有事，正巧这时候有了思路？按照代码规范，可以在代码中加上 TODO 注释（区分大小写）。

+
// TODO:发现跳转bug，可能的解决思路为：······
+

或者

+
// FIXME: 如没有万分把握请勿删去此行注释，可能导致程序崩溃。
+

安装此插件后，打开命令面板（还记得快捷键吗？）输入TODO-Highlight，选择相关命令，我们就可以看到 todoList 清单。

+
3、图片相关插件
Polacode-2022

可优雅地分享你的代码截图，如下所示：

+

我们谴责愚蠢的拍屏主义者，Win+Shift+S截图为可接受的。

+
4、Markdown相关

本网站所有博客均由 Markdown 写成，其优点在于不用操心格式，随想随写，解放右手。推荐 VS Code + Markdown ，最好的笔记组合。

+
Markdown Preview Github Styling

以 Github 风格预览 Markdown 样式，简洁且优雅。左侧书写右侧预览。

+
5、通用工具
Live Server

在本地启动服务器，代码修改时实现热更新，不需要手动刷新页面。
使用方式：于代码页面点击右键，选择Open with Live Server。

+
WakaTime

统计在各安装了 WakaTime 插件的编程环境中写代码的时间，发现真实的自己。网站统计效果如下：

+
6、软件主题

想给你的 VS Code 换个皮肤？欢迎来到海澜之家！

+ +

多端协作： VS Code 云同步

    +
  1. 上方菜单栏选择文件-首选项-打开设置同步
    2. +
  2. 选择需要同步的配置，全选即可
    3. +
  3. 通过 GitHub 账号登录
    4. +
  4. 同步完成后，菜单栏显示“设置同步已打开”
    5. +
+

什么，你还没有 GitHub 账号？注册啊！

+

写在最后

+

参考链接

Web-Master/00-前端工具
多有参考，如想进一步了解 VS Code 如快捷键及更进一步的配置，可阅读全文。
为什么要学Markdown？有什么用？

+]]> + + recruitment + + + frontend + software-engineering + + 教程其四之编码风格 /2023/08/23/tutorial-style-guide/ @@ -638,51 +723,4 @@ nothing added to commit but untracked files present (use "git add" to style - - websocket 在 vue 中的使用 - /2023/08/22/use-websocket-in-vue/ - 依赖

socket.io-client

-
pnpm i socket.io-client
- - - -

使用

    -
  1. 规范 socket api
    2. -
-
// socket.ts

import { reactive } from "vue"
import { io, Socket } from "socket.io-client"

class SocketService {
  socket: Socket
  state: any

  constructor() {
    this.state = reactive({
      id: "",
      room: "",
      sio: null,
      flag: 60,
      sid: "",
      heartbeatTimer: null
    })

    this.socket = io("/websocket", {
      autoConnect: false, // 禁止自动连接
      extraHeaders: {
        "Access-Control-Allow-Origin": "*" // 设置跨域请求头
      }
    })

    // connect, get_sid 只执行一次，采用 once
    this.socket.once("connect", () => {
      this.handleConnect()
    })

    this.socket.once("get_sid", (data) => {
      this.handleGetSid(data)
    })

    this.socket.on("join_room_result", (res) => {
      this.handleJoinRoomResult(res)
    })

    this.socket.on("test", (data) => {
      this.handleTest(data)
    })

    this.socket.on("leave", (room) => {
      this.handleLeave(room)
    })

    this.socket.on("leave_all", () => {
      this.handleLeaveAll()
    })

    this.socket.on("connect_error", (err) => {
      this.handleConnectError(err)
    })
  }

  connect() {
    this.socket.connect()
    console.log("socket connect")
  }

  disconnect() {
    this.handleLeaveAll()
    this.stopHeartbeat()
    this.socket.disconnect()
    console.log("socket disconnect")
  }

  joinRoom(room: string) {
    this.socket.emit("join", { rooms: [room] })
  }

  leaveRoom(room: string) {
    this.handleLeave(room)
  }

  leaveAll() {
    this.handleLeaveAll()
  }

  private handleConnect() {
    this.socket.emit("get_sid", {})
  }

  private handleGetSid(data: any) {
    this.state.sid = data.sid
    console.log("get_sid:", this.state.sid)
  }

  private handleJoinRoomResult(res: any) {
    console.log(res)
  }

  private handleTest(data: any) {
    console.log("test data:" + data)
  }

  // 离开指定房间
  private handleLeave(room: string) {
    this.socket.emit("leave", { rooms: [room] })
    console.log("leave room " + room)
  }

  // 离开所有房间
  private handleLeaveAll() {
    this.socket.emit("leave_all")
    console.log("leave all room")
  }

  // 处理连接错误
  private handleConnectError(err: any) {
    this.stopHeartbeat() // 停止心跳，避免不必要的心跳消息
    console.log(err)
  }
  
  // 启动心跳计时器
  private startHeartbeat() => {
    if(this.heartbeatTimer === null) {
        this.heartbeatTimer = setInterval(() => {
            this.sendHeartbeat()
        }, 15000) // 15秒发送一次心跳，可以根据需求调整
    }
  }

  // 停止心跳计时器
  private stopHeartbeat() => {
    if(this.heartbeatTimer !== null) {
        clearInterval(this.heartbeatTimer)
        this.heartbeatTimer = null
    }
  }

  // 发送心跳数据
  private sendHeartbeat() {
    this.socket.emit("heartbeat", { /* 心跳数据 */ })
  }
}

export const socketService = new SocketService()
export const socket = socketService.socket
export const state = socketService.state
- -
    -
  1. 设置 url
    2. -
-
// vite.config.ts

proxy: {
    "/socket.io": {
        target: "http://example.com" // 代理目标（后端 socket URL ）
        ws: true, // 设置代理 WebSocket 连接
        changeOrigin: true, // 允许跨域
    }
}
- -
    -
  1. 建立 socket 连接
    2. -
-

websocket 连接应在打开页面时建立，关闭页面时销毁，所以应选择在入口文件建立。

-
// App.vue

import { socketService } from "@/api/socket"
import { onBeforeUnmount } from "vue"

socketService.connect()

onBeforeMount(() => {
    socketService.disconnect()
})
- -
    -
  1. 进入 socket 房间
    2. -
-

为保证浏览器性能，房间应该在进入特定路由时建立，离开特定路由时退出，所以选择在路由守卫文件编写相关逻辑。

-
// permission.ts

import router from "@/router"
import { socketService } from "@/api/socket"

router.afterEach((to, from) => {
    // 离开特定路由时离开对应房间
    if( from.name === "room-name" ) {
        socketService.leaveRoom("room-name")
    }

    // 进入特定路由时进入特定房间
    if( to.name !== "room-name" ) {
        socketService.joinRoom("room-name")
    }
})
- -
    -
  1. 监听数据
    2. -
-

后端通过 WebSocket 发送的数据在前端页面渲染的部分，应在前端对应页面监听。

-
// index.vue

import { socket } from "@/api/socket"

const subscribeChannel = (channel: string) => {
    unsubscribeChannel(channel) // 避免重复订阅

    socket.on(channel, (data) => {
        // 处理数据...
    })
}

const unsubscribeChannel = (channel: string) => {
    socket.off(channel)
}
- -

参考

WebSocket - Web Api 接口参考|MDN
Socket.io

-]]> - - project - - - frontend - vue - websocket - - diff --git a/tags/C/index.html b/tags/C/index.html new file mode 100644 index 0000000..3215204 --- /dev/null +++ b/tags/C/index.html @@ -0,0 +1,354 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +标签: C | Voilà + + + + + + + + + + + + + + + + +
+ +
+
+
+
+
+ + + +
+
+ +
+ + + +

Voilà

+ + +

moke's blog

+
+ +
+
+ +
+
+
+ + + + + + + +
+
+ + + +
+ +
+ + + +
+
+
+ +
+
+ +
+
+ +
+ + + + + +
+ +
+ + + + + +
+
+
+

C + 标签 +

+
+ + +
+ 2023 +
+ + + +
+
+ + + + +
+
+ + + + +
+ + + +
+
+
+ + 0% +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tags/Data-Structure/index.html b/tags/Data-Structure/index.html new file mode 100644 index 0000000..ac3da99 --- /dev/null +++ b/tags/Data-Structure/index.html @@ -0,0 +1,354 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +标签: Data Structure | Voilà + + + + + + + + + + + + + + + + +
+ +
+
+
+
+
+ + + +
+
+ +
+ + + +

Voilà

+ + +

moke's blog

+
+ +
+
+ +
+
+
+ + + + + + + +
+
+ + + +
+ +
+ + + +
+
+
+ +
+
+ +
+
+ +
+ + + + + +
+ +
+ + + + + +
+
+
+

Data Structure + 标签 +

+
+ + +
+ 2023 +
+ + + +
+
+ + + + +
+
+ + + + +
+ + + +
+
+
+ + 0% +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tags/advice/index.html b/tags/advice/index.html index 984ffbd..84cca0d 100644 --- a/tags/advice/index.html +++ b/tags/advice/index.html @@ -147,18 +147,18 @@ @@ -271,7 +271,7 @@

advice 站点阅读时长 ≈ - 42 分钟 + 45 分钟
diff --git a/tags/backend/index.html b/tags/backend/index.html index b21e2df..e500ba4 100644 --- a/tags/backend/index.html +++ b/tags/backend/index.html @@ -147,18 +147,18 @@ @@ -271,7 +271,7 @@

backend 站点阅读时长 ≈ - 42 分钟 + 45 分钟

diff --git a/tags/csu/index.html b/tags/csu/index.html index 6aa4aba..4a1ac20 100644 --- a/tags/csu/index.html +++ b/tags/csu/index.html @@ -147,18 +147,18 @@ @@ -291,7 +291,7 @@

csu 站点阅读时长 ≈ - 42 分钟 + 45 分钟

diff --git a/tags/frontend/index.html b/tags/frontend/index.html index 17299c1..21588ed 100644 --- a/tags/frontend/index.html +++ b/tags/frontend/index.html @@ -147,18 +147,18 @@ @@ -351,7 +351,7 @@

frontend 站点阅读时长 ≈ - 42 分钟 + 45 分钟

diff --git a/tags/git/index.html b/tags/git/index.html index f7e5b93..f138d92 100644 --- a/tags/git/index.html +++ b/tags/git/index.html @@ -147,18 +147,18 @@ @@ -271,7 +271,7 @@

git 站点阅读时长 ≈ - 42 分钟 + 45 分钟

diff --git a/tags/index.html b/tags/index.html index 78d6fc1..6b193f2 100644 --- a/tags/index.html +++ b/tags/index.html @@ -148,18 +148,18 @@ @@ -220,10 +220,10 @@

tags
- 目前共计 14 个标签 + 目前共计 16 个标签
- advice backend csu frontend git javascript node.js npm software engineering software-engineering style university vue websocket + C Data Structure advice backend csu frontend git javascript node.js npm software engineering software-engineering style university vue websocket
@@ -264,7 +264,7 @@

tags 站点阅读时长 ≈ - 42 分钟 + 45 分钟

diff --git a/tags/javascript/index.html b/tags/javascript/index.html index 154c6da..2a72eb9 100644 --- a/tags/javascript/index.html +++ b/tags/javascript/index.html @@ -147,18 +147,18 @@ @@ -271,7 +271,7 @@

javascript 站点阅读时长 ≈ - 42 分钟 + 45 分钟

diff --git a/tags/node-js/index.html b/tags/node-js/index.html index 966c732..30d21a0 100644 --- a/tags/node-js/index.html +++ b/tags/node-js/index.html @@ -147,18 +147,18 @@ @@ -271,7 +271,7 @@

node.js 站点阅读时长 ≈ - 42 分钟 + 45 分钟

diff --git a/tags/npm/index.html b/tags/npm/index.html index b567b76..c63e433 100644 --- a/tags/npm/index.html +++ b/tags/npm/index.html @@ -147,18 +147,18 @@ @@ -271,7 +271,7 @@

npm 站点阅读时长 ≈ - 42 分钟 + 45 分钟

diff --git a/tags/software-engineering/index.html b/tags/software-engineering/index.html index b17f42b..e8c8628 100644 --- a/tags/software-engineering/index.html +++ b/tags/software-engineering/index.html @@ -147,18 +147,18 @@ @@ -311,7 +311,7 @@

software-engineering 站点阅读时长 ≈ - 42 分钟 + 45 分钟

diff --git a/tags/style/index.html b/tags/style/index.html index c04d016..395ba68 100644 --- a/tags/style/index.html +++ b/tags/style/index.html @@ -147,18 +147,18 @@ @@ -271,7 +271,7 @@

style 站点阅读时长 ≈ - 42 分钟 + 45 分钟

diff --git a/tags/university/index.html b/tags/university/index.html index f34afcd..ab3acde 100644 --- a/tags/university/index.html +++ b/tags/university/index.html @@ -147,18 +147,18 @@ @@ -291,7 +291,7 @@

university 站点阅读时长 ≈ - 42 分钟 + 45 分钟

diff --git a/tags/vue/index.html b/tags/vue/index.html index b5108ea..2fb42fd 100644 --- a/tags/vue/index.html +++ b/tags/vue/index.html @@ -147,18 +147,18 @@ @@ -271,7 +271,7 @@

vue 站点阅读时长 ≈ - 42 分钟 + 45 分钟

diff --git a/tags/websocket/index.html b/tags/websocket/index.html index 1f6b002..d583899 100644 --- a/tags/websocket/index.html +++ b/tags/websocket/index.html @@ -147,18 +147,18 @@ @@ -271,7 +271,7 @@

websocket 站点阅读时长 ≈ - 42 分钟 + 45 分钟