基于SqlSugar的开发框架循序渐进介绍(20)-- 在基于UniApp+Vue的移动端实现多条件查询的处理

简介: 基于SqlSugar的开发框架循序渐进介绍(20)-- 在基于UniApp+Vue的移动端实现多条件查询的处理

在做一些常规应用的时候,我们往往需要确定条件的内容,以便在后台进行区分的进行精确查询,在移动端,由于受限于屏幕界面的情况,一般会对多个指定的条件进行模糊的搜索,而这个搜索的处理,也是和前者强类型的条件查询处理类似的处理过程,因此本篇随笔探讨两种不同查询在前端界面上的展示效果,以及后端基于.netCore的Web API端的基类进行的统一封装处理。

1、前端精确条件的查询处理

在基于Vue3+Typescript+ElementPlus的前端界面中,查询是很多界面需要拥有的功能,如下所示。

展开后的全部查询条件

以上的查询部分是一个查询函数的处理,如下代码所示。

// 查询列表处理
async function search() {
  pageInfo.pageIndex = 1; // 重置为第一页
  //默认使用当前用户公司
  const userInfo = $u.util.storageSession.getItem('user_info');
  searchForm.company_ID = userInfo?.company_ID; //所属公司
  await getlist(); //获取列表
}
//列表数据获取
async function getlist() {
  loading.value = true;
  var param = {
    // 分页条件
    SkipCount: (pageInfo.pageIndex - 1) * pageInfo.pageSize,
    MaxResultCount: pageInfo.pageSize,
    Sorting: sorting.value,
    // 查询过滤条件
    Name: searchForm.name,
    MobilePhone: searchForm.mobilePhone,
    Email: searchForm.email,
    QQ: searchForm.qq,
    Nickname: searchForm.nickname,
    HandNo: searchForm.handNo,
    IsExpire: searchForm.isExpire,
    Title: searchForm.title,
    dept_ID: searchForm.dept_id,
    company_ID: searchForm.company_ID
  };
  //日期条件处理
  addDateRange(param, searchForm.creationTime);
  let result = await user.GetList(param);
  if (result) {
    list.value = result.items;
    pageInfo.totalCount = result.totalCount;
  }
  setTimeout(() => {
    loading.value = false;
  }, 500);
}

我们看到,这些条件都是由特定的参数组成的,因此他们是精确性的属性查询。

前端根据框架后端的接口进行前端JS端的类的封装处理,引入了ES6类的概念实现业务基类接口的统一封装,简化代码。

权限模块我们涉及到的用户管理、机构管理、角色管理、菜单管理、功能管理、操作日志、登录日志等业务类,那么这些类继承BaseApi,就会具有相关的接口了,如下所示继承关系。

按照这个思路,我们在BaseApi的ES6类里面定义了对应Web API基类里面的操作方法,如下所示。

这样,我们在创建一个业务类的时候,如果没有特殊的自定义接口,只需要继承基类BaseApi即可具有所有的常规基类方法了。

我们再来后端看看具体的查询逻辑实现,首先需要了解各个控制器之间的继承关系,如下图所示 。

同样,我们基础的查询处理逻辑,主要也是放在BusinessController里面实现,毕竟是通用的逻辑,变化的只是一些实体信息,因此可以通过泛型的模板方法设计模式处理变化的部分。

我们可以看到,在BusinessController控制器部分,它也只是对Service层逻辑的简单封装一下,核心的处理逻辑部分,在下面的基类Service层的代码中。

/// <summary>
/// 根据条件获取列表
/// </summary>
/// <param name="input">分页查询条件</param>
/// <returns></returns>
public virtual async Task<PagedResultDto<TEntity>> GetListAsync(TGetListInput input)
{
    var query = CreateFilteredQueryAsync(input);
    var totalCount = await query.CountAsync();
    query = ApplySorting(query, input);
    query = ApplyPaging(query, input);
    var list = await query.ToListAsync();
    return new PagedResultDto<TEntity>(
       totalCount,
       list
   );
}

这里基类Service层主要处理逻辑部分,而具体的构建精确的查询处理条件,下放在了每个具体业务Service类中进行处理了。

UserService是具体对应的业务类的逻辑处理层,该类的定义方法如下所示。

