Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城（SSM前后端分离项目）十五（实现商品页面搜索功能，以及分页功能）(1)

• （2）处理返回的数据

  

  el: “#searchApp”,

  data: {

  search:{},

  goodsList:[],

  total: 0,

  totalPage: 0,

  selectedSku:{}

  },

  created(){//这是个构造方法

  //获取请求参数

  const search = ly.parse( location.search.substring(1));

  this.search = search;

  //发送后台数据

  this.loadData();

  },

  methods:{

  loadData(){

  //发送数据到后台

  ly.http.post(“/search/page”,this.search).then(resp => {

  //保存分页结果

  this.total = resp.data.total;

  this.totalPage = resp.data.totalPage;

  //保存当前页商品数据

  resp.data.items.forEach(goods =>{

  // 把JSON处理为JS对象

  goods.skus = JSON.parse(goods.skus);//JSON.parse将JSON字符串转换为JSON对象

  //初始化被选中的sku

  goods.selectedSku = goods.skus[0];

  })

  this.goodsList = resp.data.items;

  }).catch(error =>{

  })

  }

  },

  （3）完善HTML代码

  

• 
• 
• 
• ¥

  促{ { goods.subTitle }}

  已有2000人评价

  加入购物车

  对比

  关注

  刷新页面

  显示成功

  

  （4）处理上述的代码

  1）设置价格

  定义ly变量

  

  设置价格格式

  

  刷新页面

  

  2）处理字太多下不下

  

  促{ { goods.subTitle.substring(0,15) }}…

  刷新页面

  

  3）设置点击小图片切换大图片

  

  

• 刷新页面

  

  设置鼠标动到图片上切换选择并显示对应的图片

  

  鼠标悬浮直接切换当前的sku，之后图片价格和描述都会改变

  @mouseenter=“goods.selectedSku=sku”

  切换成功

  

  2、设置分页条

  

  

• 设置初始页

  

  search.page = parseInt(search.page) || 1;

  刷新页面。我们可以看到设置了page的初始值为1

  

  设置是否选中当前页

  

• 刷新页面

  

  3、设置分页的当前页永远在中间

  当当页大于3的时候整体页数+1

  

  v-for=“i in Math.min(5,totalPage)” :key=“i”>

  实现index函数

  

  index(i){

  if(this.search.page <= 3 || this.totalPage < 5){

  return i;

  }else if(this.search.page >= this.totalPage - 2){

  return this.totalPage - 5 + i;

  }else {

  return i + this.search.page - 3;

  }

  }

  

  

  

  

  4、实现点击分页条实现页面的切换

  （1）实现上一页和下一页的切换

  1）添加点击事件

  

• <a href=“#” @click.prevent=“prePage” >«上一页

• ...

• <a href=“#” @click.prevent=“nextPage”>下一页»

  2）实现对应函数

  

  prePage(){

  if(this.search.page > 1){

  this.search.page–;

  }

  },

  nextPage(){

  if(this.search.page < this.totalPage){

  this.search.page++;

  }

  }

  （2）设置总页数，和总数量