如何部署 Svelte 应用程序？

How to Deploy an Svelte Application_
How to Deploy an Svelte Application_

在本文中，您将学习如何使用 Svelte 构建网络应用程序，并使用 Back4app 容器进行部署。

Svelte 是一个 JavaScript 框架，用于开发反应式动态 Web 应用程序。利用 Svelte 框架，您可以构建轻量级、高性能的应用程序，因为与传统的 JavaScript 框架不同，Svelte 将大量繁重的工作从浏览器转移到了构建阶段。

项目概述：库存跟踪器

本文将介绍一款与 Back4App 实时数据库集成的库存跟踪器。

该应用程序将管理用户的库存数据，允许用户根据需要添加、检索和删除产品信息。

跟踪器将在 Back4App 上存储产品名称、价格和数量等基本信息。

它使用户能够轻松维护和监控库存，确保产品信息的准确性和时效性。

创建 Svelte 应用程序

在本节中，您将使用 Vite（前端框架构建工具）创建一个 Svelte 项目。

在终端运行以下命令，即可使用 Vite 创建 Svelte 应用程序：

npm init vite

运行该命令后，为项目命名，选择框架（Svelte），并为框架选择首选语言变量。

就像这样

Vite CLI

上图显示，Svelte 项目的名称是 inventory-tracker，语言变体是 JavaScript。

接下来，您需要在 Svelte 项目中安装一些必要的依赖项。要安装依赖项，请切换到项目目录并运行以下命令：

# Switch to the project directory
cd inventory-tracker

# Install dependencies
npm install

该命令将在项目中安装所有必要的依赖项，现在就可以在集成开发环境上开始构建应用程序了。

打造Svelte应用程序

在本节中，您将使用 Svelte 和 Back4app 的后台即服务功能创建一个库存跟踪应用程序。

应用程序将具有 CRUD（创建、读取、更新、删除）功能，允许您添加、获取、编辑和删除数据。

在开始构建 Svelte 应用程序之前，请确保安装了svelte-routing库。

svelte-routing库是一个为 Svelte 应用程序添加路由功能的库，允许您创建单页面应用程序 (SPA)。

运行以下命令安装svelte-routing库：

npm i -D svelte-routing

安装完成后，在项目的rc目录中创建AddProduct和Home组件。在AddProduct组件中，添加以下代码行：

<!-- AppProduct.svelte -->
<script>
	let product = {
	  name: "",
	  quantity: "",
	  price: "",
	}
</script>

<form>
	<input type="text" placeholder="Name of Product" bind:value={product.name}>
  <input type="number" placeholder="No of Products" bind:value={product.quantity}>
  <input type="number" placeholder="Price of Products" bind:value={product.price}>
	
	<div>
		<button>Add Product</button>
	</div>
</form>

<style>
	form{
		display: flex;
		flex-direction: column;
		gap: 2rem;
		align-items: center;
	}
</style>

上面的代码块渲染了一个获取产品详细信息的表单。表单包含三个输入元素，类型分别为文本（名称）和数字（数量和价格）。

输入字段包括产品名称、可用产品数量和产品价格。

通过输入元素中的bind:value属性，代码块将输入值与指定的产品对象属性绑定。样式部分包含适用于该 Svelte 组件的 CSS 样式。

接下来，将下面的代码块添加到主页组件中：

<!-- Home.svelte -->
<script>
    import {Link} from "svelte-routing";
</script>

<main>
    <p>A way to manage and keep track of products in your inventory</p>
    <Link to="/add-products" class="link">Add Products here →</Link>
</main>

<style>
    main{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
  }
</style>

主页组件从svelte-routing库中导入链接组件。链接组件将用户导向“/add-products “路由。您需要定义此路由，以确保链接组件实际运行。

要定义路由，请打开App组件并添加下面的代码块：

<!-- App.svelte -->
<script>
  import {Route, Router} from "svelte-routing";
  import AddProduct from './AddProduct.svelte';
  import Home from './Home.svelte';

  export let url = "";
</script>

<Router {url}>
  <h1>Inventory Tracker</h1>
  
  <div class="container">
    <Route path="/" component={Home} />
    <Route path="/add-products" component={AddProduct} /> 
  </div>
</Router>

<style>
  h1{
    text-align: center;
    font-family: "Poppins", sans-serif;
    margin-block-start: 1rem;
    margin-block-end: 6rem;
  }
</style>

上面的代码块从svelte-routing中导入了Route和Router组件以及Home和AddProduct组件，以定义它们各自的路由。

通过路由组件，您可以定义应用程序中的各种路由。在本例中，就是 “主页“和 “添加产品“路由。

将 HTML 部分包裹在Router组件中，可初始化所包裹组件的路由。

从上面的代码块来看，由于路由的路径是“/”，渲染应用程序时将首先显示“ 主页“路由。

