玩轉 CMS2

来源:https://www.cnblogs.com/pengjiali/p/18023789
-Advertisement-
Play Games

玩轉 CMS2 上篇研究了樣式、請求、evn、mock，感覺對效率的提升沒有太明顯作用。 比如某個工作需要2天，現在1天可以幹完，這就是很大的提升。 提高效率的方法有代碼復用、模塊化、低代碼工具。 目前可以考慮從代碼復用方面下手，即使最低級的代碼複製也可以。 要快速提高效率，需要對本地項目中的一些關 ...


玩轉 CMS2

上篇研究了樣式、請求、evn、mock，感覺對效率的提升沒有太明顯作用。

比如某個工作需要2天，現在1天可以幹完，這就是很大的提升。

提高效率的方法有代碼復用、模塊化、低代碼工具。

目前可以考慮從代碼復用方面下手，即使最低級的代碼複製也可以。

要快速提高效率，需要對本地項目中的一些關鍵流程和技術比較瞭解，清楚常用功能實現思路和手段：

  1. 如何快速開發產品提出的一些常用頁面(功能)
  2. 現存有哪些可復用組件
  3. 常用佈局
  4. 本地項目常見 Bug

Tip: 移動端的後續在安排，比如：H5中常用佈局、如何快速調試H5、端內H5問題排查...

常用頁面(功能)

客戶端下載配置頁

需求：以前安卓和ios的下載頁是在h5中寫死的，現在需要將這部分改成配置（h5項目中 download.vue 中的數據來自cms 配置的 json 數據），於是需要增加一個下載頁。

技術手段：

  1. 創建 downloadPage.vue，編輯下載頁和新建下載頁，兩個路由指向同一個組件。通過 this.$route.query.id 區分編輯和新建。
    $route和$router都可以通過 this 直接獲取。

給路由傳遞參數有三種形式：params、search、state（可參考 react 這裡）。這裡使用 search 方式

  1. 新建下載頁：，在CMS系統中配置菜單就可以訪問該頁面。系統已經將動態路由這部分做成配置。

註：新增下載頁時，CMS系統中配置菜單，但頁面找不到。重新登錄也不行，最後本地重啟服務、重新登錄即可，不需要添加其他代碼，或修改許可權 —— 暫時不深究。

核心知識點
  • 最外層使用<a-card> 卡片容器，可承載文字、列表、圖片、段落，常用於後臺概覽頁面。有點像div，但提供了一些更豐富的東西。
  • 表單使用 FormModel 組件。從官網介紹來看，FormModel組件和 Form組件 一樣，但FormModel使用 v-model，感覺更新，更簡單。4.x 版本不像 1.x 提供了 FormModel和Form 兩個組件，只有一個 Form 組件，並且使用的是 v-model，沒有 1.x 中 Form 中的 v-decorator（這個東西看起來有點難）。

Tip: v-bind="formItemLayout" 用法類似 v-bind=$attrs（可參考 爺孫傳遞數據），將屬性一次性傳給組件

<a-form-model v-bind="formItemLayout">

等價於

<a-form-model 
  :labelCol="{ span: 5 }" 
  :wrapperCol="{ span: 14 }"
>

Tip：更多知識點請看下麵代碼的註釋。

