#前端001之网络请求
在前端的页面中,网络请求是一个非常重要的存在
可以让我们省去很多排版步骤
下面就详细讲一下网络请求的步骤
首先我们排版了一个页面
比如是一个有4个相同卡片板块的页面
里面包含图片以及文字
效果示例如下
那我们只需要排版时,只需要做第一个卡片,
再使用v-for, 循环数组,
后面通过网络请求就可以循环出其他几个卡片板块(数据内容)
HTML:
<div class="big-box" v-for="item in newList"> // newList这个数组通过网络请求拿到全部的数据
<div>//item 是这个数组里面的一条数据,里面包含各个我们想要的数据
//item in newList 的意思是拿到第一条数据里面的全部数据
<img :src="item.pic" alt="">
//item.pic的意思是拿到该条数据里面的图片
</div>
<h4>{{item.url}}</h4>
//item.url的意思拿到该条数据里面的地址 都是会在后端同事返回给我们的接口文档里面有的
</div>
js:
然后在data里面,设置数组为空
data () {
return {
newList: [
],
}
},
css:
写上卡片板块的样式,然后循环出同样的另外3个样式就可以了
.big-box {
display: inline-block;
width: 310px;
height: 300px; //计算好每一个的宽度高度是多少
background: #FFFFFF;
box-shadow: 0 0 20px 0 rgba(206, 206, 206, 0.5);
border-radius: 5px;
margin-right: 20px;
}
.big-box:last-child{
//这个是第4个卡片板块,为了不让它掉到下面区域,我们要单独设置它的右外边距为0
margin-right: 0;
}
.big-box div {
width: 311px;
height: 175px;
border-radius: 5px 5px 0 0;
background-color: #333333;
overflow: hidden;
}
.big-box div:hover {
cursor:pointer;
}
.big-box img {
width: 100%;
height: 100%;
background-color: #F9B008;
transform: scale(1.1);
transition: all 0.6s;
}
.big-box img:hover{
transform: scale(1.5);
}
.big-box h4 {
width: 275px;
height: 52px;
font-size: 18px;
font-family: SourceHanSansSC-Regular, SourceHanSansSC;
font-weight: 400;
color: #333333;
line-height: 26px;
-webkit-line-clamp: 2;/** 显示的行数 **/
overflow: hidden;
margin: 18px 18px ;
}
.big-box h4:hover,.big-box p:hover {
color: red;
cursor:pointer;
}
.big-box p {
width: 234px;
height: 20px;
font-size: 14px;
font-family: SourceHanSansSC-Normal, SourceHanSansSC;
font-weight: 400;
color: #999999;
margin-left: 14px;
}