/// <summary>
    /// 应用层服务接口实现
    /// </summary>
    public class UserService : MyCrudService<UserInfo, int, UserPagedDto>, IUserService

下放在UserService这个具体业务的Service类中的查询处理逻辑,这部分通过代码生成工具生成即可。

/// <summary>
/// 自定义条件处理
/// </summary>
/// <param name="input">查询条件Dto</param>
/// <returns></returns>
protected override ISugarQueryable<UserInfo> CreateFilteredQueryAsync(UserPagedDto input)
{
    var query = base.CreateFilteredQueryAsync(input);
    query = query
        .WhereIF(input.ExcludeId.HasValue, t => t.Id != input.ExcludeId) //不包含排除ID
        .WhereIF(input.PID.HasValue, s => s.PID == input.PID)
        .WhereIF(!input.HandNo.IsNullOrWhiteSpace(), t => t.HandNo.Contains(input.HandNo)) //如需要精确匹配则用Equals
        .WhereIF(!input.Name.IsNullOrWhiteSpace(), t => t.Name.Contains(input.Name)) //如需要精确匹配则用Equals
        .WhereIF(!input.FullName.IsNullOrWhiteSpace(), t => t.FullName.Contains(input.FullName)) //如需要精确匹配则用Equals
        .WhereIF(!input.Nickname.IsNullOrWhiteSpace(), t => t.Nickname.Contains(input.Nickname)) //如需要精确匹配则用Equals
        .WhereIF(input.IsExpire.HasValue, t => t.IsExpire == input.IsExpire) //如需要精确匹配则用Equals
        
        //过期时间区间查询
        .WhereIF(input.ExpireDateStart.HasValue, s => s.ExpireDate >= input.ExpireDateStart.Value)
        .WhereIF(input.ExpireDateEnd.HasValue, s => s.ExpireDate <= input.ExpireDateEnd.Value)
         
        ****//此处省略更多其他条件
        ;
    return query;
}

通过逻辑和具体对象的实现分离,从而构建了很多通用的基类函数,这些函数只需要在子类重写一些规则即可实现更加详细的处理,也称为模板方法的设计模式,这种方式广泛应用于基类函数的抽象处理。

 

2、前端模糊查询及自定义查询的处理

介绍了前面基于Vue3+Typescript+ElementPlus的前端界面的内容,主要还是用来引出基于UniApp+Vue的移动端实现多条件查询的处理,一般移动端的界面空间比较宝贵,所以往往查询通过组合条件的方式进行模糊查询处理,如下界面所示。

在查询框中输入一些条件,会在后端对多个条件进行模糊匹配,并返回相应的结果列表进行展示,如下所示。

查询界面只是接受了一个输入值,通过传递该值,在后端进行多字段的匹配查询处理。前端界面如下所示。

async getlist() {
    var params = {
        MaxResultCount: this.pageSize,
        SkipCount: (this.pageIndex - 1) * this.pageSize,
        Sorting: '',
    }
    if (this.isAdvance) {
        let {
            startDate,
            endDate,
            filter,
            deliveryArea,
            line
        } = this.advanceData;
        params.TimeStart = startDate
        params.TimeEnd = endDate
        params.DeliveryAreas = deliveryArea
        params.Lines = line
        params.Filter = filter
    } else {
        params.Filter = this.searchValue;
    }
    console.log(params)
    this.loadding = true;
    this.pullUpOn = true;
    let res = {};
    if (this.isAdvance) {
        res = await sign.GetAllByFilter2(params);
    } else {
        res = await sign.GetAllByFilter(params);
    }
    console.log(res)
    if (this.totalCount == res.totalCount) {
        this.hasmore = false; //没有了
        this.loadding = false;
        this.pullUpOn = false;
        uni.stopPullDownRefresh();
        return;
    }
    this.totalCount = res.totalCount;
    let items = res.items;
    for (var i = 0; i < items.length; i++) {
        this.list.push(items[i]);
    }
    if (this.list.length < res.totalCount) {
        this.pageIndex += 1;
        console.log(res.totalCount)
    } else {
        this.hasmore = false; //没有了
    }
    this.loadding = false;
    this.pullUpOn = false
    uni.stopPullDownRefresh();
    let count = items.length;
    let options = {
        msg: `刷新成功,为你更新了${count}条数据`,
        duration: 2000,
        type: "translucent"
    };
    if (this.pageIndex > 1) {
        setTimeout(() => {
            this.$refs.toast.showTips(options);
        }, 300);
    }
},

