在Svelte中处理单个组件的状态非常简单。 但是如何在组件之间传递状态呢？ 使用props传递状态 第一种策略是其他UI框架常见的策略，即使用props传递状态，将状态上升。 当一个组件需要与另一个组件共享数据时，可以将状态上升到组件树中的共同父级。 状态需要通过props传递，直到到达需要此状态信息的所有组件。 这是使用props完成的，我认为这是最好的技术，因为它很简单。 有关props的更多信息，请参考Svelte Props教程。 Context API 有些情况下，props并不是一个实用的方法。也许两个组件在组件树中距离太远，我们必须将状态移动到顶层组件。 在这种情况下，可以使用另一种技术，称为context API，它非常适合让多个组件与后代组件进行通信，而无需传递props。 context API由svelte软件包提供的两个函数提供：getContext和setContext。 您可以设置与键关联的上下文对象： <script> import { setContext } from 'svelte' const someObject = {} setContext('someKey', someObject) </script> 在另一个组件中，您可以使用getContext来检索分配给键的对象： <script> import { getContext } from 'svelte' const someObject = getContext('someKey') </script> 您只能在使用setContext的组件或其子代之一中使用getContext检索键。 如果要让两个位于两个不同组件树中的组件进行通信，那么我们还有另外一个工具：stores。 使用Svelte stores 当组件需要相互通信而无需传递太多props时，Svelte stores是一种非常好的工具来处理应用程序的状态。 首先，您必须从svelte/store中导入可写的writable： import { writable } from 'svelte/store' 然后使用writable()函数创建一个存储变量，将默认值作为第一个参数传递： const username = writable('Guest') 这可以放在一个单独的文件中，您可以将其导入多个组件中，例如称为store.js的文件中（它不是一个组件，因此可以是.js文件而不是.svelte）： import { writable } from 'svelte/store' export const username = writable('Guest') 加载此文件的任何其他组件现在都可以访问存储：...

在使用VS Code開發Django應用程式時，可能會遇到問題。VS Code會在import語句的from關鍵詞下劃線，並且如果你將鼠標懸停在其上，你會看到出現錯誤消息"無法導入’django.db’ pylint(import-error)"。 這是因為VS Code沒有運行應用程式的虛擬環境。 要解決這個問題，請執行"cmd-shift-p"（或點擊"View -> Command Palette"，然後運行命令"Python: Select Interpreter"。 VS Code會顯示一個找到的Python解釋器列表。 選擇與您的虛擬環境對應的解釋器，例如最後一個選項。 錯誤將消失。

本文介紹了如何在Vue CLI 3項目中設置Tailwind的使用方法。 Tailwind 是一個相當酷炫的CSS框架。 在本文中，我將向您展示如何在Vue應用程序中使用Tailwind（v1.0.5）。 這裡有4個簡單的步驟： 安裝Tailwind 創建配置文件 配置PostCSS 創建CSS文件 在您的Vue應用程序中導入該文件 測試是否正常工作 本文假設您想要將Tailwind應用於基於Vue CLI 3的項目。 安裝Tailwind 第一步是使用npm或yarn安裝Tailwind： npm install tailwindcss --save-dev yarn add tailwindcss --dev 創建配置文件 接下來，使用提供的Tailwind命令創建一個配置文件。 ./node_modules/.bin/tailwind init tailwind.js 這將在項目的根目錄中創建一個tailwind.js文件，添加基本的Tailwind配置。該文件非常長，我這裡不會將它粘貼在這裡，但它包含了許多後續非常有用的預設值。 配置PostCSS 現在，您需要微調PostCSS的配置以確保Tailwind運行正常。在postcss.config.js中添加以下內容： module.exports = { "plugins": [ require('tailwindcss')('tailwind.js'), require('autoprefixer')(), ] } 如果將Vue CLI設置為將配置存儲在package.json中，請確保該文件中沒有PostCSS配置。默認情況下，Vue CLI會添加以下行： "postcss": { "plugins": { "autoprefixer": {} } }, 請刪除它們，否則postcss.config.js文件將無法讀取。 創建CSS文件 現在在src/assets/css/tailwind.css中創建一個CSS文件，並添加以下內容： @tailwind base; @tailwind components; @tailwind utilities; 在您的Vue應用程序中導入該文件 在main.js中導入Tailwind： import '@/assets/css/tailwind.css' （在vue中的"@ “指的是"src/"） 就是這樣！現在重新啟動Vue CLI項目，應該一切正常運行。...

