A074_前台服务展示_列表页_详情

XIAOMING820

已于 2022-02-17 21:05:45 修改

阅读量146

点赞数

分类专栏：文档文章标签： java

于 2021-06-25 20:25:17 首次发布

本文链接：https://blog.csdn.net/ffhgjgj6576567/article/details/118227859

版权

文档专栏收录该内容

118 篇文章 6 订阅

订阅专栏

服务管理Day02

内容介绍

1. 前台服务的展示（掌握）
2. 宠物的上架与下架（掌握）

  商城，领养，服务，百科，关于我们，加入我们等功能

<ul>
   <li class="index"><a href="#">商城</a></li>
      <li class="qc"><a href="product.html" target="_blank" >服务</a></li>
      <li class="qc"><a href="product.html" target="_blank">领养</a></li>
      <li class="qc"><a href="https://baike.baidu.com/item/%E5%AE%A0%E7%89%A9/229020" target="_blank">百科</a></li>
<li class="qc"><a href="aboutUs.html" target="_blank">关于我们</a></li>
<li class="qc last"><a href="aboutUs.html" target="_blank">加入我们</a></li>
</ul>

1.前台服务展示

1.1.列表页

1.1.1.后台服务支持

只能列表上架了的服务
Query

@Data
public class ProductQuery extends BaseQuery {

    private Integer state;
}

ProductController

@PostMapping("/list")
public PageList<Product> query(@RequestBody ProductQuery query){
    System.out.println(query);
    query.setState(1); //查询只是上架了的
    return productService.queryPage(query);
}

ProductMapper.xml

<sql id="whereSql">
    <where>
        <if test="keywords!=null and keywords!=''">
            and name like concat('%',#{keywords},'%')
        </if>
        <if test="state!=null">
            and state = #{state}
        </if>
    </where>
</sql>
<!--//查询总条数-->
<!--Long queryCount(BaseQuery query);-->
<select id="queryCount" resultType="long" parameterType="ProductQuery">
    select count(*) from t_product
    <include refid="whereSql"/>
</select>
<!--//查询数据-->
<!--List<T> queryData(BaseQuery query);-->
<select id="queryData" parameterType="ProductQuery" resultType="Product">
     select * from t_product
     <include refid="whereSql"/>
     limit #{start},#{pageSize}
</select>

1.1.2.前台支持

构造假数据：

package cn.itsource;

import cn.itsource.product.domain.Product;
import cn.itsource.product.domain.ProductDetail;
import cn.itsource.product.service.IProductService;
import org.junit.Test;
import org.springframework.beans.factory.annotation.Autowired;

import java.math.BigDecimal;

public class ProductTest extends BaseTest {

    @Autowired
    private IProductService productService;

    @Test
    public void initDataTest() throws Exception{

        Long productId = 176L;
        Product product = productService.getById(productId);
        ProductDetail productDetail = productService
                .getDetailByProductId(productId);


        product.setId(null);
        productDetail.setId(null);
        productDetail.setProduct_id(null);
        product.setDetail(productDetail);

        for (int i = 0; i < 100; i++) {
            if (i%3==0){
                product.setName("基础版洗澡"+i);
                product.setCostprice(new BigDecimal(30));
                product.setSaleprice(new BigDecimal(50));
                product.setSalecount(50L+i);
            }
            else if(i%3==1){
                product.setName("中级版洗澡"+i);
                product.setCostprice(new BigDecimal(50));
                product.setSaleprice(new BigDecimal(80));
                product.setSalecount(30L+i);
            }
            else{
                product.setName("高级版洗澡"+i);
                product.setCostprice(new BigDecimal(100));
                product.setSaleprice(new BigDecimal(150));
                product.setSalecount(10L+i);
            }

            productService.add(product);
        }
    }
}

传的图片都是800x800 fastdfs访问时默认是800x800，还支持三个尺寸，
封面430x430，小图60x60 中图350x350

1）修改首页导航栏图片

2）将search.html页面导入到项目中改为product.html，并且修改导航栏
在这里插入图片描述

33)列表页实现
①引入vue，axios

