gin-vue-admin搜索引擎：全文搜索与模糊查询-CSDN博客

gin-vue-admin搜索引擎：全文搜索与模糊查询

【免费下载链接】gin-vue-admin flipped-aurora/gin-vue-admin: 是一个基于Gin和Vue.js的后台管理系统。适合用于需要构建Web后台管理界面的项目。特点是可以提供前后端分离的系统架构，支持快速开发和丰富的功能集成。项目地址: https://gitcode.com/gh_mirrors/gi/gin-vue-admin

引言

在现代化的后台管理系统中，高效的数据检索功能是提升用户体验的关键。gin-vue-admin作为一款基于Gin和Vue.js的全栈后台管理系统，提供了强大的搜索引擎功能，支持全文搜索和模糊查询。本文将深入解析gin-vue-admin的搜索实现机制，帮助开发者更好地理解和应用这些功能。

搜索架构设计

gin-vue-admin采用前后端分离的架构，搜索功能在前后端都有相应的实现：

mermaid

后端搜索实现

1. 搜索参数结构体

gin-vue-admin使用统一的结构体来封装搜索参数：

// 系统参数搜索结构体
type SysParamsSearch struct {
    StartCreatedAt *time.Time `json:"startCreatedAt" form:"startCreatedAt"`
    EndCreatedAt   *time.Time `json:"endCreatedAt" form:"endCreatedAt"`
    Name           string     `json:"name" form:"name"`
    Key            string     `json:"key" form:"key"`
    request.PageInfo
}

// API搜索参数结构体  
type SearchApiParams struct {
    system.SysApi
    request.PageInfo
    OrderKey string `json:"orderKey"` // 排序字段
    Desc     bool   `json:"desc"`     // 排序方式
}

2. 模糊查询实现

系统采用GORM的LIKE操作符实现模糊查询：

func (userService *UserService) GetUserInfoList(info systemReq.GetUserList) (list interface{}, total int64, err error) {
    db := global.GVA_DB.Model(&system.SysUser{})
    
    if info.NickName != "" {
        db = db.Where("nick_name LIKE ?", "%"+info.NickName+"%")
    }
    if info.Phone != "" {
        db = db.Where("phone LIKE ?", "%"+info.Phone+"%")
    }
    if info.Username != "" {
        db = db.Where("username LIKE ?", "%"+info.Username+"%")
    }
    if info.Email != "" {
        db = db.Where("email LIKE ?", "%"+info.Email+"%")
    }
    
    // 分页处理
    err = db.Count(&total).Error
    if err != nil {
        return
    }
    err = db.Limit(limit).Offset(offset).Find(&userList).Error
    return userList, total, err
}

3. 多字段联合搜索

系统支持多字段的联合搜索，以下是一个典型的实现示例：

func (sysParamsService *SysParamsService) GetSysParamsInfoList(
    info systemReq.SysParamsSearch
) (list []system.SysParams, total int64, err error) {
    db := global.GVA_DB.Model(&system.SysParams{})
    
    // 名称模糊搜索
    if info.Name != "" {
        db = db.Where("name LIKE ?", "%"+info.Name+"%")
    }
    
    // 键名模糊搜索  
    if info.Key != "" {
        db = db.Where("key LIKE ?", "%"+info.Key+"%")
    }
    
    // 时间范围搜索
    if info.StartCreatedAt != nil {
        db = db.Where("created_at >= ?", info.StartCreatedAt)
    }
    if info.EndCreatedAt != nil {
        db = db.Where("created_at <= ?", info.EndCreatedAt)
    }
    
    // 执行查询
    err = db.Count(&total).Error
    if err != nil {
        return
    }
    err = db.Find(&list).Error
    return
}

前端搜索实现

1. 搜索组件设计

前端采用统一的搜索组件模式：

// 用户搜索参数
const searchParams = reactive({
  nickName: '',
  phone: '',
  username: '', 
  email: '',
  page: 1,
  pageSize: 10
})

// 执行搜索
const handleSearch = async () => {
  loading.value = true
  try {
    const res = await getUserList(searchParams)
    userList.value = res.data.list
    total.value = res.data.total
  } catch (error) {
    console.error('搜索失败:', error)
  } finally {
    loading.value = false
  }
}

2. API调用封装

// 用户列表API
export function getUserList(parameter) {
  return request({
    url: '/user/getUserList',
    method: 'get',
    params: parameter
  })
}

// 系统参数搜索API
export function getSysParamsList(parameter) {
  return request({
    url: '/sysParams/getSysParamsList',
    method: 'get', 
    params: parameter
  })
}

高级搜索特性

1. 动态条件生成

