2021網站設計技能知識點 [學習筆記]

前言：

話說最近的我又重回學習網頁技能的懷抱，主要在工作開發上看到一些以前未學到的新技術，所以來寫一篇關於最近學習到的技能的知識點。

HTML and CSS 開發時:

1. 關於前端框架:

开箱即用的开发服务器 + 打包工具的组合，更轻更快:

Vite: https://vitejs.dev/

不用拋棄HTML，你還是可以極速建立最潮的網站。

(輕鬆的客製化、適應任何設計，而且建置輕巧。)

TailwindCss: https://tailwindcss.com/

以前會用的工具(加快開發和排版工具「原來現在是old school工具了」)：

Bootstrap: https://getbootstrap.com/

Foundation: https://get.foundation/

aplinejs: https://alpinejs.dev/

2. 前端工具快捷開發用(含JS):

Material Design Framework

Vue UI Library with beautifully handcrafted Material Components

Vuetify: https://vuetifyjs.com/en/

Javascript和後端開發時:

1. 訪問API通用Fetch and Axios:

Fetch：

在構建Javascript項目時，我們可以使用window對象，並且它帶有許多可以在項目中使用的出色方法。這些功能之一是Fetch API，它提供了一種簡單的全局 .fetch() 方法，這是一種從API異步獲取數據的邏輯解決方案。

讓我們看一下 .fetch() 方法的語法。

fetch(url)
.then((res) =>
// handle response
)
.catch((error) => {
// handle error
})

在上面的示例中，您可以看到簡單的獲取GET請求的語法。在 .fetch() 方法中，我們有一個

強制性參數url，它返回一個Promise，可以使用Response對象來解決。

.fetch() 方法的第二個參數是選項，它是可選的。如果我們不傳遞 options，請求總是GET，

它從給定的URL下載內容。在選項參數里面，我們可以傳遞方法或頭信息，所以如果我們想使用

POST方法或其他方法，我們必須使用這個可選的數組。

正如我之前提到的，Promise會返回Response對象，正因為如此，我們需要使用另一個方法來

獲取響應的主體。有幾種不同的方法可以使用，取決於我們需要的格式：

response.json()
response.text()
response.formData()
response.blob()
response.arrayBuffer()

Axios：

Axios是一個Javascript庫，用於從Node.js或XMLHttpRequests或瀏覽器發出HTTP請求。

作為一個現代的庫，它是基於Promise API的。

axios 有一些優勢，比如對XSRF的保護或取消請求。為了能夠使用 axios 庫，我們必須將

其安裝並導入到我們的項目中。可以使用CDN，npm或bower安裝 axios。

Axios Github [安裝方法]: https://github.com/axios/axios

現在，讓我們來看一個簡單的GET方法的語法。 
axios.get(url)
  .then(response => console.log(response));
  .catch((error) => console.log(error));

在上面的代碼中，你可以看到我使用 .get() 方法創建一個簡單的GET請求。如果你想在函數中使用POST方法，那麼只需使用 .post() 方法代替，並將請求數據作為參數傳遞即可。

當我們創建配置對象時，我們可以定義一堆屬性，最常見的是：

baseUrl
params
headers
auth
responseType

作為響應，axios 返回一個promise，該promise將與響應對像或錯誤對像一起解析。在響應對像中，具有以下值：

data，這是實際的響應主體
status，調用的HTTP狀態，例如200或404
statusText，以文本消息形式返回的HTTP狀態，例如 ok
headers，服務器發回標頭
config，請求配置
request，XMLHttpRequest對象

錯誤處理

在這一點上，還需要給 axios 點個大大的贊，因為處理錯誤是非常容易的。如果出現像404這樣的錯誤響應，promise就會被拒絕並返回一個錯誤，所以我們需要捕獲一個錯誤，我們可以檢查它是什麼類型的錯誤，就是這樣。讓我們看看代碼示例。

axios.get('url')
  .then((response) => console.log(response))
  .catch((error) => {
    if (error.response) {
      // When response status code is out of 2xx range 
      console.log(error.response.data)
      console.log(error.response.status)
      console.log(error.response.headers)
    } else if (error.request) {
      // When no response was recieved after request was made
      console.log(error.request)
    } else {
      // Error
      console.log(error.message)
    }
  })

在上面的代碼中，當響應良好時，我返回了數據，但是如果請求以任何方式失敗，我就能夠檢查 .catch() 部分中的錯誤類型並返回正確的消息。

「More Link」

2. 進行get & post request 測試工具:

Insomnia for Mac: https://insomnia.rest/

Postman for Window: https://www.postman.com/

保証function行完執行程式 [ async ] async/await 基础之後再說

3. 後端用nodejs

「nodejs install」之後再說..

4. 主要開發完後端API之後寫document給前端用:

Develop quality APIs with collaborative API-first design.

stoplight: https://stoplight.io/

swagger: https://swagger.io/

其它有用開發工具:

(不定期更新...)

Search This Blog

Ray Tech