在開發一些項目的時候，我們往往會基於一定的框架進行業務的開發，並結合一些輔助工具進行更高效率的快速開發和整合工作，SqlSugar開發框架是我們開發的一個多端整合的開發框架，基於它的後端框架的WebAPI 基礎上，我們可以對接WInform端、Vue3+ElementPlus的BS端，Vue3+Vant4的H5端，以及WPF、或者小程序等多端接入，本篇隨筆介紹一個簡單的項目錄入功能，介紹基於SqlSugar開發框架的基礎上快速開發H5端的移動應用。
1、設計數據庫
俗話説萬層高樓從底起，開發應用項目，數據庫的設計很重要，它可能是業務對象，業務流程的綜合設計，好的數據庫設計可以減少後期的重複返工，提高開發效率。
一般表名稱，根據不同的業務關係，我們可以使用不同的前綴進行區分，使用前綴，可以非常方便區分不同的業務表，如我自己一般基礎表使用 “TB_” 定義前綴，權限系統表使用"T_ACL_"定義前綴，工作流表使用“TBAPP_”，業務表使用"T_"等，這樣對於區分不同的業務，方便管理很有好處。
字段名稱方面，我們可以約定一些規則，如約定主鍵使用ID；一般來説，ID作為主鍵，可以使用自增長的整形字段，也可以使用GUID的字符型字段，如果為了方便兼容不同的數據庫且方便遷移或者開發基於網絡方面的應用，我建議還是使用GUID的字符型字段，使用這種類型的字段，我們從創建數據的時候，就可以知道這個記錄的主鍵，對於我們維護父子表等關係非常有利。
由於如果採用字符型的ID主鍵，那麼我們如果需要正確排序的時候，可能需要增加一個CreateTime的日期類型，方便我們根據日期進行排序，或者特定的需要增加一個SortOrder字段。
如果這個表還有一個外鍵的引用，建議統一命名標準，我一般使用“表名稱_ID這樣的名稱，如User_ID、Contact_ID等相似的名稱作為外鍵，不需要表的前綴。
數據庫的模型設計，我們建議在第三方的數據庫設計工具上進行設計，如PowerDesigner這樣的設計工具，使用工具設計數據庫有很多好處，一個是可以高效率進行調整，二是根據需要生成不同的數據庫類型Sql語句，三是可以全局瞭解各個表之間的關係等等。
使用PowerDesigner這樣的數據庫設計工具，能夠在很大程度上提高我們數據庫的設計效率。我們默認以SQLServer數據庫創建表，如下所示。
設計好的數據表，在設計狀態下，添加相關的備註信息。
然後生成相關的SQL代碼，我們就可以再具體的數據庫管理工具上執行創建對應的表信息了。
完成數據庫表創建後，我們就完成了第一階段的工作了。
2、生成SqlSugar開發框架的後端基礎代碼並整合
設計好數據庫後，我們通過代碼生成工具進行基於項目框架的代碼生成，這樣對於我們在開發新項目上有很好的好處，裏面的項目層級、引用關係，已經處理好了，這樣對我們非常方便。
不過大多數情況下，我們都是增量開發較多，也就是我們可能前面已經完成了一些其他業務的開發，可能新增一個兩個表，或者一批業務表的處理，我們生成相關的代碼文件後把它們複製到項目恰當位置上即可。
由於項目生成的時候，指定了主命名空間和相關的表前綴，這樣我們生成後的代碼就方便閲讀很多，減少累贅和出錯的機會。
利用代碼生成工具Database2Sharp強大的數據庫元數據和模板引擎，我們構建了對應的框架代碼生成規則，因此統一生成即可，提高了代碼開發的效能，同時也統一了代碼的結構，便於大項目的維護。
對於SQLSugar的項目框架，我們為了方便，分別單獨提供後端代碼和Web API代碼的生成、Winform界面代碼的生成，以及前面介紹到的Vue3+TypeScript+ElementPlus的代碼生成操作。
代碼生成工具的界面效果如下所示，通過入口菜單，可以實現不同部分的代碼快速生成。我們先使用【Sqlsugar框架代碼生成】生成後端的相關代碼文件。
選擇我們剛才創建的表進行一步步的生成即可。
生成代碼，我們可以看到相關的目錄，如下所示。
複製整合文件到框架項目的合適位置上，暫時不需要增加任何方法代碼，我們利用繼承的基類方法就完全滿足需求 。
3、基於Vant4+Vue3+TypeScript的H5移動前端進行開發
Vant 是一個輕量、可定製的移動端組件庫，於 2017 年開源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，並由社區團隊維護 React 版本和支付寶小程序版本。
當前移動端 項目採用最新的Vant4進行開發，適合於Vue3的項目開發。
Vant 4 是一款基於 Vue 3 的輕量、可靠的手機端組件庫，主要用於快速搭建移動端應用。它提供了許多常用的 UI 組件，如按鈕、卡片、表單、導航等，旨在幫助開發者提高開發效率，同時保持應用的性能和一致性。
Vant 4 是完全基於 Vue 3 構建的，充分利用了 Vue 3 的新特性和性能優化，如 Composition API、Teleport、Fragments 等。通過 Vue 3 的優化，Vant 4 在渲染性能上有了顯著提升，特別是在處理大型列表和複雜組件時。
掃碼進行了解 Vant4+Vue3+TypeScript 的移動前端。
接下來就是針對H5端應用進行的界面開發了，我們可以參考案例的滾動到底部進行分頁處理的頁面案例，對內容進行分頁展示處理，如下所示是幾個界面的效果。
簽名圖片，我們通過調用通用的文件上傳處理，把它上傳到服務端的目錄上了，使用的時候直接用其對應的地址即可。
瞭解了界面效果，我們來看看具體的代碼實現過程。
我們首先增加或者使用代碼生成工具生成一個api對接後端的文件，如下所示。
這個文件很簡單，就是繼承基類即可，不需要增加任何自定義方法。
import type { ListResult, PagedResult } from '@/api/types'
import BaseApi from '@/api/base-api'
import { CommonResult } from '@/api/types'
import { http } from '@/utils/http/axios'
// 導入API基類對象,默認具有Get/GetAll/Create/Update/Delete/BatchDelete/SaveImport/Count等接口
// 業務類自定義接口實現, 通用的接口已經在BaseApi中定義
class Api extends BaseApi {
// 參考下面案例，增加自定義函數
// GET 方法例子
// 根據條件計算記錄數量
// async GetCount(params: object) {
// return await this.HttpGet<number>(this.baseurl + "count", params);
// }
// POST 方法例子
// 創建對象
// async Create(data: object) {
// return await this.HttpPost<boolean>(this.baseurl + `create`, data);
// }
// PUT 方法例子
// 更新對象
// async Update(data: object) {
// return await this.HttpPut<boolean>(this.baseurl + `update`, data);
// }
// DELETE 方法例子
// 刪除指定ID的對象
// async Delete(id: number | string) {
// return await this.HttpDelete<boolean>(this.baseurl + `${id}`);
// }
}
// 構造測試工作項目 Api實例，並傳遞業務類接口地址
export default new Api('/api/testworkitem/')
前端根據框架後端的接口進行前端JS端的類的封裝處理，引入了ES6類的概念實現業務基類接口的統一封裝，簡化代碼。這些類繼承BaseApi，就會具有相關的接口了，如下所示繼承關係。
我們已經在BaseApi的ES6類裏面定義了對應Web API基類裏面的操作方法，如下所示。
這樣，我們在創建一個業務類的時候，如果沒有特殊的自定義接口，只需要繼承基類BaseApi即可具有所有的常規基類方法了。
由於我們的ES6接口定義，是基於TypeScript的，它的數據類型可以推斷出來，因此在編碼或者查看對應屬性的時候，會有非常好的提示信息。
對應幾個不同的頁面場景，我們分別創建不同的視圖文件，如下所示。
由於Vue3+Typescript+Vant4的H5應用端是基於VueRouter的路由處理，因此，我們需要在路由模塊中增加對應的路由定義，如下所示。
最後我們就可以再主頁面提供一個入口，訪問當前的模塊了。如我們在列表頁面模塊中，首先需要引入對應的API調用類，以及定義對應的實體對象。
頁面只需要調用BaseApi的基類封裝函數即可實現滾動繼續分頁獲取記錄的處理。
結合Vant4的相關控件，我們可以把記錄的內容展示出來。
<template> <div class="scroll-container"> <page-header @click="goback" /> <van-search v-model="searchValue" placeholder="請輸入搜索關鍵詞" @search="onSearch" @clear="clearInput" /> <van-list v-model:loading="loading" :finished="finished" finished-text="沒有更多了" @load="onRefresh" > <van-swipe-cell v-for="(item, index) in list" :key="index" class="m-2 overflow-hidden border border-gray-300 rounded-[12px]" > <!-- 主體內容 --> <template #default> <div class="box-border min-w-0 w-full flex flex-row items-start p-2"> <!-- 圖片區域 --> <van-image class="h-[100px] w-[100px] flex-shrink-0 rounded-md" fit="contain" :src="!isNullOrUnDef(item.creatsign) ? item.creatsign : '/images/img_nodata.png'" /> <!-- 文本區域 --> <div class="ml-4 min-w-0 flex-1" @click="showDetail(item.id ?? '')" > <div class="whitespace-normal break-words text-base font-medium"> {{ item.item1 }}/{{ item.item2 }}/{{ item.item3 }}/{{ item.item4 }} </div> <div class="mt-2 flex flex-col whitespace-normal break-words text-sm text-gray-500"> <span> 狀態: <van-tag :type="getStatusTag(item.status ?? 0)"> {{ getStatus(item.status) }} </van-tag> </span> <span>{{ format(item.createtime) }}</span> </div> </div> </div> </template> <!-- 刪除按鈕 --> <template #right> <div class="h-full w-[64px] flex items-center justify-center bg-red-500"> <van-icon name="delete" color="#fff" size="20" @click="deleteItem(item)" /> </div> </template> </van-swipe-cell> </van-list> <van-action-bar class="m-2"> <van-action-bar-icon text="返回" icon="arrow-left" @click="goback" /> <van-action-bar-button color="green" text="創建工作項目" @click="createItem" /> </van-action-bar> <div class="mb-20" /> <van-back-top /> </div> </template>
從而實現了我們前面介紹的頁面效果。
其他頁面的效果也是類似，參考相關的界面實現來調整展示效果即可，不在贅述。
如需進一步瞭解H5應用端的功能介紹，可以參考隨筆《基於Vant4+Vue3+TypeScript的H5移動前端》，進行深入的瞭解。
