web development

使用 Express 擷取 GET 查詢字串參數

查詢字串是指位於 URL 路徑之後並以問號（’?’）開頭的部分。讓我們看看如何獲取這些屬性及其值。例如： ?name=flavio 可以使用 & 添加多個查詢參數： ?name=flavio&age=35 要如何在 Express 中獲取這些查詢字串值？ Express 讓我們輕鬆完成，它會為我們填充 Request.query 物件： const express = require('express') const app = express() app.get('/', (req, res) => { console.log(req.query) }) app.listen(8080) 該物件中的每個查詢參數都填入一個屬性。如果沒有查詢參數，則該物件為空。這使得可以使用 for...in 迴圈來進行迭代： for (const key in req.query) { console.log(key, req.query[key]) } 這將輸出查詢屬性的鍵和值。也可以單獨存取屬性： req.query.name //flavio req.query.age //35

使用Vue.js建立您的第一個應用程式

如果您從未建立過Vue.js應用程式，我將帶您透過建立一個Vue應用程式的任務，並了解其運作方式。我們即將建立的應用程式已經完成，並且這是Vue CLI的預設應用程式。第一個範例在Codepen上查看第二個範例：Vue CLI的預設應用程式本地使用Vue CLI 使用CodeSandbox 文件結構 index.html src/main.js src/App.vue src/components/HelloWorld.vue 運行應用程式如果您從未建立過Vue.js應用程式，我將帶您透過建立一個Vue應用程式的任務，並了解其運作方式。第一個範例首先，我們將使用最基本的Vue範例。您需要建立一個包含以下內容的HTML檔案： <html> <body> <div id="example"> <p>{{ hello }}</p> </div> <script src="https://unpkg.com/vue"></script> <script> new Vue({ el: '#example', data: { hello: 'Hello World!' } }) </script> </body> </html> 然後在瀏覽器中打開它。這就是您的第一個Vue應用程式！該頁面應該顯示一個“Hello World！”的訊息。我將腳本標籤放在body的末尾，以便在DOM加載後按順序執行。這段程式碼的作用是，我們實例化了一個新的Vue應用程式，將其連結到#example元素作為其模板（通常使用CSS選擇器來定義，但也可以傳遞HTMLElement）。然後，它將該模板與data對象關聯。data是一個特殊的對象，用於存放我們希望Vue渲染的數據。在模板中，特殊的{{ }}標記表示它是模板中的某一部分是動態生成的，其內容應從Vue應用程式數據中查找。在Codepen上查看您可以在Codepen上查看此範例： https://codepen.io/flaviocopes/pen/YLoLOp 碼筆與使用普通HTML檔案的方法有些不同，您需要在Pen設定中配置它以指向Vue庫的位置：第二個範例：Vue CLI的預設應用程式讓我們提升一點等級。我們即將建立的下一個應用程式是已經完成的Vue CLI預設應用程式。什麼是Vue CLI？它是一個命令行工具，可以通過為您搭建應用程式框架並提供樣例應用程式來加快開發速度。您可以通過兩種方式獲取此應用程式。本地使用Vue CLI 第一種方式是在您的電腦上安裝Vue CLI，然後運行以下命令： vue create <enter the app name> 使用CodeSandbox 第二種方式是前往https://codesandbox....

使用開發工具控制台和控制台 API

每個瀏覽器都提供了一個控制台，讓您可以與 Web 平台 API 進行交互，並通過打印由網頁中運行的 JavaScript 代碼生成的消息來查看代碼的內部結構。控制台概述使用控制台日誌格式化清除控制台計算元素的數量記錄複雜對象記錄不同級別的錯誤在導航期間保留日誌分組控制台消息打印堆棧跟踪計算所花費的時間生成 CPU 配置文件控制台概述控制台工具欄很簡單。有一個按鈕可以清除控制台消息，您還可以在 macOS 上單擊 cmd-K ，或在 Windows 上單擊 ctrl-K 以清除控制台消息，第二個按鈕可以激活一個側邊欄，讓您可以按照文本或消息類型進行過濾，例如錯誤、警告、信息、日誌或調試消息。您還可以選擇隱藏網絡生成的消息，只關注 JavaScript 日誌消息。控制台不僅是您可以查看消息的地方，還是與 JavaScript 代碼和 DOM 進行交互的最佳方式，並且有許多時候還用於從頁面上獲取信息。讓我們輸入我們的第一條消息。請注意 > ，讓我們在此處點擊並輸入 console.log('test') 控制台充當了一個 REPL（Read-Eval-Print-Loop），這意味著它解釋我們的 JavaScript 代碼並打印一些東西。使用控制台日誌格式化正如您所見，console.log('test') 在控制台中打印了 ’test’。在您的 JavaScript 代碼中使用 console.log 可以幫助您調試，例如打印靜態字符串，但您還可以將變量作為參數傳遞給它，該變量可以是 JavaScript 原生類型（例如整數）或對象。您可以將多個變量傳遞給 console.log ，例如： console.log('test1', 'test2') 您還可以通過傳遞變量和格式指定符來格式化漂亮的短語。例如： console.log('我的 %s 有 %d 歲', '貓', 2) %s 將變量格式化為字符串 %d 或 %i 將變量格式化為整數 %f 將變量格式化為浮點數 %o 用於打印 DOM 元素 %O 用於打印對象表示形式示例：...