有时候,如需要精确一些的条件处理,也可以以自定义条件的方式进行查询处理的界面。

单击【筛选】按钮进入抽屉式的展示页面,弹出高级查询的相关字段属性,可以进行一定的条件设置处理。

同样我们在UniApp+Vue的移动前端项目上,也需要设置BaseApi的基础接口,如下所示。

而我们的业务类 Sign-Receipt(Sign-Receipt.js )只需要继承BaseApi(base-api.js)类即可,如下所示。

import BaseApi from '@/api/base-api'
// 业务类自定义接口实现, 通用的接口已经在BaseApi中定义
class Api extends BaseApi {
    FindByCode(shopCode) { // GET 根据客户代码获取记录
        var params = {
            shopCode
        };
        return this.httpget(this.baseurl + 'Find-ByCode', params)
    }
    GetAllByFilter2(params) { // 根据条件获取所有记录
        var url = this.baseurl + 'list-filter2';
        return this.httpget(url, params)
    }
}
// 构造接口对象信息 Api实例,并传递业务类接口地址
export default new Api('/api/SignReceipt/')

对应的后端接口,同样也是使用前面介绍精确查询的方式进行处理,在基类Service层里面,有对应通用的模糊查询方法定义。

/// <summary>
/// 根据指定的Filter值分页获取列表
/// </summary>
/// <param name="input">分页查询条件</param>
/// <returns></returns>
public virtual async Task<PagedResultDto<TEntity>> GetListByFilterAsync(PagedSortedAndFilteredInputDto input)
{
    var query = CreateFilteredQueryAsync(input.Filter);
    var totalCount = await query.CountAsync();
    //排序处理
    if (!input.Sorting.IsNullOrWhiteSpace())
    {
        query = query.OrderBy(input.Sorting);
    }
    else
    {
        query = ApplyDefaultSorting(query);
    }
    //分页处理
    query = query.Skip(input.SkipCount).Take(input.MaxResultCount);
    var list = await query.ToListAsync();
    return new PagedResultDto<TEntity>(
       totalCount,
       list
   );
}

那么下放给子类的CreateFilteredQueryAsync 函数就是实现逻辑的关键,毕竟基类是无法构建正确的条件的。

而对应的SignReceiptService类中,是业务类的逻辑处理方法,该类的定义方法如下所示

/// <summary>
    /// 拍照签收 应用层服务接口实现
    /// </summary>
    public class SignReceiptService : MyCrudService<SignReceiptInfo,string, SignReceiptPagedDto>, ISignReceiptService

因此它里面可以重写模糊查询条件的逻辑,如下代码所示。

/// <summary>
/// 自定义条件处理(根据Filter进行的过滤处理)
/// </summary>
/// <param name="filter">查询条件Dto</param>
/// <returns></returns>
protected override ISugarQueryable<SignReceiptInfo> CreateFilteredQueryAsync(string filter)
{
    var query = base.CreateFilteredQueryAsync(filter);
    query = query.WhereIF(!filter.IsNullOrWhiteSpace(), t => //模糊搜索用Contains, 如需要精确匹配则用Equals
         t.ShopCode.Contains(filter) || t.ShopName.Contains(filter) || t.Line.Contains(filter) ||
         t.DeliveryArea.Contains(filter) || t.SignMan.Contains(filter) || t.DeliverName.Contains(filter) || t.Note.Contains(filter)
         );
    return query;
}

有了这些条件的定义,我们就可以在Web API的后端,对前端的参数进行联合的模糊查询处理,从而为移动前端提供更好的查询接口服务。

而对于高级查询的处理,我们先要定义好对应的通用的实体类信息,如下所示。

然后在具体的进行处理查询逻辑即可,这部分和前面的逻辑处理类似,只是无法实现基类通用的处理而已,因此下发到具体的业务类进行定义。

最后在控制器部分,进行一个简单的封装处理即可。

 以上就是基于不同前端,包括基于Vue3+Typescript+ElementPlus的前端界面,以及基于UniApp+Vue的移动端界面,实现一些常见查询的处理,前端和后端的配合处理逻辑。

 

系列文章:

