Westore Cloud 釋出- 沒後端沒SQL沒DBA，只需 javascript 開發雲端小程式

摘要： 好的設計便是感覺不到設計的存在 開發小程式，但是：沒有後端！沒有運維！沒有 DBA！沒有域名！沒有證書！沒有錢！沒有精力！ 沒關係，會 javascript 就可以，Westore Cloud 帶你起飛~~ Github github.com/dntzhang/we… ...

好的設計便是感覺不到設計的存在

開發小程式，但是：沒有後端！沒有運維！沒有 DBA！沒有域名！沒有證書！沒有錢！沒有精力！

沒關係，會 javascript 就可以，Westore Cloud 帶你起飛~~

Github

ofollow,noindex">github.com/dntzhang/we…

小程式雲開發簡介

開發者可以使用雲開發開發微信小程式、小遊戲，無需搭建伺服器，即可使用雲端能力。

雲開發為開發者提供完整的雲端支援，弱化後端和運維概念，無需搭建伺服器，使用平臺提供的 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 代表本地資料第三條。