新闻资讯APP——Searchpage.vue组件
重点摘录:
-
使用layui实现弹窗,点击搜索是,如果文本框的内容为空,弹出请输入检索内容
-
效果:
-
步骤:
step1:安装
Markup
cnpm install layui-layer --save
cnpm install jquery --save
step2:在index.html中引入
Markup
step3:入口文件
Markup
周期 - 创建完成(可以访问当前this实例)
created() {
// layui入口文件
const _this = this;
layui.use('layer',function(){
_this.layer = layui.layer
})
},
step4:使用
Markup
else{
this.layer.msg('请输入搜索内容',{time:2000})
}
2.使用本地存储,减少对HTTP请求,并且把localStorage中 的本地存储数据显示视图层,历史记录中
-
效果:
-
localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
-
localStorage方法:
localStorage.getItem(key):获取指定key本地存储的值
eg:
Markup
获取指定key---thehistory本地存储的值
localStorage.getItem('thehistory')
localStorage.setItem(key,value):将value存储到key字段
eg:
Markup
将value存储到key---thehistory字段
localStorage.setItem('thehistory',JSON.stringify(history));
localStorage.removeItem(key):删除指定key本地存储的值
eg:
Markup
删除指定key---thehistory本地存储的值
localStorage.removeItem('thehistory')
效果 :
3.本地存储文件里的内容为字符串,在进行操作的时候要进行转换成js对象,换句话说也把业务,逻辑层的数据存储到本地存储中,也要相对应的转化成字符串
JSON 通常用于与服务端交换数据。
在接收服务器数据时一般是字符串。
JSON.parse() 方法将字符串转换为 JavaScript 对象
JSON.stringify 将js对象转化为字符串
eg:
Markup
let getItem = JSON.parse(localStorage.getItem('thehistory'))
localStorage.setItem('thehistory',JSON.stringify(history))
代码:
Markup
<template>
<div>
<div>
<i class="fa fa-chevron-left left" aria-hidden="true"></i>
<div>
<i class="fa fa-search searchicon" aria-hidden="true"></i>
<input type="text" placeholder="请输入关键字..." v-model="searchword">
</div>
<span @click="toSearch">搜索</span>
</div>
<div id="content">
<div>
<div class="history content" >
<div>
历史记录
<div>
<i class="fa fa-trash-o" aria-hidden="true" @click="deleteHistory"></i>
</div>
</div>
<ul>
<!-- 从本地存储的中拿的数据 -->
<li v-for="item in searcharr">{{item}}</li>
</ul>
</div>
<div class="history content">
<div>
猜你想搜的
<div>
<i aria-hidden="true"></i>
</div>
</div>
<ul v-if="showwant">
<li v-for="(item,index) in youwant" @click="toResultPage(item)">{{item}}</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: '',
components: {},
data() {
//这里存放数据
return {
layer:null,
showdefault:true,
showwant:true,
searchword:'',
searcharr:[],
youwant:['5G','华为新机','滴滴','恒大全面大降价','中国最厉','德安东尼','应采儿','黄磊','冯绍峰','赵丽颖','地中海']
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
toResultPage(item){
this.$router.push({path:'/resultpage',query:{searchword:item}})
},
toSearch(){
// 如果搜索的文本框有值 存储在本地存储 否则弹出警告
if(this.searchword != ''){
// 1.存放每次输入的内容
let history=[];
// 2.在localStorage定义一个key字段,起个名字叫TheHistory,把字符串转
// 化为js对象
let getItem = JSON.parse(localStorage.getItem('TheHistory'));
// 3.如果为空,把文本框输入的内容压入history数组中
if(getItem == null){
history.push(this.searchword)
}
// 不为空,说明原来的getItem已经有内容,在把新内容压入getItem之后,
// 赋值给history中
else{
if(getItem.indexOf(this.searchword) == -1){
getItem.push(this.searchword)
}
history = getItem
}
//4. 把history数组中的内容,存放在本地的key字段TheHistory中
localStorage.setItem('TheHistory',JSON.stringify(history))
this.$router.push({path:'/resultpage',query:{searchword:this.searchword}})
}
else{
this.layer.msg('请输入搜索内容',{time:2000})
}
// 搜索内容,要跳转到 resultPage页面中
},
// 获取本地存储的数据
getHistory(){
if(localStorage.getItem('TheHistory')){
this.searcharr = JSON.parse(localStorage.getItem('TheHistory'));
console.log(this.searcharr)
}
},
// 删除历史记录,
deleteHistory(){
// 1. 清除本地存储中的内容
localStorage.removeItem('TheHistory');
// 2.q清除数据中心searcharr[]的内容
this.searcharr = []
}
},
//生命周期 - 创建完成(可以访问当前this实例)
created() {
const _this = this;
layui.use('layer',function(){
_this.layer = layui.layer
})
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted() {
this.$nextTick(function(){
this.getHistory()
})
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style lang='' scoped>
.contain{
width:100%;
height:100%;
overflow:hidden;
position: relative;
}
.contain .header{
background:#d33d3e;
padding:7px 10px;
}
.contain .header .left{
color:#fff;
line-height:32px;
vertical-align:middle;
margin-right:10px;
}
.contain .header .header_search{
display:inline-block;
width:calc(100% - 80px);
line-height:32px;
vertical-align:middle;
margin-right:10px;
background: #fff;
border-radius: 5px;
}
.contain .header .header_search .searchicon{
color:#707070;
margin:0 5px 0 5px;
}
.contain .header .header_search input{
border:none;
outline:none;
width:calc(100% - 30px);
}
.contain .header .searchbtn{
display:inline-block;
width:30px;
line-height:32px;
vertical-align: middle;
color:#fff;
font-weight:600;
font-size:15px;
}
.contain #content{
width:100%;
}
.contain #content .content{
margin-top:20px;
}
.contain #content .content .tit{
line-height:25px;
height:25px;
vertical-align: middle;
font-size:15px;
color:#707070;
padding:0 15px;
}
.contain #content .content .tit_right{
float:right;
}
.contain #content .content .tit_right i{
font-size:16px;
color:#707070;
}
.contain #content .content .con_main{
width:100%;
margin-top:5px;
}
.contain #content .content .con_main li{
box-sizing: border-box;
width:50%;
display:inline-block;
line-height:30px;
border-bottom:1px solid #e8e8e8;
padding-left:15px;
}
.contain #content .content .con_main li:nth-child(1){
border-top:1px solid #e8e8e8;
}
.contain #content .content .con_main li:nth-child(2){
border-top:1px solid #e8e8e8;
}
.contain #content .content .con_main li:nth-child(odd){
border-right:1px solid #e8e8e8;
}
</style>