网络书店前端代码

<template>
  <el-container>
    <el-header >
      <el-menu
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff">
        <el-menu-item index="1">在线书城el-menu-item>
        <el-menu-item index="2">首页el-menu-item>

        <el-submenu index="3">
          <template slot="title">图书类型template>
          <el-menu-item index="3-1">哲学el-menu-item>
          <el-menu-item index="3-2">政治el-menu-item>
          <el-menu-item index="3-3">经济el-menu-item>
        el-submenu>
        <el-menu-item index="4">登录el-menu-item>
        <el-menu-item index="5">安全退出el-menu-item>
        <el-menu-item index="6">注册el-menu-item>
        <el-menu-item index="7" class="el-icon-shopping-cart-full">订单管理el-menu-item>
        <el-menu-item style="right: 5%; position:fixed" >
              <el-input placeholder="请输入图书名称" clearable  v-model="bookSearch">el-input>
              <el-button type="primary" icon="el-icon-search" style="height: 40px;margin-left:5px;margin-top: 2px">el-button>
        el-menu-item>


      el-menu>
    el-header>


    <el-main>
      <el-row>
        <el-col :span="24" style="height: 300px">
    <el-carousel indicator-position="none" style="height: 300px">
      <el-carousel-item v-for="item in imgList" :key="item.id">
        <img :src="item.idView" class="image" style="width: 100%;height: 300px" >
      el-carousel-item>
    el-carousel>
        el-col>
      el-row>


      <el-row >
        <el-col :span="6" v-for="(b,index) in booksList" :key="index" >
          <el-card>
            <img :src="require('../assets/'+b.image)" class="image">
            <div style="font-size: 18px;padding-top: 5px">
              {{b.name}}
            div>
            <div style="font-size: 10px;text-align: left;padding-top: 5px">
              作者：{{b.author}}
            div>


            <el-popover class="button"
                        placement="right"
                        width="400"
                        trigger="click">
              <el-descriptions title="书籍信息">
                <el-descriptions-item label="书名">{{book.bookName}}}el-descriptions-item>
                <el-descriptions-item label="作者">{{book.author}}el-descriptions-item>
                <el-descriptions-item label="价格">{{book.price}}el-descriptions-item>
                <el-descriptions-item label="简介">{{book.description}}el-descriptions-item>
              el-descriptions>
              <el-button type="text" slot="reference" @click="open(b.id)">更多信息el-button>
            el-popover>






          el-card>
        el-col>
      el-row>


      <el-row>
        <el-col>
          <div class="block">
            <el-pagination
                :page-sizes="[2,4]"
                :page-size="pageSize"
                :current-page="pageNum"
                @current-change="handleCurrentChange"
                @prev-click="prevPage"
                @next-click="nextPage"
                @size-change="changePage"
                layout="total,sizes,prev, pager, next"
                :total="total">
            el-pagination>
          div>
        el-col>
      el-row>





    el-main>
  el-container>
template>
<script>

export default {
data(){
  return{
    total:0,
    pageNum:1,
    pageSize:4,
    bookSearch:'',
    ing:'.jpg',
    imgList: [
      {id:0,idView:require("@/assets/1.jpg")},
      {id:1,idView:require("@/assets/2.jpg")},
      {id:2,idView:require("@/assets/3.jpg")},
      {id:3,idView:require("@/assets/4.jpg")},
    ],
    booksList: {},
    book:{
      bookName:'',
      author:'',
      price:'',
      description:'',
    },
    }

  },
  methods:{
    open(id) {
      console.log(id)
      this.$axios.get(
          'api/book/findBookInformation?id='+id,
          {headers:{"jwt":localStorage.getItem("jwt")}})
          .then(res =>{
            console.log(res.data);
            this.book = res.data.data
          })
    },
    requestBookList(){
      let param = {};
          param.pageNum = this.pageNum;
          param.pageSize = this.pageSize;
          this.$axios.post(
              'api/book/findBookList',
              param,
              {headers:{"jwt":localStorage.getItem("jwt")}})
              .then(res =>{
                console.log(res.data)
                this.pageSize = res.data.data.pageSize;
                this.pageNum = res.data.data.pageNum;
                this.booksList = res.data.data.list;
                this.total = res.data.data.total
                console.log(this.booksList)
              })
    },
    prevPage(val){
      this.pageNum = val
      this.requestBookList();
    },
    nextPage(val){
      this.pageNum = val
      this.requestBookList();
    },
    changePage(val){
      this.pageNum = 1;
      this.pageSize = val;
      this.requestBookList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val
      this.requestBookList();
    },


  },
  created() {
  this.requestBookList();
  }


}
script>

<style scoped>
.el-header {
  background-color: #545c64;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
}


.image {
  width: 100%;
  display: block;
}



.button {
  padding: 0;
  float: left;
}

.group-item-vo {
  display: flex;
  justify-content: flex-start;
  padding-bottom: 14px;
}


style>