如何用 Vue.js 构建 CRUD 应用？

30min
介绍
在本指南中，您将发现如何使用 Vue.js 构建一个功能齐全的 CRUD（创建、读取、更新、删除）应用程序。
我们将利用 Back4app 的强大功能轻松处理您的后端。 本教程将引导您设置 Back4app 项目，构建动态数据模型，并使用 Vue.js 实现 CRUD 操作。
首先，您将设置一个名为 Basic-CRUD-App-Vue 的 Back4app 项目，为您的应用程序提供强大的非关系数据库。 您可以通过手动配置集合和字段或使用 Back4app 的智能 AI 代理来设计数据模型。
接下来，您将使用 Back4app 管理应用程序管理您的数据——一个用户友好的拖放界面——使您能够轻松创建、读取、更新和删除记录。
最后，您将通过 REST API 调用（使用 axios）将 Vue.js 前端与 Back4app 集成，以执行安全高效的 CRUD 操作。
在本教程结束时，您将拥有一个生产就绪的 Vue.js 应用程序，能够执行基本的 CRUD 功能，并具备安全的用户身份验证和数据管理.
关键要点
学习构建一个基于 Vue.js 的 CRUD 应用程序，后端可扩展.
了解如何构建灵活的后端并将其与您的 Vue.js 项目连接.
发现如何使用 Back4app 的直观管理应用程序进行无缝的 CRUD 操作.
探索部署技术，包括 Docker 容器化，以便为您的 Vue.js 应用程序.
﻿
先决条件
在您开始之前，请确保您拥有:
一个 Back4app 账户，并设置了一个新项目.
需要帮助？请查看 使用 Back4app 入门.
一个 Vue.js 开发环境.
使用 Vue CLI 或您喜欢的 IDE，如 VSCode.
对 Vue.js、现代 JavaScript 和 REST API 的基本知识.
如有需要，请复习 Vue.js 文档.
﻿
步骤 1 – 项目设置
创建一个新的 Back4app 项目
登录到您的 Back4app 账户。
点击“新应用”按钮 从您的仪表板.
命名您的项目： Basic-CRUD-App-Vue 并按照提示完成设置。
创建新项目
﻿
创建项目后，它将出现在您的仪表板上，为您的后端奠定基础。
﻿
步骤 2 – 设计数据模型
构建您的数据
对于这个 CRUD 应用程序，您将在 Back4app 项目中定义多个集合。以下示例说明了 CRUD 功能所需的核心集合及其字段。
1. 项目集合
该集合存储有关每个项目的详细信息。
字段
数据类型
描述
_id
对象ID
自动生成的唯一ID。
标题
字符串
物品的名称。
描述
字符串
该项目的简要总结。
创建于
日期
项目创建的时间戳。
更新时间
日期
最后更新的时间戳。
2. 用户集合
此集合处理用户凭据和身份验证数据。
字段
数据类型
描述
_id
对象ID
自动生成的唯一ID。
用户名
字符串
用户的唯一用户名。
电子邮件
字符串
独特的电子邮件地址。
密码哈希
字符串
登录的加密密码。
创建于
日期
账户创建时间戳。
更新时间
日期
最后账户更新时间戳。
您可以在 Back4app 控制面板中手动添加这些集合和字段。
创建新班级
﻿
您可以通过选择数据类型、提供字段名称、设置默认值，并在必要时将其标记为必填项来添加字段。
创建列
﻿
利用 Back4app AI 代理进行模式设置
集成的 Back4app AI 代理可以根据您的描述自动生成数据模式。此工具加快了设置速度，并确保您的模型满足 CRUD 要求。
如何使用 AI 代理：
打开 AI 代理：
登录到您的 Back4app 仪表板，并在项目设置中导航到 AI 代理。
描述您的数据模型：
输入详细提示，描述您需要的集合和字段。
审核并确认：
一旦 AI 代理生成建议的模式，请审核并确认以实施配置。
示例提示
Text
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
﻿
这种基于 AI 的方法节省了时间，并确保了优化和一致的数据模型。
﻿
步骤 3 – 启用管理员应用程序并管理 CRUD 操作
管理员应用程序概述
Back4app 管理员应用程序提供了一个无代码的后端管理界面。通过其拖放功能，您可以轻松执行 CRUD 操作，例如创建、读取、更新和删除记录。
激活管理员应用程序
前往“更多”菜单 在您的 Back4app 仪表板中。
选择“管理员应用程序” 并点击 “启用管理员应用程序。”
设置管理员凭据 通过创建您的第一个管理员帐户。此过程还建立角色（如 B4aAdminUser) 和系统集合。
启用管理员应用程序
﻿
启用后，登录管理员应用程序以开始管理您的数据。
管理员应用程序仪表板
﻿
通过管理员应用程序管理 CRUD 操作
在管理员应用程序中，您可以：
创建新记录： 在任何集合中点击“添加记录”（例如，项目）以插入新数据。
编辑或查看记录： 选择一条记录以查看其详细信息或修改其字段。
删除记录： 删除不再需要的记录。
此界面简化了数据处理并改善了整体用户体验。
﻿
步骤 4 – 将您的 Vue.js 应用程序与 Back4app 连接
一旦您的后端准备好，就可以将您的 Vue.js 应用程序与 Back4app 连接起来。
使用 Axios 进行 REST API 调用
我们将通过 axios 使用 REST API 调用来执行 CRUD 操作。
安装 Axios:
在您的项目目录中运行以下命令:
Bash
npm install axios
npm install axios
﻿
设置 Axios:
在一个文件中创建一个 axios 实例（例如， api.js):
JS
// api.js
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://parseapi.back4app.com',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
    'Content-Type': 'application/json'
  }
});

