搜索本地存储逻辑 实现代码如下
1, server/routes/index.js (server开头是后端代码)var express = require('express');
var router = express.Router();/* GET home page. */
router.get('/', function(req, res, next) {res.render('index', {title: 'Express'});
});// 首页推荐的数据 0==> 推荐 1==> 第一塀数据
router.get('/api/index_list/0/data/1', function(req, res, next) {res.send({code: 0,data: {topBar: [{id: 0,label: '推荐'}, {id: 1,label: '大红袍'}, {id: 2,label: '铁观音'}, {id: 3,label: '绿茶'}, {id: 4,label: '普洱'}, {id: 5,label: '茶具'}, {id: 6,label: '花茶'}, {id: 7,label: '红茶'}, {id: 8,label: '设计'}, ],// 这是我们的swiperdata: [{ // 这是swiper数据id: 0,type: 'swiperList',data: [{id: 1,imgUrl: './images/swiper4.png'}, {id: 2,imgUrl: './images/swiper5.png'}, {id: 3,imgUrl: './images/swiper6.png'}],}, { // 这是Icons数据id: 1,type: 'iconsList',data: [{id: 1,title: '自饮茶',imgUrl: './images/icons1.png'}, {id: 2,title: '茶具',imgUrl: './images/icons2.png'}, {id: 3,title: '茶礼盒',imgUrl: './images/icons3.png'}, {id: 4,title: '领取福利',imgUrl: './images/icons4.png'}, {id: 5,title: '官方验证',imgUrl: './images/icons5.png'}],}, { // 爆款推荐id: 2,type: 'recommendList',data: [{id: 1,name: '龙井1号铁观音250g',content: '鲜爽甘醇 口粮首先',price: '68',imgUrl: './images/recommend2.png'}, {id: 2,name: '龙井2号铁观音250g',content: '鲜爽甘醇 口粮首先',price: '58',imgUrl: './images/recommend2.png'}]}, {// 猜你喜欢id: 3,type: 'likeList',data: [{id: 1,imgUrl: './images/like8.png',name: '建盏茶具套装 红色芝麻毫 12件套',price: 299,}, {id: 2,imgUrl: './images/like8.png',name: '建盏茶具套装 红色芝麻毫 12件套',price: 299,}, {id: 3,imgUrl: './images/like8.png',name: '建盏茶具套装 红色芝麻毫 12件套',price: 299,}]}]}})
});// 首页大红袍的数据 1==> 大红袍 1==> 第一塀数据
router.get('/api/index_list/1/data/1', function(req, res, next) {res.send({code: 0,data: {data: [{id: 1,type: 'adList',data: [{id: 1,imgUrl: './images/dhp.png'}]}, {// 猜你喜欢id: 2,type: 'likeList',data: [{id: 1,imgUrl: './images/like8.png',name: '建盏茶具套装 红色芝麻毫 12件套',price: 299,}, {id: 2,imgUrl: './images/like8.png',name: '建盏茶具套装 红色芝麻毫 12件套',price: 299,}, {id: 3,imgUrl: './images/like8.png',name: '建盏茶具套装 红色芝麻毫 12件套',price: 299,}]}]}})
});// 首页铁观音的数据 2==> 铁观音 1==> 第一塀数据
router.get('/api/index_list/2/data/1', function(req, res, next) {res.send({code: 0,data: {data: [{id: 1,type: 'adList',data: [{id: 1,imgUrl: './images/tieguanyin1.png'}]}, { // 这是Icons数据id: 3,type: 'iconsList',data: [{id: 1,title: '自饮茶',imgUrl: './images/icons1.png'}, {id: 2,title: '茶具',imgUrl: './images/icons2.png'}, {id: 3,title: '茶礼盒',imgUrl: './images/icons3.png'}, {id: 4,title: '领取福利',imgUrl: './images/icons4.png'}, {id: 5,title: '官方验证',imgUrl: './images/icons5.png'}]}, {// 猜你喜欢id: 2,type: 'likeList',data: [{id: 1,imgUrl: './images/like8.png',name: '建盏茶具套装 红色芝麻毫 12件套',price: 299,}, {id: 2,imgUrl: './images/like8.png',name: '建盏茶具套装 红色芝麻毫 12件套',price: 299,}, {id: 3,imgUrl: './images/like8.png',name: '建盏茶具套装 红色芝麻毫 12件套',price: 299,}]}]}})
});// 首页绿茶的数据 3==> 绿茶 1==> 第一塀数据
router.get('/api/index_list/3/data/1', function(req, res, next) {res.send({code: 0,data: {data: [{id: 1,type: 'adList',data: [{id: 1,imgUrl: './images/green_tea.png'}]}, { // 这是Icons数据id: 3,type: 'iconsList',data: [{id: 1,title: '自饮茶',imgUrl: './images/icons1.png'}, {id: 2,title: '茶具',imgUrl: './images/icons2.png'}, {id: 3,title: '茶礼盒',imgUrl: './images/icons3.png'}, {id: 4,title: '领取福利',imgUrl: './images/icons4.png'}, {id: 5,title: '官方验证',imgUrl: './images/icons5.png'}]}, {// 猜你喜欢id: 2,type: 'likeList',data: [{id: 1,imgUrl: './images/like8.png',name: '建盏茶具套装 红色芝麻毫 12件套',price: 299,}, {id: 2,imgUrl: './images/like8.png',name: '建盏茶具套装 红色芝麻毫 12件套',price: 299,}, {id: 3,imgUrl: './images/like8.png',name: '建盏茶具套装 红色芝麻毫 12件套',price: 299,}]}]}})
});// 首页普洱的数据 4==> 普洱 1==> 第一塀数据
router.get('/api/index_list/4/data/1', function(req, res, next) {res.send({code: 0,data: {data: [{id: 1,type: 'adList',data: [{id: 1,imgUrl: './images/puer.png'}]}, { // 这是Icons数据id: 3,type: 'iconsList',data: [{id: 1,title: '自饮茶',imgUrl: './images/icons1.png'}, {id: 2,title: '茶具',imgUrl: './images/icons2.png'}, {id: 3,title: '茶礼盒',imgUrl: './images/icons3.png'}, {id: 4,title: '领取福利',imgUrl: './images/icons4.png'}, {id: 5,title: '官方验证',imgUrl: './images/icons5.png'}]}, {// 猜你喜欢id: 2,type: 'likeList',data: [{id: 1,imgUrl: './images/like8.png',name: '建盏茶具套装 红色芝麻毫 12件套',price: 299,}, {id: 2,imgUrl: './images/like8.png',name: '建盏茶具套装 红色芝麻毫 12件套',price: 299,}, {id: 3,imgUrl: './images/like8.png',name: '建盏茶具套装 红色芝麻毫 12件套',price: 299,}]}]}})
});// 首页茶具的数据 5==> 茶具 1==> 第一塀数据
router.get('/api/index_list/5/data/1', function(req, res, next) {res.send({code: 0,data: {data: [{id: 1,type: 'adList',data: [{id: 1,imgUrl: './images/tea_sets.png'}]}, { // 这是Icons数据id: 3,type: 'iconsList',data: [{id: 1,title: '自饮茶',imgUrl: './images/icons1.png'}, {id: 2,title: '茶具',imgUrl: './images/icons2.png'}, {id: 3,title: '茶礼盒',imgUrl: './images/icons3.png'}, {id: 4,title: '领取福利',imgUrl: './images/icons4.png'}, {id: 5,title: '官方验证',imgUrl: './images/icons5.png'}]}, {// 猜你喜欢id: 2,type: 'likeList',data: [{id: 1,imgUrl: './images/like8.png',name: '建盏茶具套装 红色芝麻毫 12件套',price: 299,}, {id: 2,imgUrl: './images/like8.png',name: '建盏茶具套装 红色芝麻毫 12件套',price: 299,}, {id: 3,imgUrl: './images/like8.png',name: '建盏茶具套装 红色芝麻毫 12件套',price: 299,}]}]}})
});// 首页花茶的数据 6==> 花茶 1==> 第一塀数据
router.get('/api/index_list/6/data/1', function(req, res, next) {res.send({code: 0,data: {data: [{id: 1,type: 'adList',data: [{id: 1,imgUrl: './images/scented.png'}]}, { // 这是Icons数据id: 3,type: 'iconsList',data: [{id: 1,title: '自饮茶',imgUrl: './images/icons1.png'}, {id: 2,title: '茶具',imgUrl: './images/icons2.png'}, {id: 3,title: '茶礼盒',imgUrl: './images/icons3.png'}, {id: 4,title: '领取福利',imgUrl: './images/icons4.png'}, {id: 5,title: '官方验证',imgUrl: './images/icons5.png'}]}, {// 猜你喜欢id: 2,type: 'likeList',data: [{id: 1,imgUrl: './images/like8.png',name: '建盏茶具套装 红色芝麻毫 12件套',price: 299,}, {id: 2,imgUrl: './images/like8.png',name: '建盏茶具套装 红色芝麻毫 12件套',price: 299,}, {id: 3,imgUrl: './images/like8.png',name: '建盏茶具套装 红色芝麻毫 12件套',price: 299,}]}]}})
});// 首页红茶的数据 7==> 红茶 1==> 第一塀数据
router.get('/api/index_list/7/data/1', function(req, res, next) {res.send({code: 0,data: {data: [{id: 1,type: 'adList',data: [{id: 1,imgUrl: './images/jinjunmei.png'}]}, { // 这是Icons数据id: 3,type: 'iconsList',data: [{id: 1,title: '自饮茶',imgUrl: './images/icons1.png'}, {id: 2,title: '茶具',imgUrl: './images/icons2.png'}, {id: 3,title: '茶礼盒',imgUrl: './images/icons3.png'}, {id: 4,title: '领取福利',imgUrl: './images/icons4.png'}, {id: 5,title: '官方验证',imgUrl: './images/icons5.png'}]}, {// 猜你喜欢id: 2,type: 'likeList',data: [{id: 1,imgUrl: './images/like8.png',name: '建盏茶具套装 红色芝麻毫 12件套',price: 299,}, {id: 2,imgUrl: './images/like8.png',name: '建盏茶具套装 红色芝麻毫 12件套',price: 299,}, {id: 3,imgUrl: './images/like8.png',name: '建盏茶具套装 红色芝麻毫 12件套',price: 299,}]}]}})
});// 首页设计的数据 8==> 设计 1==> 第一塀数据
router.get('/api/index_list/8/data/1', function(req, res, next) {res.send({code: 0,data: {data: [{id: 1,type: 'adList',data: [{id: 1,imgUrl: './images/design.png'}]}, { // 这是Icons数据id: 3,type: 'iconsList',data: [{id: 1,title: '自饮茶',imgUrl: './images/icons1.png'}, {id: 2,title: '茶具',imgUrl: './images/icons2.png'}, {id: 3,title: '茶礼盒',imgUrl: './images/icons3.png'}, {id: 4,title: '领取福利',imgUrl: './images/icons4.png'}, {id: 5,title: '官方验证',imgUrl: './images/icons5.png'}]}, {// 猜你喜欢id: 2,type: 'likeList',data: [{id: 1,imgUrl: './images/like8.png',name: '建盏茶具套装 红色芝麻毫 12件套',price: 299,}, {id: 2,imgUrl: './images/like8.png',name: '建盏茶具套装 红色芝麻毫 12件套',price: 299,}, {id: 3,imgUrl: './images/like8.png',name: '建盏茶具套装 红色芝麻毫 12件套',price: 299,}]}]}})
});module.exports = router;2, src/assets/css/common.css* {margin: 0;padding: 0;
}ul {list-style: none;
}input {background: none;outline: none;border: none;
}input:focus {border: none;
}3, src/assets/css/iconfont.css@font-face {font-family: "iconfont";/* Project id 5021940 */src: url('../fonts/iconfont.woff2?t=1758750745818') format('woff2'),url('../fonts/iconfont.woff?t=1758750745818') format('woff'),url('../fonts/iconfont.ttf?t=1758750745818') format('truetype');
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-arrow_down_fat:before {content: "\e62a";
}.icon-arrow_up_fat:before {content: "\e62b";
}.icon-time:before {content: "\e656";
}.icon-icon-test:before {content: "\e61d";
}.icon-a-huaban1fuben44:before {content: "\e601";
}.icon-remen:before {content: "\e649";
}.icon-kefu:before {content: "\ec2e";
}.icon-fangdajing:before {content: "\e848";
}4, src/assets/js/flexible.js
// 淘宝无线适配文件(function flexible(window, document) {var docEl = document.documentElementvar dpr = window.devicePixelRatio || 1// adjust body font sizefunction setBodyFontSize() {if (document.body) {document.body.style.fontSize = (12 * dpr) + 'px'} else {document.addEventListener('DOMContentLoaded', setBodyFontSize)}}setBodyFontSize();// set 1rem = viewWidth / 10function setRemUnit() {var rem = docEl.clientWidth / 10docEl.style.fontSize = rem + 'px'}setRemUnit()// reset rem unit on page resizewindow.addEventListener('resize', setRemUnit)window.addEventListener('pageshow', function(e) {if (e.persisted) {setRemUnit()}})// detect 0.5px supportsif (dpr >= 2) {var fakeBody = document.createElement('body')var testElement = document.createElement('div')testElement.style.border = '.5px solid transparent'fakeBody.appendChild(testElement)docEl.appendChild(fakeBody)if (testElement.offsetHeight === 1) {docEl.classList.add('hairlines')}docEl.removeChild(fakeBody)}
}(window, document))5, src/components/common/Tabbar.vue
<template><!-- 获取数据并将数据渲染到视图层 --><div class="tabbar"><ul><li v-for="(item,index) in routerList" :key="index" @click="switchTab(item.path)"><img :src="$route.path.includes(item.path) ? item.selected : item.active" alt="" /><span :class="$route.path.includes(item.path) ? 'active' : ''">{{item.title}}</span></li></ul></div>
</template><script>export default {// 构建数据渲染到视图层data() {return {routerList: [{title: "首页",path: "/home",active: "/images/home.png",selected: "/images/home-select.png",}, {title: "分类",path: "/list",active: "/images/list.png",selected: "/images/list-select.png",}, {title: "购物车",path: "/cart",active: "/images/cart.png",selected: "/images/cart-select.png",}, {title: "我的",path: "/my",active: "/images/my.png",selected: "/images/my-select.png",}]}},methods: {switchTab(path) {// 判断是否点击的是同一个路由 判断点击时路径等于当前路径，直接返回就OKif (this.$route.path == path) return;// this.$router.push(path);// 对应跳转页面this.$router.replace(path);}}}
</script><style scoped>.tabbar {/* 定位在页面最下方 *//* position: fixed;left: 0;bottom: 0;z-index: 999; */width: 100%;height: 50px;background-color: #fff;}.tabbar ul {display: flex;justify-content: space-around;align-items: center;width: 100%;height: 100%;}.tabbar ul li {display: flex;flex-direction: column;justify-content: center;align-items: center;}.tabbar ul li img {width: 31px;height: 31px;}.tabbar ul li span {text-align: center;font-size: 16px;}.active {color: red;}
</style>6， components/home/Ad.vue</style>
<template><div class="ad"><ul><li v-for="(item,index) in adList" :key="index"><img :src="item.imgUrl" alt="" /></li></ul></div>
</template><script>export default {name: 'Ad',// 子组件接收父组件传递过来的数据props: {adList: Array}}
</script><style scoped>.ad {width: 100%;/* height: 112px; */}.ad img {width: 100%;height: 100%;}
</style>7, src/components/home/Card.vue<template><div class="title"><slot></slot></div>
</template><script>export default {name: 'Card',data() {return {//}}}
</script><style scoped>.title {padding: 10px 0;width: 100%;text-align: center;font-size: 16px;}.title span {position: relative;}.title span::after {content: "";display: block;position: absolute;top: 50%;right: -0.5rem;margin-top: -4px;width: 8px;height: 8px;border-radius: 50%;background: #d4c0a7;}.title span::before {content: "";display: block;position: absolute;top: 50%;left: -0.5rem;margin-top: -4px;width: 8px;height: 8px;border-radius: 50%;background: #d4c0a7;}
</style>8, src/components/home/Footer.vue<template><div id="m-footer" class="m-footer" style=""><div class="m-footertxt">到底啦，你还可以看看这里</div><div class="m-footerbtn"><span><a href="/categeryList?comefrom=index">更多茶叶</a></span><span><a href="/zhuanti/teaset?comefrom=index">更多茶具</a></span></div><div class="m-footertxt" style="margin-top: 20px;">Copyright 2016 茶七网 TEA7.com</div><div class="m-footertxt"><p>服务时间: 8:30-21:00</p><hr /><p>客服热线: 400-8993-513</p></div><div class="m-footertxt">备案号<a href="http://beian.miit.gov.cn?comefrom=index">闽ICP备14011677号-2</a></div></div>
</template><script>
</script><style scoped>.m-footerbtn {padding-top: 10px;display: flex;justify-content: space-around;}.m-footertxt {display: flex;flex-wrap: wrap;font-size: 20px;font-weight: 600;}
</style>9, src/components/home/Header.vue<template><header><!-- 左 --><h1><img src="@/assets/images/logo.png" alt="" /></h1><!-- 中 --><div class="search" @click="goSearch"><i class="iconfont icon-fangdajing"></i><span>搜你喜欢的...</span></div><!-- 右 --><div class="kefu"><i class="iconfont icon-kefu"></i></div></header>
</template><script>export default {name: 'Header',data() {return {//}},methods: {goSearch() {this.$router.push('/search')}}}
</script><style scoped>header {display: flex;justify-content: space-around;align-items: center;width: 100%;height: 60px;background-color: #b0352b;}header h1 {padding-right: 6px;width: 80px;height: 50px;}header h1 img {width: 100%;height: 100%;}.search {display: flex;/* 垂直居中 */align-items: center;width: 246px;height: 30px;background-color: #FFFFFF;border-radius: 12px;}.search i {padding: 0 6px;color: #ccc;}.search span {font-size: 16px;color: #ccc;}.kefu i {font-size: 36px;color: #fff;}
</style>10, src/components/home/Icons.vue<template><ul class="icons"><li v-for="(item,index) in iconsList" :key="index"><img :src="item.imgUrl" alt="" /><span>{{item.title}}</span></li></ul>
</template><script>export default {name: 'Icons',// 子组件接收父组件传递过来的数据props: {iconsList: Array},data() {return {//}}}
</script><style scoped>.icons {display: flex;justify-content: space-around;padding: 20px 0;}.icons li {display: flex;flex-direction: column;align-items: center;}.icons img {width: 38px;height: 38px;}.icons span {padding: 6px 0;font-size: 16px;}
</style>11, src/components/home/Like.vue<template><div class="like"><Card><span>猜你喜欢</span></Card><ul><li v-for="(item,index) in likeList" :key="index"><h2><img :src="item.imgUrl" alt="" /></h2><h3>{{item.name}}</h3><div class="price"><span>￥</span><b>{{item.price}}</b></div></li></ul></div>
</template><script>import Card from '@/components/home/Card.vue'export default {name: 'Like',// 子组件接收父组件传递过来的数据props: {likeList: Array},data() {return {//}},compontents: {Card}}
</script><style scoped>.like ul {display: flex;/* 换行 */flex-wrap: wrap;}.like ul li {display: flex;flex-direction: column;justify-content: center;align-items: center;width: 50%;}.like ul li>div {padding: 6px;width: 93%;text-align: left;color: #FF0000;}.like ul li>div span {font-size: 12px;}.like ul li>div b {font-size: 14px;font-weight: 600;}.like h3 {padding: 0 6px;width: 93%;font-size: 14px;font-weight: 400;color: #222;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.like img {width: 176px;height: 176px;}
</style>12, src/components/home/Recommend.vue<template><div class="recommend"><Card><span>小七推荐</span></Card><ul><li v-for="(item,index) in recommendList" :key="index"><!-- 左 --><h2><img :src="item.imgUrl" alt="" /></h2><!-- 右 --><div><h3>{{item.name}}</h3><p>{{item.content}}</p><div class="price"><span>￥</span><b>{{item.price}}</b></div></div></li></ul><Card><span>专题优选</span></Card><ul><li v-for="(item,index) in recommendList" :key="index"><!-- 左 --><h2><img :src="item.imgUrl" alt="" /></h2><!-- 右 --><div><h3>{{item.name}}</h3><p>{{item.content}}</p><div class="price"><span>￥</span><b>{{item.price}}</b></div></div></li></ul><Card><span>爆款推荐</span></Card><ul><li v-for="(item,index) in recommendList" :key="index"><!-- 左 --><h2><img :src="item.imgUrl" alt="" /></h2><!-- 右 --><div><h3>{{item.name}}</h3><p>{{item.content}}</p><div class="price"><span>￥</span><b>{{item.price}}</b></div></div></li></ul><Card><span>茶文化</span></Card><ul><li v-for="(item,index) in recommendList" :key="index"><!-- 左 --><h2><img :src="item.imgUrl" alt="" /></h2><!-- 右 --><div><h3>{{item.name}}</h3><p>{{item.content}}</p><div class="price"><span>￥</span><b>{{item.price}}</b></div></div></li></ul></div>
</template><script>import Card from '@/components/home/Card.vue'export default {name: 'Recommend',// 子组件接收父组件传递过来的数据props: {recommendList: Array},data() {return {//}},compontents: {Card}}
</script><style scoped>.recommend ul li {position: relative;}.recommend ul li h2 {text-align: center;}.recommend ul li img {width: 360px;height: 144px;border-radius: 12px;}.recommend ul li>div {/* 定位在右边 */position: absolute;right: 0;top: 0;display: flex;flex-direction: column;align-items: center;padding: 15px;}.recommend ul li>div h3 {font-size: 14px;}.recommend ul li>div p {font-size: 16px;}.price {margin-top: 25px;text-align: right;color: red;}.price span {font-size: 14px;}.title {padding: 10px 0;width: 100%;text-align: center;font-size: 16px;}.title span {position: relative;}.title span::after {content: "";display: block;position: absolute;top: 50%;right: -0.5rem;margin-top: -4px;width: 8px;height: 8px;border-radius: 50%;background: #d4c0a7;}.title span::before {content: "";display: block;position: absolute;top: 50%;left: -0.5rem;margin-top: -4px;width: 8px;height: 8px;border-radius: 50%;background: #d4c0a7;}
</style>13, src/components/home/Swiper.vue<template><div class="swiper-main"><swiper :options="swiperOption"><!-- slides --><swiper-slide v-for="(item,index) in swiperList" :key="index"><img :src="item.imgUrl" alt="" /></swiper-slide><!-- Optional controls --><div class="swiper-pagination" slot="pagination"></div></swiper></div>
</template><script>import 'swiper/dist/css/swiper.css'import {swiper,swiperSlide} from 'vue-awesome-swiper'export default {name: 'Swiper',// 子组件接收父组件传递过来的数据props: {swiperList: Array},data() {return {swiperOption: {autoplay: {delay: 3000},loop: true,speed: 1000,pagination: {el: '.swiper-pagination'}}}},components: {swiper,swiperSlide}}
</script><style scoped>.swiper-main {position: relative;width: 100%;height: 165px;/* margin-top: 120px; */}.swiper-container {width: 100%;height: 165px;}.swiper-main img {width: 100%;height: 165px;}.swiper-pagination {width: 100%;bottom: 0px;}::v-deep .swiper-pagination-bullet-active {background-color: #b0352f;}::v-deep .swiper-pagination-bullet {margin: 3px;}
</style>14, src/components/search/Header.vue<template><header><!-- 左 --><div class="search-return" @click="goBack"><i class="iconfont icon-a-huaban1fuben44"></i></div><!-- 中 --><div class="search-main"><i class="iconfont icon-fangdajing"></i><form action="" onsubmit="return false" @keyup.enter="goSearchList"><input type="search" placeholder="搜索你喜欢的产品..." v-model="searchValue" /></form></div><!-- 右 --><div class="search-btn" @click="goSearchList">搜索</div></header>
</template><script>export default {data() {return {searchValue: '',searchArr: []}},methods: {goBack() {// 返回上一页this.$router.back();},goSearchList() {// 牢记: 本地存储他返回的值是String类型// JSON.parse() 将 String 类型转换成 Obbject 数组类型// JSON.stringify() 将 Obbject 数组类型 转换成 String 类型// unshift() 往前添加数据 push() 往后追加数据// 如果搜索的关键字是没有的，那就直接returnif (!this.searchValue) return;// 判断之前有没有搜索的本地存储if (!localStorage.getItem('searchList')) {// 没有 我们就设置一下localStorage.setItem('searchList', '[]');} else {// 之前有搜索过的 就去获取(本地存储的数据) JSON.parse()将String类型转换成数组类型this.searchArr = JSON.parse(localStorage.getItem('searchList'));}// 增加数据this.searchArr.unshift(this.searchValue); // 往前添加// this.searchArr.push(this.searchValue); // 往后追加// ES6 去重 (去重以后还要将他转换成真正是数组对象->Array.from(newArr))let newArr = new Set(this.searchArr);// console.log(new Set(this.searchArr));// 给本地存储赋值 JSON.stringify() 将数组类型转换成string类型localStorage.setItem('searchList', JSON.stringify(Array.from(newArr)));// console.log(this.searchValue);// 跳转到某个指定页面(即search的子页面,可以使用路由名或者路径两种方式实现跳转)this.$router.push({path: '/search/list'// name: 'Search-list',})}}}
</script><style scoped>header {/* 让元素在一行 */display: flex;justify-content: space-between;/* 垂直居中 */align-items: center;width: 100%;height: 44px;color: #fff;background-color: #b0352f;}.search-return,.search-btn {padding: 0 10px;}.search-return i {font-size: 28px;}.search-main {display: flex;align-items: center;width: 260px;height: 30px;border-radius: 12px;background-color: #FFFFFF;}.search-main form {display: flex;justify-content: center;align-items: center;width: 100%;}.search-main form input {width: 100%;}.search-main i {padding: 0 10px;font-size: 22px;color: #666666;}.search-btn {font-size: 16px;}
</style>15, src/router/index.jsimport Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";Vue.use(VueRouter);const routes = [{path: "/home",name: "Home",component: Home,},{path: "/",redirect: "/home", // 重定向}, {path: "/list",name: "List",component: () =>import("../views/List.vue"),}, {path: "/cart",name: "Cart",component: () =>import("../views/Cart.vue"),}, {path: "/my",name: "My",component: () =>import("../views/My.vue"),},{path: "/search",children: [{path: "/",name: "index",component: () =>import("../views/search/Search-index.vue"),}, {path: "/search/list",name: "Search-list",component: () =>import("../views/search/Search-list.vue"),}],component: () =>import("../views/Search.vue"),},
];const router = new VueRouter({mode: "history",base: process.env.BASE_URL,routes,
});export default router;16, src/store/index.jsimport Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {},getters: {},mutations: {},actions: {},modules: {}
})17, src/views/search/Search-index.vue
<template><div class="search-index"><Header></Header><section><div class="search-history" v-if="searchArr.length"><h2><i class="iconfont icon-time"></i><span>历史搜索</span><span @click="deleteStorage">清空历史记录</span></h2><ul><li v-for="(item,index) in searchArr" :key="index">{{item}}</li></ul></div><div v-else>暂无搜索记录...</div></section><Tabbar></Tabbar></div>
</template><script>import Header from '@/components/search/Header.vue';import Tabbar from '@/components/common/Tabbar.vue';import {MessageBox} from 'mint-ui';export default {name: 'Search-index',data() {return {searchArr: []}},components: {Header,Tabbar},created() {this.searchArr = JSON.parse(localStorage.getItem('searchList')) || [];},methods: {deleteStorage() {MessageBox({title: '提示',message: '确定执行此操作?',showCancelButton: true}).then(res => {// console.log(res); // cancel confirmif (res == 'confirm') {// 删除本地存储localStorage.removeItem('searchList');// 清空页面数据 因为我们是用 searchArr渲染到页面的，所以还要做如下一个赋值操作this.searchArr = [];}});}}}
</script><style scoped>.search-index {display: flex;flex-direction: column;width: 100vw;height: 100vh;overflow: hidden;}section {flex: 1;overflow: hidden;background-color: #f5f5f5;}.search-history h2 {position: relative;padding: 20px;font-size: 18px;font-weight: 400;}.search-history h2 span:last-child {position: absolute;right: 20px;}.search-history h2 i {padding-right: 6px;color: red;font-size: 18px;}.search-history ul {display: flex;flex-wrap: wrap;padding: 0 10px;}.search-history ul li {margin: 10px;padding: 3px 6px;font-size: 18px;border: 1px solid #ccc;}
</style>18, src/views/search/Search-list.vue
<template><div class="search-list"><div class="headers"><Header></Header><ul><li><div>综合</div><div class="search-filter"><i class="iconfont icon-arrow_down_fat"></i></div></li><li><div>价格</div><div class="search-filter"><i class="iconfont icon-arrow_up_fat"></i><i class="iconfont icon-arrow_down_fat"></i></div></li><li><div>销量</div><div class="search-filter"><i class="iconfont icon-arrow_up_fat"></i><i class="iconfont icon-arrow_down_fat"></i></div></li><li><div>筛选</div></li></ul></div><section><ul><li><img src="/images/search1.png" alt="" /><h3>武夷山高级大红袍2号原产地来自福建武夷山</h3><div class="price"><div><span>￥</span><b>238</b></div><div>立即购买</div></div></li><li><img src="/images/search2.png" alt="" /><h3>历史名茶黄山毛峰1号</h3><div class="price"><div><span>￥</span><b>338</b></div><div>立即购买</div></div></li><li><img src="/images/search3.png" alt="" /><h3>黄山太平猴魁绿茶1号</h3><div class="price"><div><span>￥</span><b>538</b></div><div>立即购买</div></div></li><li><img src="/images/search4.png" alt="" /><h3>无烟工艺正山小种2号</h3><div class="price"><div><span>￥</span><b>638</b></div><div>立即购买</div></div></li><li><img src="/images/search5.png" alt="" /><h3>建阳青目小黑滴建盏茶具</h3><div class="price"><div><span>￥</span><b>838</b></div><div>立即购买</div></div></li></ul></section><Tabbar></Tabbar></div>
</template><script>import Header from '@/components/search/Header.vue';import Tabbar from '@/components/common/Tabbar.vue';export default {data() {return {//}},components: {Header,Tabbar}}
</script><style scoped>.search-list {display: flex;flex-direction: column;width: 100vw;height: 100vh;overflow: hidden;}.headers ul {/* 在一行 */display: flex;/* 均分 首尾距离一半 */justify-content: space-around;padding: 20px 0;font-size: 16px;font-weight: 600;}.headers ul li {display: flex;align-items: center;}.headers ul li>div {padding: 0 4px;}.headers ul li .search-filter {display: flex;flex-direction: column;font-size: 12px;color: gray;}section {flex: 1;overflow: hidden;background-color: #f5f5f5;}section ul {display: flex;flex-wrap: wrap;justify-content: space-between;}section ul li {display: flex;flex-direction: column;/* 水平方向居中 */justify-content: center;/* 垂直方向居中 */align-items: center;/* 盒子模型 */box-sizing: border-box;width: 50%;padding: 10px;}section ul li h3 {width: 100%;font-size: 14px;font-weight: 400;color: #222;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}section ul li img {width: 168px;height: 168px;}section ul li .price {display: flex;justify-content: space-between;padding: 10px 0;width: 100%;font-size: 16px;}section ul li .price div:first-child span {color: #b0352f;}section ul li .price div:first-child b {color: #b0352f;font-size: 18px;}section ul li .price div:last-child {padding: 3px 6px;color: #f5f5f5;background-color: #b0352f;/* 加圆角 */border-radius: 10px;}
</style>19, src/views/Cart.vue
<template><div class="cart">这是购物车<Tabbar></Tabbar></div>
</template><script>import Tabbar from '@/components/common/Tabbar.vue'export default {name: "Cart",components: {// 挂载Tabbar}}
</script><style>
</style>20, src/views/Home.vue<template><div class="home"><div class="headers"><div class="header-main"><Header></Header><ly-tab v-model="selectedId" :items="items" :options="options" @change="changeTab"></ly-tab></div></div><section ref="wrapper"><div><div v-for="(item,index) in newData" :key="index"><!-- {{item.data item.type}} --><Swiper v-if="item.type == 'swiperList'" :swiperList="item.data"></Swiper><Icons v-if="item.type == 'iconsList'" :iconsList="item.data"></Icons><Recommend v-if="item.type == 'recommendList'" :recommendList="item.data"></Recommend><Ad v-if="item.type == 'adList'" :adList="item.data"></Ad><Like v-if="item.type == 'likeList'" :likeList="item.data"></Like><Footer v-if="false"></Footer></div></div></section><Tabbar></Tabbar></div>
</template><script>import Header from '@/components/home/Header.vue'import Swiper from '@/components/home/Swiper.vue'import Icons from '@/components/home/Icons.vue'import Recommend from '@/components/home/Recommend.vue'import Like from '@/components/home/Like.vue'import Ad from '@/components/home/Ad.vue'import Footer from '@/components/home/Footer.vue'import Tabbar from '@/components/common/Tabbar.vue'// 引入插件import BetterScroll from 'better-scroll'import axios from 'axios'export default {name: "Home",data() {return {selectedId: 0,// topBar: [],items: [],newData: [],oBetterScroll: '',tBetterScroll: '',options: {activeColor: '#b0352f'}}},components: { // 挂载Header,Swiper,Icons,Recommend,Like,Ad,Footer,Tabbar},created() {this.getData();},mounted() { // 有数据，有节点// console.log(this.$refs.wrapper);// console.log(this.$data, this.$el);},methods: {async getData() {let res = await axios({url: '/api/index_list/0/data/1'});// this.items = res.data.data.topBar;// this.newData = res.data.data.data;this.items = Object.freeze(res.data.data.topBar);this.newData = Object.freeze(res.data.data.data);// console.log(Object.freeze(res.data.data.data)); // 数组// console.log(Object.freeze(res.data.data.topBar));// 当 DOM 都加载完毕再去执行this.$nextTick(() => {this.oBetterScroll = new BetterScroll(this.$refs.wrapper, {movable: true,zoom: true})})},async addData(index) {let res = await axios({url: '/api/index_list/' + index + '/data/1'});if (res.data.data.constructor != Array) {this.newData = res.data.data.data;} else {this.newData = res.data.data;}// 当 DOM 都加载完毕再去执行this.$nextTick(() => {this.tBetterScroll = new BetterScroll(this.$refs.wrapper, {movable: true,zoom: true})})},changeTab(item, index) {this.addData(index)// console.log(index);}}}
</script><style scoped>.home {display: flex;flex-direction: column;width: 100vw;height: 100vh;overflow: hidden;}.headers {width: 100%;height: 108px;}.headers-main {position: fixed;top: 0;left: 0;margin-top: 120px;}section {flex: 1;/* margin-top: 120px; */overflow: hidden;}.ly-tab {/* 固定定位 *//* position: fixed;top: 60px;left: 0; */}::v-deep .ly-tabbar {box-shadow: none;border-bottom: none;}
</style>21, src/views/List.vue<template><div class="list">这是分类<Tabbar></Tabbar></div>
</template><script>import Tabbar from '@/components/common/Tabbar.vue'export default {name: "List",components: {// 挂载Tabbar}}
</script><style>
</style>22, src/views/My.vue<template><div class="my">这是我的<Tabbar></Tabbar></div>
</template><script>import Tabbar from '@/components/common/Tabbar.vue'export default {name: "My",components: {// 挂载Tabbar}}
</script><style>
</style>23, src/views/Search.vue<template><div class="search"><!-- 路由 --><router-view></router-view></div>
</template><script></script><style scoped></style>24, App.vue<template><div id="app"><router-view></router-view></div>
</template>25, main.jsimport Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'// 公共 css 文件
import '@/assets/css/common.css'// 字体图标 css 文件
import '@/assets/css/iconfont.css'// 淘宝无线适配文件
import '@/assets/js/flexible.js'// 引入 ly-tab 插件
import LyTab from 'ly-tab'
Vue.use(LyTab)// 全局引入 vue-awesome-swiper 插件
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)// 全局注册自定义组件
import Card from '@/components/home/Card.vue'
// 注册全局组件（组件名, 组件对象）
Vue.component('Card', Card)import Like from '@/components/home/Like.vue';
Vue.component('Like', Like)// 全局引入
import Mint from 'mint-ui';
import 'mint-ui/lib/style.css';
Vue.use(Mint);
// 老师的
// import MintUI from 'mint-ui';
// import 'mint-ui/lib/style.css';
// Vue.use(MintUI);Vue.config.productionTip = falsevar vm = new Vue({data: {searchValue: ''},template: '<div>{{ searchValue }}</div>'
})
vm.searchValue = 'this.searchValue'new Vue({router,store,render: h => h(App)
}).$mount('#app')26, package.json
{"name": "vue-tea","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build"},"dependencies": {"amfe-flexible": "^2.2.1","axios": "^1.12.2","better-scroll": "^2.5.1","core-js": "^3.8.3","ly-tab": "^2.1.1","mint-ui": "^2.2.13","vue": "^2.6.14","vue-awesome-swiper": "^3.1.3","vue-router": "^3.5.1","vuex": "^3.6.2"},"devDependencies": {"@vue/cli-plugin-babel": "~5.0.0","@vue/cli-plugin-router": "~5.0.0","@vue/cli-plugin-vuex": "~5.0.0","@vue/cli-service": "~5.0.0","vue-template-compiler": "^2.6.14"},"browserslist": ["> 1%","last 2 versions","not dead"]
}27, vue.config.js// const {
// defineConfig
// } = require('@vue/cli-service')// module.exports = defineConfig({
// transpileDependencies: true
// })let path = require("path");
module.exports = {// 代理devServer: {proxy: {'/api': {target: "http://localhost:3000",changeOrigin: true,pathRewrite: {'^/api': '/api'}}},},configureWebpack: (config) => {config.resolve = {extensions: ['.js', '.json', '.vue'],alias: {'@': path.resolve(__dirname, './src'),}}}
}
mint-ui 官网(饿了团队)
https://mint-ui.github.io/#!/zh-cn
https://mint-ui.github.io/docs/#/zh-cn2文档参考地址
https://mint-ui.github.io/docs/#/zh-cn2弹出提示框
https://mint-ui.github.io/docs/#/zh-cn2/message-box
1, 安装
项目安装 mint-ui 移动端UI库和打包插件babel-plugin-component
npm install mint-ui --savenpm install babel-plugin-component --save-dev// 安装
# Vue 1.x npm install mint-ui@1 -S
# Vue 2.0 npm install mint-ui -Stea>npm install mint-ui -S
tea>npm list mint-ui`-- mint-ui@2.2.13
2，引入
// 引入全部组件
import Vue from 'vue';
import Mint from 'mint-ui';
Vue.use(Mint);// 按需引入部分组件
import { Cell, Checklist } from 'mint-ui';
Vue.component(Cell.name, Cell);
Vue.component(Checklist.name, Checklist);// 老师的全部引入
import MintUI from 'mint-ui';
import 'mint-ui/lib/style.css';
Vue.use(MintUI);
装 vue-cli 脚手架
使用 vue-clinpm install -g vue-cli
mint-ui 使用
MessageBox({title: '提示',message: '确定执行此操作?',showCancelButton: true
})
'mint-ui 使用案例
html```
<h2><i class="iconfont icon-time"></i><span>历史搜索</span><span @click="deleteStorage">清空历史记录</span>
</h2>
```script```
methods: {deleteStorage() {MessageBox({title: '提示',message: '确定执行此操作?',showCancelButton: true}).then(res => {// console.log(res);if (res == 'confirm') {// 删除本地存储localStorage.removeItem('searchList');// 清空数据this.searchArr = []}});}
}
在搜索框中输入文字控制台返回111表示：证明事件没有问题
使用 mint-ui 删除历史记录
实现代码如下：
1, components/home/Ad.vue<template><div class="ad"><ul><li v-for="(item,index) in adList" :key="index"><img :src="item.imgUrl" alt="" /></li></ul></div>
</template><script>export default {name: 'Ad',// 子组件接收父组件传递过来的数据props: {adList: Array}}
</script><style scoped>.ad {width: 100%;/* height: 112px; */}.ad img {width: 100%;height: 100%;}
</style>1, router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";Vue.use(VueRouter);const routes = [{path: "/home",name: "Home",component: Home,},{path: "/",redirect: "/home", // 重定向}, {path: "/list",name: "List",component: () =>import("../views/List.vue"),}, {path: "/cart",name: "Cart",component: () =>import("../views/Cart.vue"),}, {path: "/my",name: "My",component: () =>import("../views/My.vue"),},{path: "/search",children: [{path: "/",name: "index",component: () =>import("../views/search/Search-index.vue"),}, {path: "/search/list",name: "Search-list",component: () =>import("../views/search/Search-list.vue"),}],component: () =>import("../views/Search.vue"),},
];const router = new VueRouter({mode: "history",base: process.env.BASE_URL,routes,
});export default router;2， components/search/Header.vue
<template><header><!-- 左 --><div class="search-return" @click="goBack"><i class="iconfont icon-a-huaban1fuben44"></i></div><!-- 中 --><div class="search-main"><i class="iconfont icon-fangdajing"></i><form action="" onsubmit="return false" @keyup.enter="goSearchList"><input type="search" placeholder="搜索你喜欢的产品..." v-model="searchValue" /></form></div><!-- 右 --><div class="search-btn" @click="goSearchList">搜索</div></header>
</template><script>export default {data() {return {searchValue: this.$route.query.key || '',searchArr: []}},created() {// console.log(this.$route.query);},methods: {goBack() {// 返回上一页this.$router.back();},goSearchList() {// 牢记: 本地存储他返回的值是String类型// JSON.parse() 将 String 类型转换成 Obbject 数组类型// JSON.stringify() 将 Obbject 数组类型 转换成 String 类型// unshift() 往前添加数据 push() 往后追加数据// 如果搜索的关键字是没有的，那就直接returnif (!this.searchValue) return;// 判断之前有没有搜索的本地存储if (!localStorage.getItem('searchList')) {// 没有 我们就设置一下localStorage.setItem('searchList', '[]');} else {// 之前有搜索过的 就去获取(本地存储的数据) JSON.parse()将String类型转换成数组类型this.searchArr = JSON.parse(localStorage.getItem('searchList'));}// 增加数据this.searchArr.unshift(this.searchValue); // 往前添加// this.searchArr.push(this.searchValue); // 往后追加// ES6 去重 (去重以后还要将他转换成真正是数组对象->Array.from(newArr))let newArr = new Set(this.searchArr);// console.log(new Set(this.searchArr));// 给本地存储赋值 JSON.stringify() 将数组类型转换成string类型localStorage.setItem('searchList', JSON.stringify(Array.from(newArr)));// console.log(this.searchValue);// 路径如果没有变化不跳转页面 判断搜索的内容是当前页面 直接返回if (this.searchValue === this.$route.query.key) return;// 跳转到某个指定页面(即search的子页面,可以使用路由名或者路径两种方式实现跳转)this.$router.push({// path: '/search/list'name: 'Search-list',query: {key: this.searchValue}})}}}
</script><style scoped>header {/* 让元素在一行 */display: flex;justify-content: space-between;/* 垂直居中 */align-items: center;width: 100%;height: 44px;color: #fff;background-color: #b0352f;}.search-return,.search-btn {padding: 0 10px;}.search-return i {font-size: 28px;}.search-main {display: flex;align-items: center;width: 260px;height: 30px;border-radius: 12px;background-color: #FFFFFF;}.search-main form {display: flex;justify-content: center;align-items: center;width: 100%;}.search-main form input {width: 100%;}.search-main i {padding: 0 10px;font-size: 22px;color: #666666;}.search-btn {font-size: 16px;}
</style>3, views/search/Search-index.vue
<template><div class="search-index"><Header></Header><section><div class="search-history" v-if="searchArr.length"><h2><i class="iconfont icon-time"></i><span>历史搜索</span><span @click="deleteStorage">清空历史记录</span></h2><ul><li v-for="(item,index) in searchArr" :key="index">{{item}}</li></ul></div><div v-else>暂无搜索记录...</div></section><Tabbar></Tabbar></div>
</template><script>import Header from '@/components/search/Header.vue';import Tabbar from '@/components/common/Tabbar.vue';import {MessageBox} from 'mint-ui';export default {name: 'Search-index',data() {return {searchArr: []}},components: {Header,Tabbar},created() {this.searchArr = JSON.parse(localStorage.getItem('searchList')) || [];},methods: {deleteStorage() {MessageBox({title: '提示',message: '确定执行此操作?',showCancelButton: true}).then(res => {// console.log(res); // cancel confirmif (res == 'confirm') {// 删除本地存储localStorage.removeItem('searchList');// 清空页面数据 因为我们是用 searchArr渲染到页面的，所以还要做如下一个赋值操作this.searchArr = [];}});}}}
</script><style scoped>.search-index {display: flex;flex-direction: column;width: 100vw;height: 100vh;overflow: hidden;}section {flex: 1;overflow: hidden;background-color: #f5f5f5;}.search-history h2 {position: relative;padding: 20px;font-size: 18px;font-weight: 400;}.search-history h2 span:last-child {position: absolute;right: 20px;}.search-history h2 i {padding-right: 6px;color: red;font-size: 18px;}.search-history ul {display: flex;flex-wrap: wrap;padding: 0 10px;}.search-history ul li {margin: 10px;padding: 3px 6px;font-size: 18px;border: 1px solid #ccc;}
</style>4, views/search/Search-list.vue
<template><div class="search-list"><div class="headers"><Header></Header><ul><li><div>综合</div><div class="search-filter"><i class="iconfont icon-arrow_down_fat"></i></div></li><li><div>价格</div><div class="search-filter"><i class="iconfont icon-arrow_up_fat"></i><i class="iconfont icon-arrow_down_fat"></i></div></li><li><div>销量</div><div class="search-filter"><i class="iconfont icon-arrow_up_fat"></i><i class="iconfont icon-arrow_down_fat"></i></div></li><li><div>筛选</div></li></ul></div><section><ul><li><img src="/images/search1.png" alt="" /><h3>武夷山高级大红袍2号原产地来自福建武夷山</h3><div class="price"><div><span>￥</span><b>238</b></div><div>立即购买</div></div></li><li><img src="/images/search2.png" alt="" /><h3>历史名茶黄山毛峰1号</h3><div class="price"><div><span>￥</span><b>338</b></div><div>立即购买</div></div></li><li><img src="/images/search3.png" alt="" /><h3>黄山太平猴魁绿茶1号</h3><div class="price"><div><span>￥</span><b>538</b></div><div>立即购买</div></div></li><li><img src="/images/search4.png" alt="" /><h3>无烟工艺正山小种2号</h3><div class="price"><div><span>￥</span><b>638</b></div><div>立即购买</div></div></li><li><img src="/images/search5.png" alt="" /><h3>建阳青目小黑滴建盏茶具</h3><div class="price"><div><span>￥</span><b>838</b></div><div>立即购买</div></div></li></ul></section><Tabbar></Tabbar></div>
</template><script>import Header from '@/components/search/Header.vue';import Tabbar from '@/components/common/Tabbar.vue';export default {data() {return {//}},components: {Header,Tabbar}}
</script><style scoped>.search-list {display: flex;flex-direction: column;width: 100vw;height: 100vh;overflow: hidden;}.headers ul {/* 在一行 */display: flex;/* 均分 首尾距离一半 */justify-content: space-around;padding: 20px 0;font-size: 16px;font-weight: 600;}.headers ul li {display: flex;align-items: center;}.headers ul li>div {padding: 0 4px;}.headers ul li .search-filter {display: flex;flex-direction: column;font-size: 12px;color: gray;}section {flex: 1;overflow: hidden;background-color: #f5f5f5;}section ul {display: flex;flex-wrap: wrap;justify-content: space-between;}section ul li {display: flex;flex-direction: column;/* 水平方向居中 */justify-content: center;/* 垂直方向居中 */align-items: center;/* 盒子模型 */box-sizing: border-box;width: 50%;padding: 10px;}section ul li h3 {width: 100%;font-size: 14px;font-weight: 400;color: #222;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}section ul li img {width: 168px;height: 168px;}section ul li .price {display: flex;justify-content: space-between;padding: 10px 0;width: 100%;font-size: 16px;}section ul li .price div:first-child span {color: #b0352f;}section ul li .price div:first-child b {color: #b0352f;font-size: 18px;}section ul li .price div:last-child {padding: 3px 6px;color: #f5f5f5;background-color: #b0352f;/* 加圆角 */border-radius: 10px;}
</style>5, views/Home.vue
<template><div class="home"><div class="headers"><div class="header-main"><Header></Header><ly-tab v-model="selectedId" :items="items" :options="options" @change="changeTab"></ly-tab></div></div><section ref="wrapper"><div><div v-for="(item,index) in newData" :key="index"><!-- {{item.data item.type}} --><Swiper v-if="item.type == 'swiperList'" :swiperList="item.data"></Swiper><Icons v-if="item.type == 'iconsList'" :iconsList="item.data"></Icons><Recommend v-if="item.type == 'recommendList'" :recommendList="item.data"></Recommend><Ad v-if="item.type == 'adList'" :adList="item.data"></Ad><Like v-if="item.type == 'likeList'" :likeList="item.data"></Like><Footer v-if="false"></Footer></div></div></section><Tabbar></Tabbar></div>
</template><script>import Header from '@/components/home/Header.vue'import Swiper from '@/components/home/Swiper.vue'import Icons from '@/components/home/Icons.vue'import Recommend from '@/components/home/Recommend.vue'import Like from '@/components/home/Like.vue'import Ad from '@/components/home/Ad.vue'import Footer from '@/components/home/Footer.vue'import Tabbar from '@/components/common/Tabbar.vue'// 引入插件import BetterScroll from 'better-scroll'import axios from 'axios'export default {name: "Home",data() {return {selectedId: 0,// topBar: [],items: [],newData: [],oBetterScroll: '',tBetterScroll: '',options: {activeColor: '#b0352f'}}},components: { // 挂载Header,Swiper,Icons,Recommend,Like,Ad,Footer,Tabbar},created() {this.getData();},mounted() { // 有数据，有节点// console.log(this.$refs.wrapper);// console.log(this.$data, this.$el);},methods: {async getData() {let res = await axios({url: '/api/index_list/0/data/1'});// this.items = res.data.data.topBar;// this.newData = res.data.data.data;this.items = Object.freeze(res.data.data.topBar);this.newData = Object.freeze(res.data.data.data);// console.log(Object.freeze(res.data.data.data)); // 数组// console.log(Object.freeze(res.data.data.topBar));// 当 DOM 都加载完毕再去执行this.$nextTick(() => {this.oBetterScroll = new BetterScroll(this.$refs.wrapper, {movable: true,zoom: true})})},async addData(index) {let res = await axios({url: '/api/index_list/' + index + '/data/1'});if (res.data.data.constructor != Array) {this.newData = res.data.data.data;} else {this.newData = res.data.data;}// 当 DOM 都加载完毕再去执行this.$nextTick(() => {this.tBetterScroll = new BetterScroll(this.$refs.wrapper, {movable: true,zoom: true})})},changeTab(item, index) {this.addData(index)// console.log(index);}}}
</script><style scoped>.home {display: flex;flex-direction: column;width: 100vw;height: 100vh;overflow: hidden;}.headers {width: 100%;height: 108px;}.headers-main {position: fixed;top: 0;left: 0;margin-top: 120px;}section {flex: 1;/* margin-top: 120px; */overflow: hidden;}.ly-tab {/* 固定定位 *//* position: fixed;top: 60px;left: 0; */}::v-deep .ly-tabbar {box-shadow: none;border-bottom: none;}
</style>6, views/Search.vue
<template><div class="search"><!-- 路由 --><router-view></router-view></div>
</template><script></script><style scoped></style>
20 解决搜索结果页bug
components/search/Header.vue
<template><header><!-- 左 --><div class="search-return" @click="goBack"><i class="iconfont icon-a-huaban1fuben44"></i></div><!-- 中 --><div class="search-main"><i class="iconfont icon-fangdajing"></i><form action="" onsubmit="return false" @keyup.enter="goSearchList"><input type="search" placeholder="搜索你喜欢的产品..." v-model="searchValue" /></form></div><!-- 右 --><div class="search-btn" @click="goSearchList">搜索</div></header>
</template><script>export default {data() {return {searchValue: this.$route.query.key || '',searchArr: []}},created() {// console.log(this.$route.query);},methods: {goBack() {// 返回上一页this.$router.back();},goSearchList() {// 牢记: 本地存储他返回的值是String类型// JSON.parse() 将 String 类型转换成 Obbject 数组类型// JSON.stringify() 将 Obbject 数组类型 转换成 String 类型// unshift() 往前添加数据 push() 往后追加数据// 如果搜索的关键字是没有的，那就直接returnif (!this.searchValue) return;// 判断之前有没有搜索的本地存储if (!localStorage.getItem('searchList')) {// 没有 我们就设置一下localStorage.setItem('searchList', '[]');} else {// 之前有搜索过的 就去获取(本地存储的数据) JSON.parse()将String类型转换成数组类型this.searchArr = JSON.parse(localStorage.getItem('searchList'));}// 增加数据this.searchArr.unshift(this.searchValue); // 往前添加// this.searchArr.push(this.searchValue); // 往后追加// ES6 去重 (去重以后还要将他转换成真正是数组对象->Array.from(newArr))let newArr = new Set(this.searchArr);// console.log(new Set(this.searchArr));// 给本地存储赋值 JSON.stringify() 将数组类型转换成string类型localStorage.setItem('searchList', JSON.stringify(Array.from(newArr)));// console.log(this.searchValue);// 路径如果没有变化不跳转页面 判断搜索的内容是当前页面 直接返回if (this.searchValue === this.$route.query.key) return;// 跳转到某个指定页面(即search的子页面,可以使用路由名或者路径两种方式实现跳转)this.$router.push({// path: '/search/list'name: 'Search-list',query: {key: this.searchValue}})}}}
</script><style scoped>header {/* 让元素在一行 */display: flex;justify-content: space-between;/* 垂直居中 */align-items: center;width: 100%;height: 44px;color: #fff;background-color: #b0352f;}.search-return,.search-btn {padding: 0 10px;}.search-return i {font-size: 28px;}.search-main {display: flex;align-items: center;width: 260px;height: 30px;border-radius: 12px;background-color: #FFFFFF;}.search-main form {display: flex;justify-content: center;align-items: center;width: 100%;}.search-main form input {width: 100%;}.search-main i {padding: 0 10px;font-size: 22px;color: #666666;}.search-btn {font-size: 16px;}
</style>
Views/Home.vue
async getData() {// 封装到axiox的形参options即传入到request.js文件的数据// 值可以修改，options优先commonlet aa = await http.$axios({ // options 这里传参的优先级高于默认值commonurl: '/api/index_list/0/data/1'});console.log(aa);
}
