Westore Cloud - 隱形雲，NoBackEnd，NoSql，HiddenDB

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

開發小程式，但是：沒有後端！沒有運維！沒有 DBA！沒有功能變數名稱！沒有證書！沒有錢！沒有精力！

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

Github

https://github.com/dntzhang/westore

小程式雲開發簡介

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

雲開發為開發者提供完整的雲端支持，弱化後端和運維概念，無需搭建伺服器，使用平臺提供的 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 數據

參數

更多 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 數據到資料庫

參數

返回值

返回 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 刪除資料庫中的數據

參數

返回值

返回 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

https://github.com/dntzhang/westore

License

MIT @dntzhang