如何卸載先前在本機或全域安裝的npm Node套件。 要卸載你先前本機安裝的套件（在node_modules資料夾中使用npm install <package-name>），請從專案根目錄中運行以下命令： npm uninstall <package-name> 這個操作同時會移除package.json檔案中的套件參考。 如果這個套件是開發依賴項，在package.json檔案的devDependencies中列出，你必須使用-D / --save-dev標誌來從檔案中刪除它： npm uninstall -D <package-name> 如果這個套件是全域安裝的，你需要添加-g / --global標誌： npm uninstall -g <package-name> 例如： npm uninstall -g webpack 你可以在系統上的任何位置運行這個命令，當前所在的資料夾並不重要。
作為全球數百萬名電腦程式設計師，我們95%的時間都在解決更多或更少相同的問題。幸運的是，開發者早已意識到，程式碼可以被撰寫成可重用的形式，稱為函式庫。而這些函式庫可以在開發者間共享使用。 通常函式庫是免費且開放分享的， Arduino 就是這樣的情況。 一些函式庫是"Arduino官方函式庫"，由Arduino團隊維護。 可在以下網頁找到官方函式庫：https://www.arduino.cc/reference/en/libraries/，它們的原始碼也可以在GitHub上找到：https://github.com/arduino-libraries. 因為這些函式庫位於GitHub上，所以很容易開始共同協作，提交修復和改進。 在我們的專案中加入官方函式庫非常容易。 在Arduino IDE的Sketch選單中，選擇Include Library，您將看到預設包含的Arduino函式庫清單。 隨便選一個，比如Servo: 這會在文件頂部添加一行#include< Servo.h>，然後您就可以開始使用了。 您也可以通過函式庫管理器加入更多函式庫，您可以從工具選單中打開，然後點選Manage libraries...： 一些函式庫是由社區構建和維護的，它們沒有集中的地方可以找到。 Google是一個很好的地方，可以找到這些函式庫。 有時候你需要加入一個官方函式庫和函式庫管理器中都找不到的函式庫。 在這種情況下，在Arduino IDE的Sketch選單中，請選擇Include Library，然後選擇Add .ZIP library以從壓縮檔加載函式庫。 加載後，您將在選單中的Contributed libraries部分看到它被列出。
在這個項目中，我們將使用一個搖桿電子裝置，並將其連接到我們在“如何使用Phaser.js創建遊戲”文章中創建的平台遊戲中。 目標是通過搖桿在遊戲中移動玩家。 使用Johnny Five來實現。在我們的Node.js應用程序中，我們將連接到設備，並創建一個Websockets服務器。在開始之前，我強烈推薦您閱讀Johnny Five教程。 瀏覽器客戶端將連接到此Websockets服務器，並將左/右/靜止/上的事件流式傳輸以處理玩家的移動。 讓我們開始吧！ 搖桿 這是我們在此項目中要使用的搖桿組件。 它就像您在現實中使用的搖桿一樣，例如PlayStation遊戲控制器： 它有5個引腳：GND，+5V（VCC），X，Y和SW。 X和Y是搖桿的坐標。 X是類比輸出，信號搖桿在X軸上的運動。 Y也是如此，適用於Y軸： 將搖桿放在左側的引腳上，這些將是測量值： 完全左時，X為-1；完全右時，X為1。 到達頂部時，Y為-1；到達底部時，Y為1。 SW引腳是一個數字輸出，當按下搖桿時激活（可按下），但我們將不使用它。 將4根電線連接到搖桿： 將其連接到Arduino 我使用的是Arduino Uno板克隆版，將引腳#1和#2連接到GND和+5V。 引腳#3（x）連接到A0，引腳#4（y）連接到A1： 現在將Arduino通過USB端口連接到計算機，我們將在下一節中使用Node.js的Johnny Five程序。 確保您已經使用Arduino IDE在Arduino板上加載了StandardFirmataPlus程序，就像我在Johnny Five教程中解釋的那樣。 Johnny Five Node.js應用程序 讓我們初始化我們的Johnny Five應用程序。 創建一個joystick.js文件。 在頂部添加 const { Board, Joystick } = require("johnny-five") 初始化一個板，並添加板准備好的事件： const { Board, Joystick } = require("johnny-five") const board = new Board() board.on("ready", () => { //ready! }) 現在初始化一個新的搖桿對象，告訴它我們要使用哪些輸入引腳： const { Board, Joystick } = require("johnny-five") const board = new Board() board....
Axios是一个非常受欢迎的JavaScript库，可用于执行HTTP请求，并可在浏览器和Node.js平台上运行。 介绍Axios 安装 Axios API GET请求 给GET请求添加参数 POST请求 介绍Axios Axios是一个非常受欢迎的JavaScript库，可用于执行HTTP请求，并可在浏览器和Node.js平台上运行。 它支持所有现代浏览器，包括对IE8及更高版本的支持。 它基于Promise，这使得我们可以使用async/await代码来轻松地执行XHR请求。 与原生的Fetch API相比，使用Axios有很多优势： 支持较旧的浏览器（Fetch需要一个polyfill） 支持中止请求的方式 支持设置响应超时的方式 内置的CSRF保护 支持上传进度 执行自动的JSON数据转换 在Node.js中工作 安装 可以使用npm在Node.js中安装Axios： npm install axios 在浏览器中，可以使用unpkg.com将其包含在页面中： <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 需要注意的是，API调用必须启用CORS，以便在浏览器中访问，否则请求将失败。 Axios API 可以从"axios"对象开始一个HTTP请求： axios({ url: 'https://dog.ceo/api/breeds/list/all', method: 'get' }) 这将返回一个promise。您可以使用async/await来解析该promise以获取响应对象： ;(async () => { const response = await axios({ url: 'https://dog.ceo/api/breeds/list/all', method: 'get' }) console.log(response) })() 为方便起见，通常会使用以下方法： axios.get() axios.post() 与jQuery中的$.ajax()相比，它们提供了更简洁的语法。例如： ;(async () => { const response = await axios.get('https://dog.ceo/api/breeds/list/all') console.log(response) })() Axios提供了所有HTTP动词的方法，虽然它们不太常用，但仍然会被使用：...
在編程過程中，有時需要快速測試並實驗一段程式碼。對於客戶端程式碼，我們可以輕鬆地進行調試 - 只需在任何頁面上打開Chrome DevTools並開始編寫客戶端JavaScript。 那麼如何對Node.js程式碼進行相同的操作，並且可以進行文件系統和其他Node.js功能的調試呢？實際上非常簡單。 打開你的終端機，運行以下命令： node --inspect 然後在Chrome中輸入以下網址：about://inspect。 點擊Node目標旁邊的“打開專用的Node DevTools”鏈接，這樣你就可以在瀏覽器的DevTools中使用Node.js了： 請確保點擊這個鏈接，而不是下方的“inspect”鏈接，因為它會在重新啟動時自動重新連接到Node.js實例 - 非常方便！ 如果問為什麼我們要這樣做，答案很簡單：使用DevTools和相關工具來進行JavaScript程式碼的調試是最好的方式。我們可以使用分析器、所有的堆疊可視化資訊、程式碼導航工具、一個非常酷的調試器等等。
這是一份有關如何使用CSS處理表格的簡要指南。 在過去，我們通常過度使用表格來創建華麗的頁面佈局，因為它們是唯一的選擇之一。 如今，隨著Grid和Flexbox的出現，我們可以讓表格回到它原本的作用：樣式設定。 讓我們從HTML開始。這是一個基本的表格： <table> <thead> <tr> <th scope="col">姓名</th> <th scope="col">年齡</th> </tr> </thead> <tbody> <tr> <th scope="row">Flavio</th> <td>36</td> </tr> <tr> <th scope="row">Roger</th> <td>7</td> </tr> </tbody> </table> 默認情況下，這個表格看起來並不太吸引人。瀏覽器只提供了一些標準的樣式： 當然，我們可以使用CSS來調整表格的所有元素。 讓我們從邊框開始。一個漂亮的邊框可以讓表格大有不同。 我們可以對table元素以及th和td等內部元素應用邊框樣式： table, th, td { border: 1px solid #333; } 如果加上一些外邊距，我們會得到一個漂亮的效果： 表格中常見的一個特點是可以為一行添加顏色，並為另一行添加不同的顏色。這可以使用nth-child(odd)或nth-child(even)選擇器實現： tbody tr:nth-child(odd) { background-color: #af47ff; } 這將給我們帶來以下效果： 如果在表格元素中添加border-collapse: collapse;，則所有邊框將合併為一個：
一種在移動設備上以美觀方式顯示表格的實用方法 幾天前，我通過Google 搜索控制台收到了一個警告。它在我有一個大表格的頁面上檢測到了移動端可用性問題。 這是給我帶來問題的表格： 在移動設備上，它的渲染效果相當差： 這不是一種良好的用戶體驗，也是Google 搜索控制台上的問題。如果有什麼我不希望看到的就是這樣一個錯誤/警告。尤其還是我能解決的問題。 我使用的靜態網站生成器Hugo允許我將特定於單個頁面的CSS代碼注入，只需將<style>標籤添加到Markdown文件中即可。非常方便。 因此，我開始尋找一個很好的方法來使我的表格具有響應性。我找到了這篇非常好的CSS Tricks文章：Responsive Data Tables。它來自2011年，但仍然適用！ 這個技巧是這樣的：我們希望將表格顯示為塊元素，而不是傳統CSS意義上的表格。我們通過將所有表格標題移到視圖之外，然後在表格中插入一個新的塊元素，每行都有自己的標題，就像這樣： 以下是實現上述設計的代碼： @media only screen and (max-width: 1500px) { table, thead, tbody, th, td, tr { display: block; } thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid #ccc; } td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 200px; margin-left: 150px; } td:before { position: absolute; top: 12px; left: 6px; width: 200px; padding-right: 40px; white-space: nowrap; margin-left: -150px; } td:nth-of-type(1):before { content: "Option"; } td:nth-of-type(2):before { content: "Description"; } td:nth-of-type(3):before { content: "Type"; } td:nth-of-type(4):before { content: "Default";} } 你希望自定義的重要部分是最後4行 - 你需要輸入每個“列”的標題，如果有更多列，則需要添加更多行。如果列較少，則可以將它們移除。...
curl是一個強大的工具，可以讓你從命令行創建網絡請求。 curl是一個命令行工具，用於在網絡上傳輸數據。 它支持許多協議，包括HTTP、HTTPS、FTP、FTPS、SFTP、IMAP、SMTP、POP3等。 在調試網絡請求方面，curl是最好的工具之一。 這是一個工具，一旦你知道如何使用它，你就會再次使用。它是程序員最好的朋友。 它是通用的，可以在Linux、Mac、Windows上運行。請參考官方安裝指南在你的系統上安裝它。 有趣的事實：curl的作者和維護人員是瑞典人，因他的工作（curl和libcurl）對計算世界的貢獻而被瑞典國王授予獎項。 讓我們深入介紹一些與HTTP請求一起工作時，你最有可能執行的命令和操作。 這些示例涉及與HTTP一起工作，這是最常用的協議。 執行HTTP GET請求 獲取HTTP響應頭 僅獲取HTTP響應頭 執行HTTP POST請求 執行HTTP POST請求並發送JSON 執行HTTP PUT請求 跟隨重定向 將響應保存到文件中 使用HTTP驗證 設置不同的User Agent 檢查請求和響應的所有詳細信息 將任意瀏覽器網絡請求複製為curl命令 執行HTTP GET請求 當你執行一個請求時，curl將返回響應的主體： curl https://flaviocopes.com/ 獲取HTTP響應頭 默認情況下，curl在輸出中隱藏響應頭。要顯示它們，使用i選項： curl -i https://flaviocopes.com/ 僅獲取HTTP響應頭 使用I選項，你可以僅獲取響應頭，而不是響應體： curl -I https://flaviocopes.com/ 執行HTTP POST請求 X選項允許你更改HTTP方法。默認情況下，使用GET，等同於： curl -X GET https://flaviocopes.com/ 使用-X POST將執行POST請求。 你可以執行URL編碼的POST請求： curl -d "option=value&something=anothervalue" -X POST https://flaviocopes.com/ 在這種情況下，發送application/x-www-form-urlencoded的Content-Type。 執行HTTP POST請求並發送JSON 與上面的示例不同，你可能希望發送JSON。 在這種情況下，你需要明確設置Content-Type頭，使用H選項： curl -d '{"option": "value", "something": "anothervalue"}' -H "Content-Type: application/json" -X POST https://flaviocopes....
使用Docker容器后，如果您点击工具栏中的Docker图标并选择Dashboard，您将在Docker Desktop中看到它： 现在，将鼠标悬停在容器上，您将看到5个按钮： 它们是： 在浏览器中打开 CLI 停止 重启 删除 您可以通过这些按钮管理您的容器生命周期。 点击列表中的容器名称，将会展示更多数据，包括日志管理器： 告诉您有关容器的有用信息的检查器： 以及有关容器CPU、内存、网络和磁盘使用情况的统计数据： 返回并点击“在浏览器中打开”按钮，http://localhost/tutorial URL将打开（在该应用程序中，http://localhost 会重定向到 http://localhost/tutorial）： 这是我们示例镜像提供的网站内容。现在返回Docker Desktop并点击停止按钮： 然后刷新页面，它将不再工作： 回到Docker Desktop，点击开始按钮，它将再次工作。 尝试点击CLI按钮。一个新的终端窗口将打开，您将自动连接到Docker容器，作为“root”用户： 在上图中，whoami 命令返回当前用户名。
如何使用Express向客户端发送响应 在"Hello World"示例中，我们使用Response.send()方法发送一个简单的字符串作为响应，并关闭连接： (req, res) => res.send('Hello World!') 如果传入的是字符串，它会将Content-Type头设置为text/html。 如果传入的是对象或数组，它会将Content-Type头设置为application/json，并将该参数解析为JSON。 send()会自动设置Content-LengthHTTP响应头。 send()还会自动关闭连接。 使用end()发送空响应 发送没有任何内容的响应的另一种方法是使用Response.end()方法： res.end() 设置HTTP响应状态 使用Response.status()： res.status(404).end() 或者 res.status(404).send('File not found') sendStatus()是一个快捷方式： res.sendStatus(200) // === res.status(200).send('OK') res.sendStatus(403) // === res.status(403).send('Forbidden') res.sendStatus(404) // === res.status(404).send('Not Found') res.sendStatus(500) // === res.status(500).send('Internal Server Error')