十分鐘掌握使用 SolidJS 構建全棧 CRUD 應用程序
原文作者：Precious Luke
原文地址：https://blog.logrocket.com/build-full-stack-crud-app-solidjs/
翻譯：一川
我們可以開始討論 SolidJS，說它比React更好，但沒有必要做這種比較。SolidJS只是衆多前端框架之一，旨在在Web上快速創建數據驅動。那麼，我們爲什麼要突出這個新孩子呢？
首先，我們不能忽視SolidJS不使用虛擬 DOM。是的，你沒聽錯！SolidJS 不使用虛擬 DOM，而是從應用程序第一次運行開始就記住整個 DOM，然後在有更新時，它會繼續更新該部分。此功能使框架非常快速和高性能。
在本文中，我們將介紹如何構建一個簡單的 CRUD 應用程序來演示 SolidJS 的有效性。
構建 SolidJS 前端
爲了構建我們的 Solid 應用程序，我們將使用 Solid JD App庫 [https://github.com/OrJDev/create-jd-app]。我們將設置項目，然後創建並渲染 SolidJS 組件。
安裝 Solid JD 應用程序庫
要開始使用，請在終端上運行以下命令：
npm create jd-app@latest系統將提示你鍵入 y（表示是）以繼續，然後系統會要求你提供應用的名稱。接下來，系統會詢問您是否將使用 Vercel 來部署項目。這是一個偏好問題。您決定在哪裏部署或託管項目完全取決於您；您甚至可以選擇 “無” 作爲選項。
我們使用的庫還附帶了額外的可選附加組件（AuthJS，Prisma，tRPC，pRPC，TailwindCSS，AuthJS和Upstash Ratelimit）。您可以決定選擇所需的內容或忽略它們。在本教程中，我們將通過儀表板部署到 Vercel，我們不會使用任何可選的附加組件：
做出選擇後，單擊 Enter。這將立即安裝您需要的所有內容，包括包含 SolidJS 依賴的其他軟件包的 node_modules 文件夾，以及您在安裝過程中選擇的任何軟件包。
設置項目
在本教程中，我們將構建一個簡單的博客應用。移動到託管應用程序的根目錄，然後運行以下命令：
npm run dev這將在端口 3000 上啓動應用程序；http://localhost:3000，您將在這裏看到它。
您的代碼庫將如下所示；注意 TypeScript 的使用：
以下是您將在瀏覽器中看到的內容：
接下來，清除 src/route/index.tsx 文件中的現有代碼並粘貼以下內容：
import "../assets/css/style.css";
import { type VoidComponent } from "solid-js";
import { A } from "solid-start";
import Blog from '../components/Blog'
const Home: VoidComponent = () => {
return (
<main>
<div class="container">
<div class="row g-4">
<div class="col-lg-8">
<div class="bg-mode p-4">
<h1 class="h4 mb-4">Latest blogs</h1>
</div>
</div>
</div>
</div>
</main>
);
};
export default Home;創建 SolidJS 組件
組件是前端框架最好的東西之一，儘管組件的概念並不新鮮。組件只是一組一個或多個 HTML 元素，但它們使我們更容易動態管理和複用元素。
請在 src 名爲 components的目錄下開始製作組件；我們將在此處放置任何可重用的元素和文件。在 components 文件夾中，創建一個名爲 Blog.jsx 並粘貼以下代碼的文件：
import solidimage from '../assets/images/solid.jpg'
function Blog() {
return (
<>
<div class="card bg-transparent border-0">
<div class="row g-3">
<div class="col-4">
<img class="rounded" src={solidimage} alt="" />
</div>
<div class="col-8">
<a
href="#"
class="badge bg-danger bg-opacity-10 text-danger mb-2 fw-bold"
>
Tech
</a>
<h5>
<a
href="blog-details.html"
class="btn-link stretched-link text-reset fw-bold"
>
What is Solidjs?
</a>
</h5>
<div class="d-none d-sm-inline-block">
<p class="mb-2">
SolidJS is an exciting framework for web development that has been gaining traction in recent years. It has been created by Misko Hevery, the creator of Angular.
.
</p>
<a class="small text-secondary" href="#!">
{" "}
<i class="bi bi-calendar-date pe-1"></i> Jan 22, 2022
</a>
</div>
</div>
</div>
</div>
<hr class="my-4" />
</>
);
}
export default Blog;您還需要下載圖像並在 src 該文件夾中創建子文件夾assets/images的文件。
接下來，assets/css在子文件夾中創建一個 style.css 文件並添加此代碼。此代碼中的 CSS 是 Bootstrap。
渲染 SolidJS 組件
您可能會遇到問題，就像我一樣，渲染SolidJS組件。如果是這樣，最簡單的解決方案是在位於項目根目錄的 tsconfig.json 文件中添加以下內容：
"noImplicitAny": false我們將在src/route文件夾中的文件內 index.tsx 渲染 SolidJS 組件，如下所示：
import "../assets/css/style.css";
import { type VoidComponent } from "solid-js";
import { A } from "solid-start";
import Blog from '../components/Blog'
const Home: VoidComponent = () => {
return (
<main>
<div class="container">
<div class="row g-4">
<div class="col-lg-8">
<div class="bg-mode p-4">
<h1 class="h4 mb-4">Latest blogs</h1>
<Blog />
<Blog/>
<Blog/>
</div>
</div>
</div>
</div>
</main>
);
};
export default Home;唯一的區別是，在第 4 行，我們導入了三次 Blog 組件。以下是我們現在在 Web 瀏覽器中看到的內容：
在後端創建動態渲染
我們剛剛在上一節中創建的是靜態數據。但是，在現實世界中，數據將來自某種後端或 API。所以，讓我們讓事情變得動態！
首先，我們需要有某種端點。在本教程中，我們將使用以下終結點 https://crudcrud.com/api/6a1613c7646f4a908158592cfdb448aa/blog，其中包含博客列表：
要在 Blog 組件中動態呈現來自 API 的數據，請更新Blog.jsx文件，如下所示：
import { For, createResource } from "solid-js";
import solidimage from "../assets/images/solid.jpg";
const getBlogs = async () => {
const response = await fetch(
"https://crudcrud.com/api/6a1613c7646f4a908158592cfdb448aa/blog"
);
return response.json();
};
function Blog() {
const [blog] = createResource(getBlogs);
return (
<Show when={blog()}>
<For each={blog()}>
{(eachblog) => (
<>
<div class="card bg-transparent border-0">
<div class="row g-3">
<div class="col-4">
<img class="rounded" src={solidimage} alt="" />
</div>
<div class="col-8">
<a
href="#"
class="badge bg-danger bg-opacity-10 text-danger mb-2 fw-bold"
>
{eachblog.tag}
</a>
<h5>
<a
href="blog-details.html"
class="btn-link stretched-link text-reset fw-bold"
>
{eachblog.title}
</a>
</h5>
<div class="d-none d-sm-inline-block">
<p class="mb-2">{eachblog.text}</p>
<a class="small text-secondary" href="#!">
{" "}
<i class="bi bi-calendar-date pe-1"></i> Jan 22, 2022
</a>
</div>
</div>
</div>
</div>
<hr class="my-4" />
</>
)}
</For>
</Show>
);
}
export default Blog;在這裏，我們導入來自SolidJS的 <For/> 組件。此組件用於遍歷 API 的內容（第 13 行和第 49 行）。
我們還導入了一個 SolidJS CreateResource 方法。這用於保存我們從 fetch 響應中獲取的 JSON 響應（第 10 行）的內容（請參閱第 3-8 行）。
SolidJS 還爲我們提供了另一個組件，<Show/>它可以幫助我們有條件地渲染東西。我們用來 <Show/> 包裝整個 Blog 組件的內容。
該 <Show/> 組件提供了一個 when() 方法，這是我們實際定義條件的地方。我們指定 <Show/> 組件僅在存在數據或變量時有內容時呈現（請參閱第 12 行）。
以下是瀏覽器的外觀：
設置路由
路由是指我們如何從資源的一條路徑移動到另一條路徑。與其他現代 Web 技術類似，SolidJS使用Solid Router來管理客戶端請求的處理方式以及處理請求的內容。固態路由器簡單明瞭。
在撰寫本文時，默認情況下未安裝Solid Router包。但是，我們使用Solid JD App庫來設置我們的項目，該庫包括路由器。
要設置路由，請創建一個新組件 ， BlogDetail.jsx 其中將顯示博客正文。然後，粘貼以下代碼：
import { useParams } from "@solidjs/router"
import { createResource } from "solid-js"
const getBlog = async (_id) => {
const response = await fetch('https://crudcrud.com/api/64b773f6659a41b69d678369943f3c5f/blog/' + _id)
return response.json()
}
export default function BlogDetail() {
const params = useParams();
const [blogdetail] = createResource(params._id, getBlog);
console.log(blogdetail);
return (
<div class="my-7">
<Show when={blogdetail()}>
<div class="">
<div class="">
<h2 class="">{blogdetail.title}</h2>
<h2>{blogdetail.body}</h2>
</div>
</div>tun
</Show>
</div>
)
}查看 API 響應，您會注意到有一個 _id 唯一的字段; 這就是我們將用來定位每條內容的內容。
在此代碼中，我們導入 useParams （第 1 行），該行用於從 URL 定位特定參數。然後，我們使用其唯一 _id 作爲路徑參數獲取每篇博客文章，並以 JSON 形式返回（參見第 3-6 行）。
接下來，我們導出（ BlogDetail 第 13-24 行）並在 params 變量（第 8 行）中啓動 useParams() ，該變量用作CreateResource()方法中的參數（第 9 行）。然後，我們返回博客的title and body內容（第 11-23 行）。
現在，我們需要在 src/route/index.tsx 文件中定義此路由。更新代碼，如下所示：
import "../assets/css/style.css";
import { type VoidComponent } from "solid-js";
import { A, Router, Route, Routes } from "@solidjs/router";
import Blog from '../components/Blog';
import BlogDetail from '../components/BlogDetail';
const Home: VoidComponent = () => {
return (
<main>
<div class="container">
<div class="row g-4">
<div class="col-lg-8">
<div class="bg-mode p-4">
<h1 class="h4 mb-4">Latest blogs</h1>
<Blog />
</div>
</div>
</div>
</div>
<Router>
<Routes>
<Route path='/blog/:_id' component={BlogDetail}/>
</Routes>
</Router>
</main>
);
};
export default Home;這裏的更改是我們從 solidjs/router 包中導入了<Router/>、 組件<Routes/> <Route/>（第 3 行）並使用它們來收集數據（第 20-24 行）。如果您仔細查看第 22 行，您會發現我們定義了嘗試訪問博客文章路徑參數 /blog/_id . 由於這必須是動態的，因此我們傳遞了組件以返回BlogDetail.
總結
在本文中，我們成功地演示瞭如何使用 SolidJS 構建博客。您可以將這些知識擴展到其他類型的應用程序。我們查看了一些 SolidJS 方法和組件，並研究了它們如何在項目中使用。
SolidJS 的一個殺手級特性是它在第一次加載時記住虛擬 DOM，隨後，不同的部分將根據需要更新，而不會影響整個 DOM。
我希望你喜歡這篇文章。該項目的完整代碼庫可以在 GitHub[https://github.com/bigpreshy/solid-crud] 上訪問。您可能還需要查看此部署：https://solid-crud-ten.vercel.app/。
歡迎關注筆者公衆號「宇宙一碼平川」，助你技術路上一碼平川。
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/O9g0mF_hvI2l9lufEnlPeA