前端開發人員最佳播客

可以在通勤或無法使用鍵盤時聆聽的幾個不錯的播客節目我是一個快樂的播客聽眾。我喜歡在遛狗一小時、獨自徒步旅行或開車時聽播客節目。這不僅是學習新事物的好途徑，也是聆聽故事和開拓視野的方式。我有一個我聽的播客節目清單，但我不想煩擾你。相反，我想列出我認為最適合前端開發人員的播客節目。如果你想擴展播客節目收藏夾，這是一個好地方！前端開發人員播客 Developer Tea egghead.io開發者聊天前端 Happy Hour The freeCodeCamp Podcast The Frontside Podcast Full Stack Radio JavaScript Jabber JS Party Ladybug Podcast Modern Web Syntax Toolsday Web of Tomorrow 不僅適合前端開發人員，也適合一般用戶 Away from Keyboard Coding blocks 編寫疲勞 Laracasts片段 NodeUp ShopTalk Under the Radar 每集都有開發人員或新主持人的故事 The 6 Figure Developer CodeNewbie 軟體定義存活 The Big Web Show Developer on Fire 祝你享受！（如果我錯過了其他好節目，請在Twitter上告訴我！）

即將開始的2023年訓練營

今天我要給大家介紹一下bootcamp.dev 2023年訓練營的最新消息。 Web Development Bootcamp 是一個為期10週的高強度網上課程，教授使用現代技術如HTML、CSS、JavaScript、Tailwind、Astro、React、Next.js等基礎的網頁開發知識。每年我只舉辦一次訓練營，並以班級形式進行。在2020、2021和2022年已有超過3000名學生參加訓練營，並取得了巨大成功。我一直收到學生的郵件，告訴我這個訓練營如何幫助他們開始他們的技術職業生涯。現在我正在努力籌備2023年的訓練營。距離開始只有57天了，所以是時候開始準備了。這將是第四個班級，我認為這將是有史以來最好的一屆。這是一門針對初學者開發者的課程。針對那些對網頁開發一無所知的人。針對那些在某些領域有些許經驗的開發者。但是你知道自己還沒有達到自己的潛力。針對那些將塑造未來網頁發展的開發者。對於那些幾乎知道如何構建網站，但想提高水平的開發者。如果你符合以上條件，請舉手！如果你想學習如何創建現代化的網站和應用，這門課非常適合你。這門課也適合那些找工作的大學畢業生。對於打算轉行成為軟件工程師並尋找工作的人來說，這門課也非常適合。你最終能夠從事自己感興趣的領域。能夠自己實現夢想項目。能夠建立你的項目作品集。學習網頁開發可以帶來無盡機會。說實話，我不會選擇做其他事情。請記住日期。 2023年1月24日。設定提醒。 bootcamp.dev 更多信息即將公佈。 Flavio

在 Express 中處理 CORS

如何透過設定 CORS 允許跨網站請求通常在瀏覽器中運行的 JavaScript 應用程式只能存取由同一個網域（原始網站）提供的 HTTP 資源。從相同來源載入圖片、腳本/樣式表一直是可行的。使用 @font-face 載入網頁字型時也已經有預設的「同源政策」。而其他較不常見的事物（例如 WebGL 紋理和 Canvas API 中載入的 drawImage 資源）也是如此。然而，對於從外部第三方伺服器發送的 XHR 和 Fetch 請求，預設會失敗。這就是除非第三方伺服器實現了一個允許建立連線以及請求資源並下載和使用的機制。這個機制被稱為 CORS 跨來源資源共用。需要 CORS 的一件非常重要的事情是 ES 模組，最近在現代瀏覽器中引入了。如果您沒有在伺服器端設置允許提供第三方來源的 CORS 政策，請求將會失敗。 Fetch 範例: XHR 範例: 跨來源資源失敗的條件如下: 不同網域不同子網域不同埠號不同協定 CORS 的目的是為了保護您的安全，防止惡意使用者利用您正在使用的 Web 平台。如果您同時控制了伺服器和客戶端，您會知道雙方都是可信任的，因此有充分的理由允許資源共用。如何做到這點呢？答案取決於您使用的伺服器端堆棧。瀏覽器支援相當不錯（基本上所有，除了 IE<10）: Express 範例如果您正在使用 Node.js 和 Express 作為框架，請使用 CORS 中介軟體套件。這裡有一個簡單的 Express Node.js 伺服器範例: const express = require('express') const app = express() app....

如何使用 window.prompt()

