如何用MongoDB构建一个全栈式的Svelt应用程序

DebugUsery
219 阅读6分钟

用MongoDB构建全栈式Svelt应用程序

Svelte是一种新的前端JavaScript方法，用于构建用户界面。这引入了一个新的替代方案，我们可以在React、Angular、Vue之外使用。然而，Svelte是一个编译器，而其他的替代品是框架/库。

当你用Svelte构建你的应用程序时，你运行的Svelte编译器会自动检查你的代码和文件。这将创建捆绑的JavaScript指令，在运行时在DOM中执行。Svelte没有使用虚拟DOM差异等技术，而是在你的应用程序的状态发生变化时编写代码，以外科手术的方式更新DOM。

有了如此神奇的前端技术，连接到后端服务并从服务器访问数据将是必不可少的。本指南介绍了更多关于Svelte的信息以及如何用MongoDB创建一个Svelte应用程序。

前提条件

要跟上这篇文章，最好能有以下条件。

  • 在你的电脑上安装[Postman]。
  • 在你的电脑上安装了[MongoDB服务器]。
  • 在你的电脑上安装了[Node.js]。
  • 使用Postman、Node.js、MongoDB和Svelte的基本知识。

用MongoDB设置Node.js后端API

在你想要的项目文件夹中创建一个目录，并将其命名为server 。使用命令导航到server 目录。

cd server

用默认配置初始化一个Node.js应用程序。

npm init -y

下面是我们建立Node.js MongoDB后端所需的软件包。

  • [Express]：快速且易于使用的Node.js框架，同时创建简约的服务器。
  • [Mongoose]：为Node.js提供MongoDB对象建模工具。
  • [Nodemon]：一个Node.js开发库，用于在向Node.js开发服务器添加新代码块时自动重新启动。
  • [Cors]：用于实现Svelte客户端和Node.js服务器之间的跨源通信。

使用下面的命令来安装上面列出的Node.js包。

npm i express mongoose cors

npm i --save-dev nodemon

为了使用Nodemon工件，我们需要修改package.json 文件。要做到这一点，在package.json scripts 部分添加以下脚本标签。

"dev":"nodemon ./src/server.js"

我们将使用上面的命令来运行和重启我们将建立的Node.js服务器。

设置一个主要的Express Todo服务器

在你的server 目录中创建一个src 目录。

mkdir src

在这里我们将创建并设置一个Node.js Express服务器。在src ，创建一个server.js 文件和。

  • 设置一个基本的Express应用程序，如下所示。
const express = require('express');
const mongoose = require('mongoose');
const app = express();
const PORT = process.env.PORT || 4000;

// Middleware
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cors());

//Initiate MongoDB and start server
app.listen(PORT, () => {
    mongoose.connect(process.env.MONGODB_URI || 'mongodb://localhost/your_preferred_db_name', { useNewUrlParser: true }).then((response) => {
        console.log(`Connected to MongoDB and server started on PORT ${PORT}`);
    }).catch((err) => {
        console.log(err);
    })
});

这个片段将通过初始化Express中间件来设置一个Express应用程序，以解析带有JSON有效载荷的传入请求；它还将初始化MongoDB连接，并在localhost端口启动服务器。通过运行下面的命令来启动你的开发服务器。

npm run dev

该命令将触发我们在package.json 中设置的Nodemon脚本。你添加到服务器代码库中的任何代码都将自动重启，而无需运行NPM服务器脚本。

  • 定义Todo 模式。
const Schema = mongoose.Schema;
const todoSchema = new Schema({
    title: String,
    description: String,
});
const Todo = mongoose.model('Todo', todoSchema);
  • 设置一个获取所有todos的路由。
app.get('/api/todos', async (req, res, next) => {
    const todos = await Todo.find();
    return res.json(todos);
});
  • 设置一个添加新todo的路由。
app.post('/api/todos', async (req, res, next) => {
    const todo = new Todo(req.body);
    // save todo to database
    await todo.save();
    return res.json(todo);
});
  • 设置一个删除现有tododo的路由。
// Delete a todo
app.delete('/api/todos', async (req, res, next) => {
    // find todo by id and delete
    await Todo.findByIdAndDelete(req.body.id);                   

    return res.json({
        message: 'Todo deleted successfully',
        success: true,
    });
});

确保开发服务器仍在运行，然后打开Postman，向http://localhost:4000/api/todos 发送一个POST 请求。然后，在body的标签上选择Raw ，将JSON 作为body格式，添加以下样本数据，并点击Send 。

{
"title":"Coding in JavaScript",
"description":"I am coding in JavaScript"
}

PostmanBody 部分上的响应应该类似于。

adding-todos-response

你也可以向http://localhost:4000/api/todos 发送一个GET 请求来获取添加的数据。

getting-todos-response

设置一个Svelte应用程序

为了设置一个Svelte应用程序，我们将使用vite。因此，在项目文件夹中（在server 文件夹之外），创建一个新目录，命名为client 。

我们将在这个client 目录中创建Svelte后端。然后，运行以下命令来初始化Svelte应用程序。

npm init vite@latest

该命令创建了一个交互式命令界面，让你创建一个基本的Svelte应用程序。要做到这一点。

  • 输入项目名称为svelte-todos-app 。
  • 选择svelte 作为基本框架。
  • 对于列出的变体，选择svelte 。

这将在svelte-todos-app 目录下创建一个Svelte应用程序。导航到你的项目。

cd svelte-todos-app

然后用这个命令安装项目的依赖项。

npm install

