基于SqlSugar开发框架的基础上快速开发H5端的移动应用

在开发一些项目的时候，我们往往会基于一定的框架进行业务的开发，并结合一些辅助工具进行更高效率的快速开发和整合工作，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数据库创建表，如下所示。

image

设计好的数据表，在设计状态下，添加相关的备注信息。

image

 然后生成相关的SQL代码，我们就可以再具体的数据库管理工具上执行创建对应的表信息了。 

image

  完成数据库表创建后，我们就完成了第一阶段的工作了。

 

2、生成SqlSugar开发框架的后端基础代码并整合

设计好数据库后，我们通过代码生成工具进行基于项目框架的代码生成，这样对于我们在开发新项目上有很好的好处，里面的项目层级、引用关系，已经处理好了，这样对我们非常方便。

不过大多数情况下，我们都是增量开发较多，也就是我们可能前面已经完成了一些其他业务的开发，可能新增一个两个表，或者一批业务表的处理，我们生成相关的代码文件后把它们复制到项目恰当位置上即可。

由于项目生成的时候，指定了主命名空间和相关的表前缀，这样我们生成后的代码就方便阅读很多，减少累赘和出错的机会。

利用代码生成工具Database2Sharp强大的数据库元数据和模板引擎，我们构建了对应的框架代码生成规则，因此统一生成即可，提高了代码开发的效能，同时也统一了代码的结构，便于大项目的维护。

对于SQLSugar的项目框架，我们为了方便，分别单独提供后端代码和Web API代码的生成、Winform界面代码的生成，以及前面介绍到的Vue3+TypeScript+ElementPlus的代码生成操作。

代码生成工具的界面效果如下所示，通过入口菜单，可以实现不同部分的代码快速生成。我们先使用【Sqlsugar框架代码生成】生成后端的相关代码文件。

image

选择我们刚才创建的表进行一步步的生成即可。

image

生成代码，我们可以看到相关的目录，如下所示。

image

复制整合文件到框架项目的合适位置上，暂时不需要增加任何方法代码，我们利用继承的基类方法就完全满足需求 。

image

 

3、基于Vant4+Vue3+TypeScript的H5移动前端进行开发

关于Vant4

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 在渲染性能上有了显著提升，特别是在处理大型列表和复杂组件时。

移动端H5应用

 扫码进行了解 Vant4+Vue3+TypeScript 的移动前端。

 

接下来就是针对H5端应用进行的界面开发了，我们可以参考案例的滚动到底部进行分页处理的页面案例，对内容进行分页展示处理，如下所示是几个界面的效果。

image  image  image

 签名图片，我们通过调用通用的文件上传处理，把它上传到服务端的目录上了，使用的时候直接用其对应的地址即可。

image

了解了界面效果，我们来看看具体的代码实现过程。

我们首先增加或者使用代码生成工具生成一个api对接后端的文件，如下所示。

image

这个文件很简单，就是继承基类即可，不需要增加任何自定义方法。

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的，它的数据类型可以推断出来，因此在编码或者查看对应属性的时候，会有非常好的提示信息。

对应几个不同的页面场景，我们分别创建不同的视图文件，如下所示。

image

 由于Vue3+Typescript+Vant4的H5应用端是基于VueRouter的路由处理，因此，我们需要在路由模块中增加对应的路由定义，如下所示。

image

 最后我们就可以再主页面提供一个入口，访问当前的模块了。如我们在列表页面模块中，首先需要引入对应的API调用类，以及定义对应的实体对象。

image

 页面只需要调用BaseApi的基类封装函数即可实现滚动继续分页获取记录的处理。

image

 结合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>

从而实现了我们前面介绍的页面效果。

image  image

 其他页面的效果也是类似，参考相关的界面实现来调整展示效果即可，不在赘述。

 如需进一步了解H5应用端的功能介绍，可以参考随笔《基于Vant4+Vue3+TypeScript的H5移动前端》，进行深入的了解。

posted on 2025-12-30 15:07  伍华聪  阅读(169)  评论(0)    收藏  举报

导航