核心代碼
<template>
  <a-card>
    <!-- 
      FormModel 表單 (支持 v-model 檢驗)(版本：1.5.0+)：具有數據收集、校驗和提交功能的表單，包含覆選框、單選框、輸入框、下拉選擇框等元素。
        layout - 表單佈局。水平佈局如果不配合labelCol、wrapperCol，則仍舊是垂直佈局。
        ref - 用於取得表單組件，可用於校驗
        model - 表單數據對象
        rules	- 表單驗證規則
    -->
    <a-form-model
      layout="horizontal"
      ref="ruleForm"
      :model="form"
      :rules="rules"
      v-bind="formItemLayout"
    >
      <!-- 
        prop 就是一個傳給組件（a-form-model-item）的屬性 
        官網：Form 組件提供了表單驗證的功能，只需要通過 rules 屬性傳入約定的驗證規則，並將 FormItem 的 prop 屬性設置為需校驗的欄位名即可

        如果將 prop 屬性註釋掉，點擊保存或 blur 都不會觸發
      -->
      <a-form-model-item ref="title" label="標題" prop="title">
        <a-input
          placeholder="請輸入標題"
          v-model="form.title"
          @blur="() => {
          $refs.title.onFieldBlur();
        }
          "
        >
          <!-- 
            Input 輸入框中的`首碼和尾碼`：https://1x.antdv.com/components/input-cn/#components-input-demo-prefix-and-suffix
          -->
          <span slot="addonAfter">{{ form.title.length }}/50</span>
        </a-input>
      </a-form-model-item>

      

      <a-form-model-item label="應用簡介" prop="description">
        <!-- 
          沒有一個單獨的 textarea，只有 input 
          4.x 有 maxlength 屬性，只能輸入約定的字元個數
        -->
        <a-input
          v-model="form.description"
          type="textarea"
          :autoSize="{ minRows: 4, maxRows: 9 }"
        />
        <div class="words-color">
          當前字數{{ form.description.length ?
          form.description.length : 0 }}/1000
        </div>
      </a-form-model-item>

      <!-- 通過 required 增加一個必傳的樣式 *，不知道是否有其他副作用 -->
      <a-form-model-item label="應用截圖" required>
        <a-row>
          <a-col :span="24">
            <ApplicationPhone :phones="phones"/>
          </a-col>
        </a-row>
      </a-form-model-item>

    </a-form-model>
    <fixedBar>
      <div class="options-btn">
        <!-- 氣泡確認框 -->
        <a-popconfirm title="關閉頁面將丟失已輸入內容？" @confirm="cannoe">
          <a-button class="btn">關閉</a-button>
        </a-popconfirm>
        <a-button type="primary" @click="saveform" class="btn">保存</a-button>
      </div>
    </fixedBar>
  
  </a-card>
</template>
<script>

export default {
  // name 組件屬性有作用，比如跳轉到其他頁面，回來要保持這個裝填。這裡不需要，直接去掉
  data () {
    return {
      form: {
        // 標題
        title: '',
        // 應用簡介
        description: '',
        // 應用名稱
        appName: '',
        // 安卓下載地址
        androidUrl: '',
      },

      rules: {
        title: [
          { required: true, message: '請輸入標題', trigger: 'blur' },
          { min: 1, max: 150, message: '最多輸入150個字元', trigger: 'blur' },
        ],
        iosUrl: [
          { required: true, message: '請輸入iOS下載地址', trigger: 'blur' },
          // 參考：https://github.com/yiminghe/async-validator
          { type: 'url', message: '請輸入url類型', trigger: 'blur' },
          { min: 1, max: 800, message: '最多輸入800個字元', trigger: 'blur' },
        ],
      },
      // 這個組件會通過路由跳轉至此，所以直接通過 $route 取得數據即可。就像這樣：/foo?user=1 通過 $route.query.user 取得 user 的值
      id: this.$route.query.id,
    }
  },

  computed: {
    formItemLayout () {
      return true
        ? {
          labelCol: { span: 4 },
          wrapperCol: { span: 14 },
        }
        : {};
    },
    isEdit () {
      return !!this.id
    },
   
  },
  created () {
    if (this.id) {
      this.getDataList()
    }
  },

  methods: {
    async getDataList () {
      if (res.code === 0) {
        this.form.title = res.data.title
        const json = JSON.parse(res.data.contentTxt)
        // 報錯 —— 一度懷疑不能這麼設置form 的值。其實這麼寫沒問題，出錯是 json 對象缺少 title 屬性，於是模板中就報錯了
        // this.form = {...json};
        this.form = { ...this.form, ...json }
        json.phones.forEach((item, i) => this.phones[i].imageUrl = item)
      }
    },
    cannoe () {
      this.$router.back(-1)
    },
    saveform () {
      /*
      this.$refs.ruleForm.validate(valid => {
        if (!valid) {
          console.log('驗證失敗');
          return false
        }
      });
      */
      // promise 的寫法
      this.$refs.ruleForm.validate().then(() => {
        // 應用圖標必傳驗證
        if (!this.form.logoUrl) {
          // Message 全局提示，根據ui文檔寫即可
          this.$message.error('請上傳xxx')
          return false
        }
        this._saveform()
      }).catch(error => {
        // 驗證失敗
      })
    },
    async _saveform () {
      if (this.id) {
        if (res.code === 0) {
          this.$message.success(res.msg)
          // 對於統一的編碼規範和標準化建議，推薦使用 this.$router.go(-1) 來進行路由的回退操作
          this.$router.back(-1)
        }
      } else {
        if (res.code === 0) {
          this.$message.success(res.msg)
          this.$router.back(-1)
        }
      }
    },
  }
}
</script>