export default apiClient;
// api.js
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://parseapi.back4app.com',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
    'Content-Type': 'application/json'
  }
});

export default apiClient;
﻿
在 Vue 组件中实现 CRUD 方法:
以下是如何获取和创建项目的示例:
JS
// ItemsService.js
import apiClient from './api';

export default {
  fetchItems() {
    return apiClient.get('/classes/Items')
      .then(response => response.data.results)
      .catch(error => console.error('获取项目时出错:', error));
  },

  addItem(title, description) {
    return apiClient.post('/classes/Items', {
      title,
      description
    })
    .then(response => response.data)
    .catch(error => console.error('添加项目时出错:', error));
  },

  updateItem(objectId, title, description) {
    return apiClient.put(`/classes/Items/${objectId}`, {
      title,
      description
    })
    .then(response => response.data)
    .catch(error => console.error('更新项目时出错:', error));
  },

  deleteItem(objectId) {
    return apiClient.delete(`/classes/Items/${objectId}`)
    .then(response => response.data)
    .catch(error => console.error('删除项目时出错:', error));
  }
};
// ItemsService.js
import apiClient from './api';

export default {
  fetchItems() {
    return apiClient.get('/classes/Items')
      .then(response => response.data.results)
      .catch(error => console.error('获取项目时出错:', error));
  },

  addItem(title, description) {
    return apiClient.post('/classes/Items', {
      title,
      description
    })
    .then(response => response.data)
    .catch(error => console.error('添加项目时出错:', error));
  },

  updateItem(objectId, title, description) {
    return apiClient.put(`/classes/Items/${objectId}`, {
      title,
      description
    })
    .then(response => response.data)
    .catch(error => console.error('更新项目时出错:', error));
  },

  deleteItem(objectId) {
    return apiClient.delete(`/classes/Items/${objectId}`)
    .then(response => response.data)
    .catch(error => console.error('删除项目时出错:', error));
  }
};
﻿
将这些 API 方法集成到您的 Vue 组件中，以管理您应用程序的数据。
﻿
步骤 5 – 保护您的后端
配置访问控制列表 (ACLs)
通过为您的记录设置 ACL 来保护您的数据。例如，创建一个只有其所有者可以查看或修改的项目:
JS
import apiClient from './api';

export function createPrivateItem(title, description, userId) {
  const acl = {
    "*": { "read": false, "write": false },
    [userId]: { "read": true, "write": true }
  };

  return apiClient.post('/classes/Items', {
    title,
    description,
    ACL: acl
  })
  .then(response => response.data)
  .catch(error => console.error('Error creating private item:', error));
}
import apiClient from './api';

export function createPrivateItem(title, description, userId) {
  const acl = {
    "*": { "read": false, "write": false },
    [userId]: { "read": true, "write": true }
  };

  return apiClient.post('/classes/Items', {
    title,
    description,
    ACL: acl
  })
  .then(response => response.data)
  .catch(error => console.error('Error creating private item:', error));
}
﻿
设置类级权限 (CLPs)
使用您的 Back4app 控制面板配置 CLPs，以便只有经过身份验证的用户可以访问某些集合。这确保了您的后端默认保持安全。
﻿
步骤 6 – 实现用户身份验证
设置用户注册和登录
Back4app 利用内置的用户集合进行身份验证。在您的 Vue.js 应用中，您可以使用 REST API 调用管理用户注册和登录。以下是方法:
JS
// AuthService.js
import apiClient from './api';

