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

當耐特發表於2019-03-03
Cloud後端SQLJavaScript

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

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

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

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

Github

github.com/dntzhang/we…

小程式雲開發簡介

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

雲開發為開發者提供完整的雲端支援，弱化後端和運維概念，無需搭建伺服器，使用平臺提供的 API 進行核心業務開發，即可實現快速上線和迭代，同時這一能力，同開發者已經使用的雲服務相互相容，並不互斥。

目前提供三大基礎能力支援：

  • 雲函式：在雲端執行的程式碼，微信私有協議天然鑑權，開發者只需編寫自身業務邏輯程式碼
  • 資料庫：一個既可在小程式前端操作，也能在雲函式中讀寫的 JSON 資料庫
  • 儲存：在小程式前端直接上傳/下載雲端檔案，在雲開發控制檯視覺化管理

關於小程式雲更多資訊的官方文件可以點選這裡

Westore Cloud 簡介

Westore Cloud 在基於小程式雲的資料庫能力，讓開發者感知不到資料庫的存在(隱形雲)，只需要專注於本地資料、本地資料邏輯和本地資料的流動，通過簡單的 pull、push、add 和 remove 同步本地資料和雲資料庫。資料庫相關的官方文件可以點這裡。架構圖如下所示:

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

典型的 Data First 架構設計，中小型專案可以去掉 Models 和 Adapter 兩大模組。可以與 Model first 的架構對比:

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

Model first 的架構裡，如果不需要持久化儲存，可以去掉 Database，只剩下 Models。Models 與渲染無關，專注於模型的抽象與模型之間的邏輯，具體是渲染到 Web、安卓、IOS 還是 Flash 或者 WPF 統統不屬於 Models 需要操心的問提。

Westore Cloud 特性

  • 小程式直連資料庫
  • 資料庫資料項函式擴充套件
  • 極簡的 API 設計 (pull push add remove)
  • 只需要一種程式語言(javascript)編寫前端、後端、mongodb
  • 開發者只需專注資料和資料的邏輯(即store)，隱形的資料庫同步功能
  • 無延遲的設計(先更新本地重新整理檢視、再sync db、最後 diff 本地更新檢視)

快速入門

新建集合

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

定義對映 Store

安裝上面建立的集合名稱一一對應建立好 store 的 data:

export default {
  data: {
    //user 對應 db 的 collectionName
    `user`: [],
    //其他 collection 可以繼續新增
    `product`: []
  },
  env:`test-06eb2e`
}
複製程式碼

上面的 env 對應雲控制檯的環境 ID:

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

新增測試資料

通過 add 方法往集合 user 新增資料:

this.store.add(`user`, {
  name: `dntzhang`,
  city: `深圳`,
  age: 22,
  gender: 1
}).then((res) => { })
複製程式碼
【開源】Westore Cloud 釋出- 沒後端沒SQL沒DBA，只需 javascript 開發雲端小程式

通過 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()
複製程式碼

更新後:

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

刪除資料

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

github.com/dntzhang/we…

License

MIT @dntzhang

相關文章