Node.js

了解這個由 Next.js 提供的強大技術，用於在 Next.js 應用程序中創建 API 端點。 除了創建頁面路由（意味著頁面作為 Web 頁面提供給瀏覽器），Next.js 還可以創建API 路由。 這是一個非常有趣的功能，因為這意味著 Next.js 可以用於創建存儲在 Next.js 中並通過 fetch 請求傳輸 JSON 的數據的前端。 API 路由位於 /pages/api/ 文件夾下，並且與 /api 端點相映射。 這個功能在創建應用程序時非常有用。 在這些路由中，我們編寫的是 Node.js 代碼（而不是 React 代碼）。這是一個範式轉變，你從前端轉向後端，但非常平滑。 假如你有一個 /pages/api/comments.js 文件，它的目標是以 JSON 的形式返回博客文章的評論。 假如你有一個存儲在 comments.json 文件中的評論列表： [ { "comment": "第一條" }, { "comment": "好文章" } ] 下面是一個示例代碼，返回評論列表給客戶端： import comments from './comments.json' export default (req, res) => { res.status(200).json(comments) } 它將在 /api/comments URL 上聽取 GET 請求，你可以使用瀏覽器來調用它：...

你需要知道圖片在文件系統中的位置。 如果是從互聯網獲取的圖片，你可以將它保存到系統的臨時文件夾。 然後安裝 image-size npm 模塊： npm install image-size 你可以像這樣使用它： import sizeOf from 'image-size' const { height, width } = sizeOf(fileLocation)

當你需要程式化地從伺服器下載檔案時，你會如何下載一個檔案呢？ 這個問題讓我自問不已，當我需要從伺服器下載檔案並將其儲存在本地時。 以下是我所使用的程式碼： const fs = require('fs') const request = require('request') const download = (url, path, callback) => { request.head(url, (err, res, body) => { request(url) .pipe(fs.createWriteStream(path)) .on('close', callback) }) } const url = 'https://…' const path = './images/image.png' download(url, path, () => { console.log('✅ 完成！') }) 這段程式碼使用了內建的 fs 模組以及 request 模組。 必須先安裝 request： npm install request 需要注意的是，request 模組最近已經被棄用，這意味著它已經被「完成」，不會再有新的功能被加入。但這並不表示它停止運作，也不表示我們該停止使用它。

改善 Twitter 卡片的一個故事 我會在 Twitter 上分享我的博客文章，曾經有一段時間，我為每篇博文畫了一張圖片。 我設置了 Hugo，使其使用存儲在帖子文件夾中的 banner.png 或 banner.jpg 圖片作為開放圖形圖片，如下所示： <meta property="og:image" content="https://flaviocopes.com/axios/banner.png" /> 如果一篇文章沒有圖片，我會顯示我的頭像代替： <meta property="og:image" content="https://flaviocopes.com/img/avatar.png" /> 問題來了：我很久以前就停止製作這些自定義的橫幅圖片了，而且我的大部分博文都沒有橫幅圖片。 它們在 Twitter 上看起來都一樣： 我無法手工製作500個橫幅圖片。自從看到 Indie Hackers 為論壇博客文章生成這些圖片（一個很棒的點子）之後，我就一直在考慮以編程方式生成這些圖片。 因此，在獲得了一個很好的橫幅圖片的靈感後，我決定為我的每一篇博文創建一個自定義橫幅。 該橫幅是一個 PNG 圖片，為了保持文章的重點（“如何使用 Node.js 和 Canvas 創建並保存圖片”），我將省略其中的一些部分。 此外，有很多不同的方法可以實現我做的事情，下面只是其中一種方法。 首先，我們需要哪些 npm 包？ 只需要一個！canvas： npm install canvas 這個包為我們提供了一個基於 Node.js 的 Canvas API 實現，我們在瀏覽器中非常熟悉和喜愛。 換句話說，我用來生成圖片的所有內容在瀏覽器中也可以運行。 只是，我們不是從 <canvas> HTML 元素獲取 Canvas 實例，而是載入庫，從中獲取 createCanvas 函數： const { createCanvas } = require('canvas') 然後，我調用此函數，傳遞 canvas 的寬度和高度，我設置為 1200x600：...

