Freesql 高级查询前端实现 |
您所在的位置：网站首页 › 大喵前端视频怎么下载 › Freesql 高级查询前端实现 |
Freesql 高级查询前端实现
|
Freesql 高级查询前端实现
本文档介绍了 Freesql 高级查询 WhereDynamicFilter前端 vue3 如何实现😊。WhereDynamicFilter官方介绍 以下我叫它冻芒果高级搜索，其实是一开始在拆分组件的时候挺头疼的，想不到很好的拆分方式，所以花费一个多小时都没有做出来，后来被我姐拍了个冻芒果的视频，不知道特喵的怎么就突然感觉来了😄。 本人还只是个入行两年半的码农练习生，会唱、跳、rap、篮球。求各位大佬不喜轻喷谢谢。 Freesql 的 WhereDynamicFilter 是用于实现动态查询的功能，它可以根据前端传递的参数动态构建查询条件，从而实现灵活、高效的数据过滤功能。 在 Freesql中，WhereDynamicFilter 主要有以下几个用途： 实现灵活的数据过滤功能。通过将查询条件定义为可动态传递的参数，可以让用户根据实际需求对数据进行灵活的过滤。实现前端分页、排序等功能。通过将查询条件、分页参数、排序参数等都放在查询对象中，可以实现前端对数据的分页、排序等处理，从而减轻后端的压力，提高系统性能。防止 SQL 注入攻击。通过将查询条件参数化，可以有效避免 SQL 注入攻击，保障系统安全。提高代码的可读性和可维护性。通过将查询条件定义为 C# 对象，在代码中更容易地组织和维护查询逻辑，从而提高代码的可读性和可维护性。总之，WhereDynamicFilter 是 Freesql 的一个重要特性，它可以帮助开发者构建灵活、高效的查询逻辑，提高系统性能和代码可维护性，并保障系统的安全性。 最近开始使用.Net Core的一个硬派orm, Freesql，看了文档介绍后感觉其中的WhereDynamicFilter 非常不错，其实对于正常工作中普通查询绝对可以应对80%的用户使用了，但是咱本着摸鱼的心态，动手实现一下前端部分。 其实本想直接找源码复制粘贴用的，但是无奈，最近下雨，公司网就和蜗牛爬一样，github打不开，百度又找不到，那只能自己瞎写写，凑活着用呗😄。 先看下Freesql作者大佬实现效果!! 再来看看数据结构
// WHERE id = 1
{
"Field": "id",
"Operator": "Equals",
"Value": 1
}
// WHERE id = 1 AND id = 2
{
"Logic": "And",
"Filters":
[
{
"Field": "id",
"Operator": "Equals",
"Value": 1
},
{
"Field": "id",
"Operator": "Equals",
"Value": 2
}
]
}
// WHERE id IN (1,2)
{
"Field": "id",
"Operator": "Contains",
"Value": [1,2] //或者 "1,2"
}
// WHERE id = 1 OR id = 2
{
"Logic": "Or",
"Filters":
[
{
"Field": "id",
"Operator": "Equals",
"Value": 1
},
{
"Field": "id",
"Operator": "Equals",
"Value": 2
}
]
}
// WHERE id = 1 AND (id = 2 OR id = 3)
{
"Logic": "And",
"Filters":
[
{
"Field": "id",
"Operator": "Equals",
"Value": 1
},
{
"Logic": "Or",
"Filters":
[
{
"Field": "id",
"Operator": "Equals",
"Value": 2
},
{
"Field": "id",
"Operator": "Equals",
"Value": 3
}
]
}
]
}
可以看到其实是比较简单的一个数据结构，查询起来非常的简单，只需要序列化之后传给后端，后端都不需要加工，直接可以使用。再看下我实现的效果  只需要根据json，把对应的组件渲染出来就可以。是不是非常简单呢。
简单说下用到的技术 1. vue3.2 + vite 2. element-plus 组件库，可以看到文本框还挺好看。这对于我一个扣脚后端来说，要了我的命也写不来这么好看 3. 组件拆分思想 4. 需要使用递归组件：这个其实很好理解，想象一下文章评论嵌套组件😄，是一个道理 因为Freesql作者大佬使用的是递归数据结构，所以前端需要完全按照这样的结构去构造数据
首先我将它拆分成了4个组件，你也可以根据自己想法来分 1. DynamicContainer：整体组件容器 2. DynamicGroup：可以将一个头部，和一堆的文本框看成是一个组。这个组件就是专门渲染这个的。 3. DynamicHeader：头部功能，也就是看到的加分组、加条件…… 4. DynamicLineItem：单独的只有文本框相关的
app.vue code🚀
可以看到，一开始先构造了一个dynamic 对象，这个比较重要，就是根据这个对象开始渲染组件 1. 细心的朋友可能会问，人家的数据结构里没有disableRm这个属性呀，当然，但是为了咱们方便后期禁用删除按钮，加就加一两个吧。至于后端会不会报错，当然不会了，后端会反射获取属性，至于没有映射到的，会自动跳过，一点问题都没有，所以只要能方便咱们，加就完了 Dynamic Search Cancel Confirm import { reactive, ref, toRaw } from "vue"; import DynamicContainer from "./components/DynamicContainer.vue"; const dialogTableVisible = ref(false); const dynamic = reactive({ logic: "And", disableRm: true, // 禁用第一组的移除按钮，之后的组都不需要，所以只加这一个 filters: [{ field: "", operator: "", value: "", disableRm: true }] }); const open = () => { dialogTableVisible.value = true; }; const save = () => { // 获取结果 console.log(dynamic, "dynamic"); }; .container { min-height: 600px; } DynamicContainer code🚀这个组件是整体容器组件，分别加入头部和组，逻辑分别在另外两个组件内 import DynamicHeader from "./DynamicHeader.vue"; import DynamicGroup from "./DynamicGroup.vue"; const props = defineProps(["dynamic"]); DynamicGroup code🚀这个组件渲染文本框，就是上一个组件用到的，并且递归调用DynamicContainer 组件，这是构造嵌套数据结构的关键。 import DynamicLineItem from "./DynamicLineItem.vue"; import DynamicContainer from "./DynamicContainer.vue"; const props = defineProps({ filters: { type: Array, default: () => [], }, }); // 移除条件 const removeOption = (index) => props.filters.splice(index, 1); DynamicHeader code🚀这个组件就是用来渲染头部的，没什么说的，不过可以看到咱们刚才加的属性disableRm派上了大用途🤭 and or 加分组 加条件 移除分组 const { modelValue } = defineProps(["modelValue"]); const emits = defineEmits(["update:modelValue"]); const addGroup = (pData) => { const newFilters = { logic: "And", filters: [] }; pData.filters.push(newFilters); }; const addOption = (pData) => { // 添加条件之前先将之前添加过的组取出来，最后再加进来，否则顺序会有问题 const newOption = { field: "", operator: "", value: "" }; const oldGroup = pData.filters.find((c) => c.filters || c.logic); oldGroup && pData.filters.pop(); pData.filters.push(newOption); oldGroup && pData.filters.push(oldGroup); }; const removeGroup = () => { delete modelValue.filters; delete modelValue.logic; }; .option-line { height: 30px; } .option { display: inline-block; margin-left: 20px; } DynamicLineItem code🚀这个组件就是主要渲染文本框的啦，把表格数据传进去循环一下，再把相关的操作符加进去 如果需求需要还可以动态的判断当前选中值是不是一个时间值，一般时间后缀都是time结尾，刚好可以用来判断，然后动态的将值的文本框（也就是实际值，第三个文本框）设为一个 DatePicker，等等等等。这里就不做过多赘述。 import { Minus } from "@element-plus/icons-vue"; const { field } = defineProps(["field"]); const emits = defineEmits(["removeOption"]); const removeOption = () => emits("removeOption"); 以上就是本人简单实现，修修补补可以看出本人水平一般，等有时间再继续优化……”冻芒果高级搜索“😄这个组件其实主要不好理解的地方就在分析数据结构和组件拆分上，这个理解明白了其实思路很好打开。 |
【本文地址】
今日新闻 |
推荐新闻 |