vue实现书库

Vue 实现书库功能

使用 Vue.js 实现一个书库功能可以结合前端框架和后端数据管理。以下是关键步骤和代码示例：

项目结构搭建

使用 Vue CLI 创建项目并安装必要依赖：

vue create book-library
cd book-library
npm install vue-router axios

路由配置

在 src/router/index.js 中配置基本路由：

import { createRouter, createWebHistory } from 'vue-router'
import BookList from '../views/BookList.vue'

const routes = [
  {
    path: '/',
    name: 'BookList',
    component: BookList
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

书库组件实现

创建 src/views/BookList.vue 组件：

<template>
  <div class="book-library">
    <h1>我的书库</h1>
    <div v-for="book in books" :key="book.id" class="book-item">
      <h3>{{ book.title }}</h3>
      <p>作者: {{ book.author }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      books: [
        { id: 1, title: 'Vue.js 实战', author: '张三' },
        { id: 2, title: 'JavaScript 高级编程', author: '李四' }
      ]
    }
  }
}
</script>

<style>
.book-library {
  max-width: 800px;
  margin: 0 auto;
}
.book-item {
  border: 1px solid #ddd;
  padding: 15px;
  margin-bottom: 10px;
}
</style>

添加API交互

在 src/services/bookService.js 中创建API服务：

import axios from 'axios'

const API_URL = 'http://your-api-endpoint.com/books'

export default {
  async getBooks() {
    const response = await axios.get(API_URL)
    return response.data
  },
  async addBook(bookData) {
    const response = await axios.post(API_URL, bookData)
    return response.data
  }
}

完善书库功能

更新 BookList.vue 组件实现完整CRUD功能：

<template>
  <div class="book-library">
    <h1>我的书库</h1>
    <form @submit.prevent="addBook">
      <input v-model="newBook.title" placeholder="书名" required>
      <input v-model="newBook.author" placeholder="作者" required>
      <button type="submit">添加书籍</button>
    </form>

    <div v-for="book in books" :key="book.id" class="book-item">
      <h3>{{ book.title }}</h3>
      <p>作者: {{ book.author }}</p>
      <button @click="deleteBook(book.id)">删除</button>
    </div>
  </div>
</template>

<script>
import bookService from '../services/bookService'

export default {
  data() {
    return {
      books: [],
      newBook: {
        title: '',
        author: ''
      }
    }
  },
  async created() {
    this.books = await bookService.getBooks()
  },
  methods: {
    async addBook() {
      const addedBook = await bookService.addBook(this.newBook)
      this.books.push(addedBook)
      this.newBook = { title: '', author: '' }
    },
    async deleteBook(id) {
      await bookService.deleteBook(id)
      this.books = this.books.filter(book => book.id !== id)
    }
  }
}
</script>

状态管理（可选）

对于复杂应用，可以使用Vuex管理状态：

// store/modules/books.js
export default {
  state: {
    books: []
  },
  mutations: {
    SET_BOOKS(state, books) {
      state.books = books
    },
    ADD_BOOK(state, book) {
      state.books.push(book)
    }
  },
  actions: {
    async fetchBooks({ commit }) {
      const books = await bookService.getBooks()
      commit('SET_BOOKS', books)
    }
  }
}

这个实现提供了书库的基本功能，包括书籍展示、添加和删除。可以根据需求扩展搜索、分类、详情页等功能。后端API可以使用Node.js、Laravel或其他服务端技术实现。