下一步是定义应用程序的全局样式。为此，请在src目录中创建styles文件夹。在样式文件夹中添加global.css文件；在该文件中定义应用程序的全局样式。

将下面的代码块添加到global.css文件中：

/* global.css */
@import url('<https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap>');
@import url('<https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap>');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: "Montserrat", sans-serif;
    background-color: #1F2124;
    color: #FFFFFF;
}

.container{
    inline-size: 60%;
    margin: auto;
}

.link{
    text-decoration: none;
    color: inherit;
    font-weight: 500;
}

.link:hover{
    color: #99BCF6;
}

input{
    padding: 1rem;
    border-radius: 12px;
    outline: none;
    border: none;
    font-family: "Montserrat", sans-serif;
    color: #333333;
    inline-size: 100%;
}

button{
    padding: 0.7rem 1rem;
    border-radius: 10px;
    font-weight: 500;
    background-color: #FFFFFF;
    font-family: "Montserrat", sans-serif;
}

button:hover{
    background-color: #99BCF6;
}

定义样式后，在App组件中导入global.css文件，将定义的样式应用到应用程序中。您可以将此代码添加到App组件的脚本部分：

//App.svelte
import './styles/global.css';

现在，您已经创建了 Svelte 应用程序。接下来，您将使用 Back4app 构建应用程序的后台。

设置 Back4app 应用程序

在本节中，您将使用 Back4app AI 代理创建一个 Back4app 应用程序，作为您应用程序的后端。

您需要一个 Back4app 帐户来创建一个帐户。如果您没有账户，可以免费创建一个。

登录您的账户，点击 Back4app 账户仪表板导航栏上的 “AI Agent “链接。

Back4app 应用程序页面

访问 AI Agent 后，输入要求AI Agent 创建应用程序的提示。

提示应类似于下面的提示：

Create a new application named inventory-tracker

如上提示所示，您必须指定应用程序的名称。AI Agent 一旦完成应用程序的创建，就会发送一个确认创建的响应。

响应中还应包含应用程序的凭据，与下图中的响应类似。

人工智能代理响应

在人工智能代理提供的各种凭证中，请确保复制了应用程序 ID 和 JavaScript 密钥。您将需要它们来连接您的 Svelte 应用程序和 Back4app 应用程序。

接下来，在 Back4app 应用程序中创建一个库存类。在该类中，添加名称、数量和价格列。为此，请使用人工智能代理编写以下提示：

In the inventory-tracker app, create an inventory class and add a name, price, and quantity column to the class.

您应该会收到类似下图的回复。

人工智能代理响应

现在，您的 Svelte UI Back4app 后端已经准备就绪，您将把用户界面连接到后端。

将您的 Svelte 应用程序连接到 Back4app

在本节中，您将把 Svelte 应用程序连接到 Back4app 应用程序。为此，您需要 Parse SDK。

Parse SDK 是一套开发工具，可为您的网络应用程序提供后台服务。

运行以下命令安装 Parse SDK：

npm install parse

安装 SDK 后，在App.svelte文件的脚本标签中添加以下代码块中的代码。

import Parse from 'parse/dist/parse.min.js';

