practice_Vue/src/views/BookView.vue

<template>
  <div class="book-list">
    <div v-for="book in books" :key="book.id" class="book-item">
      <img :src="book.cover">
      <!-- <img :src="book.cover" :alt="book.title"> -->
      <div class="book-info" >
        <h3>{{ book.title }}</h3>
        <p>{{ book.description }}</p>
        <p>阅读次数：{{ book.viewCount }}次</p>
      </div>
      <button @click="handleReadBook(book.title)">立即阅读</button>
    </div>
  </div>
</template>

<!-- <script>
import { ref } from 'vue';

export default {
  name: 'Book',
  setup() {
    const books = ref([
      {
        title: "发财线秘籍",
        description: "发财线经济（阅读时间截止为2024年6月30日）",
        reads: 2490,
        cover: "./src/assets/发财线.png"
      },
      {
        title: "解套宝典",
        description: "解套宝典（阅读截止时间为2024年12月31日）",
        reads: 1057,
        cover: "src/assets/解套.png"
      },
      {
        title: "十年200倍——上册",
        description: "十年200倍——上册（阅读截止时间为2024年12月31日）",
        reads: 1073,
        cover: "src/assets/十年上.png"
      },
      {
        title: "十年200倍——下册",
        description: "十年200倍——下册（阅读截止时间为2024年12月31日）",
        reads: 1018,
        cover: "src/assets/十年下.png"
      }
    ]);

    const handleReadBook = (title) => {
      alert(`您点击了《${title}》`);
    };

    return {
      books,
      handleReadBook
    };
  }
};
</script> -->
<script setup>
import bookApi from '@/api/bookApi';
import { ref } from 'vue';

const books = ref([]);
//向后端发送请求
function getBooks() {
  bookApi.getBookList().then(resp => {
    books.value = resp.data.list;
    console.log(books.value);
  } );
}
getBooks();

// const books = ref([
//   {
//     title: "发财线秘籍",
//     description: "发财线经济（阅读时间截止为2024年6月30日）",
//     reads: 2490,
//     cover: "src/assets/发财线.png"
//   },
//   {
//     title: "解套宝典",
//     description: "解套宝典（阅读截止时间为2024年12月31日）",
//     reads: 1057,
//     cover: "src/assets/解套.png"
//   },
//   {
//     title: "十年200倍——上册",
//     description: "十年200倍——上册（阅读截止时间为2024年12月31日）",
//     reads: 1073,
//     cover: "src/assets/十年上.png"
//   },
//   {
//     title: "十年200倍——下册",
//     description: "十年200倍——下册（阅读截止时间为2024年12月31日）",
//     reads: 1018,
//     cover: "src/assets/十年下.png"
//   }
// ]);

const handleReadBook = (title) => {
  alert(`您点击了《${title}》`);
};
</script>

<style>

.book-item:hover{
  transform: scale(1.01);
}
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 20px;
}

.book-list {
  display: flex;
  flex-direction: column;
}

.book-item {
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
}

.book-item img {
  width: 100px;
  height: 150px;
  margin-right: 20px;
}

.book-info {
  flex-grow: 1;
}

.book-info h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
  text-align: left;
}

.book-info p {
  margin: 5px 0;
  color: #555;
  text-align: left;
}

button {
  background-color: #ff6f61;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #ff5252;
}
</style>