<!--导入vue和axios-->
<script src="./plugins/vue/dist/vue.min.js"></script>
<script src="./plugins/axios/dist/axios.js"></script>
<script src="./js/common.js"></script>
<script type="text/javascript">
   new Vue({
      el:"#productDiv",
      data:{
         fastDfsUrl:"http://115.159.217.249:8888/",
         coverImgSuffix:"_430x430.jpg",
         pageList:{
             total:0,
            rows:[]
         },
         queryParams:{
             keyword:'',
            currentPage:1,
            pageSize:12
         }
      },
      methods:{
               handleCurrentChange(page){
                   if(page==0){
                       this.queryParams.currentPage=1
            } else if(page>=this.totalPages){
                       this.queryParams.currentPage=this.totalPages
            }else{
                       this.queryParams.currentPage=page;
            }
                   this.getProducts();
         },
               search(){
                   //重置为第一页
            this.queryParams.currentPage = 1;
                   this.getProducts()
         },
          getProducts(){
              this.$http.post("/product/list",this.queryParams)
               .then(result=>{
                           result = result.data; //PageList-total,rows
                  if(result){
                      this.pageList = result;
                  }

               })
                       .catch(result=>{
                           console.log(result);
                  alert("系统错误！")
                       })

         }
      },
      computed:{
          totalPages(){
              //Math.ceil 向上取整
              return Math.ceil(this.pageList.total/this.queryParams.pageSize)
         }
      },
      mounted(){
          this.getProducts();
      }
   })
</script>

②列表数据展示

<ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-4 boxes">
   <li  v-for="(row,index) in pageList.data" @click="goDetail(row.id)">
      <div class="i-pic limit">
         <!--如果没有图，显示404图片-->
         <img src="./images/imgsearch1.jpg" v-if="!row.resources"/>
         <!--封面 resources[0]-->
         <img :src="fastDfsUrl+row.resources.split(',')[0]+imgSuffix" v-if="row.resources"/>
         <p class="title fl">【官方旗舰店】{{row.name}}</p>
         <p class="price fl">
            <b>¥</b>
            <strong>{{row.saleprice}}</strong>
         </p>
         <p class="number fl">
            销量<span>{{row.salecount}}</span>
         </p>
      </div>
   </li>
</ul>

③：分页

<!--分页 -->
<ul class="am-pagination am-pagination-right">
   <!--如果当前页等于1，上一页就不能点 class="am-disabled"-->
   <li ><a href="javascript:;" @click="handleCurrentChange(queryParams.currentPage-1)">&laquo;</a></li>
   <li v-for="page in totalPages">
      <a href="javascript:;" @click="handleCurrentChange(page)">{{page}}</a>
   </li>
   <!--<li class="am-active"><a href="#">1</a></li>-->
   <!--<li><a href="#">2</a></li>-->
   <!--<li><a href="#">3</a></li>-->
   <!--<li><a href="#">4</a></li>-->
   <!--<li><a href="#">5</a></li>-->
   <li><a href="javascript:;" @click="handleCurrentChange(queryParams.currentPage+1)">&raquo;</a></li>
</ul>

1.2.查看详情

拷贝introduction.html为product_detail.html

1.2.1.跳转详情页

在这里插入图片描述

列表页：

<li  v-for="(row,index) in pageList.data" @click="goDetail(row.id)">

列表页增加跳转的js

goDetail(productId){
                let url = "product_detail.html?productId="+productId;
                //占用列表页窗口，不能使用
                //location.href = url;

 //打开一个窗口，里面的内容就是那个地址的内容
 window.open(url);
},

1.2.2.数据展示

1.2.2.1.后台接口

Controller
//关联查询详情
@GetMapping("/{id}")
public Product get(@PathVariable("id") Long id){
    return productService.getById(id);
}

Mapper.xml
<select id="loadById" parameterType="long" resultMap="ProductMap">
    SELECT
        p.*, pd.id did,
        pd.intro,
        pd.orderNotice
    FROM
        t_product p
    LEFT JOIN t_product_detail pd ON p.id = pd.product_id
    WHERE
        p.id = #{id}
</select>
<resultMap id="ProductMap" type="Product">
    <id property="id" column="id"></id>
    <result property="name" column="name"></result>
    <result property="resources" column="resources"></result>
    <result property="saleprice" column="saleprice"></result>
    <result property="offsaletime" column="offsaletime"></result>
    <result property="onsaletime" column="onsaletime"></result>
    <result property="state" column="state"></result>
    <result property="costprice" column="costprice"></result>
    <result property="createtime" column="createtime"></result>
    <result property="salecount" column="salecount"></result>
    <!--private ProductDetail detail;-->
    <association property="detail" javaType="ProductDetail">
        <id property="id" column="did"></id>
        <result property="intro" column="intro"></result>
        <result property="orderNotice" column="orderNotice"></result>
    </association>
