- 将搜索关键词存入 historyList
1. 直接将搜索关键词 push 到 historyList 数组中即可
在java代码中的新增是add在js的代码中使用的是push这两个都是在尾部进行追加的操作，unshift是在头部进行插补
1.设置关键字 kw1用于暂时存放这次搜索的关键字 // 存储关键字 kw1: '' 2. 在处理建议页列表的时候传递一个关键字 // 建议页列表 async getSearchList() { if (this.kw.trim() === '') { this.searchResults = [] } else { const { data: res } = await uni.$http.get('/api/public/v1/goods/qsearch', { query: this.kw }) if (res.meta.status === 200) { this.searchResults = res.message this.saveSearchHistory(this.kw.trim()) } } }, 3. 存储关键字的信息 // 保存搜索历史 saveSearchHistory(it) { this.kw1 = it }, 4.假如说用户点击到了推荐的详情页数据我们就进行保存，否则不保存 // 跳转到详情页面 gotoDetail(goods_id) { uni.navigateTo({ url: '/subpkg/goods_detail/goods_detail?goods_id=' + goods_id }) this.historyList.unshift(this.kw1) }
上面这样做的好处:
unshift:保证最近搜索的放在第一个。kw1:让其放在详情页的时候才进行存储的目的是,防止随意存储
- 存在的Bug
1 .假如说有两个重复的选项，我们没有去重的操作Set
2 . 调用reverse()进行反转多数组的时候，我们前提是进行原数组遍历这样可以避免破坏原素组 […arr].reverse()
我们只需要在跳转到详情页面的时候，进行数组转换为set,set再转换为数组，数组再反向遍历即可
data() { return { //延时器的timerId timer: null, // 搜索关键词 kw: '', // 列表的查询 searchResults: [], // 搜索历史 historyList: ['a', 'b', 'jsxs'], // 存储关键字 kw1: '' }; }, computed: { historys() { // 注意：由于数组是引用类型，所以不要直接基于原数组调用 reverse 方法，以免修改原数组中元素的顺序 // 而是应该新建一个内存无关的数组，再进行 reverse 反转 return [...this.historyList].reverse() } }, // 跳转到详情页面 gotoDetail(goods_id) { uni.navigateTo({ url: '/subpkg/goods_detail/goods_detail?goods_id=' + goods_id }) // 1. 将 Array 数组转化为 Set 对象 const set = new Set(this.historyList) // 2. 调用 Set 对象的 delete 方法，移除对应的元素 set.delete(this.kw) // 3. 调用 Set 对象的 add 方法，向 Set 中添加元素 if (item.goods_name.length >= 10) { const v1 = item.goods_name.slice(0, 9) const v2 = v1 + '...' set.add(v2) } else { set.add(item.goods_name) } // 4. 将 Set 对象转化为 Array 数组 this.historyList = Array.from(set) }
- 将搜索历史记录持久化存储到本地
1.修改我们的推荐详情页里的数据
// 跳转到详情页面 gotoDetail(goods_id) { uni.navigateTo({ url: '/subpkg/goods_detail/goods_detail?goods_id=' + goods_id }) // 1. 将 Array 数组转化为 Set 对象 const set = new Set(this.historyList) // 2. 调用 Set 对象的 delete 方法，移除对应的元素 set.delete(this.kw) // 3. 调用 Set 对象的 add 方法，向 Set 中添加元素 if (item.goods_name.length >= 10) { const v1 = item.goods_name.slice(0, 9) const v2 = v1 + '...' set.add(v2) } else { set.add(item.goods_name) } // 4. 将 Set 对象转化为 Array 数组 this.historyList = Array.from(set) // 调用 uni.setStorageSync(key, value) 将搜索历史记录持久化存储到本地 uni.setStorageSync('kw', JSON.stringify(this.historyList)) }
2.在 onLoad 生命周期函数中，加载本地存储的搜索历史记录：
onLoad() { this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]') },
7.清空搜索历史记录
1.为清空的图标按钮绑定 click 事件：
<uni-icons type="trash" size="17" @click="cleanHistory()"></uni-icons>
2.删除历史的操作
// 点击清楚搜索历史 cleanHistory() { // 清空 data 中保存的搜索历史 this.historyList = [] // 清空本地存储中记录的搜索历史 uni.setStorageSync('kw', '[]') }
8.点击标签页跳转到商品列表
在标签上添加方法
<uni-tag :text="item" v-for="(item, i) in historys" :key="i" @click="gotoGoodsList(item)"></uni-tag>
在methods中定义方法
// 点击跳转到商品列表页面 gotoGoodsList(kw) { uni.navigateTo({ url: '/subpkg/goods_list/goods_list?query=' + kw }) }
(5).提交合并页面
1.提交分支
git add . git commit -m "完成了search的修改" git push -u origin search
2.合并提交主分支
git checkout master git add . git commit -m "完成了search的修改" git merge search git push
3.删除分支
git branch -d search
5.配置页面 - 商品列表
(1).创建goodslist分支
git checkout -b gooddslist
(2).定义请求参数对象
1.为了方便发起请求获取商品列表的数据，我们要根据接口的要求，事先定义一个请求的参数对象: 里面的参数对象(API)
data() { return { // 请求参数对象 queryObj: { // 请求的参数 query: '', // 请求的cid cid: '', // 初始化为第一页的数据 pagenum: 1, // 每一页10篇数据 pagesize: 10 } } },
2.将页面跳转时携带的参数，转到queryObj对象中:
onLoad(options) { console.log(options) // 为data区域的值,进行赋值的操作，假如说我们接收到的参数为null,那么我们就赋值这个数据为空字符串 this.queryObj.query = options.query || '' // 为data区域中的数据赋值，假如数据不存在那么就对其进行 this.queryObj.cid = options.cid || '' }
