shangrila-xiu

112
文章
101
分类
33
标签

vue-news毕设笔记整理2

vue-news毕设笔记整理2

一、今天在做模糊查询结果的展示：

1、template的部分

1
2
3
4
5
6
7
8
    <!-- 搜索框开始 -->
    <form class="navbar-form navbar-left"  >
        <div class="form-group  exploreS">
          <input type="text" class="form-control search-from" v-model="INFOEx" placeholder="Search">
        </div>
        <button type="button" class="btn btn-success btn-xs btnExplore" data-toggle="modal" data-target="#Explore" @click="explore" @keyup.enter="explore">查询</button>
    </form>
<!-- 搜索框结束 -->

2、模态框的代码为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    <!-- 搜索模态框开始 -->
      <div class="modal fade" id="Explore" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">您的搜索结果为</h4>
      </div>
      <div class="modal-body">
     内容区
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
      </div>
    </div>
  </div>
</div>
    <!-- 搜索模态框结束 -->

3、script中data 和 methods

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<script type="text/javascript">
  export default{
    data(){
      return{
        imgsrc:domain.testUrl,
        INFOExs:[],
        INFOEx:'',
       
       
      }
    },
   
    methods:{ 
      // 搜索内容
      explore(){
        // alert(1)
        if(this.INFOEx == '' || this.INFOEx == null){
          alert("您要输入的的内容不能为空！");
          setTimeout(function(){
                $('#Explore').modal('hide');
                $(".modal.fade").hide();
                // $("#myModal").trigger("click");
              },1);
          return false;
        }
        this.$ajax.post(this.imgsrc+'/news/getNewsByTitleFuzzyMatch',{
          "newsTitle":this.INFOEx
        }).then(res => {
          
          if(res.data.code=='200'){
           
           this.INFOExs=res.data.contents;
           console.log(this.INFOExs);
           this.INFOEx='';
          }
          if(res.data.code==500){
           
          }
        })
      },
      // 搜索之后的结果
     
  
    
  }; 
</script>

4、本项目的页面展示内容区，放在2中模态框的内容区：v-show控制两个li的内容展示，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
   <ul>
          
          <li v-for="(INfo,index) in INFOExs" v-show="INfoLen" >
            <router-link :to="'/article/'+INfo.id">
              <div class="InfoEx">
                <span>{{INfo.id}}</span>
                <p> {{INfo.newsTitle}}</p>
                <p>新闻来源{{INfo.contentSource}}</p>
                <p>新闻ID{{INfo.menu.id}}</p>
                <p>创建时间{{INfo.createTimeStamp }}</p>
                <p>资源访问量{{INfo.sourceVisitNumber}}</p>
              </div>
            </router-link>
<hr>
          </li>
        
          <li v-show="!INfoLen">
            <p style="color:rgb(178, 199, 178);font-size:20px;font-weight:bold;">主人，系统君已经尽力了，并没有找到更多您想要的内容</p>
<!--             <router-link  to="/" tag="li" active-class="active" style="color:#0df50d;font-size:16px;font-weight:200;text-decoration:none;text-align:center;    
            position: relative;
    padding-bottom: 10px;
    left: 174px;"> 
            <a href="javascript:;"> 返回首页</a>
            </router-link> -->
          </li>
        </ul>

5、在第3点中的script调接口成功后，加上这段代码：

1
2
if(this.INFOExs.length != 0 || this.INFOExs != undefined){
           this.INfoLen=!this.INfoLen;}

6、style的样式

1
2
3
4
5
6
7
<style type="text/css" media="screen" scoped>
.InfoEx p{
  float: left;
  margin-left: 5px;
}
</style>

7、在data中定义 INfoLen，在HTML中使用v-show对它的不同boolean值作出不同的结果。

1
2
3
4
5
 data(){
  return {
  INfoLen:false
  }
}

问题规整：

1、数组是不是对象？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
a、在Java中：
	数组是对象，int float char这些基本类型不是对象。关于如何判断基本类型和对象，参考下面的：
行为：
  基本类型只是一个值，没有任何行为
  对象类型有自己的行为
内存分配：
    基本类型在栈内分配
    对象在堆内分配
    对象引用保存在栈内
引用与值：
    基本类型是值类型，仅表示一个值，保存在栈内
    引用类型分两部分，对象引用保存在栈内，对象保存在堆内，
    访问变量，是使用的引用找对象
b、在javascript中：

2、判断一个对象是不是数组,有几种办法？

[][https://blog.csdn.net/hf872914334/article/details/79473849][判断一个对象是不是数组,有几种办法？](https://blog.csdn.net/hf872914334/article/details/79473849)

[][https://www.cnblogs.com/leaf930814/p/6659996.html][怎么判断一个对象是不是数组类型？](https://www.cnblogs.com/leaf930814/p/6659996.html)

1
0、typeof    typeof不能检测到数组类型！
1
2
3
4
5
6
7
8
alert(typeof 1);                // 返回字符串"number" 
alert(typeof "1");              // 返回字符串"string" 
alert(typeof true);             // 返回字符串"boolean" 
alert(typeof {});               // 返回字符串"object" 
alert(typeof []);               // 返回字符串"object " 
alert(typeof function(){});     // 返回字符串"function" 
alert(typeof null);             // 返回字符串"object" 
alert(typeof undefined);        // 返回字符串"undefined"
其中，typeof {}和typeof []的结果都是object，那么问题来了，我怎么通过typeof去判断一个对象是不是数组类型呢？

对象是对象，数组也是对象，js中万物皆对象，很显然，通过简单的typeof运算符是不能够达到目的，我们得换个方法。

1
2
3
4
1、从原型入手，Array.prototype.isPrototypeOf(obj);
2、也可以从构造函数入手，obj instanceof Array
3、根据对象的class属性(类属性)，跨原型链调用toString()方法。
4、Array.isArray()方法。

4、vue v-for循环数据列表，获取列表当前项的某一项的数据，例如id

vue v-for循环数据列表，获取列表当前项的某一项的数据，例如id

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<template>
    <div>
        <ul v-for="(data,index) in arrData" :key="index"  @click="getDataId(data.id)">
            <li>{{data.title}}</li>
        </ul>
    </div>
</template>
<script>
export default {
    data(){
        return{
            arrData:[
                {
                    id:1,title:'第一条数据'
                },
                {
                    id:2,title:'第二条数据'
                },
                {
                    id:3,title:'第三条数据'
                },
                {
                    id:4,title:'第四条数据'
                }
            ]
        }
    },
    methods:{
        getDataId(id){  
            console.log(id)
        },
    }
}
</script>
<style>
    ul li{
        height:30px;
        line-height:30px;
    }
</style>

5、vue项目如何刷新当前页面。

转载：https://blog.csdn.net/qq_16772725/article/details/80467492

转载：https://www.cnblogs.com/yinn/p/9056731.html

1.场景

在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。

2.遇到的问题

\1. 用vue-router重新路由到当前页面，页面是不进行刷新的

2.采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好

6、关闭模态框的半透明遮罩层

转载：https://www.cnblogs.com/zuidongfeng/p/5536190.html

1
2
3
4
5
6
7
setTimeout(function(){
                $('#comm').modal('hide');
                $(".modal.fade").hide();
				$('.modal-backdrop').remove();//关闭阴影遮罩层
               
                // $("#myModal").trigger("click");
              },1000);

7、弹出层出现，滚动条默认消失；当弹出层消失，滚动条得出现的解决办法：

转载：https://blog.csdn.net/fighting2020/article/details/84136914

1
document.body.style.overflow = 'auto';