unicloud项目中树形分类页面的快速开发(一)

您所在的位置:网站首页 unicloud大型项目 unicloud项目中树形分类页面的快速开发(一)

unicloud项目中树形分类页面的快速开发(一)

2023-06-29 12:25| 来源: 网络整理| 查看: 265

本文介绍如何在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项目。默认勾选启用云开发。

截屏2021-12-10 09.28.43.png

2.在项目中uniCloud目录上右击,关联云空间。

截屏2021-12-10 09.33.02.png

3、新建一个云空间。

截屏2021-12-10 09.34.18.png

4、给云空间取名(本项目取名为uni-taxonomy)。

截屏2021-12-10 09.34.34.png

5、回到HBuilerX编辑器,再次关联云空间。勾选刚刚创建的云空间,点击关联按钮。

截屏2021-12-10 09.40.42.png

6、展开uniCloud目录,在cloudfunctions目录上右击,上传所有云函数、公共模块及actions。

截屏2021-12-10 09.42.23.png

7、等待云函数上传完毕。

截屏2021-12-10 09.45.18.png

8、展开database目录,在db_init.json文件上右击,初始化云数据库(包括schema和校验函数)。

截屏2021-12-10 09.47.13.png

9、等待数据库初始化完毕。

截屏2021-12-10 09.49.54.png

10、测试uni-stater项目是否安装成功。

在编辑器中打开项目pages/list/list.vue,点击右上角预览,出现下面的页面,说明项目已将安装成功。

截屏2021-12-10 09.55.31.png

至此,用户端的基础框架搭建成功。 二、创建管理端uni-admin项目 1、在HBuilerX(最好是最新版本)代码编辑器中新建uni-admin项目。默认勾选启用云开发。

截屏2021-12-10 09.59.26.png

2、在项目中uniCloud目录上右击,关联云空间。

注意:管理端与刚刚创建的用户端必须关联同一个云空间。选择绑定其他项目的服务空间,勾选uni-taxonomy,点击关联按钮。

截屏2021-12-10 10.05.07.png

3、测试uni-admin项目是否安装成功。点击编辑器运行菜单,选择运行到一个浏览器。

截屏2021-12-10 10.09.15.png

4、如果浏览器出现下图提示,需要安装插件。

截屏2021-12-10 10.12.18.png

5、安装sass插件。

截屏2021-12-10 10.59.26.png

6、再次运行项目到浏览器,出现管理端登录界面,如果是第一次登录,需要您创建超级管理员账号。管理员账号只允许设置一次。

截屏2021-12-10 11.03.53.png

7、设置好管理员密码后,进入到管理端管理页面。

截屏2021-12-10 11.09.24.png

至此,管理端的基础框架搭建成功。 三、用户端和管理端连调

前面通过搭建uni-starter和uni-admin项目,并且两个项目绑定了同一个云空间,说明云端一体开发框架已经搭建完成。现在来测试一下用户端和管理端的数据是否可以同步。

1、在管理端创建一个测试用户,设置用户名是test,密码123456,激活状态。

截屏2021-12-10 11.19.12.png

目前,可登录应用只有管理端,点击管理,新增用户端应用。

截屏2021-12-10 11.21.45.png

在HuilderX找到用户端项目的配置文件,将应用标识、应用名称、应用描述填入到管理端的表单中。

截屏2021-12-10 11.23.15.png

记住勾选应用名uni-taxonomy。这样,我们在管理端创建的账号,在用户端应该也可以登录了。

2、在用户端用test进行登录。

在HuilderX运行用户端项目,用test账号登录。

截屏2021-12-10 11.35.40.png

登录成功

截屏2021-12-10 11.38.31.png

在HuilderX中打开云控制台

截屏2021-12-10 11.40.02.png

可以看到我们创建的用户信息

截屏2021-12-10 11.42.50.png

数据库显示test用户的ID为61b2c95d0d111e000151d6a1。在打开用户登录日志,可以发现刚刚这个61b2c95d0d111e000151d6a1 ID有一次登录成功日志。

截屏2021-12-10 11.46.48.png

在用户端选择我的、设置、退出登录。

3、在管理端将test用户状态改为禁用状态。

截屏2021-12-10 11.49.14.png

4、再用test账户在客户端登录。这时候页面会显示账号已禁用。

截屏2021-12-10 11.50.30.png

至此,用户端和管理端连调已打通。有关uni-starter和uni-admin的相关使用请参见官方文档和教学视频。接下来,会给大家分享unicloud项目中树形分类页面的快速开发的后续内容,敬请期待!


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3