//html部分
<div class="goods-box">
<div class="one">
<img src="img/product1.jpg" alt="">
<div class="goods-price">¥438.00</div>
<div class="goods-text">
<a href="#">【坏果包赔】<span>猫山王榴莲</span>肉马来西亚进口带壳(D197)液氮冷冻水果 特惠装 中果</a>
</div>
<div class="goods-comment">
<span>1万+</span>条评价
</div>
<div class="goods-comment">
<a href="">猫山王榴莲旗舰店</a>
</div>
<div class="logistic" title="京东物流仓配,商家提供售后服务">
<i>京东物流</i>
</div>
<div class="last-shop">
<a href="#" class="contrast"><div class="squre"></div> <i> </i> 对比</a>
<a href="#" class="contrast ss"><span class="gz"></span><i> </i>关注</a>
<a href="#" class="contrast shop"><img src="img/jiar.png" width="19px" alt=""><i> </i> 加入购物车</a>
</div>
</div>
</div>
<div class="cont-paging">
<span class="page-change prev">上一页</span>
<div class="paging"></div>
<span class="page-change nex">下一页</span>
</div>
//css部分
.goods-box {
width: 1080px;
height: 450px;
margin-top: 50px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-color: #f9f9f9;
}
.one {
float: left;
width: 220px;
margin-top: 20px;
margin-bottom: 0;
margin-left: 40px;
}
.one::after {
content: '';
display: block;
clear: both;
}
.goods-price {
margin-top: 15px;
color: #e4393c;
font-size: 18px;
}
.goods-text {
overflow: hidden;
height: 50px;
margin-top: 10px;
color: #666;
font-size: 12px;
text-overflow: ellipsis;
}
.goods-text a {
color: #666;
}
.goods-text span {
color: #e4393c;
}
.goods-text a:hover {
color: #e4393c;
}
.goods-comment {
margin-top: 10px;
color: #a7a7a7;
font-size: 12px;
}
.goods-comment span {
color: #646fb0;
}
.goods-comment a {
color: #a7a7a7;
}
.logistic {
height: 16px;
margin-top: 10px;
}
.logistic i {
padding: 0 3px;
border: 1px solid #e23a3a;
color: #e23a3a;
font-size: 12px;
}
.last-shop {
margin-top: 16px;
margin-bottom: 0;
}
.last-shop::after {
content: '';
display: block;
clear: both;
}
.contrast {
float: left;
position: relative;
width: 58px;
height: 25px;
margin-bottom: 10px;
border: 1px solid #ddd;
color: #999;
font-size: 12px;
line-height: 25px;
}
.squre {
float: left;
width: 10px;
height: 10px;
margin-top: 6px;
margin-left: 6px;
border: 1px solid rgb(221, 221, 221);
}
.gz {
margin-left: 6px;
font-family: 'iconfont';
font-size: 15px;
}
.ss {
border-left: none;
}
.shop {
width: 93px;
border-left: none;
}
.shop img {
margin-left: 3px;
vertical-align: -5px;
}
.cont-paging {
width: 1080px;
height: 50px;
margin-top: 0;
margin-right: auto;
margin-left: auto;
background-color: #fff;
line-height: 50px;
text-align: center;
}
.cont-paging::after {
content: '';
display: block;
clear: both;
}
.page-change {
float: left;
height: 20px;
margin-top: 15px;
margin-right: 20px;
margin-left: 350px;
background-color: rgb(162, 167, 228);
color: rgb(56, 56, 56);
line-height: 20px;
}
//js部分
let ww = [];
let res = '';
let shoppingcar = $('.shop-box');
let y=0;
let allgoods = $('.all-good');
//axios引入数据,需要说明的是引用axios需要用<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios.post("http://8.130.175.54:8003/getAllGoods")
.then(function (xlfy) {
console.log(xlfy.data);
res=xlfy.data;
//获取元素,分页效果
let div = $('.goods-box');
let prev = $('.prev');
let nex = $('.nex');
let paging = $('.paging');
let pagecount = Math.ceil(xlfy.data.length/4);
let x=1;
let info = [];
//定义图片
let pict = ['<img src="img/product10.jpg" alt="">',
'<img src="img/product1.jpg" alt="">',
'<img src="img/product2.jpg" alt="">',
'<img src="img/product3.jpg" alt="">',
'<img src="img/product4.jpg" alt="">',
'<img src="img/product5.jpg" alt="">',
'<img src="img/product6.jpg" alt="">',
'<img src="img/product7.jpg" alt="">',
'<img src="img/product8.jpg" alt="">',
'<img src="img/product9.jpg" alt="">'
]
//渲染函数,将数据插入
let rend = ()=>{
info = xlfy.data.slice((x-1)*4,4*x);
div.innerHTML = '';
info.forEach((item,index)=>{
let one = document.createElement('div');
one.classList.add('one');
one.setAttribute('index',item.id);
one.innerHTML += `${pict[index]}
<div class="goods-price">¥${item.price}</div>
<div class="goods-text">
<a href="#">【${item.name}】${item.desc}</a>
</div>
<div class="goods-comment">
<a href="">${item.merchant}</a>
</div>
<div class="logistic" title="京东物流仓配,商家提供售后服务">
<i>京东物流</i>
</div>
<div class="last-shop">
<a href="javascript:void(0)" class="contrast"><div class="squre"></div> <i> </i> 对比</a>
<a href="javascript:void(0)" class="contrast ss"><span class="gz"></span><i> </i>关注</a>
<a href="javascript:void(0)" class="contrast shop"><img src="img/jiar.png" width="19px" alt=""><i> </i> 加入购物车</a>
</div>`;
div.appendChild(one);
})
}
//调用渲染函数
rend();
//添加页数
for(let i=1;i<=pagecount;i++){
paging.innerHTML = paging.innerHTML+`<a>${i}</a>`+' ';
}
//添加页数输入框
paging.innerHTML+=`<span class='skip'>跳转至<input type='text'></span>页`;
//选择页数并给第一页添加默认的背景色
let all = paging.querySelectorAll('a');
all[x-1].classList.add('active');
//选择页数,实现点击某页跳转到那一页
all.forEach((item,index)=>{
item.onclick = function(){
div.innerHTML = '';
for(let i=0;i<all.length;i++){
all[i].classList.remove('active');
}
this.classList.add('active');
x = index+1;
rend();
}
})
//input框按enter键实现跳转
let skipinput = document.querySelector('.skip input');
skipinput.onkeydown = function(e){
if(e.keyCode==13&& skipinput.value !=''){
for(let i=0;i<all.length;i++){
all[i].classList.remove('active');
}
x = e.target.value;
all[x-1].classList.add('active');
div.innerHTML = '';
rend();
}
if(x>=all.length||x<=0){
return ;
}
}
//点击上一页,下一页改变高亮
let changepage = ()=>{
for(let i=0;i<all.length;i++){
all[i].classList.remove('active');
}
all[x-1].classList.add('active');
}
//上一页的点击效果
prev.onclick = function(){
if(x<=1){
return;
}else{
div.innerHTML = '';
x=x-1;
changepage();
rend();
}
}
//下一页的点击效果
nex.onclick = function(){
if(x>=3){
return ;
}else{
div.innerHTML='';
x=x+1;
changepage();
rend();
}
}