unicloud项目中树形分类页面的快速开发(一) |
您所在的位置:网站首页 › unicloud大型项目 › unicloud项目中树形分类页面的快速开发(一) |
本文介绍如何在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有一次登录成功日志。 在用户端选择我的、设置、退出登录。 3、在管理端将test用户状态改为禁用状态。 4、再用test账户在客户端登录。这时候页面会显示账号已禁用。 至此,用户端和管理端连调已打通。有关uni-starter和uni-admin的相关使用请参见官方文档和教学视频。接下来,会给大家分享unicloud项目中树形分类页面的快速开发的后续内容,敬请期待! |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |