devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：2023面试高手 | 2024-04-10 03:20:38

赞

踩

searchpage

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

重点摘录：

  1. 使用layui实现弹窗，点击搜索是，如果文本框的内容为空，弹出请输入检索内容

  • 效果：

  • 步骤：

    step1:安装

Markup

  1. cnpm install  layui-layer --save 
  2. cnpm install jquery --save

    

        step2:在index.html中引入

Markup

    step3:入口文件

Markup

  1. 周期 - 创建完成（可以访问当前this实例）
  2. created() {
  3. // layui入口文件
  4. const _this = this;
  5. layui.use('layer',function(){
  6. _this.layer = layui.layer
  7. })
  8. },

    step4:使用

Markup

  1. else{
  2. this.layer.msg('请输入搜索内容',{time:2000})
  3. }

2.使用本地存储，减少对HTTP请求，并且把localStorage中 的本地存储数据显示视图层，历史记录中

  • 效果：

  • localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

  • localStorage方法：

localStorage.getItem(key):获取指定key本地存储的值

eg:

Markup

  1. 获取指定key---thehistory本地存储的值
  2. localStorage.getItem('thehistory')

localStorage.setItem(key,value)：将value存储到key字段

eg:

Markup

  1. 将value存储到key---thehistory字段
  2. localStorage.setItem('thehistory',JSON.stringify(history));

localStorage.removeItem(key):删除指定key本地存储的值

eg:

Markup

  1. 删除指定key---thehistory本地存储的值
  2. localStorage.removeItem('thehistory')

效果 ：

3.本地存储文件里的内容为字符串，在进行操作的时候要进行转换成js对象，换句话说也把业务，逻辑层的数据存储到本地存储中，也要相对应的转化成字符串

JSON 通常用于与服务端交换数据。 

在接收服务器数据时一般是字符串。

 JSON.parse() 方法将字符串转换为 JavaScript 对象 

 JSON.stringify 将js对象转化为字符串

eg:

Markup

  1. let getItem = JSON.parse(localStorage.getItem('thehistory'))
  2.  
  3. localStorage.setItem('thehistory',JSON.stringify(history))

代码：

