【开源】Westore Cloud 发布- 没后端没SQL没DBA,只需 javascript 开发云端小程序
westore cloud - 隐形云,nobackend,nosql,hiddendb
好的设计便是感觉不到设计的存在
开发小程序,但是:没有后端!没有运维!没有 dba!没有域名!没有证书!没有钱!没有精力!
没关系,会 javascript 就可以,westore cloud 带你起飞~~
github
小程序云开发简介
开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。
云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 api 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。
目前提供三大基础能力支持:
- 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码
- 数据库:一个既可在小程序前端操作,也能在云函数中读写的 json 数据库
- 存储:在小程序前端直接上传/下载云端文件,在云开发控制台可视化管理
关于小程序云更多信息的官方文档可以
westore cloud 简介
westore cloud 在基于小程序云的数据库能力,让开发者感知不到数据库的存在(隐形云),只需要专注于本地数据、本地数据逻辑和本地数据的流动,通过简单的 pull、push、add 和 remove 同步本地数据和云数据库。数据库相关的官方文档可以。架构图如下所示:
典型的 data first 架构设计,中小型项目可以去掉 models 和 adapter 两大模块。可以与 model first 的架构对比:
model first 的架构里,如果不需要持久化存储,可以去掉 database,只剩下 models。models 与渲染无关,专注于模型的抽象与模型之间的逻辑,具体是渲染到 web、安卓、ios 还是 flash 或者 wpf 统统不属于 models 需要操心的问提。
westore cloud 特性
- 小程序直连数据库
- 数据库数据项函数扩展
- 极简的 api 设计 (pull push add remove)
- 只需要一种编程语言(javascript)编写前端、后端、mongodb
- 开发者只需专注数据和数据的逻辑(即store),隐形的数据库同步功能
- 无延迟的设计(先更新本地刷新视图、再sync db、最后 diff 本地更新视图)
快速入门
新建集合
定义映射 store
安装上面建立的集合名称一一对应建立好 store 的 data:
export default { data: { //user 对应 db 的 collectionname 'user': [], //其他 collection 可以继续添加 'product': [] }, env:'test-06eb2e' }
上面的 env 对应云控制台的环境 id:
新增测试数据
通过 add 方法往集合 user 添加数据:
this.store.add('user', { name: 'dntzhang', city: '深圳', age: 22, gender: 1 }).then((res) => { })
通过 add 方法往集合 product 添加数据:
this.store.add('product', { address: { province:'广东省', city:'深圳市', }, agent: [ '微信支付', '微信搜一搜', '微信读书'] })
扩展数据库每项方法
export default { data: { 'user':[], 'product': [] }, methods:{ //这里可以扩展 collection 每一项的方法 'product':{ 'agentstring':function(){ //this.agent 对应 product 集合的 agent字段 return this.agent.join('-') } } }, env:'test-06eb2e' }
通过上面的扩展方法,在遍历 product 表的每一项时,可以直接使用 agentstring 属性绑定到视图,比如展示本地第一条数据的 agentstring:
<view>{{product[0].agentstring}}</view>
拉取数据
this.store.pull('user').then(res => { this.store.data.user = res.data this.update() })
绑定数据到视图
<view class="container"> <view class="title" >用户信息</view> <view>姓名:{{user[0].name}}</view> <view>年龄:{{user[0].age}}</view> <view>城市:{{user[0].city}}</view> <view>性别:{{user[0].gender===1?'男':'女'}}</view> <view class="title" >产品(测试深层属性绑定和更新)</view> <view>省:{{product[0].address.province}}</view> <view>市:{{product[0].address.city}}</view> <view>代理商:{{product[0].agentstring}}</view> <view class='split'></view> <user-list></user-list> <view> <button ontap="adduser">新增 user</button> </view> </view>
修改数据
this.store.data.user[0].name = 'dntzhang' + math.floor(math.random() * 100) this.store.push().then((res) => { console.log('成功更新云数据库') })
push
方法等于 update local + update cloud。所以不仅本地视图会刷新,云数据库也会同步更新,更新回调在 then 里执行。
支持精准更新深层的嵌套属性,如:
this.store.data.product[0].address.city = '广州市' this.store.data.product[0].agent[0] = '微信' this.store.data.product[0].agent[1] = 'qq' this.store.data.product[0].agent[2] = '腾讯云' this.store.push()
更新后:
删除数据
const item = this.store.data.user.splice(index, 1)[0] this.update() //更新本地数据和视图 this.store.remove('user', item._id) //同步到云数据库
新增数据
const user = { name: 'new user' + this.store.data.user.length, age: 1, city: '江西', gender: 2 } this.store.data.user.push(user) //优先更新本地视图 this.update() //增加到云数据库 this.store.add('user', user)
如果新增的条数据后续需要修改且同步到云数据库需要设置 _id,即最后一行代码改成:
this.store.add('user', user).then((res) => { //设置_id,方便后续修改进行 push user._id = res._id this.update() })
增加改查完整的 demo 可以。
api
this.store.pull(collectionname, [where])
拉取云数据库集合的 json 数据
参数
名称 | 是否可选 | 类型 | 描述 |
---|---|---|---|
collectionname | 必须 | 字符串 | 集合名称 |
where | 不必须 | json object | 查询条件,如查询18岁 {age : 18} |
更多 where 的构建查询条件的 api 可以。
返回值
返回 promise 对象的实例。
实例
查询 18 岁的用户:
this.store.pull('user', {age: 18}).then(res => { this.store.data.user = res.data this.update() })
this.store.push()
同步本地 json 到云数据库
返回值
返回 promise 对象的实例。
示例
this.store.data.user[0].name = 'dntzhang' this.store.data.product[0].address.city = '广州市' this.store.data.product[0].agent[1] = 'qq' this.store.data.product[0].agent[2] = '腾讯云' this.store.push().then((res) => { console.log('同步数据完成!') })
this.store.add(collectionname, data)
添加 json 数据到数据库
参数
名称 | 是否可选 | 类型 | 描述 |
---|---|---|---|
collectionname | 必须 | 字符串 | 集合名称 |
data | 必须 | json object | 添加到数据库的数据项 |
返回值
返回 promise 对象的实例。
示例
const user = { name: 'new user' + this.store.data.user.length, age: 1, city: '江西', gender: 2 } this.store.data.user.push(user) this.update() this.store.add('user', user).then((res) => { //设置_id user._id = res._id this.update() })
this.store.remove(collectionname, id)
根据 id 删除数据库中的数据
参数
名称 | 是否可选 | 类型 | 描述 |
---|---|---|---|
collectionname | 必须 | 字符串 | 集合名称 |
id | 必须 | 字符串 | 对应数据库中自动生成的 _id 字段 |
返回值
返回 promise 对象的实例。
示例
const item = this.store.data.user.splice(index, 1)[0] this.update() this.store.remove('user', item._id)
原理
json diff result 转为数据库更新请求
difftopushobj({ 'user[2].name': { cc: 1 }, 'user[2].age': 13, 'user[1].a.b': { xxx: 1 } })
返回:
{ 'user-2': { 'name': { 'cc': 1 }, 'age': 13 }, 'user-1': { 'a': { 'b': { 'xxx': 1 } } } }
其中,'user-2'.split('-') 之后可以得到db的集合名user,数字 2 代表本地数据第三条。
star & fork
license
mit
上一篇: C++题解:奇怪的分式
下一篇: 济南适合情侣游玩的地方大全