基于SqlSugar的开发框架的循序渐进介绍(1)--框架基础类的设计和使用

基于SqlSugar的开发框架循序渐进介绍(2)-- 基于中间表的查询处理

基于SqlSugar的开发框架循序渐进介绍(3)-- 实现代码生成工具Database2Sharp的整合开发

基于SqlSugar的开发框架循序渐进介绍(4)-- 在数据访问基类中对GUID主键进行自动赋值处理

基于SqlSugar的开发框架循序渐进介绍(5)-- 在服务层使用接口注入方式实现IOC控制反转

基于SqlSugar的开发框架循序渐进介绍(6)-- 在基类接口中注入用户身份信息接口

基于SqlSugar的开发框架循序渐进介绍(7)-- 在文件上传模块中采用选项模式【Options】处理常规上传和FTP文件上传

基于SqlSugar的开发框架循序渐进介绍(8)-- 在基类函数封装实现用户操作日志记录

基于SqlSugar的开发框架循序渐进介绍(9)-- 结合Winform控件实现字段的权限控制

基于SqlSugar的开发框架循序渐进介绍(10)-- 利用axios组件的封装,实现对后端API数据的访问和基类的统一封装处理

基于SqlSugar的开发框架循序渐进介绍(11)-- 使用TypeScript和Vue3的Setup语法糖编写页面和组件的总结

基于SqlSugar的开发框架循序渐进介绍(12)-- 拆分页面模块内容为组件,实现分而治之的处理

基于SqlSugar的开发框架循序渐进介绍(13)-- 基于ElementPlus的上传组件进行封装,便于项目使用

基于SqlSugar的开发框架循序渐进介绍(14)-- 基于Vue3+TypeScript的全局对象的注入和使用

基于SqlSugar的开发框架循序渐进介绍(15)-- 整合代码生成工具进行前端界面的生成

基于SqlSugar的开发框架循序渐进介绍(16)-- 工作流模块的功能介绍

基于SqlSugar的开发框架循序渐进介绍(17)-- 基于CSRedis实现缓存的处理

基于SqlSugar的开发框架循序渐进介绍(18)-- 基于代码生成工具Database2Sharp,快速生成Vue3+TypeScript的前端界面和Winform端界面

基于SqlSugar的开发框架循序渐进介绍(19)-- 基于UniApp+Vue的移动前端的功能介绍

基于SqlSugar的开发框架循序渐进介绍(20)-- 在基于UniApp+Vue的移动端实现多条件查询的处理

 

专注于代码生成工具、.Net/.NetCore 框架架构及软件开发,以及各种Vue.js的前端技术应用。著有Winform开发框架/混合式开发框架、微信开发框架、Bootstrap开发框架、ABP开发框架、SqlSugar开发框架等框架产品。
 转载请注明出处:撰写人:伍华聪  http://www.iqidi.com

相关文章
|
10天前
|
开发框架 小程序 JavaScript
UniApp框架适合哪些应用场景?
UniApp作为一款跨平台的移动应用开发框架,因其高效、灵活和强大的特性,适用于多种应用场景。
33 2
|
8天前
|
供应链 JavaScript 数据管理
uniapp/vue如何实现一个子表单及子表单作用
uniapp/vue如何实现一个子表单及子表单作用
17 5
|
8天前
|
搜索推荐 JavaScript 数据可视化
uniapp/vue个性化单选、复选组件
uniapp/vue个性化单选、复选组件
28 5
|
11天前
|
JavaScript 前端开发 小程序
uniapp一个人开发APP关键步骤和考虑因素
uniapp一个人开发APP关键步骤和考虑因素
39 0
uniapp一个人开发APP关键步骤和考虑因素
|
12天前
|
前端开发 JavaScript PHP
Thinkphp在线客服系统源码多语言外贸版_PHP客服系统源码Uniapp开发搭建+论文设计
Thinkphp在线客服系统源码多语言外贸版_PHP客服系统源码Uniapp开发搭建+论文设计
|
2月前
|
开发框架 移动开发 前端开发
基于SqlSugar的开发框架循序渐进介绍(19)-- 基于UniApp+Vue的移动前端的功能介绍
基于SqlSugar的开发框架循序渐进介绍(19)-- 基于UniApp+Vue的移动前端的功能介绍
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的公园管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的公园管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
111 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)