將數據寫入到哪里去
寫入和修改的操作實際上都是對存儲數據的數據表進行操作,所以在寫入和修改之前,你得先已經創建好了對應的數據表。
寫入的數據從哪里來
從輸入框輸入的內容,從相冊選擇上傳的圖片、視頻,從桌面上傳的文件(音頻、pdf、word等),這些輸入或者上傳的內容,都可以寫入到數據庫中去。
如何在 Zion 中獲取需要寫入的數據
通過輸入類/選擇類組件來獲取需要寫入的數據:
如下圖所示,通過以下組件輸入、選擇、上傳來獲取需要寫入的數據。
在哪里找到輸入、選擇、上傳來的數據:
進行寫入操作時,點擊【+】選擇【輸入框】/【選擇器】就能夠找到這些數據。
Tips:
組件重命名(十分重要!)
通常頁面中可能會有多個輸入/選擇組件,所以在選擇需要寫入數據時會出現多個可選的組件名。
例如上圖所示有客戶姓名的輸入框組件、聯系電話的輸入框組件,而這些組件在沒有重命名之前會叫“文字輸入1”、“文字輸入2”,我們難以準確快速的知道哪一個才是獲取客戶姓名的組件,所以需要對組件進行重命名。
常用命名規范:內容_組件類型
例如【文字輸入】組件的默認名稱為“文字輸入”,如果這個組件是用來獲取用戶輸入的姓名的,那么建議將組件名稱修改為“客戶姓名_文字輸入”,那么如上所示的視頻中在選擇需要寫入的輸入框數據時,就能夠正確獲取對應的數據。
組件重命名方法:
選中需要重命名的組件,在其右邊欄中找到“組件名稱”,在“組件名稱”下方的輸入框中輸入新的命名即可。
定義:所謂的寫入操作,實際上就是往數據庫中添加了一條或者多條數據。
如下常見操作,都屬于是寫入內容的操作:
發布一條內容:發文字朋友圈、發微博、向朋友發送一條微信消息、在待辦事項app中記錄一條待辦、發布一個活動、預約了一個活動、實際上都屬于向某個數據庫中寫入了一條數據。
購買商品:向購物車中添加了商品、成功購買了商品、下單了一份外賣、添加了一個新的收貨地址也都數據寫入操作
收藏、點贊、評論、回復這些常見的互動操作,也屬于寫入操作
Zion 的寫入操作方式
在 Zion 中一般是通過點擊方式或者在其它行為執行成功時觸發寫入操作的,所以寫入操作是通過給組件配置【請求|修改表數據】的行為來實現的。
如圖所示,為確定按鈕在點擊時配置了『修改表數據 - 添加』行為,在該行為中為對應的數據列綁定從【輸入框】、【選擇器】、【當前用戶數據】等中獲取的內容。當點擊確定按鈕時,就會觸發寫入的操作,將獲取過來的這些數據寫入道數據庫中保存起來。
能夠寫入的內容如下圖所示:
Tips:
鏈接數據:只有在頁面添加了鏈接數據之后,才會在寫入內容的時可以選擇使用
頁面數據:只有在頁面添加了頁面數據之后,才會在寫入內容的時可以選擇使用
輸入框/選擇器:只有在頁面添加了輸入類/選擇類組件之后,才會在寫入內容時可以選擇使用
結果數據:只有在執行了寫入/更新行為成功時,才會在寫入內容時可以選擇使用
以上數據的具體解釋與應用,可以到【數據專講】模塊下查看
更新和刪除操作可以被統稱為修改操作。
更新
定義:將數據表中本身就存在的數據進行的變更的行為,我們稱之為更新。
如下常見操作都屬于是更新操作:
更新個人信息:更換新的頭像、用戶名、手機號、收貨地址、密碼等等,將原來數據表中就存在的數據變更為新的數據,這樣的操作叫做更新
更新消費記錄:使用信用卡消費后,會增加信用卡積分,積分的增加、減少,也是在原有的積分數據上進行變更,也屬于更新行為
刪除
【真】刪除
定義:將數據表中原本就存在的數據刪除的行為,執行了【真】刪除操作后,該條數據就消失了。
【假】刪除
定義:只是修改了數據的『狀態』,讓其不再顯示或者發揮作用,但數據本身仍然存在于數據表中(實際上是更新)。
舉個例子:
場景:商品首頁展示的是全部已上線的商品,未上線或者已下線的商品不在商品首頁進行展示
為了實現這樣的效果,我們不需要將未上線的或者已下線的商品刪除,而是只需要給商品的數據增加一個『狀態』,已上線、未上線以及已下線就叫做商品的『狀態』。在首頁展示商品時,滿足“已上線”這個狀態的的商品才會被展示出來。
如下的常見操作都屬于是刪除操作:
刪除訂單記錄
刪除購物車中的商品
取消關注、點贊
取消某個活動的預約
Tips:
在數據操作時,為了防止數據不小心被【真】刪除,造成不可挽回的后果,所以一般建議通過【假】刪除來對數據進行“刪除”操作,實現刪除數據的效果。
Zion 的修改操作方式
在 Zion 中一般也是通過點擊來觸發修改操作的。
更新數據
如圖所示,為更新按鈕在點擊時配置了『修改表數據 - 更新』行為,在該行為中為對應的數據列綁定要更新的內容,當點擊確定按鈕時,就會觸發更新的操作。
Tips:
值得注意的是,更新數據時,一定要添加過濾條件,明確要更新的是哪一條數據,否則所有的數據都會被更新。
刪除數據
如圖所示,為刪除按鈕在點擊時配置了『修改表數據 - 刪除』行為,該行為默認需要配置過濾條件,明確要刪除的是哪一條數據,如果選擇無過濾條件,點擊刪除按鈕時,會刪除所選數據表的所有數據!!
以上內容的具體內容以及應用,可以到【行為專講】模塊下找到【請求|修改表數據】查看
定義:同時向一個數據表或者多個數據表進行寫入/修改多條數據的操作。
如下常見操作,都屬于是批量修改操作:
發朋友圈時選擇了多張圖片發布
購物車結算時,選擇了多個商品進行結算,生成了多個訂單
多選操作后,同時向數據表插入選擇的多個選項
Zion 的批量操作方式
向某張表寫入多條數據
Zion 一般是通過點擊觸發寫入操作的,如果想要寫入多條數據,在配置『修改表數據 - 添加』行為之后,打開【批量修改】按鈕,選擇批量寫入的數據源,綁定需要寫入的數據內容,即可完成向某張表寫入多條數據的操作。
具體配置操作如下:
此處為語雀視頻卡片,點擊鏈接查看:ScreenFlow.mp4
更新/刪除某張表的多條數據
Zion 的更新/刪除行為實際上就是一個批量操作,只要在配置『修改表數據 - 更新/刪除』時,配置了過濾條件,那么符合條件的數據都會被更新/刪除。
例如下圖中,配置了更新/刪除愛好的行為,執行該行為后,那么只要是屬于當前用戶的愛好數據都會被更新/刪除
同時對多張表進行寫入或者修改操作
在 Zion 中,同時對多張數據表的操作行為被稱作『批量修改』,你可以在行為中找到『批量修改』行為,在該行為中添加多個寫入或者修改行為,從而完成同時對多張表進行寫入或者修改的操作。
以上內容的具體內容以及應用,可以到【行為專講】模塊下找到【請求|批量修改】查看
在寫入/更新數據時,如果想要在寫入/更新數據之前對獲取到的數據進行校驗,那么可以在綁定數據時配置數據驗證的規則。
在 Zion 中配置數據校驗的方式:
在配置寫入/更新的行為時,點擊數據旁的【三個點】按鈕,會出現【添加驗證】的按鈕,即可配置數據校驗規則。
常見的數據校驗規則有:
判斷輸入的內容是否為空或者非空
當你配置了輸入姓名的輸入框,要求必須填入姓名時,可以配置輸入框非空校驗來驗證用戶已經輸入了姓名
判斷輸入的內容是否符合郵箱的規則
當你配置了輸入郵箱的輸入框,可以配置郵箱校驗來驗證郵箱是否符合規則
判斷輸入的內容是否符合電話號碼的規則
當你配置了輸入電話的輸入框,可以配置電話號碼校驗來驗證電話號碼是否符合規則
判斷輸入的內容是否符合內容審核標準(無非法內容)
當你配置了輸入內容的輸入框或者是圖片選擇器時,可以配置內容審核校驗來驗證內容是否違規
判斷輸入的內容是否符合自定義正則表達式規則
當你配置輸入框要求用戶輸入的內容要符合你自定義的規則時(比如用戶名必須包含大寫字母),可以配置相應的正則表達式進行校驗
數據驗證內容詳見行為專講【請求|修改表數據】
結果數據的定義:在執行了寫入或者更新操作之后,剛寫入的數據或者剛更新的數據被稱為“結果數據”。
應用:在配置寫入或者更新操作時,在其成功執行后,可以通過“結果數據”取到剛剛寫入或者更新的數據,從而來進行其它的操作。
于Vue官方風格指南整理
一、強制
1. 組件名為多個單詞
組件名應該始終是多個單詞的,根組件 App 除外。
正例:
export default { name: 'TodoItem', // ... } 復制代碼
反例:
export default { name: 'Todo', // ... } 復制代碼
2. 組件數據
組件的 data 必須是一個函數。
當在組件中使用 data 屬性的時候 (除了 new Vue 外的任何地方),它的值必須是返回一個對象的函數。
正例:
// In a .vue file export default { data () { return { foo: 'bar' } } } // 在一個 Vue 的根實例上直接使用對象是可以的, // 因為只存在一個這樣的實例。 new Vue({ data: { foo: 'bar' } }) 復制代碼
反例:
export default { data: { foo: 'bar' } } 復制代碼
3. Prop定義
Prop 定義應該盡量詳細。
在你提交的代碼中,prop 的定義應該盡量詳細,至少需要指定其類型。
正例:
props: { status: String } // 更好的做法! props: { status: { type: String, required: true, validator: function (value) { return [ 'syncing', 'synced', 'version-conflict', 'error' ].indexOf(value) !==-1 } } } 復制代碼
反例:
// 這樣做只有開發原型系統時可以接受 props: ['status'] 復制代碼
4. 為v-for設置鍵值
總是用 key 配合 v-for。
在組件上_總是_必須用 key 配合 v-for,以便維護內部組件及其子樹的狀態。甚至在元素上維護可預測的行為,比如動畫中的對象固化 (object constancy),也是一種好的做法。
正例:
<ul> <li v-for="todo in todos" :key="todo.id" > {{ todo.text }} </li> </ul> 復制代碼
反例:
<ul> <li v-for="todo in todos"> {{ todo.text }} </li> </ul> 復制代碼
5.避免 v-if 和 v-for 用在一起
永遠不要把 v-if 和 v-for 同時用在同一個元素上。
一般我們在兩種常見的情況下會傾向于這樣做:
正例:
<ul v-if="shouldShowUsers"> <li v-for="user in users" :key="user.id" > {{ user.name }} </li> </ul> 復制代碼
反例:
<ul> <li v-for="user in users" v-if="shouldShowUsers" :key="user.id" > {{ user.name }} </li> </ul> 復制代碼
6. 為組件樣式設置作用域
對于應用來說,頂級 App 組件和布局組件中的樣式可以是全局的,但是其它所有組件都應該是有作用域的。
這條規則只和單文件組件有關。你不一定要使用 scoped 特性。設置作用域也可以通過 CSS Modules,那是一個基于 class 的類似 BEM 的策略,當然你也可以使用其它的庫或約定。
不管怎樣,對于組件庫,我們應該更傾向于選用基于 class 的策略而不是 scoped 特性。
這讓覆寫內部樣式更容易:使用了常人可理解的 class 名稱且沒有太高的選擇器優先級,而且不太會導致沖突。
正例:
<template> <button class="c-Button c-Button--close">X</button> </template> <!-- 使用 BEM 約定 --> <style> .c-Button { border: none; border-radius: 2px; } .c-Button--close { background-color: red; } </style> 復制代碼
反例:
<template> <button class="btn btn-close">X</button> </template> <style> .btn-close { background-color: red; } </style> <template> <button class="button button-close">X</button> </template> <!-- 使用 `scoped` 特性 --> <style scoped> .button { border: none; border-radius: 2px; } .button-close { background-color: red; } </style> 復制代碼
二、強烈推薦(增強可讀性)
1. 組件文件
只要有能夠拼接文件的構建系統,就把每個組件單獨分成文件。
當你需要編輯一個組件或查閱一個組件的用法時,可以更快速的找到它。
正例:
components/ |- TodoList.vue |- TodoItem.vue 復制代碼
反例:
Vue.component('TodoList', { // ... }) Vue.component('TodoItem', { // ... }) 復制代碼
2. 單文件組件文件的大小寫
單文件組件的文件名應該要么始終是單詞大寫開頭 (PascalCase)
正例:
components/ |- MyComponent.vue 復制代碼
反例:
components/ |- myComponent.vue |- mycomponent.vue 復制代碼
3. 基礎組件名
應用特定樣式和約定的基礎組件 (也就是展示類的、無邏輯的或無狀態的組件) 應該全部以一個特定的前綴開頭,比如 Base、App 或 V。
正例:
components/ |- BaseButton.vue |- BaseTable.vue |- BaseIcon.vue 復制代碼
反例:
components/ |- MyButton.vue |- VueTable.vue |- Icon.vue 復制代碼
4. 單例組件名
只應該擁有單個活躍實例的組件應該以 The 前綴命名,以示其唯一性。
這不意味著組件只可用于一個單頁面,而是每個頁面只使用一次。這些組件永遠不接受任何 prop,因為它們是為你的應用定制的,而不是它們在你的應用中的上下文。如果你發現有必要添加 prop,那就表明這實際上是一個可復用的組件,只是目前在每個頁面里只使用一次。
正例:
components/ |- TheHeading.vue |- TheSidebar.vue 復制代碼
反例:
components/ |- Heading.vue |- MySidebar.vue 復制代碼
5. 緊密耦合的組件名
和父組件緊密耦合的子組件應該以父組件名作為前綴命名。
如果一個組件只在某個父組件的場景下有意義,這層關系應該體現在其名字上。因為編輯器通常會按字母順序組織文件,所以這樣做可以把相關聯的文件排在一起。
正例:
components/ |- TodoList.vue |- TodoListItem.vue |- TodoListItemButton.vue components/ |- SearchSidebar.vue |- SearchSidebarNavigation.vue 復制代碼
反例:
components/ |- SearchSidebar.vue |- NavigationForSearchSidebar.vue 復制代碼
6. 組件名中的單詞順序
組件名應該以高級別的 (通常是一般化描述的) 單詞開頭,以描述性的修飾詞結尾。
正例:
components/ |- SearchButtonClear.vue |- SearchButtonRun.vue |- SearchInputQuery.vue |- SearchInputExcludeGlob.vue |- SettingsCheckboxTerms.vue |- SettingsCheckboxLaunchOnStartup.vue 復制代碼
反例:
components/ |- ClearSearchButton.vue |- ExcludeFromSearchInput.vue |- LaunchOnStartupCheckbox.vue |- RunSearchButton.vue |- SearchInput.vue |- TermsCheckbox.vue 復制代碼
7. 模板中的組件名大小寫
總是 PascalCase 的
正例:
<!-- 在單文件組件和字符串模板中 --> <MyComponent/> 復制代碼
反例:
<!-- 在單文件組件和字符串模板中 --> <mycomponent/> <!-- 在單文件組件和字符串模板中 --> <myComponent/> 復制代碼
8. 完整單詞的組件名
組件名應該傾向于完整單詞而不是縮寫。
正例:
components/ |- StudentDashboardSettings.vue |- UserProfileOptions.vue 復制代碼
反例:
components/ |- SdSettings.vue |- UProfOpts.vue 復制代碼
9. 多個特性的元素
多個特性的元素應該分多行撰寫,每個特性一行。
正例:
<img src="http://m.jungjaehyung.com/uploadfile/2024/1012/20241012081107515.png" alt="Vue Logo" > <MyComponent foo="a" bar="b" baz="c" /> 復制代碼
反例:
<img src="http://m.jungjaehyung.com/uploadfile/2024/1012/20241012081107515.png" alt="Vue Logo"> <MyComponent foo="a" bar="b" baz="c"/> 復制代碼
10. 模板中簡單的表達式
組件模板應該只包含簡單的表達式,復雜的表達式則應該重構為計算屬性或方法。
復雜表達式會讓你的模板變得不那么聲明式。我們應該盡量描述應該出現的是什么,而非如何計算那個值。而且計算屬性和方法使得代碼可以重用。
正例:
<!-- 在模板中 --> {{ normalizedFullName }} // 復雜表達式已經移入一個計算屬性 computed: { normalizedFullName: function () { return this.fullName.split(' ').map(function (word) { return word[0].toUpperCase() + word.slice(1) }).join(' ') } } 復制代碼
反例:
{{ fullName.split(' ').map(function (word) { return word[0].toUpperCase() + word.slice(1) }).join(' ') }} 復制代碼
11. 簡單的計算屬性
正例:
computed: { basePrice: function () { return this.manufactureCost / (1 - this.profitMargin) }, discount: function () { return this.basePrice * (this.discountPercent || 0) }, finalPrice: function () { return this.basePrice - this.discount } } 復制代碼
反例:
computed: { price: function () { var basePrice=this.manufactureCost / (1 - this.profitMargin) return ( basePrice - basePrice * (this.discountPercent || 0) ) } } 復制代碼
12. 帶引號的特性值
非空 HTML 特性值應該始終帶引號 (單引號或雙引號,選你 JS 里不用的那個)。
在 HTML 中不帶空格的特性值是可以沒有引號的,但這樣做常常導致帶空格的特征值被回避,導致其可讀性變差。
正例:
<AppSidebar :style="{ width: sidebarWidth + 'px' }"> 復制代碼
反例:
<AppSidebar :style={width:sidebarWidth+'px'}> 復制代碼
13. 指令縮寫
都用指令縮寫 (用 : 表示 v-bind: 和用 @ 表示 v-on:)
正例:
<input @input="onInput" @focus="onFocus" > 復制代碼
反例:
<input v-bind:value="newTodoText" :placeholder="newTodoInstructions" > 復制代碼
三、推薦
1. 單文件組件的頂級元素的順序
單文件組件應該總是讓<script>、<template> 和 <style> 標簽的順序保持一致。且 <style> 要放在最后,因為另外兩個標簽至少要有一個。
正例:
<!-- ComponentA.vue --> <template>...</template> <script>/* ... */</script> <style>/* ... */</style> 復制代碼
四、謹慎使用 (有潛在危險的模式)
1. 沒有在 v-if/v-if-else/v-else 中使用 key
如果一組 v-if + v-else 的元素類型相同,最好使用 key (比如兩個 <div> 元素)。
正例:
<div v-if="error" key="search-status" > 錯誤:{{ error }} </div> <div v-else key="search-results" > {{ results }} </div> 復制代碼
反例:
<div v-if="error"> 錯誤:{{ error }} </div> <div v-else> {{ results }} </div> 復制代碼
2. scoped 中的元素選擇器
元素選擇器應該避免在 scoped 中出現。
在 scoped 樣式中,類選擇器比元素選擇器更好,因為大量使用元素選擇器是很慢的。
正例:
<template> <button class="btn btn-close">X</button> </template> <style scoped> .btn-close { background-color: red; } </style> 復制代碼
反例:
<template> <button>X</button> </template> <style scoped> button { background-color: red; } </style> 復制代碼
3. 隱性的父子組件通信
應該優先通過 prop 和事件進行父子組件之間的通信,而不是 this.$parent 或改變 prop。
正例:
Vue.component('TodoItem', { props: { todo: { type: Object, required: true } }, template: ` <input :value="todo.text" @input="$emit('input', $event.target.value)" > ` }) 復制代碼
反例:
Vue.component('TodoItem', { props: { todo: { type: Object, required: true } }, methods: { removeTodo () { var vm=this vm.$parent.todos=vm.$parent.todos.filter(function (todo) { return todo.id !==vm.todo.id }) } }, template: ` <span> {{ todo.text }} <button @click="removeTodo"> X </button> </span> ` }) 復制代碼
4. 非 Flux 的全局狀態管理
應該優先通過 Vuex 管理全局狀態,而不是通過 this.$root 或一個全局事件總線。
正例:
// store/modules/todos.js export default { state: { list: [] }, mutations: { REMOVE_TODO (state, todoId) { state.list=state.list.filter(todo=> todo.id !==todoId) } }, actions: { removeTodo ({ commit, state }, todo) { commit('REMOVE_TODO', todo.id) } } } <!-- TodoItem.vue --> <template> <span> {{ todo.text }} <button @click="removeTodo(todo)"> X </button> </span> </template> <script> import { mapActions } from 'vuex' export default { props: { todo: { type: Object, required: true } }, methods: mapActions(['removeTodo']) } </script> 復制代碼
反例:
// main.js new Vue({ data: { todos: [] }, created: function () { this.$on('remove-todo', this.removeTodo) }, methods: { removeTodo: function (todo) { var todoIdToRemove=todo.id this.todos=this.todos.filter(function (todo) { return todo.id !==todoIdToRemove }) } } }) 復制代碼
附錄
1. 推薦使用vs code進行前端編碼,規定Tab大小為2個空格
{ "editor.tabSize": 2, "workbench.startupEditor": "newUntitledFile", "workbench.iconTheme": "vscode-icons", // 以下為stylus配置 "stylusSupremacy.insertColons": false, // 是否插入冒號 "stylusSupremacy.insertSemicolons": false, // 是否插入分好 "stylusSupremacy.insertBraces": false, // 是否插入大括號 "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行 "stylusSupremacy.insertNewLineAroundBlocks": false, // 兩個選擇器中是否換行 "vetur.format.defaultFormatter.html": "js-beautify-html", "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", { "language": "html", "autoFix": true }, { "language": "vue", "autoFix": true }, "javascriptreact", "html", "vue" ], "eslint.options": { "plugins": ["html"] }, "prettier.singleQuote": true, "prettier.semi": false, "javascript.format.insertSpaceBeforeFunctionParenthesis": false, "vetur.format.js.InsertSpaceBeforeFunctionParenthesis": false, "vetur.format.defaultFormatter.js": "prettier", // "prettier.eslintIntegration": true } 復制代碼
讀本篇前,建議先熟悉《數據的讀取和顯示》
將數據寫入到哪里去
寫入和修改的操作實際上都是對存儲數據的數據表進行操作,所以在寫入和修改之前,你得先已經創建好了對應的數據表。
寫入的數據從哪里來
從輸入框輸入的內容,從相冊選擇上傳的圖片、視頻,從桌面上傳的文件(音頻、pdf、word等),這些輸入或者上傳的內容,都可以寫入到數據庫中去。
如何在 Zion 中獲取需要寫入的數據
通過輸入類/選擇類組件來獲取需要寫入的數據:
如下圖所示,通過以下組件輸入、選擇、上傳來獲取需要寫入的數據。
在哪里找到輸入、選擇、上傳來的數據:
進行寫入操作時,點擊【+】選擇【輸入框】/【選擇器】就能夠找到這些數據。
Tips:
組件重命名(十分重要!)
通常頁面中可能會有多個輸入/選擇組件,所以在選擇需要寫入數據時會出現多個可選的組件名。
例如上圖所示有客戶姓名的輸入框組件、聯系電話的輸入框組件,而這些組件在沒有重命名之前會叫“文字輸入1”、“文字輸入2”,我們難以準確快速的知道哪一個才是獲取客戶姓名的組件,所以需要對組件進行重命名。
常用命名規范:內容_組件類型
例如【文字輸入】組件的默認名稱為“文字輸入”,如果這個組件是用來獲取用戶輸入的姓名的,那么建議將組件名稱修改為“客戶姓名_文字輸入”,那么如上所示的視頻中在選擇需要寫入的輸入框數據時,就能夠正確獲取對應的數據。
組件重命名方法:
選中需要重命名的組件,在其右邊欄中找到“組件名稱”,在“組件名稱”下方的輸入框中輸入新的命名即可。
定義:所謂的寫入操作,實際上就是往數據庫中添加了一條或者多條數據。
如下常見操作,都屬于是寫入內容的操作:
發布一條內容:發文字朋友圈、發微博、向朋友發送一條微信消息、在待辦事項app中記錄一條待辦、發布一個活動、預約了一個活動、實際上都屬于向某個數據庫中寫入了一條數據。
購買商品:向購物車中添加了商品、成功購買了商品、下單了一份外賣、添加了一個新的收貨地址也都數據寫入操作
收藏、點贊、評論、回復這些常見的互動操作,也屬于寫入操作
Zion 的寫入操作方式
在 Zion 中一般是通過點擊方式或者在其它行為執行成功時觸發寫入操作的,所以寫入操作是通過給組件配置【請求|修改表數據】的行為來實現的。
如圖所示,為確定按鈕在點擊時配置了『修改表數據 - 添加』行為,在該行為中為對應的數據列綁定從【輸入框】、【選擇器】、【當前用戶數據】等中獲取的內容。當點擊確定按鈕時,就會觸發寫入的操作,將獲取過來的這些數據寫入道數據庫中保存起來。
能夠寫入的內容如下圖所示:
Tips:
鏈接數據:只有在頁面添加了鏈接數據之后,才會在寫入內容的時可以選擇使用
頁面數據:只有在頁面添加了頁面數據之后,才會在寫入內容的時可以選擇使用
輸入框/選擇器:只有在頁面添加了輸入類/選擇類組件之后,才會在寫入內容時可以選擇使用
結果數據:只有在執行了寫入/更新行為成功時,才會在寫入內容時可以選擇使用
以上數據的具體解釋與應用,可以到【數據專講】模塊下查看
更新和刪除操作可以被統稱為修改操作。
更新
定義:將數據表中本身就存在的數據進行的變更的行為,我們稱之為更新。
如下常見操作都屬于是更新操作:
更新個人信息:更換新的頭像、用戶名、手機號、收貨地址、密碼等等,將原來數據表中就存在的數據變更為新的數據,這樣的操作叫做更新
更新消費記錄:使用信用卡消費后,會增加信用卡積分,積分的增加、減少,也是在原有的積分數據上進行變更,也屬于更新行為
刪除
【真】刪除
定義:將數據表中原本就存在的數據刪除的行為,執行了【真】刪除操作后,該條數據就消失了。
【假】刪除
定義:只是修改了數據的『狀態』,讓其不再顯示或者發揮作用,但數據本身仍然存在于數據表中(實際上是更新)。
舉個例子:
場景:商品首頁展示的是全部已上線的商品,未上線或者已下線的商品不在商品首頁進行展示
為了實現這樣的效果,我們不需要將未上線的或者已下線的商品刪除,而是只需要給商品的數據增加一個『狀態』,已上線、未上線以及已下線就叫做商品的『狀態』。在首頁展示商品時,滿足“已上線”這個狀態的的商品才會被展示出來。
如下的常見操作都屬于是刪除操作:
刪除訂單記錄
刪除購物車中的商品
取消關注、點贊
取消某個活動的預約
Tips:
在數據操作時,為了防止數據不小心被【真】刪除,造成不可挽回的后果,所以一般建議通過【假】刪除來對數據進行“刪除”操作,實現刪除數據的效果。
Zion 的修改操作方式
在 Zion 中一般也是通過點擊來觸發修改操作的。
更新數據
如圖所示,為更新按鈕在點擊時配置了『修改表數據 - 更新』行為,在該行為中為對應的數據列綁定要更新的內容,當點擊確定按鈕時,就會觸發更新的操作。
Tips:
值得注意的是,更新數據時,一定要添加過濾條件,明確要更新的是哪一條數據,否則所有的數據都會被更新。
刪除數據
如圖所示,為刪除按鈕在點擊時配置了『修改表數據 - 刪除』行為,該行為默認需要配置過濾條件,明確要刪除的是哪一條數據,如果選擇無過濾條件,點擊刪除按鈕時,會刪除所選數據表的所有數據!!
以上內容的具體內容以及應用,可以到【行為專講】模塊下找到【請求|修改表數據】查看
定義:同時向一個數據表或者多個數據表進行寫入/修改多條數據的操作。
如下常見操作,都屬于是批量修改操作:
發朋友圈時選擇了多張圖片發布
購物車結算時,選擇了多個商品進行結算,生成了多個訂單
多選操作后,同時向數據表插入選擇的多個選項
Zion 的批量操作方式
向某張表寫入多條數據
Zion 一般是通過點擊觸發寫入操作的,如果想要寫入多條數據,在配置『修改表數據 - 添加』行為之后,打開【批量修改】按鈕,選擇批量寫入的數據源,綁定需要寫入的數據內容,即可完成向某張表寫入多條數據的操作。
具體配置操作如下:
此處為語雀視頻卡片,點擊鏈接查看:ScreenFlow.mp4
更新/刪除某張表的多條數據
Zion 的更新/刪除行為實際上就是一個批量操作,只要在配置『修改表數據 - 更新/刪除』時,配置了過濾條件,那么符合條件的數據都會被更新/刪除。
例如下圖中,配置了更新/刪除愛好的行為,執行該行為后,那么只要是屬于當前用戶的愛好數據都會被更新/刪除
同時對多張表進行寫入或者修改操作
在 Zion 中,同時對多張數據表的操作行為被稱作『批量修改』,你可以在行為中找到『批量修改』行為,在該行為中添加多個寫入或者修改行為,從而完成同時對多張表進行寫入或者修改的操作。
以上內容的具體內容以及應用,可以到【行為專講】模塊下找到【請求|批量修改】查看
在寫入/更新數據時,如果想要在寫入/更新數據之前對獲取到的數據進行校驗,那么可以在綁定數據時配置數據驗證的規則。
在 Zion 中配置數據校驗的方式:
在配置寫入/更新的行為時,點擊數據旁的【三個點】按鈕,會出現【添加驗證】的按鈕,即可配置數據校驗規則。
常見的數據校驗規則有:
判斷輸入的內容是否為空或者非空
當你配置了輸入姓名的輸入框,要求必須填入姓名時,可以配置輸入框非空校驗來驗證用戶已經輸入了姓名
判斷輸入的內容是否符合郵箱的規則
當你配置了輸入郵箱的輸入框,可以配置郵箱校驗來驗證郵箱是否符合規則
判斷輸入的內容是否符合電話號碼的規則
當你配置了輸入電話的輸入框,可以配置電話號碼校驗來驗證電話號碼是否符合規則
判斷輸入的內容是否符合內容審核標準(無非法內容)
當你配置了輸入內容的輸入框或者是圖片選擇器時,可以配置內容審核校驗來驗證內容是否違規
判斷輸入的內容是否符合自定義正則表達式規則
當你配置輸入框要求用戶輸入的內容要符合你自定義的規則時(比如用戶名必須包含大寫字母),可以配置相應的正則表達式進行校驗
數據驗證內容詳見行為專講【請求|修改表數據】
結果數據的定義:在執行了寫入或者更新操作之后,剛寫入的數據或者剛更新的數據被稱為“結果數據”。
應用:在配置寫入或者更新操作時,在其成功執行后,可以通過“結果數據”取到剛剛寫入或者更新的數據,從而來進行其它的操作。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。