gin-vue-admin支持动态生成搜索条件：

// 自动代码生成中的搜索条件生成
func GenerateSearchConditions(field model.Field) string {
    switch field.FieldSearchType {
    case "=":
        return fmt.Sprintf("db = db.Where(\"%s = ?\", info.%s)", field.FieldName, field.FieldName)
    case "LIKE":
        return fmt.Sprintf("if info.%s != \"\" {\n    db = db.Where(\"%s LIKE ?\", \"%%\"+info.%s+\"%%\")\n}", field.FieldName, field.FieldName, field.FieldName)
    case "BETWEEN":
        return fmt.Sprintf("if info.Start%s != nil {\n    db = db.Where(\"%s >= ?\", info.Start%s)\n}\nif info.End%s != nil {\n    db = db.Where(\"%s <= ?\", info.End%s)\n}", field.FieldName, field.FieldName, field.FieldName, field.FieldName, field.FieldName, field.FieldName)
    default:
        return ""
    }
}

2. 搜索性能优化

优化策略	实现方式	效果
索引优化	为搜索字段创建数据库索引	提升查询速度
分页查询	使用LIMIT和OFFSET	减少数据传输量
条件缓存	缓存常用搜索条件	减少重复查询
异步加载	前端使用防抖技术	提升用户体验

实战案例：用户管理系统搜索

1. 后端控制器

// @Tags SysUser
// @Summary 分页获取用户列表
// @Security ApiKeyAuth
// @accept application/json
// @Produce application/json
// @Param data query request.GetUserList true "分页获取用户列表"
// @Success 200 {object} response.Response{data=response.PageResult,msg=string}
// @Router /user/getUserList [get]
func (b *BaseApi) GetUserList(c *gin.Context) {
    var pageInfo request.GetUserList
    err := c.ShouldBindQuery(&pageInfo)
    if err != nil {
        response.FailWithMessage(err.Error(), c)
        return
    }
    err = utils.Verify(pageInfo, utils.PageInfoVerify)
    if err != nil {
        response.FailWithMessage(err.Error(), c)
        return
    }
    list, total, err := userService.GetUserInfoList(pageInfo)
    if err != nil {
        global.GVA_LOG.Error("获取失败!", zap.Error(err))
        response.FailWithMessage("获取失败", c)
        return
    }
    response.OkWithDetailed(response.PageResult{
        List:     list,
        Total:    total,
        Page:     pageInfo.Page,
        PageSize: pageInfo.PageSize,
    }, "获取成功", c)
}

2. 前端界面实现

<template>
  <div class="user-management">
    <el-form :model="searchForm" inline>
      <el-form-item label="用户名">
        <el-input v-model="searchForm.username" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="searchForm.nickName" placeholder="请输入昵称" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="searchForm.phone" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="userList" v-loading="loading">
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="nickName" label="昵称" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column prop="email" label="邮箱" />
    </el-table>

    <el-pagination
      :current-page="searchForm.page"
      :page-size="searchForm.pageSize"
      :total="total"
      @current-change="handlePageChange"
      layout="total, sizes, prev, pager, next, jumper"
    />
  </div>
</template>

性能优化建议

1. 数据库层面优化

-- 为常用搜索字段创建索引
CREATE INDEX idx_users_username ON sys_users(username);
CREATE INDEX idx_users_nickname ON sys_users(nick_name);
CREATE INDEX idx_users_phone ON sys_users(phone);
CREATE INDEX idx_users_email ON sys_users(email);

2. 应用层优化

// 使用预加载减少N+1查询问题
func GetUserWithAuthorities(userID uint) (user User, err error) {
    err = db.Preload("Authorities").Preload("Authority").
        Where("id = ?", userID).First(&user).Error
    return
}

// 使用Select指定需要的字段
func GetUserBasicInfo(userID uint) (user User, err error) {
    err = db.Select("id", "username", "nick_name", "phone", "email").
        Where("id = ?", userID).First(&user).Error
    return
}

总结

gin-vue-admin的搜索引擎设计体现了现代Web应用的最佳实践：

前后端分离：清晰的职责划分，前端负责UI交互，后端负责数据处理
统一接口规范：使用标准化的参数结构和响应格式
灵活的搜索条件：支持模糊查询、精确匹配、范围查询等多种方式
性能优化：通过索引、分页、字段选择等技术提升查询效率
可扩展性：易于添加新的搜索字段和条件类型

通过本文的解析，开发者可以更好地理解gin-vue-admin的搜索机制，并能够根据实际业务需求进行定制和优化。无论是简单的关键字搜索还是复杂的多条件联合查询，gin-vue-admin都提供了完善的解决方案。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考