校园二手交易系统(四):首页展示及商品详情页面

本次完成首页的商品展示以及商品详情页面,主要使用mybatisPlus,并无技术难点,主要实现效果如下

展示浏览排名前三的轮播:

使用elementUI的carousel走马灯

        <el-carousel :interval="4000" type="card" height="440px" >
          <el-carousel-item v-for="item in top3Goods" :key="item.id">
            <div class="bgCo1">
              <el-image :src="item.picturesurl" @click="jumpGoodsDetail(item.id)"></el-image>
            </div>
          </el-carousel-item>
        </el-carousel>

通过每次点击商品增加商品被浏览次数来对浏览量前三排序

整体效果

商品详情页

使用element的rate组件完成评分功能

<el-rate
  v-model="goodsDetail.score"
  disabled
  show-text
  :texts="texts"
  text-color="#ff9900"
>
</el-rate>

项目源码:

前端项目地址：https://github.com/superblue6/deal-web

后台项目地址https://github.com/superblue6/deal