在本文中，我们将介绍如何使用 Fastify 和 Vue.js 构建一个完整的 Web 应用程序。Fastify 是一个快速、低开销且高度可定制的 Web 框架，Vue.js 是一个功能强大且易于使用的 JavaScript 框架，用于构建用户界面和单页应用程序。
在本教程中，我们将使用 Fastify 和 Vue.js 创建一个简单的任务清单应用程序。我们将学习如何设置和配置 Fastify 服务器、使用 Vue.js 创建复杂的用户界面和实现与后端的交互。此外，我们还将学习如何使用常见的 Web 开发工具来调试和测试我们的应用程序。
设置和配置 Fastify 服务器
在开始之前，请确保已安装最新版本的 Node.js 和 NPM，以及一个现代的文本编辑器。为了使用 Fastify 和 Vue.js，我们需要先创建一个新的 Node.js 项目并安装所需的依赖项。打开终端并执行以下命令：
mkdir my-app cd my-app npm init -y npm install fastify fastify-cors
在创建了一个新的 Node.js 项目之后，我们接下来需要设置和配置 Fastify 服务器。将以下代码添加到 index.js 文件中：
// www.javascriptcn.com code example
const fastify = require('fastify')()
fastify.register(require('fastify-cors'), {
origin: true
})
fastify.get('/', async (request, reply) => {
return { hello: 'world' }
})
fastify.listen(3000, (error) => {
if (error) throw error
console.log('Server listening on http://localhost:3000')
})在这个示例中，我们创建了一个 Fastify 实例并注册了 fastify-cors 插件。此外，我们还定义了一个简单的路由来响应根路径的 GET 请求。最后，我们使用 listen 方法将服务器设置为监听端口 3000。
现在，我们可以在终端中使用 node index.js 命令启动 Fastify 服务器并访问 http://localhost:3000 路径来查看响应。如果一切正常，您应该看到一个 JSON 响应对象，其中包含 { "hello": "world" }。
使用 Vue.js 创建用户界面
现在，我们已经设置和配置了 Fastify 服务器，我们接下来需要使用 Vue.js 创建我们的用户界面。我们将使用 Vue CLI 来快速创建一个新的 Vue.js 项目。打开终端并执行以下命令：
npm install -g @vue/cli vue create my-app-frontend
在创建了一个新的 Vue.js 项目之后，我们接下来需要在 App.vue 文件中定义一个简单的组件来显示我们的任务清单。将以下代码添加到 App.vue 文件中：
// www.javascriptcn.com code example
<template>
<div>
<h1>任务列表</h1>
<ul>
<li v-for="task in tasks" :key="task.id">
{{ task.title }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
tasks: []
}
},
async created() {
const response = await fetch('http://localhost:3000/tasks')
const tasks = await response.json()
this.tasks = tasks
}
}
</script>在这个示例中，我们定义了一个简单的组件，它显示我们的任务清单。我们使用 v-for 属性迭代 tasks 数组并显示每个任务的标题。此外，我们还将 tasks 数组初始化为空，并在组件创建时使用 fetch API 从我们的 Fastify 服务器中检索任务数据。最后，我们设置 tasks 数据以在页面中显示。
现在，我们可以在终端中使用 npm run serve 命令启动 Vue.js 应用程序并访问 http://localhost:8080 路径来查看任务列表。如果一切正常，您应该看到一个简单的任务清单页面，其中列出了从 Fastify 服务器检索的任务项。
实现与后端的交互
现在，我们已经使用 Vue.js 创建了我们的用户界面，并从 Fastify 服务器中检索了任务数据，我们接下来需要实现与后端的交互以便能够添加、编辑和删除任务。我们将使用 Fastify 的插件来创建一个 RESTful API，用于管理我们的任务清单。将以下代码添加到 index.js 文件中：
// www.javascriptcn.com code example
const fastify = require('fastify')()
fastify.register(require('fastify-cors'), {
origin: true
})
fastify.register(require('fastify-mongodb'), {
url: 'mongodb://localhost/todo'
})
fastify.get('/tasks', async (request, reply) => {
const collection = fastify.mongo.db.collection('tasks')
const tasks = await collection.find().toArray()
return tasks
})
fastify.get('/tasks/:id', async (request, reply) => {
const collection = fastify.mongo.db.collection('tasks')
const task = await collection.findOne({
_id: new fastify.mongo.ObjectId(request.params.id)
})
return task
})
fastify.post('/tasks', async (request, reply) => {
const collection = fastify.mongo.db.collection('tasks')
const result = await collection.insertOne(request.body)
const task = await collection.findOne({
_id: result.insertedId
})
return task
})
fastify.put('/tasks/:id', async (request, reply) => {
const collection = fastify.mongo.db.collection('tasks')
await collection.updateOne({
_id: new fastify.mongo.ObjectId(request.params.id)
}, {
$set: request.body
})
const task = await collection.findOne({
_id: new fastify.mongo.ObjectId(request.params.id)
})
return task
})
fastify.delete('/tasks/:id', async (request, reply) => {
const collection = fastify.mongo.db.collection('tasks')
const result = await collection.deleteOne({
_id: new fastify.mongo.ObjectId(request.params.id)
})
return result.deletedCount
})
fastify.listen(3000, (error) => {
if (error) throw error
console.log('Server listening on http://localhost:3000')
})在这个示例中，我们注册了 fastify-mongodb 插件以连接到 MongoDB 数据库，并定义了一个 RESTful API，用于管理我们的任务清单。我们可以通过访问根路径下的 /tasks 来获取所有任务，通过访问 /tasks/:id 来获取特定任务，通过向 /tasks 发送 POST 请求来创建新任务，通过向 /tasks/:id 发送 PUT 请求来更新任务，通过向 /tasks/:id 发送 DELETE 请求来删除任务。
现在，我们已经在 Fastify 服务器中实现了我们的任务清单 API，我们可以更新我们的 Vue.js 应用程序以使用这个 API。将以下代码添加到 App.vue 文件中：
// www.javascriptcn.com code example
<template>
<div>
<h1>任务列表</h1>
<ul>
<li v-for="task in tasks" :key="task._id">
{{ task.title }}
<button @click="deleteTask(task)">删除</button>
</li>
</ul>
<form @submit.prevent="createTask">
<input v-model="newTaskTitle" type="text" placeholder="任务标题">
<button type="submit">创建</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
tasks: [],
newTaskTitle: ''
}
},
async created() {
const response = await fetch('http://localhost:3000/tasks')
const tasks = await response.json()
this.tasks = tasks
},
methods: {
async createTask() {
const response = await fetch('http://localhost:3000/tasks', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
title: this.newTaskTitle
})
})
const task = await response.json()
this.tasks.push(task)
this.newTaskTitle = ''
},
async deleteTask(task) {
const response = await fetch(`http://localhost:3000/tasks/${task._id}`, {
method: 'DELETE'
})
const deletedCount = await response.json()
if (deletedCount === 1) {
const index = this.tasks.indexOf(task)
this.tasks.splice(index, 1)
}
}
}
}
</script>在这个示例中，我们更新了我们的组件以使用我们的 RESTful API 来创建、更新和删除任务。我们使用 v-model 属性从输入框中获取新任务标题，并使用 fetch API 向 /tasks 发送 POST 请求来创建新任务。我们还在任务项旁边添加了一个“删除”按钮，当用户单击按钮时，我们使用 fetch API 向 /tasks/:id 发送 DELETE 请求来删除特定任务。
现在，我们已经实现了一个完整的 Web 应用程序，它使用 Fastify 和 Vue.js 来创建和管理一个简单的任务清单。我们使用 Fastify 来创建我们的后端 API，使用 Vue.js 来创建我们的前端用户界面，以及使用常见的 Web 开发工具来调试和测试我们的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cfb7f1e46428fe9eb9801a