Parse.initialize('YOUR_APP_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = '<https://parseapi.back4app.com/>';

将"YOUR_APPLICATION_ID "和"YOUR _ CLIENT_KEY "替换为之前复制的凭证。确保使用环境变量安全地存储它们。

向 Back4app 添加数据

要向 Back4app 添加数据，您需要使用AddProduct组件表单中的输入值。您将接收用户提交的值，然后将其添加到 Back4app 的数据库中。

在AddProduct组件的脚本部分，创建一个addData函数。该函数将包含向 Back4app 添加产品详细信息的逻辑。

就像这样

// AddProduct.svelte
import Parse from 'parse/dist/parse.min.js';
import { navigate } from "svelte-routing";

let addData = (event) => {
  event.preventDefault();
  try {
    const Inventory = new Parse.Object("Inventory");
    Inventory.set("name", product.name);
    Inventory.set("quantity", +product.quantity);
    Inventory.set("price", +product.price);
    Inventory.save().then(() => {
      console.log("New Product added successfully");
      navigate("/", { replace: true });
    });
  } catch (error) {
    console.log(error);
  }
};

在上面的代码块中，addData函数为Inventory类创建了一个新的 Parse 对象Inventory。

在将对象保存到数据库之前，它会将名称、数量和价格字段的值设置为产品属性的相应值。

请注意，在product.quantity和product.price属性前有一个一元加 (+) 运算符。

运算符会将属性转换为数字类型。使用提交事件处理程序将addData函数绑定到AddProduct组件中的表单。

这将在用户提交表单时触发addData函数。

要通过提交事件处理程序将函数绑定到表单，请用下面的表单替换AddProduct组件中的表单：

<!--AddProduct.svelte-->
<form on:submit={addData}>
	<input type="text" placeholder="Name of Product" bind:value={product.name}>
	<input type="number" placeholder="No of Products" bind:value={product.quantity}>
	<input type="number" placeholder="Price of Products" bind:value={product.price}>
	
	<div>
	    <button>Add Product</button>
	</div>
</form>

从 Back4app 获取数据

要从 Back4app 获取数据，您需要访问上一节中保存在 Back4app 应用程序中的解析对象，并抓取对象中的值。

在获取数据之前，请在应用程序的rc目录中创建一个Card组件。该组件决定了从 Back4app 获取数据的外观。

在组件文件中，写入以下代码：

<!-- Card.svelte -->
<script>
	export let name = '';
	export let quantity = 0;
	export let price = 0;
</script>

<div class="card">
	<h3>{name}</h3>
	<div class="details">
	  <p>Price: ${price}</p>
	  <p>Quantity: {quantity == 0 ? "out of stock" : quantity}</p>
	</div>
	<div>
	  <button>Delete</button>
	</div>
</div>

<style>
	.card{
	    display: flex;
	    flex-direction: column;
	    gap: 1.9rem;
	    padding: 1rem;
	    border-radius: 12px;
	    background-color: #e2e2e2;
	    color: #1F2124;;
	    inline-size: 100%;
	}
	
	.details{
	    display: flex;
	    gap: 3rem;
	}
	
	.details p{
	    font-size: 14px;
	    font-weight: 500;
	    color: #888888;
	}
</style>

卡片组件显示产品的名称、数量和价格。它使用上述代码块中的三个道具：名称、数量和价格，从其父组件中获取这些值。

现在，在 “主页 "组件的脚本标签中，添加下面代码块中的代码：

//Home.svelte
import { onMount } from "svelte";
import Parse from "parse/dist/parse.min.js";

let products = [];

const fetchProducts = async () => {
  try {
    const query = new Parse.Query("Inventory");
    const productsData = await query.find();
    products = productsData;
  } catch (error) {
    console.log(error);
  }
};

onMount(fetchProducts);

这段代码从 Svelte 框架中导入了onMount生命周期函数。它还创建了一个产品数组，该数组一开始是空的。

在代码块中，您可以找到fetchProducts函数，该函数的逻辑负责从 Back4app 获取必要的数据。

fetchProducts函数使用Parse.Query方法在应用程序的数据库中搜索“库存 “对象。

然后，通过调用查询的find()方法返回查询结果数组。最后，它将结果数组赋值给产品变量。

将fetchProducts函数作为onMount函数的参数，可确保应用程序在渲染主页组件时获取数据。

在组件的 HTML 部分，显示产品数组中的数据。

就像这样

<!-- Home.svelte-->
<div class="products">
	{#each products as product}
		<Card name={product.get('name')} quantity={product.get('quantity')} price={product.get('price')}/>
	{/each}
</div>

每个区块遍历产品数组，并显示数组中每个产品的卡片组件。

Card组件使用产品上的get方法获取名称、数量和产品价格的值。然后将这些值赋值给其道具。

将下面定义的样式添加到 “主页 "组件的样式标签中，为包裹每个块的div标签添加样式。

/* Home.svelte */
.products{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem;
	border-top: 2px solid #e2e2e2;
	margin-block-start: 3rem;
	padding-block-start: 2rem;
}

从 Back4app 中删除数据

要在您的 Svelte 应用程序中添加删除功能。您需要修改组件，首先是Card组件。在卡片组件中，创建一个名为handleClick 的新道具。

在组件的脚本部分添加下面一行代码，创建道具：

//Card.svelte
export let handleClick;

现在，使用click事件处理程序将道具绑定到组件 HTML 部分的按钮元素上。

就像这样

<!-- Card.svelte -->
<div>
	<button on:click={handleClick}>Delete</button>
</div>

在 “主页 "组件中，您将创建一个deleteProduct函数。该函数包含负责删除所选产品的逻辑。

在组件的脚本部分添加以下代码行。

// Home.svelte
const deleteProduct = async (id) => {
  try {
    const Product = Parse.Object.extend("Inventory");
    const product = new Product();
    product.id = id;
    await product.destroy();
    const newData = products.filter((item) => item.id !== id);
    products = newData;
  } catch (error) {
    console.log(error);
  }
};

在上面的代码块中，deleteProduct函数创建了一个新的“Product “对象，将该对象的id属性设置为函数的id参数，然后调用该对象的异步destroy方法来删除具有给定 ID 的产品。

该函数从产品数组中筛选出具有给定 ID 的产品，并创建一个不含已删除产品的新数组。然后将新数组分配给产品。

然后，将该函数传递给Card组件的handleClickprop。现在，只要用户点击卡片组件中的按钮，就会触发deleteProduct函数。

就像这样

<!-- Home.svelte -->
<Card 
	name={product.get('name')} 
	quantity={product.get('quantity')} 
	price={product.get('price')}
	handleClick={() => deleteProduct(product.id)}
/>

测试应用程序

您需要测试应用程序以确保其正常运行。要启动应用程序，请运行以下命令。

npm run dev

该命令将在开发服务器上运行应用程序，并为您提供一个链接，以便您在网络浏览器上查看应用程序。

点击链接后，您会看到一个类似下图的应用程序。

库存追踪主页

单击“在此添加产品 “链接，您将跳转到如下所示的新页面：

填写表格，然后点击“添加产品“按钮提交。

这将把您提供的详细信息添加到 Back4app 的数据库中。您可以访问 Back4app 应用程序的控制面板来验证。

如果应用程序成功添加了数据，Back4app 就会在数据库中添加一条新记录。

就像这样

Back4app 控制面板

提交表格后，应用程序会将您重定向到主页，该主页将显示新产品。

带项目的库存跟踪系统主页

要删除任何产品，只需点击产品卡上的“删除 “按钮。

将你的 Svelte 应用程序 Docker 化

在 Back4app 上部署 Svelte 应用程序之前，您必须先将其坞化。要坞化 Svelte 应用程序，请在应用程序的根目录下创建Dockerfile和.dockerignore文件。

在Dockerfile 中编写以下代码：

# Dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 5173
CMD ["npm", "run", "dev"]

在构建 Docker 镜像时，你需要排除以下一些目录。要指定这些目录，请将它们添加到.dockerignore文件中。

例如

# .dockerignore
node_modules

上面的代码块告诉 Docker 在镜像构建过程中从上下文中排除node_modules目录。由于您使用 Vite 创建了 Svelte 应用程序，因此必须配置 Vite 以支持 Docker。

为此，请访问应用程序根目录下的vite.config.js文件。用下面的代码块替换文件中的代码：

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [svelte()],
  server: {
    host: true,
    strictPort: true,
    port: 5173,
   },
})