export default {
  register(username, password, email) {
    return apiClient.post('/users', {
      username,
      password,
      email
    })
    .then(response => response.data)
    .catch(error => console.error('Registration error:', error));
  },

  login(username, password) {
    return apiClient.get('/login', {
      params: { username, password }
    })
    .then(response => response.data)
    .catch(error => console.error('Login error:', error));
  }
};
// AuthService.js
import apiClient from './api';

export default {
  register(username, password, email) {
    return apiClient.post('/users', {
      username,
      password,
      email
    })
    .then(response => response.data)
    .catch(error => console.error('Registration error:', error));
  },

  login(username, password) {
    return apiClient.get('/login', {
      params: { username, password }
    })
    .then(response => response.data)
    .catch(error => console.error('Login error:', error));
  }
};
﻿
﻿
此设置还允许您处理会话管理、密码重置和其他身份验证功能。
﻿
步骤 7 – 部署您的 Vue.js 应用程序
Back4app 简化了部署过程。您可以使用多种方法部署您的 Vue.js 应用程序，包括 Docker 容器化。
7.1 构建您的 Vue.js 应用程序
编译和打包：
使用 Vue CLI 编译您的应用程序：
Bash
npm run build
npm run build
﻿
检查构建：
确认输出文件夹（通常是 dist/) 包含所有必要文件。
﻿
7.2 项目结构概述
一个常见的 Vue.js 项目结构可能如下所示：
Text
Basic-CRUD-App-Vue/
|-- public/
|-- src/
|   |-- components/
|   |   |-- ItemList.vue
|   |   |-- ItemForm.vue
|   |-- services/
|   |   |-- api.js
|   |   |-- ItemsService.js
|   |   |-- AuthService.js
|   |-- App.vue
|   |-- main.js
|-- package.json
|-- README.md
Basic-CRUD-App-Vue/
|-- public/
|-- src/
|   |-- components/
|   |   |-- ItemList.vue
|   |   |-- ItemForm.vue
|   |-- services/
|   |   |-- api.js
|   |   |-- ItemsService.js
|   |   |-- AuthService.js
|   |-- App.vue
|   |-- main.js
|-- package.json
|-- README.md
﻿
7.3 Docker 化您的 Vue.js 应用程序
如果您更喜欢容器化部署，请在项目根目录中包含一个 Dockerfile：
Dockerfile
# Use a Node image for building the app
FROM node:16 AS build

# Set the working directory
WORKDIR /app

# Install dependencies and build the app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Use an Nginx image to serve the app
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use a Node image for building the app
FROM node:16 AS build

# Set the working directory
WORKDIR /app

# Install dependencies and build the app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Use an Nginx image to serve the app
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
7.4 使用 Back4app Web 部署
连接您的 GitHub 仓库：
确保您的 Vue.js 项目托管在 GitHub 上。
配置部署：
在 Back4app 仪表板中，选择 Web 部署 选项，链接您的仓库（例如，Basic-CRUD-App-Vue），并选择所需的分支。
设置构建命令：
指定您的构建命令（例如，npm run build) 并指明输出文件夹（例如，dist)。
部署：
点击 部署 并查看日志，直到您的应用上线。
﻿
第 8 步 – 最后的想法和下一步
恭喜！您已经构建了一个基于 Vue.js 的 CRUD 应用，并与 Back4app 集成。 
您配置了一个名为 Basic-CRUD-App-Vue, 设置了项目的 Items 和 Users 集合，并使用 Back4app 管理应用进行数据管理。
此外，您通过 REST API 调用连接了您的 Vue.js 前端，并建立了安全措施。
下一步：
扩展您的应用：
加入高级过滤、详细项目视图或实时更新等功能。
增强后端功能：
探索云函数、集成外部 API 或实施基于角色的访问控制。
继续学习：
参考 Back4app 文档 和其他资源，以进一步完善您的应用。
祝您编码愉快，享受构建您的 Vue.js CRUD 应用！
字段	数据类型	描述
_id	对象ID	自动生成的唯一ID。
标题	字符串	物品的名称。
描述	字符串	该项目的简要总结。
创建于	日期	项目创建的时间戳。
更新时间	日期	最后更新的时间戳。
字段	数据类型	描述
_id	对象ID	自动生成的唯一ID。
用户名	字符串	用户的唯一用户名。
电子邮件	字符串	独特的电子邮件地址。
密码哈希	字符串	登录的加密密码。
创建于	日期	账户创建时间戳。
更新时间	日期	最后账户更新时间戳。
上一个
如何使用 Elm 构建 CRUD 应用？
下一个
如何用JavaScript构建CRUD应用?