整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          Zion無代碼,數據的寫入和修改

          Zion無代碼,數據的寫入和修改


          入和修改的前提

          將數據寫入到哪里去

          寫入和修改的操作實際上都是對存儲數據的數據表進行操作,所以在寫入和修改之前,你得先已經創建好了對應的數據表。

          寫入的數據從哪里來

          從輸入框輸入的內容,從相冊選擇上傳的圖片、視頻,從桌面上傳的文件(音頻、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 同時用在同一個元素上。

          一般我們在兩種常見的情況下會傾向于這樣做:

          • 為了過濾一個列表中的項目 (比如 v-for="user in users" v-if="user.isActive")。在這種情形下,請將 users 替換為一個計算屬性 (比如 activeUsers),讓其返回過濾后的列表。
          • 為了避免渲染本應該被隱藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。這種情形下,請將 v-if 移動至容器元素上 (比如 ul, ol)。

          正例:

          <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個空格

          1. vs code配置
          {
           "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
          }
          復制代碼
          
          1. vs code 插件
          • Auto Close Tag
          • Path Intellisense
          • Prettier
          • Vetur
          • vscode-icons

          讀本篇前,建議先熟悉《數據的讀取和顯示》

          寫入和修改的前提

          將數據寫入到哪里去

          寫入和修改的操作實際上都是對存儲數據的數據表進行操作,所以在寫入和修改之前,你得先已經創建好了對應的數據表。

          寫入的數據從哪里來

          從輸入框輸入的內容,從相冊選擇上傳的圖片、視頻,從桌面上傳的文件(音頻、pdf、word等),這些輸入或者上傳的內容,都可以寫入到數據庫中去。

          如何在 Zion 中獲取需要寫入的數據


          通過輸入類/選擇類組件來獲取需要寫入的數據:

          如下圖所示,通過以下組件輸入、選擇、上傳來獲取需要寫入的數據。


          在哪里找到輸入、選擇、上傳來的數據:

          進行寫入操作時,點擊【+】選擇【輸入框】/【選擇器】就能夠找到這些數據。


          Tips:

          組件重命名(十分重要!)

          通常頁面中可能會有多個輸入/選擇組件,所以在選擇需要寫入數據時會出現多個可選的組件名。

          例如上圖所示有客戶姓名的輸入框組件、聯系電話的輸入框組件,而這些組件在沒有重命名之前會叫“文字輸入1”、“文字輸入2”,我們難以準確快速的知道哪一個才是獲取客戶姓名的組件,所以需要對組件進行重命名。

          常用命名規范:內容_組件類型

          例如【文字輸入】組件的默認名稱為“文字輸入”,如果這個組件是用來獲取用戶輸入的姓名的,那么建議將組件名稱修改為“客戶姓名_文字輸入”,那么如上所示的視頻中在選擇需要寫入的輸入框數據時,就能夠正確獲取對應的數據。


          組件重命名方法:

          選中需要重命名的組件,在其右邊欄中找到“組件名稱”,在“組件名稱”下方的輸入框中輸入新的命名即可。

          寫入

          定義:所謂的寫入操作,實際上就是往數據庫中添加了一條或者多條數據。

          如下常見操作,都屬于是寫入內容的操作:

          • 發布一條內容:發文字朋友圈、發微博、向朋友發送一條微信消息、在待辦事項app中記錄一條待辦、發布一個活動、預約了一個活動、實際上都屬于向某個數據庫中寫入了一條數據。

          • 購買商品:向購物車中添加了商品、成功購買了商品、下單了一份外賣、添加了一個新的收貨地址也都數據寫入操作

          • 收藏、點贊、評論、回復這些常見的互動操作,也屬于寫入操作

          Zion 的寫入操作方式

          在 Zion 中一般是通過點擊方式或者在其它行為執行成功時觸發寫入操作的,所以寫入操作是通過給組件配置【請求|修改表數據】的行為來實現的。

          如圖所示,為確定按鈕在點擊時配置了『修改表數據 - 添加』行為,在該行為中為對應的數據列綁定從【輸入框】、【選擇器】、【當前用戶數據】等中獲取的內容。當點擊確定按鈕時,就會觸發寫入的操作,將獲取過來的這些數據寫入道數據庫中保存起來。

          能夠寫入的內容如下圖所示:

          Tips:

          鏈接數據:只有在頁面添加了鏈接數據之后,才會在寫入內容的時可以選擇使用

          頁面數據:只有在頁面添加了頁面數據之后,才會在寫入內容的時可以選擇使用

          輸入框/選擇器:只有在頁面添加了輸入類/選擇類組件之后,才會在寫入內容時可以選擇使用

          結果數據:只有在執行了寫入/更新行為成功時,才會在寫入內容時可以選擇使用

          以上數據的具體解釋與應用,可以到【數據專講】模塊下查看


          修改

          更新和刪除操作可以被統稱為修改操作。

          更新

          定義:將數據表中本身就存在的數據進行的變更的行為,我們稱之為更新。

          如下常見操作都屬于是更新操作:

          • 更新個人信息:更換新的頭像、用戶名、手機號、收貨地址、密碼等等,將原來數據表中就存在的數據變更為新的數據,這樣的操作叫做更新

          • 更新消費記錄:使用信用卡消費后,會增加信用卡積分,積分的增加、減少,也是在原有的積分數據上進行變更,也屬于更新行為

          刪除

          【真】刪除

          定義:將數據表中原本就存在的數據刪除的行為,執行了【真】刪除操作后,該條數據就消失了。

          【假】刪除

          定義:只是修改了數據的『狀態』,讓其不再顯示或者發揮作用,但數據本身仍然存在于數據表中(實際上是更新)。

          舉個例子:

          場景:商品首頁展示的是全部已上線的商品,未上線或者已下線的商品不在商品首頁進行展示

          為了實現這樣的效果,我們不需要將未上線的或者已下線的商品刪除,而是只需要給商品的數據增加一個『狀態』,已上線未上線以及已下線就叫做商品的『狀態』。在首頁展示商品時,滿足“已上線”這個狀態的的商品才會被展示出來。


          如下的常見操作都屬于是刪除操作:

          • 刪除訂單記錄

          • 刪除購物車中的商品

          • 取消關注、點贊

          • 取消某個活動的預約

          Tips:

          在數據操作時,為了防止數據不小心被【真】刪除,造成不可挽回的后果,所以一般建議通過【假】刪除來對數據進行“刪除”操作,實現刪除數據的效果。

          Zion 的修改操作方式

          在 Zion 中一般也是通過點擊來觸發修改操作的。

          更新數據

          如圖所示,為更新按鈕在點擊時配置了『修改表數據 - 更新』行為,在該行為中為對應的數據列綁定要更新的內容,當點擊確定按鈕時,就會觸發更新的操作。

          Tips:

          值得注意的是,更新數據時,一定要添加過濾條件,明確要更新的是哪一條數據,否則所有的數據都會被更新。

          刪除數據

          如圖所示,為刪除按鈕在點擊時配置了『修改表數據 - 刪除』行為,該行為默認需要配置過濾條件,明確要刪除的是哪一條數據,如果選擇無過濾條件,點擊刪除按鈕時,會刪除所選數據表的所有數據!!

          以上內容的具體內容以及應用,可以到【行為專講】模塊下找到【請求|修改表數據】查看


          批量寫入和修改操作

          定義:同時向一個數據表或者多個數據表進行寫入/修改多條數據的操作。

          如下常見操作,都屬于是批量修改操作:

          • 發朋友圈時選擇了多張圖片發布

          • 購物車結算時,選擇了多個商品進行結算,生成了多個訂單

          • 多選操作后,同時向數據表插入選擇的多個選項

          Zion 的批量操作方式

          向某張表寫入多條數據

          Zion 一般是通過點擊觸發寫入操作的,如果想要寫入多條數據,在配置『修改表數據 - 添加』行為之后,打開【批量修改】按鈕,選擇批量寫入的數據源,綁定需要寫入的數據內容,即可完成向某張表寫入多條數據的操作。

          具體配置操作如下:

          此處為語雀視頻卡片,點擊鏈接查看:ScreenFlow.mp4

          更新/刪除某張表的多條數據

          Zion 的更新/刪除行為實際上就是一個批量操作,只要在配置『修改表數據 - 更新/刪除』時,配置了過濾條件,那么符合條件的數據都會被更新/刪除。

          例如下圖中,配置了更新/刪除愛好的行為,執行該行為后,那么只要是屬于當前用戶的愛好數據都會被更新/刪除

          同時對多張表進行寫入或者修改操作

          在 Zion 中,同時對多張數據表的操作行為被稱作『批量修改』,你可以在行為中找到『批量修改』行為,在該行為中添加多個寫入或者修改行為,從而完成同時對多張表進行寫入或者修改的操作。

          以上內容的具體內容以及應用,可以到【行為專講】模塊下找到【請求|批量修改】查看


          如何校驗獲取到的數據

          在寫入/更新數據時,如果想要在寫入/更新數據之前對獲取到的數據進行校驗,那么可以在綁定數據時配置數據驗證的規則。


          在 Zion 中配置數據校驗的方式:

          在配置寫入/更新的行為時,點擊數據旁的【三個點】按鈕,會出現【添加驗證】的按鈕,即可配置數據校驗規則。


          常見的數據校驗規則有:

          • 判斷輸入的內容是否為空或者非空

            • 當你配置了輸入姓名的輸入框,要求必須填入姓名時,可以配置輸入框非空校驗來驗證用戶已經輸入了姓名

          • 判斷輸入的內容是否符合郵箱的規則

            • 當你配置了輸入郵箱的輸入框,可以配置郵箱校驗來驗證郵箱是否符合規則

          • 判斷輸入的內容是否符合電話號碼的規則

            • 當你配置了輸入電話的輸入框,可以配置電話號碼校驗來驗證電話號碼是否符合規則

          • 判斷輸入的內容是否符合內容審核標準(無非法內容)

            • 當你配置了輸入內容的輸入框或者是圖片選擇器時,可以配置內容審核校驗來驗證內容是否違規

          • 判斷輸入的內容是否符合自定義正則表達式規則

            • 當你配置輸入框要求用戶輸入的內容要符合你自定義的規則時(比如用戶名必須包含大寫字母),可以配置相應的正則表達式進行校驗


          數據驗證內容詳見行為專講【請求|修改表數據】


          結果數據的概念與應用

          結果數據的定義:在執行了寫入或者更新操作之后,剛寫入的數據或者剛更新的數據被稱為“結果數據”。

          應用:在配置寫入或者更新操作時,在其成功執行后,可以通過“結果數據”取到剛剛寫入或者更新的數據,從而來進行其它的操作。


          主站蜘蛛池模板: 国产精品合集一区二区三区| 肉色超薄丝袜脚交一区二区| 在线一区二区三区| 亚洲综合色一区二区三区小说| 国产精品视频第一区二区三区| 人妻久久久一区二区三区| 精品一区二区视频在线观看| 成人区人妻精品一区二区三区| 精品中文字幕一区在线| 中文字幕一区二区三区免费视频| 蜜臀Av午夜一区二区三区| 亚洲熟妇无码一区二区三区导航 | 成人免费视频一区二区三区| 爱爱帝国亚洲一区二区三区| 国产福利电影一区二区三区久久久久成人精品综合 | 国产成人精品一区二三区| 一区二区三区在线免费观看视频 | 麻豆AV一区二区三区| 亚洲欧美日韩一区二区三区在线| 无码精品前田一区二区| 亚洲成AV人片一区二区| 国产成人精品一区二区A片带套 | 色国产精品一区在线观看| 日本韩国一区二区三区| 制服丝袜一区二区三区| 欧美日本精品一区二区三区| 中文字幕日韩人妻不卡一区| 国产精品一区在线麻豆 | 亚洲不卡av不卡一区二区| 极品少妇一区二区三区四区| 一区二区三区影院| 亚洲爆乳精品无码一区二区| 国产在线精品一区二区三区直播 | 国产精品免费视频一区| 国产精品丝袜一区二区三区| 日本精品一区二区三区在线视频一| 一区二区三区视频在线观看| 亚洲AⅤ视频一区二区三区| 国产精品一级香蕉一区| 国产在线精品一区二区不卡| 鲁大师成人一区二区三区|