Feb. 2024 ​

2 nd ​

元件庫 ​

• Vue DevUI

  基於 Vue3 的 UI 元件庫。

問題 ​

• v-for 不要用 index 作為 key

  1. push 沒有影響，但是 unshift 有
     因為用 unshift 會造成前面幾項的 index 不同，所以全部子節點都會更新
     
  2. 就算是 id-${i} 之類的也一樣，只要有 index 都會影響

5 th ​

Nginx ​

• Location

  nginx

  http { 
    server {
      listen 80;
      server_name www.example.com;
      location / {
        root /home/www/ts/;
        index index.html;
      }
    }
  }

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  

  訪問 www.example.com 的 80 port 時，會回傳 /home/www/ts/index.html 文件。

  =：精準匹配

  nginx

  location = /test {
    return 200 "hello"; 	
  }
  
  # /test    ✅
  # /test/   ❌
  # /test2   ❌
  # /test/2  ❌

  1
  2
  3
  4
  5
  6
  7
  8
  

  ~：區分大小寫的正則匹配

  nginx

  location ~ ^/test$ {
    return 200 "hello"; 	
  }
  
  # /test    ✅
  # /Test    ❌
  # /test/   ❌
  # /test2   ❌

  1
  2
  3
  4
  5
  6
  7
  8
  

  ~*：不區分大小寫的正則匹配

  nginx

  location ~* ^/test$ {
    return 200 "hello"; 	
  }
  
  # /test    ✅
  # /Test    ✅
  # /test/   ❌
  # /test2   ❌

  1
  2
  3
  4
  5
  6
  7
  8
  

  ^~：以某個字符開頭

  nginx

  location ^~ /images/ {
    return 200 "hello"; 	
  }
  
  # /images/1.gif    ✅

  1
  2
  3
  4
  5
  

  /：通用匹配

  nginx

  location / {
    return 200 "hello"; 	
  }
  
  # /index.html   ✅

  1
  2
  3
  4
  5
  

  nginx

  location /test {
    return 200 "hello"; 	
  }
  
  # /test    ✅
  # /test2   ✅
  # /test/   ✅

  1
  2
  3
  4
  5
  6
  7
  

• root

  主要是拼接成 root + location

  nginx

  location /i/ {
  	root /data/w3
  }

  1
  2
  3
  

  請求 /i/top.gif，會回傳 /data/w3/i/top.gif。

• alias

  主要是把 location 替換成 alias

  nginx

  location /i/ {
  	alias /data/w3/images/;
  }

  1
  2
  3
  

  請求 /i/top.gif，會回傳 /data/w3/images/top.gif。

⋯ Reference