Node.js 內建的模組以往被稱為非 promise-based 模組。 這是由於在 promise 之前，這些模組就已經存在了。 我們已經有了 promisify 有一段時間了。但我最近發現 Node.js 提供了一個新的基於 promise 的 API。 我以為這是新功能，但它其實已經在 Node.js 10（2018年）中引入了，已經過了一段時間！ 目前這個功能只適用於 fs 內建模組。 我不確定這是否很快就會移植到其他原生模組。 以下是如何使用它： import * as fs from 'node:fs/promises'; | 注意到現在可以使用 node:fs 约定来識別內建模組。 現在你可以使用任何 fs 方法，使用 promises 或 await： const posts = await fs.readdir('content');

學習如何使用Axios發送url編碼的數據 我遇到了這個問題：我需要從一個Node.js應用程序中調用的API只接受url編碼格式的數據。 我必須找出解決這個問題的方法：如何使用Axios發送url編碼的數據？ 首先，我們需要安裝qs模塊。這是一個很棒的查詢字符串解析和字符串化庫，還帶有一些額外的安全功能： npm install qs 然後，我們需要導入qs模塊以及當然還有Axios的導入語句： const qs = require('qs') const axios = require('axios') 如果你使用的是ES模塊，請使用： import qs from 'qs' import axios from 'axios' 接下來，是Axios代碼。如果你對它不熟悉，請參閱我的完整的Axios教程。 簡而言之，我們需要使用Axios請求的完整形式，而不是axios.post()，而是axios()。 在其中，我們使用了qs提供的stringify()方法，並將數據包裹在其中。然後，我們設置了content-type標頭： axios({ method: 'post', url: 'https://my-api.com', data: qs.stringify({ item1: 'value1', item2: 'value2' }), headers: { 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' } })

在本篇文章中，我將向您展示我如何使用JavaScript為JavaScript課程建立一個註冊計數器，以便我可以看到有多少人註冊了這個課程（註冊時間為11月15日至11月22日！） 這個計數器是一個完全多餘的東西，是我在拖延時做的，想要避免重要的工作。 我一直在思考不同的方法來實現這個功能，比如使用Scriptable創建一個JavaScript的iOS小工具。 但後來我想，嗯，那就只做一個網頁好了。一個我可以在iPad上保持打開的網頁，我將iPad放在桌子旁邊或其他可以不時看到它的地方。 我可以設置iPad永不進入睡眠狀態，並將網頁設置為每2分鐘自動刷新。 做一個簡單的網頁的好處是我可以在任何地方訪問它。無論是在iPad上、iPhone上還是Mac上。 我創建了一個Node.js程序來獲取我所需的數據。 第一步是編寫一個獲取數據的函數： const getData = async () => { return new Promise((resolve, reject) => { let count = 0 //獲取計數 resolve(count) }) } 我將其設置為async函數，因為我使用了fetch請求，而且很可能你也需要它。 如果你感興趣，我將所有的註冊信息存儲在Airtable紀錄中，所以在getData()內部，我放置了從Airtable獲取計數所需的所有代碼。 然後，我創建了一個非常簡單的Express服務器，該服務器提供了一個HTML頁面，該頁面在頁面的中央顯示了計數。 const express = require('express') const app = express() app.get('/', async (req, res, next) => { const count = await getData() const html = ` <html> <head> <!-- 每2分鐘自動刷新 --> <meta http-equiv="refresh" content="120"> <!-- 在iOS上允許全屏顯示 --> <meta name="apple-mobile-web-app-capable" content="yes"> <link href="https://fonts....

在網絡應用程序中，上傳文件並在後端進行處理是最常見的文件處理功能之一。例如，上傳頭像或附件。 假設我們有一個HTML文件輸入元素： <input type="file" id="fileUpload" /> 我們在#fileUpload DOM元素上註冊一個變化事件處理程序，當用戶選擇一個圖像時，我們會觸發handleImageUpload()函數並傳入所選文件。 const handleImageUpload = event => { const files = event.target.files const formData = new FormData() formData.append('myFile', files[0]) fetch('/saveImage', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => { console.log(data.path) }) .catch(error => { console.error(error) }) } document.querySelector('#fileUpload').addEventListener('change', event => { handleImageUpload(event) }) 我們使用Fetch API將文件發送到服務器。當服務器成功返回時，它將在path屬性中發送圖像路徑給我們。 有了這一點，我們可以進行需要的操作，比如用圖像更新界面。 使用Node.js處理文件上傳的服務器端處理 下面是服務器端代碼的詳細說明。我們使用Node.js和Express框架來處理請求。 安裝express-fileupload npm模塊： npm install express-fileupload 在中間件中使用它： import fileupload from 'express-fileupload' //或 const fileupload = require('express-fileupload') 在創建Express應用程序之後，添加以下代碼：...

REPL代表Read-Evaluate-Print-Loop，這是一個快速探索Node功能的好方法。 我們使用node命令來運行Node.js腳本： node script.js 如果省略文件名，則使用REPL模式： node 如果你現在在終端中嘗試這樣做，會得到以下結果： ❯ node > 命令進入閒置模式，等待我們輸入內容。 提示：如果你不確定如何打開終端，請搜索“如何在…上打開終端”。 REPL等待我們輸入一些JavaScript代碼。 先從簡單的開始，輸入以下內容： > console.log('test') test undefined > 第一個值test是我們要求控制台打印的輸出，然後得到的是undefined，這是運行console.log()的返回值。 現在我們可以輸入新的JavaScript代碼。 使用Tab鍵來自動補全 REPL的一個很酷的功能是它的互動性。 在編寫代碼時，如果按下Tab鍵，REPL會嘗試自動補全你已經定義的變量或預定義的變量。 探索JavaScript對象 嘗試輸入JavaScript類的名稱，例如Number，然後加上一個點並按下Tab鍵。 REPL將打印出你可以訪問該類的所有屬性和方法： 探索全局對象 你可以通過輸入global.並按下Tab鍵來檢查你可以訪問的全局對象： 特殊變量 _ 如果在某些代碼之後輸入_，它將打印出上一個操作的結果。 點命令 REPL有一些特殊命令，都以點.開頭。它們包括： .help：顯示點命令的幫助信息 .editor：啟用編輯器模式，便於編寫多行JavaScript代碼。進入此模式後，輸入Ctrl-D運行編寫的代碼。 .break：在輸入多行表達式時，輸入.break命令將中止進一步的輸入，相當於按下Ctrl-C。 .clear：重置REPL上下文為空對象，並清除當前正在輸入的多行表達式。 .load：加載一個JavaScript文件，相對於當前工作目錄 .save：將REPL會話中的所有內容保存到文件中（指定文件名） .exit：退出REPL（相當於按兩次Ctrl-C） REPL知道何時你正在輸入多行語句，而不需要調用.editor命令。 例如，如果你開始輸入迭代器，像這樣： [1, 2, 3].forEach(num => { 然後按下enter鍵，REPL將移到一個以3個句點開頭的新行，表示你現在可以繼續編寫該塊的代碼。 ... console.log(num) ... }) 如果你在一行的末尾輸入.break，多行模式將停止，該語句將不被執行。

我曾經需要從互聯網上下載文件，而且還想使用await以簡單的方式在完成後做其他事情。 您可以使用Axios達到這個目的。 import axios from 'axios' 然後寫一個像這樣的download()函數： async function download(url, filepath) { const response = await axios({ url, method: 'GET', responseType: 'stream', }) return new Promise((resolve, reject) => { response.data .pipe(fs.createWriteStream(filepath)) .on('error', reject) .once('close', () => resolve(filepath)) }) } 然後使用以下方式調用： const remote_url = 'https://...' const local_path = './images/test.png' await download(remote_url, local_path)