Markup

  1. <template>
  2.     <div>
  3.     <div>
  4.       <i class="fa fa-chevron-left left" aria-hidden="true"></i>
  5.       <div>
  6.         <i class="fa fa-search searchicon" aria-hidden="true"></i>
  7.         <input type="text" placeholder="请输入关键字..." v-model="searchword">
  8.       </div>
  9.       <span @click="toSearch">搜索</span>
  10.     </div>
  11.  
  12.     <div id="content">
  13.       <div>
  14.         <div class="history content" >
  15.           <div>
  16.             历史记录
  17.             <div>
  18.               <i class="fa fa-trash-o" aria-hidden="true" @click="deleteHistory"></i>
  19.             </div>
  20.           </div>
  21.           <ul>
  22.             <!-- 从本地存储的中拿的数据 -->
  23.             <li v-for="item in searcharr">{{item}}</li>
  24.           </ul>
  25.         </div>
  26.  
  27.         <div class="history content">
  28.           <div>
  29.             猜你想搜的
  30.             <div>
  31.               <i aria-hidden="true"></i>
  32.             </div>
  33.           </div>
  34.           <ul v-if="showwant">
  35.             <li v-for="(item,index) in youwant" @click="toResultPage(item)">{{item}}</li>
  36.           </ul>
  37.         </div>
  38.       </div>
  39.  
  40.     </div>
  41.  
  42.   </div>
  43. </template>
  44.  
  45. <script>
  46.  
  47.     export default {
  48.         name: '',
  49.         components: {},
  50.         data() {
  51. //这里存放数据
  52.             return {
  53.                 layer:null,
  54.                 showdefault:true,
  55.                 showwant:true,
  56.                 searchword:'',
  57.                 searcharr:[],
  58.                 youwant:['5G','华为新机','滴滴','恒大全面大降价','中国最厉','德安东尼','应采儿','黄磊','冯绍峰','赵丽颖','地中海']
  59.             };
  60.         },
  61. //监听属性 类似于data概念
  62.         computed: {},
  63. //监控data中的数据变化
  64.         watch: {},
  65. //方法集合
  66.         methods: {
  67.           toResultPage(item){
  68.             this.$router.push({path:'/resultpage',query:{searchword:item}})
  69.           },
  70.           toSearch(){
  71.             // 如果搜索的文本框有值 存储在本地存储 否则弹出警告
  72.             if(this.searchword != ''){
  73.               // 1.存放每次输入的内容
  74.               let history=[];
  75.               // 2.在localStorage定义一个key字段，起个名字叫TheHistory，把字符串转
  76.               // 化为js对象
  77.               let getItem = JSON.parse(localStorage.getItem('TheHistory'));
  78.               // 3.如果为空，把文本框输入的内容压入history数组中
  79.               if(getItem == null){
  80.                 history.push(this.searchword)
  81.                 
  82.               }
  83.               // 不为空，说明原来的getItem已经有内容，在把新内容压入getItem之后，
  84.               // 赋值给history中
  85.               else{
  86.                 if(getItem.indexOf(this.searchword) == -1){
  87.                   getItem.push(this.searchword)
  88.                 }
  89.                 history = getItem
  90.               }
  91.               //4. 把history数组中的内容，存放在本地的key字段TheHistory中
  92.               localStorage.setItem('TheHistory',JSON.stringify(history))
  93.               this.$router.push({path:'/resultpage',query:{searchword:this.searchword}}) 
  94.             }
  95.             else{
  96.              this.layer.msg('请输入搜索内容',{time:2000})
  97.             }
  98.             // 搜索内容，要跳转到 resultPage页面中
  99.             
  100.           },
  101.           // 获取本地存储的数据
  102.           getHistory(){
  103.             if(localStorage.getItem('TheHistory')){
  104.               this.searcharr = JSON.parse(localStorage.getItem('TheHistory'));
  105.               console.log(this.searcharr)
  106.             }
  107.           },
  108.           // 删除历史记录，
  109.           deleteHistory(){
  110.             // 1. 清除本地存储中的内容
  111.             localStorage.removeItem('TheHistory');
  112.             // 2.q清除数据中心searcharr[]的内容
  113.             this.searcharr = []
  114.           }
  115.  
  116.         },
  117. //生命周期 - 创建完成（可以访问当前this实例）
  118.         created() {
  119.           const _this = this;
  120.           layui.use('layer',function(){
  121.             _this.layer = layui.layer
  122.           })
  123.         },
  124. //生命周期 - 挂载完成（可以访问DOM元素）
  125.         mounted() {
  126.           this.$nextTick(function(){
  127.             this.getHistory()
  128.           })
  129.         },
  130.         beforeCreate() {}, //生命周期 - 创建之前
  131.         beforeMount() {}, //生命周期 - 挂载之前
  132.         beforeUpdate() {}, //生命周期 - 更新之前
  133.         updated() {}, //生命周期 - 更新之后
  134.         beforeDestroy() {}, //生命周期 - 销毁之前
  135.         destroyed() {}, //生命周期 - 销毁完成
  136.         activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  137.     }
  138. </script>
  139. <style lang='' scoped>
  140.  
  141. .contain{
  142.   width:100%;
  143.   height:100%;
  144.   overflow:hidden;
  145.   position: relative;
  146. }
  147.  
  148. .contain .header{
  149.   background:#d33d3e;
  150.   padding:7px 10px;
  151. }
  152.  
  153. .contain .header .left{
  154.   color:#fff;
  155.   line-height:32px;
  156.   vertical-align:middle;
  157.   margin-right:10px;
  158.  
  159.  
  160. }
  161.  
  162. .contain .header .header_search{
  163.   display:inline-block;
  164.   width:calc(100% - 80px);
  165.   line-height:32px;
  166.   vertical-align:middle;
  167.   margin-right:10px;
  168.   background: #fff;
  169.   border-radius: 5px;
  170. }
  171.  
  172. .contain .header .header_search .searchicon{
  173.   color:#707070;
  174.   margin:0 5px 0 5px;
  175. }
  176. .contain .header .header_search input{
  177.   border:none;
  178.   outline:none;
  179.   width:calc(100% - 30px);
  180. }
  181.  
  182. .contain .header .searchbtn{
  183.   display:inline-block;
  184.   width:30px;
  185.   line-height:32px;
  186.   vertical-align: middle;
  187.   color:#fff;
  188.   font-weight:600;
  189.   font-size:15px;
  190. }
  191.  
  192. .contain #content{
  193.   width:100%;
  194. }
  195.  
  196. .contain #content .content{
  197.   margin-top:20px;
  198.  
  199.  
  200. }
  201. .contain #content .content .tit{
  202.   line-height:25px;
  203.   height:25px;
  204.   vertical-align: middle;
  205.   font-size:15px;
  206.   color:#707070;
  207.   padding:0 15px;
  208. }
  209. .contain #content .content .tit_right{
  210.   float:right;
  211. }
  212. .contain #content .content .tit_right i{
  213.   font-size:16px;
  214.   color:#707070;
  215. }
  216.  
  217.  
  218. .contain #content .content .con_main{
  219.   width:100%;
  220.   margin-top:5px;
  221. }
  222.  
  223. .contain #content .content .con_main li{
  224.   box-sizing: border-box;
  225.   width:50%;
  226.   display:inline-block;
  227.   line-height:30px;
  228.   border-bottom:1px solid #e8e8e8;
  229.   padding-left:15px;
  230. }
  231. .contain #content .content .con_main li:nth-child(1){
  232. border-top:1px solid #e8e8e8;
  233. }
  234. .contain #content .content .con_main li:nth-child(2){
  235. border-top:1px solid #e8e8e8;
  236. }
  237. .contain #content .content .con_main li:nth-child(odd){
  238. border-right:1px solid #e8e8e8;
  239. }
  240. </style>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/396339
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号