</resultMap>

1.2.2.2.前台展示

目前只是一个简单的html在前端页面的跳转：
Js

<!--导入vue和axios-->
<script src="./plugins/vue/dist/vue.min.js"></script>
<script src="./plugins/axios/dist/axios.js"></script>
<script src="./js/common.js"></script>
<script type="text/javascript">
 new Vue({
  el:"#detailDiv",
  data:{
               fastDfsUrl:"http://122.51.119.246:8888",
               midimgSuffix:"_350x350.jpg",
               smallimgSuffix:"_60x60.jpg",
     resources:[],
               product:{}
  },
  methods:{
              getProduct(productId){
                  this.$http.get("/product/"+productId)
          .then(result=>{
             this.product = result.data;
             console.log(this.product)
             if(this.product.resources){
                              this.resources = this.product.resources.split(',');
                          }
          });
    }
  },
  mounted(){
     let productId =
       parseUrlParams2Obj(location.href).productId;

     //转换为数字
     productId = parseInt(productId);
     this.getProduct(productId);
  }
 })
</script>

界面
1.切换图片js

$(document).ready(function() {
   $(".jqzoom").imagezoom();
   $("#thumblist").on("click","#thumblist li a", function() {
                              $(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");
                                $(".jqzoom").attr('src', $(this).find("img").attr("mid"));
                                $(".jqzoom").attr('rel', $(this).find("img").attr("big"));
                            });
   /*$("#thumblist li a").click(function() {
      $(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");
      $(".jqzoom").attr('src', $(this).find("img").attr("mid"));
      $(".jqzoom").attr('rel', $(this).find("img").attr("big"));
   });*/
});

2.图片展示

<div class="tb-booth tb-pic tb-s310">

   <a :href="fastDfsUrl+resources[0]">
      <img :src="fastDfsUrl+resources[0]+midimgSuffix" alt="细节展示放大镜特效" :rel="fastDfsUrl+resources[0]" class="jqzoom" />
   </a>
</div>
<ul class="tb-thumb" id="thumblist">
   <!--<li class="tb-selected" v-for="(resource,index) in resources">-->
      <!--<div class="tb-pic tb-s40">-->
         <!--<a href="#"><img src="./images/01_small.jpg" mid="./images/01_mid.jpg" big="./images/01.jpg"></a>-->
      <!--</div>-->
   <!--</li>-->
   <li v-for="(resource,index) in resources">
      <div class="tb-pic tb-s40 tb-selected" v-if="index==0">
         <a href="#"><img :src="fastDfsUrl+resource+smallimgSuffix" :mid="fastDfsUrl+resource+midimgSuffix" :big="fastDfsUrl+resource"></a>
      </div>
      <div class="tb-pic tb-s40" v-else>
         <a href="#"><img :src="fastDfsUrl+resource+smallimgSuffix" :mid="fastDfsUrl+resource+midimgSuffix" :big="fastDfsUrl+resource"></a>
      </div>
   </li>
</ul>


2 详情
```html
<div class="am-tab-panel am-fade am-in am-active">
   <div class="J_Brand">

      <div class="attr-list-hd tm-clear">
         <h4>服务简介：</h4></div>
      <div class="clear"></div>
      <ul id="J_AttrUL">
         <div v-html="product.detail.intro" v-if="product.detail"></div>
      </ul>
      <div class="clear"></div>
   </div>

   <div class="details">
      <div class="attr-list-hd after-market-hd">
         <h4>预约须知</h4>
      </div>
      <div class="twlistNews">
         <div v-html="product.detail.orderNotice" v-if="product.detail"></div>
      </div>
   </div>
   <div class="clear"></div>

</div>

不能切换图片问题的解决
在这里插入图片描述

2.课程总结

2.1.重点

2.2.难点

2.3.如何掌握

2.4.排错技巧（技巧）

3.常见问题

4.课后练习

5.面试题

6.扩展知识或课外阅读推荐（可选）

6.1.扩展知识

6.2.课外阅读

XIAOMING820

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
A074_前台服务展示_列表页_详情

服务管理Day02内容介绍1. 前台服务的展示（掌握）2. 宠物的上架与下架（掌握）商城，领养，服务，百科，关于我们，加入我们等功能<ul> <li class="index"><a href="#">商城</a></li> <li class="qc"><a href="product.html" target="_blank" >服务</a&gt
复制链接

扫一扫

专栏目录