page2

核心知識點
  • table 中的具名插槽使用的是 slot-scope，自 vue 2.6.0 起被廢棄。
  • a-row 屬於 Grid 柵格。支持 flex，比如垂直方向的對齊、水平方向的對齊。比原生的 flex（flex 佈局的基本概念） 簡單點
  • 將搜索中的 a-form 改成 a-form-model（筆者感覺 FormModel 更簡單），雖然不需要校驗也可以用起來。其中如果需要 Reset 功能，需要設置 prop 屬性，否則不生效。
核心代碼
<template>
  <a-card>
    <!-- 為了實現現在效果，這麼寫感覺很怪 -->
    <a-row type="flex" justify="space-between" align="middle">
      <a-col></a-col>
      <a-col>
        <router-link to="/demo/add">
          <a-button type="primary" icon="plus">添加</a-button>
        </router-link>
      </a-col>
    </a-row>
    <!-- 將搜索中的 a-form 改成 a-form-model... -->
    <a-row type="flex" justify="space-between" align="middle">
      <a-col :span="24">
        <a-form-model ref="ruleForm" layout="inline" :model="listQuery">
          <a-form-model-item prop="title">
            <a-input placeholder="關鍵詞" v-model="listQuery.title" />
          </a-form-model-item>
          <a-form-model-item prop="state">
            <a-select allowClear v-model="listQuery.state" placeholder="全部狀態" @change="stateChange">
              <a-select-option
                v-for="item in stateList"
                :key="item.id"
                :value="item.id"
              >{{item.name}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary" @click="handleQuery()">查詢</a-button>
            <a-button style="margin-left: 15px" @click="resetQueryForm()">清空</a-button>
          </a-form-model-item>
        </a-form-model>
      </a-col>
    </a-row>
    <a-table
      ...
    >
      <span slot="index" slot-scope="text, record, index">
        {{
        (listQuery.current - 1) * listQuery.size + index + 1
        }}
      </span>
      <template slot-scope="text, record" slot="state">
        <span class="statustag s1" v-if="record.state === 1">啟用</span>
        <span class="statustag s2" v-else>禁用</span>
      </template>

      <template slot="operation" slot-scope="text, record">
        <a
          href="javascript:;"
          @click="copyLink(record.xx)"
          title="複製鏈接"
        >鏈接</a>
        <a
          href="javascript:void(0);"
          @click="offlineFn(record.id)"
          v-if="record.state === 1"
        >禁用</a>
        <a href="javascript:void(0);" @click="onlineFn(record.id)" v-else >啟用</a>

        <router-link :to="'/demo/edit?id=' + record.id">編輯</router-link>
        <a-divider type="vertical" />
        <a href="javascript:void(0);" @click="logFn(record)">日誌</a>
        <a-divider type="vertical" />
        <a-popconfirm title="您確認要刪除嗎?" @confirm="() => deleteItem(record.id)">
          <a href="javascript:void(0);">刪除</a>
        </a-popconfirm>
      </template>
    </a-table>
    <!-- main.js 中引入的組件，在 components 中，有 readme.md 說明文檔。 -->
    <footer-tool-bar>
      <a-pagination
        ...
      />
    </footer-tool-bar>
  </a-card>
</template>

page3

核心代碼
<template>
  <a-card>
    <a-form :form="form" :model="queryParams" layout="inline">
      <!-- v-decorator 是 Ant Design Vue 提供的一個指令，用於表單校驗和數據綁定。 -->
      <a-form-item>
        <a-select
          v-decorator="['type']"
          allowClear
          @change="typeChange"
          placeholder="xx"
        >
          <a-select-option :value="item.value" v-for="(item, i) in typeList" :key="i">{{item.cnt}}</a-select-option>
        </a-select>
      </a-form-item>
      <!-- 
        DatePicker 組件
        v-decorator="['rangeDate']" 改成 v-model="queryParams.rangeDate"
      -->
      <a-form-item>
        <a-range-picker
          v-model="queryParams.rangeDate"
          @change="dateRangeChange"
          :format="dateFormat"
          :ranges="{ '今天': [$moment(), $moment()], '近3天': [$moment().subtract(2, 'days'), $moment()],'近一周': [$moment().subtract(6, 'days'), $moment()] }"
          style="width:260px;"
        >
          <a-icon slot="suffixIcon" type="calendar" />
        </a-range-picker>
      </a-form-item>
      <a-form-item>
          <a-input v-model="queryParams.昵稱" @change="nickNameChange" placeholder="用戶名稱" />
      </a-form-item>
     
      <a-form-item>
        <a-button type="primary" @click="handleQuery()">查詢</a-button>
      </a-form-item>
    </a-form>
    <a-tabs
      :animated="false"
    >
      <a-tab-pane v-for="tab in tabList" :key="tab.key">
        <span slot="tab">
          {{tab.value}}
          <sup>0</sup>
          <sup>{{cnt[tab['number']]}}</sup>
        </span>
      </a-tab-pane>
    </a-tabs>
    <!-- 多個 tab 對應一個table -->
    <a-table
      ...
    >
      ...
    </a-table>
    <footer-tool-bar>
      <a-pagination
        ...
      />
    </footer-tool-bar>
  </a-card>
</template>

Tip：其中的表單、表格、審核等部分可以從 index.vue 中提取出去，作為一個單獨的文件引入，就像 spug 開源項目中一樣。

防抖和節流

防抖 - 1秒內，只要有新的觸發產生，則從0開始計時。

節流 - 1秒內，只要有新的觸發產生則無效，除非之前的操作執行完。

Tip：原生input事件和change 事件觸發時機感覺有些不好理解。可參考這裡

比如在 input 中增加 lazy，可以實現防抖效果：<input v-model.lazy="msg">。當blur或回車時，msg的值就會更新。

但是 <a-input v-model.lazy="queryParams.昵稱" 失效，輸入一個字元 msg 就會同步更新。可能是 ant design vue 1.x 不支持lazy。筆者使用 lodash 實現防抖效果。請看代碼：

<script>

function debounce (func, delay) {
  return _.debounce(func, delay);
}

export default {
  created () {
    this.getDataList()

    // 提前創建一個防抖函數
    this.debouncedHandleQuery = _.debounce(() => {
      this._handleQuery();
    }, 200); // 設置延遲時間為200毫秒

  },
  methods: {
    handleQuery () {
      this.debouncedHandleQuery()
    },
    _handleQuery () {
      if (this.queryFlag) return
      this.queryParams.current = 1
      this.getDataList()
    },
  }
}

編輯按鈕的許可權

比如某頁面中的編輯按鈕，有許可權就顯示，否則隱藏。

許可權通過 this.$store.getters. 獲取，就像這樣：

/*
登錄成功後，後端返回的數據包括許可權，
"permissions": [
    "demo:cms:push", // 推送許可權
    ...
    
*/
if (this.$store.getters.permisaction.includes('demo:cms:push')) {
  this.isEditPerxx = true
}

擴展

this.$message

比如保存成功或失敗，項目中會通過 this.$message.xx，這裡是 ant design vue 框架中提供的Message 全局提示

回退操作

編輯完成，需要返回之前的頁面。

按照官方文檔的建議，推薦使用 this.$router.go(-1) 來實現路由的回退操作，因為 this.$router.back(-1) 和 this.$router.back() 實際上是 this.$router.go(-1) 的簡寫形式

Tip: this.$router.push('/') 和 this.$router.push({ path: '/' }) 等價

params 是否可以不通過 path 傳遞

params 是否可以不通過 path 傳遞？

比如項目中 path 不是/push/:id/:title，而是 /push/id/title。而編程導航卻出現如下代碼：

this.$router.push({ name: 'demo2', params: { title: record.title, id: record.id, address: record.address } })

跳轉到名為 demo2 的路由，通過 params 傳遞參數。

說這種方式刷新頁面後，就不能獲取參數了。

現存可復用組件

Tip：沒必要在這裡寫出來。

ant design pro 自帶的組件在 components 文件夾中

本地項目自己擴展的在 myComponents 文件夾中

通過vscode 搜索 @/myComponents/ 發現常用的有上傳相關組件，其他常用的粗略感覺只有不到十個。稍微知曉一下這幾個常用的組件即可。

Tip: 其中 ant design vue 中 components 中有的組件配有 readme.md，介紹該組件，這個就很好。

佈局

ant design vue 中佈局有：Grid 柵格、layout 佈局、Space 間距

其中 Grid 柵格支持flex，layout 佈局可能更適合整體佈局，Space 間距是個不錯的東西，但本地項目沒有使用起來。

Tip：這幾個UI提供的佈局，感覺可以大範圍用起來，避免在代碼中寫很多零碎的css佈局相關代碼，不好維護。

本地項目常見 Bug

輸入超過50字後無法提交

有可能一個是50，一個是100，就像這樣：

<a-input
    placeholder="請輸入標題（必填）"
    maxLength="50"
    @change="titleChange">
      <span slot="addonAfter">{{queryParams.title ? queryParams.title.length : 0}}/100</span>
</a-input>

某一級導航切換到另一個頁面，瀏覽器崩潰

原因在於後端返回5000條數據，前端一次性渲染，導致性能受阻。在該頁面進行其他操作（比如編輯、刪除）也會很慢

優化手段：後端先返回一級列表數據，點擊某個數據後再去後端請求數據

保留上一次篩選條件

搜索中輸入關鍵字 pengjiali，點擊“搜索”按鈕，在查詢出的數據中點擊編輯，編輯完該數據後點保存按鈕，然後返回到該頁面，未記住上一次搜索的信息 —— 也就是 pengjiali 沒有了。

解決方法是：在該頁面中的 beforeRouteLeave(Vue Router 的導航守衛之一，用於在離開當前路由前執行邏輯) 中更新更新需要緩存的組件。這裡使用了<keep-alive(是一個抽象組件，用於緩存動態組件)。

相關代碼如下：

export default {
  // 組件名稱。非常重要，必須和 {1} 處保持一致
  name: 'name001',

beforeRouteLeave (to, from, next) {
    if (this.xxRouteNames.includes(to.name)) {
      this.$store.commit('setKeepAlive', ['name001']) // {1}
    } else {
      this.$store.commit('setKeepAlive', [])
    }
    next()
  }

setKeepAlive 是 mutations，用於更新需要緩存組件的變數 cacheArray：


const app = {
    state: {
        // 動態緩存需要的組件
        cacheArray: []
    },
    mutations: {
        setKeepAlive: (state, keepAlive) => {
            state.cacheArray = keepAlive;
        },

cacheArray 用在 <keep-alive 中：

<template>
	<div id="app">
		<keep-alive :include="cacheArray">
			<router-view />
		</keep-alive>
	</div>
</template>
<script>
	export default {
		name: 'RouteView',
		computed: {
			cacheArray() {
				return this.$store.state.app.cacheArray;
			}
		}

編輯某條數據後，返回到列表頁，列表信息未更新

Tip：編輯頁和列表頁屬於不同的路由，或者說是兩個頁面。

在 activated 中重新請求數據即可：

activated () {
  this.getDataList()
},

在 Vue.js 中，activated 是一個生命周期鉤子函數，用於處理組件被激活時的邏輯。

當使用 Vue Router 進行頁面導航時，如果路由組件在之前已經被渲染過，並且現在再次被訪問，那麼它的 activated 鉤子函數將會被調用。

通常情況下，可以在 activated 鉤子中執行一些需要在組件被重新激活時處理的邏輯，比如數據刷新、重新載入資源、定時器的重新啟動等。

編輯操作取消勾選或者勾選後，點擊取消按鈕，再次點擊編輯，會保留上一次的編輯結果

Tip：編輯是一個彈框，裡面有很多 checkbox

在彈框的取消事件中重新請求數據，用於初始化狀態：

+    onCancel() {
+      this.show = false
+      this.getDataList()
+    },

翻到第二頁，輸入關鍵字，點擊搜索，還是搜索的第二頁

點擊搜索時重置 current 為 1：

     handleQuery () {
+      this.listQuery.current = 1
       this.getDataList();
     },

表格錯行顯示

使用 ant design vue 的 table 組件，有時會使用 fixed: left、fixed: right（例如將操作固定在最右側）。

某些情況就會出現錯行顯示

在 1.x 中如果設置了 fixed: left、fixed: right，這個表就會變成三個表，在 4.x 中使用高級css屬性，只會生成一個表。

筆者將某一列的固定寬度去除，也就是留一列不設置即可。但某些數據下還是會有問題，比如某列很長，某列又太短，這時可以配合 scroll.x。

Tip： 若列頭與內容不對齊或出現列重覆，請指定固定列的寬度 width。如果指定 width 不生效或出現白色垂直空隙，請嘗試建議留一列不設寬度以適應彈性佈局，或者檢查是否有超長連續欄位破壞佈局。
建議指定 scroll.x 為大於表格寬度的固定值或百分比。註意，且非固定列寬度之和不要超過 scroll.x —— 官網 table-cn

  {
    title: 'desc',
    dataIndex: 'desc',
-   width: 240,
    scopedSlots: { customRender: 'desc' }
  })

編輯器中正文只添加引號或問號，保存後未生效

編輯器使用的是：一個“包裝”了 UEditor 的 Vue 組件 —— vue-ueditor-wrap

特殊字元都會保存不上，比如 $。改成 observer 模式即可。

Tip：listener 模式藉助 UEditor 的 contentChange 事件，優點在於依賴官方提供的事件 API，無需額外的性能消耗，瀏覽器相容性更好。但缺點在於監聽不准確，存在如“特殊字元（? ! $ #）輸入時不觸發”的 BUG —— 官網

表格子級序號錯誤

16
  11
    11
      11
      12

修複如下：

<span slot="index" slot-scope="text, record, index">
  {{
-  (listQu.current - 1) * listQu.size + index + 1
-  }}
+  Object.is(record.pid, 0) ? ((listQu.current - 1) * listQu.size + index + 1) : (index + 1)
+  }} 
</span>
作者：彭加李
出處：https://www.cnblogs.com/pengjiali/p/18023789
本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接。

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • FluentFTP實戰：輕鬆操控FTP文件，創造高效傳輸體驗
    概述：通過FluentFTP庫，輕鬆在.NET中實現FTP功能。支持判斷、創建、刪除文件夾，判斷文件是否存在，實現上傳、下載和刪除文件。簡便而強大的FTP操作，提升文件傳輸效率。 在.NET中，使用FluentFTP庫可以方便地實現FTP的相關功能。以下是判斷文件夾是否存在、文件夾的創建和刪除、判斷 ...
  • C#多線程精解：優雅終止線程的實用方法與技巧
    概述：在C#多線程編程中，合理終止線程是關鍵挑戰。通過標誌位或CancellationToken，實現安全、協作式的線程終止，確保在適當時機終止線程而避免資源泄漏。 應用場景： 在C#多線程編程中，有時需要終止正在運行的線程，例如在用戶取消操作、程式關閉等情況下。 思路： 線程終止通常涉及到合作式終 ...
  • 【測試運維】性能測試經驗文檔總結第3篇：VuGen詳解（已分享，附代碼）
    internal class Program { static List<string> list=new List<string>() { "A","B","C","D","A","B","C","D" }; static string hiddenEle1 = string.Empty;//第一 ...
  • 《痞子衡嵌入式半月刊》 第 92 期
    痞子衡嵌入式半月刊： 第 92 期 這裡分享嵌入式領域有用有趣的項目/工具以及一些熱點新聞，農曆年分二十四節氣，希望在每個交節之日準時發佈一期。 本期刊是開源項目（GitHub: JayHeng/pzh-mcu-bi-weekly），歡迎提交 issue，投稿或推薦你知道的嵌入式那些事兒。 上期回顧 ...
  • 04 索引
    索引：為了提高數據查詢的效率，就像書的目錄一樣。 索引的常見模型 哈希表 圖中，User2 和 User4 根據身份證號算出來的值都是 N，後面還跟了一個鏈表。假設，這時候你要查 ID_card_n2 對應的名字是什麼，處理步驟就是：首先，將 ID_card_n2 通過哈希函數算出 N；然後，按順序 ...
  • 03 事務隔離
    03 事務隔離 事務：保證一組資料庫操作，要麼全部成功，要麼全部失敗。在 MySQL 中，事務支持是在引擎層實現的。 事務ACID（Atomicity、Consistency、Isolation、Durability，即原子性、一致性、隔離性、持久性）。 建議你儘量不要使用長事務。**** 讀未提交 ...
  • 解鎖Mysql中的JSON數據類型，怎一個爽字了得
    引言 在實際業務開發中，隨著業務的變化，數據的複雜性和多樣性不斷增加。傳統的關係型資料庫模型在這種情況下會顯得受限，因為它們需要預先定義嚴格的數據模式，並且通常只能存儲具有相同結構的數據。而面對非結構化或半結構化數據的存儲和處理需求，選擇使用非關係型資料庫或者創建子表存儲這些變化的結構可能會變得複雜 ...
  • flutter添加webview功能之後報錯 webview_flutter包 Dependency 'androidx.webkit:webkit:1.8.0' requires libraries and applications Dependency 'androidx.browser:browser:1.6.0' requires libraries an
    在項目開發中需要添加webview，載入內置的html文件，代碼寫完後ios運行沒有問題，運行安卓時報錯，錯誤提示如下： FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':a ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類