2020-04-21

搜索 流程

许多软件 中 不可缺少的 就是 搜索
搜索 我觉的 也不可能 范围非常广 什么都可以去输入 并有结果显示 这不现实
所以 我们一般在搜索设定时 都会把他们的设计 进行细化 而不是 什么都可以 如果什么内容 都会有数据 出现 我不知道 后端需要 怎么去准备这么多的数据 好吧 如果什么都搜的话 那么很可能时 无结果

比如 在音乐 软件 我们大众的认知中 搜索框中 输入的应该就是 歌曲 或者 歌手
没有别的了把 或者是进行 模糊搜索 只是一句歌词 或者是一个歌曲名的一部分

这都是 成熟软件 所呈现的

同时都需要 很多的配合 比如 数据库查询 怎么查 前后端 需要 传什么参数 会比较好 怎么设计
这是一门技术 更像 艺术

好了 废话不多说 了

切入正题

搜索 像极了 筛选
他俩 在形式 上 最大的区别就是 搜索 多了一个 输入内容 搜索的点击按钮
所以 导致 他们触发的形式 不同
触发点 在 用户点击搜索这个按钮上 时 触发
而筛选 则是 在选择了某个 选项 （也大多是 各种选项级的 不是 单纯的输入框）

技巧 多个页面使用一个搜索 用一个type 来记录 当前到底是哪个页面

学到 用一个属性 去记录 当前某一种状态
handleClick(tab, event) {
console.log(tab.label)
if(tab.label == '固定资产'){
this.listQuery.type = 1
}else if(tab.label == '无形资产') {
this.listQuery.type = 2
}else if(tab.label == '费用摊销') {
this.listQuery.type = 3
}
this.getList()
},

传递参数 如下
分别是
输入框输入的内容
当前页type
第一页的内容
{"assetType":"电子","type":1,"page":1}

v-model 获取输入框中的value 给到 assetType 然后传给后端 返回新数据

？????
什么时候 我们可以 不这么 只是做判断 发数据 二做一点别的的操作 自己处理？？？
vuex??

番外篇

需求 当一个页面有好几个tab页 多个tab 页使用的功能 比如 导出 都是一个
我们必须 通过 在执行一个 功能时 判断当前 tab 是那个页面
不同的页面还是有些许差别 所以 判断用不同的方法执行

如果连连页面也一样 那么就通过 获取不同的数据 来填入 其中 显示 那么那个方法 就是两个页面某个功能 临时的 方法

番外

tab 切换
当切换 触发后
传给后端的东西 也在变化 前提是你知道 当前 后端要求 传递的数据形式
两者不同时 你是怎么 区分 前端是怎么通过某些条件 进行设定的

也可以知道的是
接口设定 数据传递 方式 都要合理
同一个接口 不同的参数 不同的返回结果
结合业务逻辑
比如说 切换tab 需求就是 在切换页面时 显示不同的 表
首先
用户操作
触发了不同的tab

实现效果

当 触发时 将 实现的业务逻辑