返回

UniCloud 开发树形分类页面的完整指南

开发工具

UniCloud 树形分类指南：快速构建动态分类页面

搭建项目框架

UniCloud 提供了一系列开发工具，帮助开发者快速搭建项目框架。利用 uni-starter，我们可以轻松创建新的 UniCloud 项目。随后，使用 uniCloud admin 可视化管理后台，方便地管理数据和代码。

# 安装 uni-starter
npm install -g uni-starter

# 创建项目
uni-starter create my-project

# 安装 uniCloud admin
npm install -g unicloud-admin

# 运行 uniCloud admin
unicloud-admin start

设计数据库表结构

树形分类需要两张表：分类表和商品表。分类表记录分类名称、父分类 ID 等信息。商品表关联分类 ID，存储商品信息。

分类表

CREATE TABLE categories (
  id INT NOT NULL AUTO_INCREMENT,
  name VARCHAR(255) NOT NULL,
  parent_id INT DEFAULT NULL,
  PRIMARY KEY (id)
);

商品表

CREATE TABLE products (
  id INT NOT NULL AUTO_INCREMENT,
  name VARCHAR(255) NOT NULL,
  category_id INT NOT NULL,
  PRIMARY KEY (id)
);

编写相关代码

数据模型

在 Vuex 中定义数据模型，管理分类和商品数据。

// categories.js
export default {
  // ...省略代码...
};

// products.js
export default {
  // ...省略代码...
};

服务端代码

使用 uniCloud 云函数，实现获取分类列表和分类树、获取商品列表等功能。

// categories.js
// ...省略代码...

// products.js
// ...省略代码...

页面代码

编写页面代码，渲染分类树和商品列表。

// index.vue
<template>
  // ...省略代码...
</template>

<script>
// ...省略代码...
</script>

示例项目

完整的示例项目，供您参考：https://github.com/unjs/unicloud-tree-category

总结

本指南详细介绍了如何使用 UniCloud 开发树形分类页面，从项目搭建到数据库设计、代码编写，以及示例项目。希望这能帮助您轻松构建自己的分类系统。

常见问题解答

1. 如何获取分类树形结构？

使用 fetchCategoriesTree 云函数获取分类树形结构。

2. 如何获取商品列表？

使用 fetchProducts 云函数获取商品列表，并支持分页。

3. 如何根据分类筛选商品？

在 fetchProducts 云函数中，通过传入 category_id 参数进行筛选。

4. 如何添加或删除分类？

使用 uniCloud 数据库操作，调用 add 和 remove 方法。

5. 如何自定义分类树的显示样式？

在 Tree 组件中设置 props，可以自定义分类树的显示样式。