本文介绍如何在uniCloud项目中快速开发树形分类页面,如商品分类等。首先,我们用uni-starter + uniCloud admin搭建用户端和管理端的基本项目框架。在此基础上,根据业务需求,设计出符合约定标准的schema(数据库表结构)。再用schema2code生成用户端和管理端的增删改查页面。最后,对生成的页面进行二次开发,使之符合我们的业务需求。
uniCloud 是 DCloud 联合阿里云、腾讯云,为开发者提供的基于 serverless 模式和 js 编程的云开发平台。
- 用schema2code代码生成工具,生成数据库的增删改查页面(是直接生成页面,不是生成接口,包括前端和管理端页面)。
- 如果
schema2code搞不定,需要手写代码,那么使用clientDB,将节省80%的管理端开发工作。 uni-starter是一个集成了大量商用项目常见功能的,云端一体应用快速开发基本项目模版。APP有很多通用的功能,比如登录注册、头像、设置、banner、... uni-starter将这些功能都已经集成好。直接在hbuilderx新建项目选择uni-starter模板,即可在此基础上快速开发自己的特色业务。有了uni-starter,再加上schema2code生成前端页面,一个简单应用就可以快速完成。- 如果说uniCloud admin是管理端项目的基本项目模版,那么uni-starter则是用户端、尤其是移动端的基础项目模板。
uni-starter+uniCloud admin提供了用户端和管理端的基本项目模版,应用开发从未如此简单快捷!
搭建项目开发框架
一、创建用户端uni-starter项目
1、在HBuilerX(最好是最新版本)代码编辑器中新建uni-starter项目。默认勾选启用云开发。
2.在项目中uniCloud目录上右击,关联云空间。
3、新建一个云空间。
4、给云空间取名(本项目取名为uni-taxonomy)。
5、回到HBuilerX编辑器,再次关联云空间。勾选刚刚创建的云空间,点击关联按钮。
6、展开uniCloud目录,在cloudfunctions目录上右击,上传所有云函数、公共模块及actions。
7、等待云函数上传完毕。
8、展开database目录,在db_init.json文件上右击,初始化云数据库(包括schema和校验函数)。
9、等待数据库初始化完毕。
10、测试uni-stater项目是否安装成功。
在编辑器中打开项目pages/list/list.vue,点击右上角预览,出现下面的页面,说明项目已将安装成功。
至此,用户端的基础框架搭建成功。
二、创建管理端uni-admin项目
1、在HBuilerX(最好是最新版本)代码编辑器中新建uni-admin项目。默认勾选启用云开发。
2、在项目中uniCloud目录上右击,关联云空间。
注意:管理端与刚刚创建的用户端必须关联同一个云空间。选择绑定其他项目的服务空间,勾选uni-taxonomy,点击关联按钮。
3、测试uni-admin项目是否安装成功。点击编辑器运行菜单,选择运行到一个浏览器。
4、如果浏览器出现下图提示,需要安装插件。
5、安装sass插件。
6、再次运行项目到浏览器,出现管理端登录界面,如果是第一次登录,需要您创建超级管理员账号。管理员账号只允许设置一次。
7、设置好管理员密码后,进入到管理端管理页面。
至此,管理端的基础框架搭建成功。
三、用户端和管理端连调
前面通过搭建uni-starter和uni-admin项目,并且两个项目绑定了同一个云空间,说明云端一体开发框架已经搭建完成。现在来测试一下用户端和管理端的数据是否可以同步。
1、在管理端创建一个测试用户,设置用户名是test,密码123456,激活状态。
目前,可登录应用只有管理端,点击管理,新增用户端应用。
在HuilderX找到用户端项目的配置文件,将应用标识、应用名称、应用描述填入到管理端的表单中。
记住勾选应用名uni-taxonomy。这样,我们在管理端创建的账号,在用户端应该也可以登录了。
2、在用户端用test进行登录。
在HuilderX运行用户端项目,用test账号登录。
登录成功
在HuilderX中打开云控制台
可以看到我们创建的用户信息
数据库显示test用户的ID为61b2c95d0d111e000151d6a1。在打开用户登录日志,可以发现刚刚这个61b2c95d0d111e000151d6a1 ID有一次登录成功日志。
在用户端选择我的、设置、退出登录。