上面的代码块指定了开发服务器监听的端口，并确保应用程序无法在指定端口以外的任何端口上运行。

要构建你的 docker 镜像，请在终端运行以下命令：

docker build -t inventory-tracker .

部署您的 Svelte 应用程序

现在您已经对应用程序进行了 docker 化，下一步就是如何部署 Svelte 应用程序了。要部署 Svelte 应用程序，您需要使用 Back4app 容器。

在部署应用程序之前，您必须将其推送到 GitHub 仓库，以便 Back4app 可以使用其仓库访问应用程序。要让 Back4app 访问您的 GitHub 仓库，请使用Back4app Github 应用程序。

授予 Back4app 访问应用程序存储库的权限后，您就可以使用下面的提示在 Back4app 上使用 AI 代理部署应用程序了：

Deploy my repository <<repository-url>> on Back4app containers

上述提示将启动部署流程。确保将<> 替换为应用程序的版本库 URL。

部署成功后，人工智能代理会向您发送一条信息，告知应用程序的部署状态，并提供有关部署的详细信息。

例如

已部署库存跟踪器页面

上图显示应用程序已成功部署，您可以访问指定的应用程序 URL 在浏览器上访问应用程序。

结论

在本文中，您将学习如何使用 Back4pp 构建一个简单的 Svelte 应用程序。您使用 Back4app AI 代理为应用程序创建了一个后台，并使用 Parse SDK 与之交互。

人工智能代理还简化了应用程序在 Back4app 容器上的部署流程。

Back4app 通过管理您的后台和部署需求，简化了您的开发工作流程。这样，您就可以专注于开发用户喜爱的产品。

本教程中使用的代码可从GitHub 代码库中获取。


David Ekete

David Ekete兼具资深技术作家和优秀后端开发者的双重专长，使他在提供清晰、全面的技术文档以及构建高效、可扩展的网络应用程序方面独树一帜，成为业界的权威。他的丰富背景包括在back4app、Draft.dev和MUO等行业领袖处担任高端职位，同时他在Elevate Apps和Terrahaptix等公司担任后端工程师和工程实习生时也表现出色。 凭借丰富的实践经验，David拥有The Linux Foundation、Sololearn和Udemy颁发的业内认可认证，证明了他在技术文档、API开发及现代编程语言方面的精通。他的资历与卓越业绩使他成为那些追求技术卓越和创新解决方案的团队不可或缺的资产。 请在 GitHub 🛠️ 上浏览他的前沿项目和代码仓库，并通过 LinkedIn 🔗 与他联系，了解他的专业知识如何提升您的技术项目。无论您需要专业技术文档、稳健的后端开发还是具备扎实工程基础的协作型问题解决者，David Ekete都已准备好带来显著影响。

Leave a reply

Your email address will not be published.