【開源】Westore Cloud 發布- 沒后端沒SQL沒DBA，只需 javascript 開發雲端小程序

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 數據

參數

名稱	是否可選	類型	描述
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

https://github.com/dntzhang/westore

License

MIT @dntzhang