如何构建 Vue 前端并将其连接到后端？

在本教程中，您将使用 vue 构建一个待办事项列表应用程序，并将其连接到一个托管的后端服务。 如果您想掌握基本的 crud（创建、读取、更新、删除）操作并构建直观的用户界面，这个指南非常适合您。到最后，您的应用程序将与由 back4app 提供支持的后端完全互动。 开发一个全栈应用程序可能涉及复杂的后端设置、数据库管理和用户身份验证。为了让您专注于打造出色的 vue 前端，我们将使用 back4app 来轻松管理后端。 back4app 提供了一个现成的数据库、身份验证、用于自定义服务器逻辑的云代码以及与您的应用程序集成的 sdk。这使您能够在不麻烦服务器维护的情况下部署可扩展的应用程序。 关键要点 通过遵循本教程，您将： 使用行业标准工具设置一个现代的 vue 项目。 无缝集成后端服务以处理您应用程序的数据。 为动态的 待办事项列表 实现基本的 crud 操作。 通过在 back4app 上的容器化工作流部署您的完全功能应用程序。 前提条件 在开始之前，请确保您拥有： node js 和 npm 已安装在您的机器上。通过 node v 和 npm v 验证安装情况。 基本的 vue 知识 , 包括组件、响应式数据和事件处理。熟悉 vue 3 的组合 api 是有益的。 一个 back4app 账户 用于管理您的后端服务。如果您还没有，请在 back4app https //www back4app com/ 注册。 有了这些，您就可以准备设置您的项目。 项目设置 首先准备您的本地开发环境，并使用 vite 初始化您的 vue 项目，以获得快速和现代的构建体验。 验证您已安装 node js (lts 版本) 。如果没有，请从 nodejs org https //nodejs org/ 下载。 通过运行以下命令创建您的 vue 项目： npm create vite\@latest todo app 3 切换到你的项目目录 cd todo app 4 安装依赖 npm install 5 启动开发服务器以确保一切正常工作 npm run dev 在浏览器中打开提供的 url。准备好 vue 前端后，下一步是在 back4app 上设置后端。 创建 todo 后端 back4app 提供一个完全托管的后端服务，基于 parse , 配备 nosql 数据库、用户身份验证、云代码和自动 api 生成。 按照以下步骤创建后端： 登录 到你的 back4app 控制面板 https //www back4app com/ 并点击 "创建新应用。" 命名你的应用 （例如， todoapp ) 并选择 nodejs/parse 作为后端类型。 转到 "数据库" > "浏览器" , 点击 "创建一个类" , 并选择 "自定义" 将类命名为 task 并设置权限以允许公共读取和写入（你可以稍后进行细化）。 在 task 类中，添加以下字段： 标题 （字符串）– 任务标题。 描述 （字符串）– 关于任务的详细信息。 完成 （布尔值）– 任务完成状态。 截止日期 （日期）– 任务到期时间。 点击 "保存" 创建模式。 将 back4app 与 vue 集成 您将使用 parse javascript sdk 在您的 vue 前端和 back4app 后端之间进行通信。 安装 parse sdk npm install parse 通过编辑 src/main js 来配置 sdk。导入 sdk 并使用您的 应用程序 id 和 javascript 密钥 从 back4app 控制面板（在 应用设置 > 安全性与密钥 下找到） import { createapp } from 'vue'; import app from ' /app vue'; import parse from 'parse/dist/parse min js'; const parse app id = 'your application id'; const parse js key = 'your javascript key'; const parse server url = 'https //parseapi back4app com/'; parse initialize(parse app id, parse js key); parse serverurl = parse server url; createapp(app) mount('#app'); 连接后端后，您现在可以构建待办事项列表界面并集成 crud 操作。 开发前端 您的 vue 应用程序将由组件组成，以添加、显示、更新和删除任务。您将利用 vue 的响应性来管理状态并确保顺利更新。 构建您的组件 在 src 中创建一个 components 文件夹来存放您的 vue 组件 mkdir src/components touch src/components/taskform vue src/components/tasklist vue src/components/taskitem vue 任务表单 vue 该组件处理添加新任务。它使用受控表单来捕获用户输入。 \<template> \<form @submit prevent="handlesubmit"> \<input type="text" placeholder="task title" v model="title" required /> \<input type="text" placeholder="description" v model="description" required /> \<button type="submit">add task\</button> \</form> \</template> \<script> import parse from 'parse/dist/parse min js'; export default { name 'taskform', props \['fetchtasks'], data() { return { title '', description '' }; }, methods { async handlesubmit() { try { const task = parse object extend('task'); const task = new task(); task set('title', this title); task set('description', this description); task set('completed', false); await task save(); this fetchtasks(); this title = ''; this description = ''; } catch (error) { console error('error adding task ', error); } } } }; \</script> 任务列表 vue 该组件显示任务列表并集成任务操作。 \<template> \<div> \<p v if="!tasks length">no tasks available\</p> \<taskitem v for="task in tasks" \ key="task id" \ task="task" \ fetchtasks="fetchtasks" /> \</div> \</template> \<script> import taskitem from ' /taskitem vue'; export default { name 'tasklist', components { taskitem }, props \['tasks', 'fetchtasks'] }; \</script> taskitem vue 该组件表示一个单独的任务，并包括标记为完成或删除的操作。 \<template> \<div \ class="\['task item', { completed task completed }]"> \<div> \<h3>{{ task title }}\</h3> \<p>{{ task description }}\</p> \</div> \<div> \<button @click="handlecomplete"> {{ task completed ? 'undo' 'complete' }} \</button> \<button @click="handledelete">delete\</button> \</div> \</div> \</template> \<script> import parse from 'parse/dist/parse min js'; export default { name 'taskitem', props \['task', 'fetchtasks'], methods { async handlecomplete() { try { const query = new parse query('task'); const tasktoupdate = await query get(this task id); tasktoupdate set('completed', !this task completed); await tasktoupdate save(); this fetchtasks(); } catch (error) { console error('error updating task ', error); } }, async handledelete() { try { const query = new parse query('task'); const tasktodelete = await query get(this task id); await tasktodelete destroy(); this fetchtasks(); } catch (error) { console error('error deleting task ', error); } } } }; \</script> 在 app vue 中管理状态 在你的主组件中，你将使用 vue 的响应式数据和生命周期钩子来管理任务列表。 \<template> \<div class="container"> \<h1>to do list\</h1> \<taskform \ fetchtasks="fetchtasks" /> \<tasklist \ tasks="tasks" \ fetchtasks="fetchtasks" /> \</div> \</template> \<script> import { ref, onmounted } from 'vue'; import parse from 'parse/dist/parse min js'; import taskform from ' /components/taskform vue'; import tasklist from ' /components/tasklist vue'; export default { name 'app', components { taskform, tasklist }, setup() { const tasks = ref(\[]); const fetchtasks = async () => { try { const task = parse object extend('task'); const query = new parse query(task); const results = await query find(); tasks value = results map(task => ({ id task id, task tojson() })); } catch (error) { console error('error fetching tasks ', error); } }; onmounted(fetchtasks); return { tasks, fetchtasks }; } }; \</script> 应用程序样式 在 styles css 中创建一个文件 src 以添加基本样式： container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } container h1 { margin bottom 20px; } form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; transition background color 0 2s ease; } task item completed h3, task item completed p { text decoration line through; color #888; } task item h3 { margin 0; font size 1 1rem; } task item p { margin 0; font size 1rem; } task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } @media (min width 600px) { task item { flex direction row; } } 在 main js 导入样式表 import ' /styles css'; 在 back4app 上部署前端 back4app web deployment 允许您使用 docker 将 vue 应用程序容器化以进行生产。 为生产配置 vite 调整 vite config js 以正确设置容器化环境的基本路径： import { defineconfig } from 'vite'; import vue from '@vitejs/plugin vue'; export default defineconfig({ plugins \[vue()], base ' /', }); 生成生产构建： npm run build 创建 dockerfile 创建一个 dockerfile 在根目录下 # stage 1 build the vue app from node 18 alpine as build workdir /app copy package json package lock json / run npm install copy run npm run build \# stage 2 serve the app using nginx from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 在本地测试 docker 容器 构建你的 docker 镜像 docker build t todo frontend 运行容器 docker run p 8080 80 todo frontend 访问 http //localhost 8080 以验证你的 vue 应用是否正确提供 部署到 back4app 初始化一个 git 仓库，添加你的文件，并提交 git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main 登录到 back4app web 部署 https //www back4app com/containers 点击 "创建新应用" ，提供项目名称，并选择 github 仓库 授权 back4app 访问你的仓库并选择 dockerfile 部署 确认构建设置并点击 "部署" 以触发第一次构建 监控您的部署 部署后，使用 back4app 控制面板来 查看调试日志。 监控资源使用情况和容器重启。 使用 "触发构建" 选项重新部署新提交。 如有需要，配置自定义域名。 在 https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ 测试和调试 部署后，确保您的 vue 前端与 back4app 后端正确通信 验证api调用： 打开浏览器的开发者工具（f12 → 网络）以检查api请求。 添加和检索任务： 使用应用程序界面添加任务并检查back4app数据库浏览器。 crud操作： 测试完成和删除任务，然后确认后端的更改。 边缘情况： 验证表单输入并模拟慢速网络条件（使用chrome开发者工具）以评估性能。 故障排除常见问题 cors错误： 更新 允许的头和域 在back4app中（仪表板 > 应用设置 > 安全性和密钥）以包含您的前端url。 身份验证错误（401）： 确认您的应用程序id和javascript密钥是正确的。 后端部署问题： 检查back4app仪表板中的容器日志，并在必要时重新启动容器。 使用back4app与vue的最佳实践 为了优化您的应用程序： 高效的数据请求： 使用批量请求进行多个操作： const tasks = \[task1, task2, task3]; parse object saveall(tasks); 优化查询 仅请求必要的字段 query select('title', 'completed'); 环境变量 将敏感密钥存储在 env 文件中 vite parse app id=your app id vite parse js key=your js key 安全性 使用 acl 限制访问 task setacl(new parse acl(parse user current())); 云代码 将复杂逻辑卸载到后端函数以减少 api 暴露。 结论 您已成功构建了一个全栈待办事项应用程序，通过设置 vue 前端，将其与 back4app 的后端集成，并通过容器化工作流进行部署。 本教程演示了从本地开发到云部署的简化路径，确保您的 vue ui 与后端服务之间的顺畅交互。 展望未来，考虑增强功能，如高级用户管理、实时更新和第三方服务集成。有关更多信息，请访问 back4app 文档 https //www back4app com/docs 并探索社区资源。