本文將介紹如何使用瀏覽器提供的 prompt() API，讓使用者做出選擇。 prompt() 函式可讓我們從使用者獲取輸入。這個 API 已經存在於網頁的早期，並且獲得各大瀏覽器的支援。它非常簡單易用，特別適用於快速原型開發，你可以直接調用 prompt() 函式來獲取使用者輸入，而不需要建立表單。下面是使用方法：調用 prompt() 函式，並傳入一個字符串作為問題的描述： prompt("你的年齡是多少？") 在 Chrome 瀏覽器中的效果如下：在 Safari 瀏覽器中的效果如下：在 Firefox 瀏覽器中的效果如下：可以看到，每個瀏覽器的外觀有所不同，但運作原理是相同的。需要呼叫 window.prompt() 函式，但由於 window 是隱含的，因此也可以直接呼叫 prompt() 瀏覽器會阻塞腳本的執行，直到使用者輸入內容並按下確定或取消按鈕。除非點擊按鈕，否則無法退出該操作。輸入的值將從該函式返回，因此我們可以將其賦值給一個變數： const age = prompt("你的年齡是多少？") 你還可以傳入第二個參數作為預設值： const age = prompt("你的年齡是多少？", 18) 如果使用者未輸入任何內容並點擊確定，將返回一個空字符串。如果使用者點擊取消按鈕，prompt() 函式將返回 null。

如何創建一個滑鼠離開視窗時彈出的彈窗

你知道那些當你試圖關閉瀏覽器視窗時出現的煩人彈窗嗎？它們好像知道你在試圖關閉視窗，就像它們能讀取你的思想一樣。實際上，這是一個非常簡單的概念，你需要聽取特定的DOM事件。我個人不推薦使用彈窗，因為我覺得它們很煩人，但是你的公司可能要求你實現一個，所以在這裡我們就來實現一個。我喜歡保持事情簡單，所以這裡是HTML的部分： <!doctype html> <head> <title>彈窗頁面</title> </head> <body> <div id="popup"> <h3>彈窗！</h3> </div> </body> 再來是這部分的CSS： body { font-family: system-ui; background-color: #f6d198; } #popup { position: fixed; width: 100%; visibility: hidden; z-index: 10002; top: 0; opacity: 0; transform: scale(0.5); transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s; position: relative; margin: 0 auto; text-align: center; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); width: 60%; background: #862a5c; padding-bottom: 100px; padding-top: 50px; color: #fff; font-size: 2rem; } 最後是這段JavaScript：...

如何將 Tailwind 添加至 Hugo

在你的主題文件夾內運行以下命令： npm init -y 然後安裝 Tailwind CSS 作為開發依賴： npm install -D tailwindcss 使用以下命令初始化 Tailwind： npx tailwindcss init 這將創建 tailwind.config.js 文件。在編輯器中打開該文件，並按以下方式填寫 content 屬性，其中包含主題的佈局文件： module.exports = { content: ['content/**/*.md', 'layouts/**/*.html'], theme: { extend: {}, }, plugins: [], } 現在在主題文件夾中創建 tailwind.css 文件，並添加以下內容： @tailwind base; @tailwind components; @tailwind utilities; 現在打開 package.json，在 scripts 部分添加 build 和 watch 命令： { "name": "valley", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "npx tailwindcss -i ./tailwind.css -o ....

從無代碼到部分代碼

我試著做些我從未嘗試過的事情：依靠一個服務處理網站。我一直想要對我所做的一切擁有絕對的控制權。但後來我愛上了Notion，並且喜歡它為網站提供動力的想法，正如我在這篇文章中所解釋的那樣。在那裡，我提到了將我的新課程的登陸頁面託管的可能性。但我改變了主意，因為我需要以無法使用Notion或其周圍的任何工具實現的方式來自定義它。特別是我需要嵌入一個連接到付款彈出窗口的按鈕，並且這不是一個簡單的事情。所以這是我所做的：我在Notion中構建了登陸頁面，因為我真的很喜歡它易於起草的方式。然後我將其導出為HTML。 HTML輸出相當乾淨，僅含有最少的CSS。然後我添加了一些部分響應的代碼，自定義了HTML以處理付款處理，然後對一些內容進行了更改。我將使用Cloudflare Pages發布這個頁面。所以，我不再是完全無代碼，而是使用無代碼創建了一個草稿，然後通過代碼對其進行了增強。我喜歡這個想法。下一門課，JavaScript課程，仍然是在Notion中構建的，因為我計劃利用其靈活性，使在制作課程的同時更加輕鬆。但是我決定只將該部分保留在Notion中（以及我所有的私人內容）。對於這樣的使用情境，它確實非常出色。課程結束後，我可能會將課程從Notion導出並放入靜態站點中。這樣我就可以享受到使用拖放方式更新並即時更新的站點的好處（請記住，該課程是以同班同學為基礎的，所以每天都會解鎖新課程），最終完成後可以處於某種“存檔模式”。我仍然不確定是否可行，但如果可以的話，那將是很酷的。我在全面無代碼方面仍然有一些問題。我會喪失控制權。而我想要控制權。控制權，和自由一起，是我最重視的事情之一。