我使用了一個很酷的應用程序Insomnia來測試API，它允許您對REST API或GraphQL API服務進行HTTP請求。 該應用程序具有一個很好的按鈕，可以生成代碼以從應用程序複製API請求，您可以在其中以可視化方式設計所有請求數據。 在內部，他們使用了httpsnippet，這是一個使用JavaScript編寫的多語言和庫的HTTP請求片段生成器。這是一個非常酷的項目。 無論如何，導出的代碼片段有幾個，我想展示不同庫中相同的API調用。 首先，這是API調用的描述。我向 api.randomservice.com 網站發送一個POST請求（這是我隨便想出的一個隨機URL）到 /dog 端點。 我向該端點發送一個帶有2個屬性的對象： { name: 'Roger', age: 8 } 作為JSON編碼。 我還傳遞了一個 content-type 以將內容設置為 application/json，並且還傳遞了一個 authorization 標頭，以使用通過API儀表板分配給我的Bearer令牌對請求進行身份驗證。 XHR 第一個代碼示例是使用XHR（可在瀏覽器中原生支持）和在Node.js中使用xmlhttprequest庫： const data = JSON.stringify({ name: 'Roger', age: 8 }); const xhr = new XMLHttpRequest(); xhr.withCredentials = true; xhr.addEventListener('readystatechange', function() { if (this.readyState === this.DONE) { console.log(this.responseText); } }); xhr.open('POST', 'https://api.randomservice.com/dog'); xhr.setRequestHeader('content-type', 'application/json'); xhr.setRequestHeader('authorization', 'Bearer 123abc456def'); xhr.send(data); Fetch API 然後，我們使用Fetch API進行相同的代碼片段，這也是另一個在瀏覽器中原生可用且可以在Node.js中使用node-fetch的API： fetch('https://api.randomservice.com/dog', { method: 'POST', headers: { 'content-type': 'application/json', authorization: 'Bearer 123abc456def' }, body: JSON....

我有一個盒子列表，當鼠標懸停時，我想要顏色反轉。 div { background-color: #000; color: #fff; } 所以我進一步添加了以下代碼： div:hover { background-color:#fff; color:#000; } 但是… 盒子看起來不像"一個盒子"。所以我添加了邊框： div:hover { background-color:#fff; color:#000; border: 4px solid #000; } 但由於邊框是添加在盒子外部，所以看起來很奇怪。 我找到的最佳方法是使用box-shadow屬性： div:hover { background-color:#fff; color:#000; box-shadow: inset 0px 0px 0px 4px #000; } 以下是結果：

本文將解釋如何在文件夾的文件變更時重新運行 package.json 腳本。 我的實際問題是：我希望在文件變更時自動重新生成 CSS，通過 PostCSS 流程進行處理。 我描述的方法將適用於任何類型的自動文件和文件夾監視，而不僅僅是這個特定情況。 我正在運行以下腳本，使用 yarn build:css 命令運行： "scripts": { "build:css": "postcss src/tailwind.css -o static/dist/tailwind.css", } 我希望在 layouts 文件夾中的任何變更發生時重新運行它，該文件夾包含構建我的網站的所有 HTML 文件。 如果您熟悉 Tailwind，它會創建一個稍大的 CSS 文件，其中包含您可能需要的所有內容，並且您可以通過刪除您不使用的任何類來進行優化。 每次我在其中進行更改時，我都希望重新生成 CSS，並觸發我在 PostCSS 設置中設置的清理和最小化過程。 如何實現這一點呢？ 首先，安裝 watch npm 套件： npm install watch 然後在您的 package.json 文件中加入 watch 腳本。您已經有了之前的 build:css，我們只需添加一個監視 layouts 文件夾並在每次變更時運行 build:css 的腳本： "scripts": { "build:css": "postcss src/tailwind.css -o static/dist/tailwind.css", "watch": "watch 'npm run build:css' ./layouts" } 現在運行 npm run watch 或 yarn watch。

如何生成 Next.js 應用程式的生產版本 在生產環境中部署使用 Next.js 開發的應用程式非常簡單。只需將以下 3 行代碼添加到 package.json 的 script 部分： "scripts": { "dev": "next", "build": "next build", "start": "next start" } 到目前為止，我們一直使用 npm run dev 來調用本地安裝的 node_modules/next/dist/bin/next 中的 next 命令。這個命令用於啟動開發服務器，該服務器為我們提供了在調試時非常有用的功能，如 源代碼映射 和 熱加載代碼。 同樣的命令也可用於生成網站，只需運行 npm run build 命令並傳遞 build 標誌。然後，可以使用相同的命令並傳遞 start 標誌來啟動生產應用程式，即運行 npm run start 命令。 要成功在本地部署應用程式的生產版本，我們必須調用這兩個命令。生產版本進行了高度優化，不包括源代碼映射等對最終用戶沒有益處的功能。 因此，讓我們來生成我們的應用程式的生產部署版本。運行以下命令進行構建： npm run build 該命令的輸出告訴我們一些路由（/ 和 /blog）現在被預渲染為靜態 HTML，而 /blog/[id] 將由 Node.js 後端進行服務。 然後，運行 npm run start 來啟動本地生產服務器： npm run start 訪問 http://localhost:3000 即可查看本地應用程式的生產版本。

您常常需要在系統中的特定文件夾中運行一個 Web 伺服器。 您沒有足夠時間來配置像 Apache 或 Nginx 這樣的正確的 Web 伺服器，因為這只是為了幾分鐘或測試您的應用。 那麼，該怎麼辦呢？ 根據您喜歡的語言，您可能已經擁有所需的一切。 如果您使用 Node.js，並已經安裝了 npm，請運行以下命令： npm install -g http-server 然後在您想要透過伺服器公開的文件夾中運行 http-server。 默認情況下，它將在端口 8080 上啟動伺服器，但您可以使用 -p 標誌進行更改（運行 http-server --help 可查看更多選項）。 如果您使用 Python 並已安裝，只需運行以下命令： python -m SimpleHTTPServer 8080 （Python 2） 或者 python -m http.server 8080 （Python 3） 即可在本地端口 8080 上啟動一個本地伺服器。 如果您使用 PHP 並且運行一個現代版本，請運行以下命令： php -S localhost:8080

完成Docker安裝後，您應該會看到一個新視窗，引導您進行使用Docker建立映像檔和容器的第一步驟： 這是一種有趣的方式，讓您快速下載並執行第一個容器映像檔。 您可以在此應用程序內建的右側終端中運行命令，但我更喜歡在自己的終端中執行。 我打開 macOS 終端，運行 cd dev 進入家目錄中的 dev 文件夾，然後創建一個 docker 子目錄，將用於容納所有的Docker實驗。我運行 cd docker 進入此目錄，然後執行以下命令： git clone https://github.com/docker/getting-started 此命令創建了一個名為 getting-started 的新文件夾，其中包含 https://github.com/docker/getting-started 倉庫的內容： 現在從該文件夾中，以以下方式運行 docker build 命令： docker build -t docker101tutorial . 這將使用當前文件夾中的內容構建映像檔，並將其標記為 docker101tutorial。 這是Dockerfile的內容： FROM python:alpine AS base WORKDIR /app COPY requirements.txt . RUN pip install -r requirements.txt FROM node:12-alpine AS app-base WORKDIR /app COPY app/package.json app/yarn.lock ./ RUN yarn install COPY app/spec ./spec COPY app/src ./src RUN yarn test FROM app-base AS app-zip-creator RUN rm -rf node_modules && \ apk add zip && \ zip -r /app....

让我们看看一些托管PostgreSQL数据库的选择。 当涉及到为你的应用程序托管PostgreSQL数据库时，你有很多选择，哪一种对你来说是最完美的取决于你的技能，你是否愿意用时间换金钱（托管解决方案或自托管解决方案）以及你的偏好。 本地数据库 快速 免费 需要设置 仅限本地主机 在本地主机上开发应用程序时，本地数据库是你的最佳选择。 如果你使用本地数据库，你的应用程序在本地主机上会非常快，因为应用程序不需要在互联网上查找数据。 缺点是需要进行初始设置，但是你可以通过在Google或YouTube上搜索“在macOS上安装PostgreSQL”找到操作系统特定的许多教程，我有一篇关于macOS安装PostgreSQL的指南。 这很重要：本地数据库只能在本地主机上工作，因为你的计算机无法从互联网访问，所以当你想要部署到Vercel、Netlify或任何其他具有公共访问权限的地方时，你需要创建一个新的远程数据库。 下面列出的所有其他选项将不会有这个问题，它们都可以从互联网上的任何地方访问。 Railway 慢 免费 无需设置 无限项目 Railway是一个很好的选择，可以快速启动和运行远程数据库。 免费版开始使用，没有限制可以创建的项目数量。 问题在于，在完成几个项目后，你可能会超过免费计划的限制，因此稍后你将不得不付费，否则你的应用程序将无法工作。 Railway有一个漂亮的用户界面，简单易用，但在免费计划下可能会有点慢（当然，因为他们必须在支出上“节约”）。 DigitalOcean VPS $5/月 需要设置 这是在互联网上拥有自己的服务器和自己的数据库的最佳选择之一。 缺点是你需要学习如何设置一个Linux服务器，并进行其管理。如果这不让你激动，那就跳过这个选项，因为这可能会带来真正的困扰和时间浪费。 提示：DigitalOcean还提供了一个更易于使用的托管数据库（但也更昂贵，节省时间花费更多），请参阅以下信息。 DigitalOcean文档上有一些很好的指南： 如何在Ubuntu 20.04上安装PostgreSQL[快速入门] | DigitalOcean 我之所以提到DigitalOcean，是因为我使用并喜欢那个平台（你可以使用我的推荐链接获得100美元的免费信用，供你在接下来的两个月使用），但你也可以选择任何其他VPS公司。 好处是，如果你有自己的VPS用于数据库，你也可以在此上面托管Next.js应用程序。这有一个好处：应用程序和数据都在同一个服务器上。 对于所有其他选项，你的数据将存储在“云中的某个地方”，你的数据库将位于“云中的其他某个地方”，这会导致速度下降。 你可以根据需要提高服务器能力，所以你的5美元VPS的成本会更高一些，但随着需求增长，性能也将更好。 DigitalOcean 托管数据库 付费 $15/月 无需设置 我已经提到了DigitalOcean，关于如何托管你自己的VPS。 这是不同的 - 他们托管数据库，而你不需要设置或维护任何内容。 我认为这是一个很好的解决方案，用于托管所有应用程序，而不产生额外的费用（如Railway），并且无需担心服务器、维护、被黑客攻击等问题。 这是一个费用高昂的解决方案，但出于这个原因，它很方便（你可以使用我的推荐链接获得100美元的免费信用，供你在接下来的两个月使用）。有趣的是，你是按小时付费的，所以你可以先测试一下，然后关闭它。 他们提供了很棒的功能，如每日备份，他们拥有连接池，可以帮助避免Prisma耗尽数据库连接限制。 Supabase 2个项目免费 连接池 无需设置 Supabase是一个非常有趣的项目。它不仅仅是“托管数据库”，而是你可以将其作为这样使用。它是建立在PostgreSQL之上的应用程序开发平台，他们提供了一个免费的连接池，可以帮助避免Prisma耗尽数据库连接限制。 免费帐户允许最多2个项目，所以值得一试。你也可以在一个新项目上工作，完成后删除旧项目。 Supabase定位自己为Firebase的替代产品，除了数据库之外，你还有身份验证、订阅等更多功能可以稍后探索。 注意：Supabase也可以自托管，这样你的2个项目限制将消失，但你需要管理自己的基础设施。 AWS RDS for PostgreSQL 付费 无需设置 如果你已经在使用AWS，那么这是一个最佳的解决方案。AWS的免费层应该在你的第一年中包括这个服务。 与其他托管解决方案相比，这个解决方案的设置要复杂一些，因为它是AWS提供的，但它也是一种托管解决方案，所以你不需要担心管理自己的服务器。 与DigitalOcean类似，你还可以使用AWS EC2在Amazon AWS上托管你的VPS，并在上面安装PostgreSQL。