如何在Uniapp中访问CabloyJS后端管理系统API
介绍
CabloyJS
是一款免费开源的NodeJS全栈开发框架,采用前后端分离设计,具备开箱即用的后台管理系统
Cabloy-SDK
是专门为Uniapp应用量身定制的前端SDK,用于便捷的访问CabloyJS提供的所有API接口,让Uniapp前端开发再无后顾之忧
特性
各个平台的小程序后端API系统,最复杂的就是账号体系对接。CabloyJS提供了一个模块化的生态,需要开发什么平台下的小程序应用,只需安装相应的模块即可
目前Cabloy-SDK
支持以下平台小程序的开箱即用:
如何使用 - 前端
1. 导入插件
进入Uniapp插件页面,点击按钮使用HBuilderX导入插件
,将Cabloy-SDK
插件导入Uniapp项目中
强烈建议
下载示例项目
查看插件的基本用法
2. 修改main.js
在main.js
文件中添加如下代码:
import Vue from 'vue'
import App from './App'
import Cabloy from './js_sdk/cabloy-sdk/main.js'
// 初始化cabloy
const cabloyOptions = {
base: {
scene: 'default',
locale: 'en-us',
},
api: {
baseURL: 'https://yourdomain.com',
},
}
Vue.prototype.$cabloy = Cabloy(Vue, cabloyOptions)
// 登录
Vue.prototype.$cabloy.util.login().then(res => {
// 由于 login 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (Vue.prototype.$cabloy.__loginReadyCallback) {
Vue.prototype.$cabloy.__loginReadyCallback(res);
}
}).catch(err => {
console.log(err)
})
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
- 首先要初始化一个
cabloy
实例,并保存至Vue.prototype.$cabloy,便于在所有Vue组件中引用- 其次调用
cabloy.util.login
进行登录
- cabloyOptions
名称 | 说明 |
---|---|
base.scene | 小程序场景名,默认为default |
base.locale | 前端默认使用的语言 |
api.baseURL | 后端服务的API地址 |
base.scene
:CabloyJS后端可以支持创建多个小程序,前端通过此参数设置要对接的小程序场景名,默认为default
3. API清单
插件Cabloy-SDK
主要提供了以下API组件
名称 | 说明 |
---|---|
cabloy | 根对象 |
cabloy.util | 工具函数 |
cabloy.api | 访问后端API接口 |
cabloy.data | 状态数据存储 |
cabloy.config | 配置参数 |
如何使用 - 后端
CabloyJS提供了一个模块化的生态,需要开发什么平台下的小程序应用,只需安装相应的模块即可