最后，通过运行以下命令启动Svelte开发服务器。

npm run dev

你可以使用http://localhost:3000 ，在浏览器上访问你的基本Svelte应用程序。

default-svelte-landing-page

创建Svelte组件

我们将编写三个Svelte组件。

  • Todo:这个组件将渲染从Todos 组件中作为道具传递的数据。
  • Todos:这个组件将从后端获取组件列表，并通过Todo 组件渲染每个组件。
  • AddTodo:这将是一个通过表单获取用户数据并将其传递给后台API的组件。

继续在lib 目录下创建Todo.svelte 、Todos.svelte 和AddTodo.svelte 文件，开始设置你的组件。

设置Todo组件

在Todo.svelte文件中，首先创建一个用于渲染数据的道具。

<script>
    export let todo;
    async function deleteTodo(todo) {
const response = await fetch('http://localhost:4000/api/todos/', {
        method: 'DELETE',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        id: todo._id
    })
});
    const data = await response.json();
    if(data.success){
        window.location.href = '/';
    }
}
</script>

然后按照我们想在网页上显示的方式来渲染数据。

<article>
    <div class="todo-info">
        <h1>{todo.title}</h1>
        <p>
            {todo.description}
        </p>
    </div>
    <div class="todo-actions">
        <button on:click={
            () => deleteTodo(todo)
        }>Delete</button>
</article>

最后，添加一些小的CSS样式来安排页面组件。

article {
    width: 100%;
    margin: 10px 5px;
    padding: 10px;
    box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
    display: flex;
    justify-content: space-between;
}

.todo-actions button {
    background: #f5f5f5;
    border: 1px solid #d4d4d5;
    border-radius: 3px;
    color: #333;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 10px;
    text-transform: uppercase;
}

设置Todos组件

在Todos.svelte 文件中，首先导入onMount() 方法和Todo 组件。

<script>
import {onMount} from "svelte";
import Todo from "Todo.svelte";
  • 定义变量来保存我们的Todos。
let todos = [];
  • 定义一个async onMount() 函数，在组件被渲染时获取todos。
onMount(async () => {
    await fetch(`http://localhost:4000/api/todos/`)
        .then(r => r.json())
        .then(data => {
            todos = data;
        });
});

</script >
  • 遍历每一个获取的todos，并将它们作为一个道具传递给Todo 组件。
{ #if todos }
{ #each todos as todo }
<ul>
    <li>
        <Todo {todo} />
    </li>
</ul>
{/each}
{:else }
<p class="loading">loading...</p>
{ /if}

这将检查todos 数据是否被检索到，如果是，那么我们就可以迭代它们，把每一个作为一个道具发送到Todo 组件。如果数据还没有被检索到，我们就显示一个loading 的动作。

  • 添加以下样式。
<style>ul {
    width: 80%;
    margin: 10px auto;
    list-style-type: none;
    padding: 0px;
}

li {
    display: block
}

.loading {
    opacity: 0;
    animation: 0.5s 0.6s forwards fade-in;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

</style>

设置AddTodo组件

这个组件将提供一个表单，用户将在其中输入新的todo细节。在AddTodo.svelte 文件中，在script 部分添加一个函数来处理onsubmit 。

<script>
    async function onSubmit(e) {

    // Get the data from the form
    const formData = new FormData(e.target)
    const data = { };
    for (let field of formData) {
        const [key, value] = field;
    data[key] = value;    
    }
    // Send data to the API
    await fetch('http://localhost:4000/api/todos/',{
        method:'POST',
    body: JSON.stringify(data),
    }).then(
        () => {
        // reload current page
        window.location.href = '/';
        }
    )     
}
</script>

然后将这个表单显示在一个网页上。

<div class="form-container">
    <form on:submit|preventDefault={onSubmit}>
    <div class="form-group">
        <input
            type="text"
            id="title"
            name="title"
            placeholder="Title of todo."
        />
    </div>
    <div class="form-group">
        <textarea
            id="description"
            name="description"
            placeholder="Todo's description"
            cols="30"
        />
    </div>
    <div class="form-group">
        <button type="submit">Submit</button>
    </div>
</form>
</div >

最后，添加一些CSS样式。

<style>.form-container {
    width: 80%;
    margin: 10px auto;
}

form {
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.form-group {
    margin: 10px;
    width: 30%;
}

.form-group input[type="text"] {
    padding: 10px;
}

.form-group textarea {
    padding: 10px;
}

button {
    background: #f5f5f5;
    border: 1px solid #d4d4d5;
    border-radius: 3px;
    color: #333;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 10px;
    text-transform: uppercase;
}

</style>

捆绑组件

我们将通过主组件App.svelte 来渲染我们的应用程序。重写App.svelte 组件，如下所示。

<script>
  import Todos from './lib/Todos.svelte';
  import AddTodo from './lib/AddTodo.svelte';
</script>

<main>
  <h1>Todo List</h1>
  <AddTodo />
  <Todos />
</main>

<style>
  main {
    padding: 1rem;
    width: 80%;
    margin: 0px auto;
  }
  h1 {
    text-align: center;
  }
</style>

确保你的开发服务器已经启动并运行，然后进入http://localhost:3000 ，测试todos应用程序是否正常。

todos-homepage

总结

Svelte被用来构建像React、Angular和Vue这样的前端应用程序。可能需要连接到使用数据库的后端服务器，如MongoDB。

本指南帮助你建立一个完整的全栈反应式Svelte启发的应用程序。

avatar
文章
阅读
粉丝