新闻资讯APP——Searchpage.vue组件

最新推荐文章于 2023-09-05 17:09:30 发布

一个前端女子

最新推荐文章于 2023-09-05 17:09:30 发布

阅读量553

点赞数 1

分类专栏： vue2 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44173499/article/details/123152155

版权

vue2 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

新闻资讯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>

一个前端女子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
新闻资讯APP——Searchpage.vue组件

新闻资讯APP——Searchpage.vue组件重点摘录：使用layui实现弹窗，点击搜索是，如果文本框的内容为空，弹出请输入检索内容效果：步骤： step1:安装Markupcnpm install layui-layer --save cnpm install jquery --savestep2:在index.html中引入Markupstep3:入口文件Markup...
复制链接

扫一扫

专栏目录