【愚公系列】《循序渐进Vue.js 3.x前端开发实践》066-案例：简单的图书管理系统

愚公搬代码

发布于 2025-06-03 08:19:36

14600

代码可运行

文章被收录于专栏：循序渐进Vue.js 3.x前端开发实践循序渐进Vue.js 3.x前端开发实践

运行总次数：0

代码可运行

🚀前言

在数字化时代，图书管理系统作为信息管理的重要工具，广泛应用于图书馆、学校和个人图书收藏等场景。一个高效的图书管理系统不仅可以帮助用户方便地管理书籍信息，还能提供良好的用户体验和数据查询能力。随着前端技术的发展，构建这样一个系统变得更加轻松和高效。

🚀一、案例：简单的图书管理系统

🔎1.项目准备

首先，使用 Vite 创建一个 Vue 项目，并安装必要的依赖项：

npm create vite@latest book-management --template vue
cd book-management
npm install
npm install pinia vue-router

🔎2.目录结构

创建以下目录和文件结构：

src/
- components/
  - BookList.vue
  - AddBook.vue
  - EditBook.vue
- router/
  - index.js
- stores/
  - bookStore.js
- main.js
- App.vue

🔎3.配置 Pinia

在 src/stores/bookStore.js 文件中，编写 Pinia 状态管理逻辑：

import { defineStore } from 'pinia';
import { ref } from 'vue';

export const useBookStore = defineStore('book', () => {
  // 存储图书信息的数组
  const books = ref([]);

  // 添加图书的方法
  const addBook = (book) => {
    books.value.push(book);
  };

  // 编辑图书的方法
  const editBook = (index, updatedBook) => {
    books.value[index] = updatedBook;
  };

  // 删除图书的方法
  const deleteBook = (index) => {
    books.value.splice(index, 1);
  };

  return { books, addBook, editBook, deleteBook };
});

🔎4.创建组件

🦋4.1 BookList.vue

在 src/components/BookList.vue 文件中，编写用于显示图书列表的组件：

<script setup>
import { useBookStore } from '../stores/bookStore';

const bookStore = useBookStore();
</script>

<template>
  <div>
    <h1>图书列表</h1>
    <ul>
      <li v-for="(book, index) in bookStore.books" :key="index">
        {{ book.title }} - {{ book.author }}
        <button @click="() => $router.push(`/edit/${index}`)">编辑</button>
        <button @click="() => bookStore.deleteBook(index)">删除</button>
      </li>
    </ul>
    <router-link to="/add">添加图书</router-link>
  </div>
</template>

🦋4.2 AddBook.vue

在 src/components/AddBook.vue 文件中，编写用于添加图书信息的组件：

<script setup>
import { useBookStore } from '../stores/bookStore';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const store = useBookStore();
const router = useRouter();
const book = ref({ title: '', author: '' });

const addBook = () => {
  store.addBook(book.value);
  router.push('/');
};
</script>

<template>
  <div>
    <h1>添加图书</h1>
    <form @submit.prevent="addBook">
      <label>书名: <input v-model="book.title" /></label>
      <label>作者: <input v-model="book.author" /></label>
      <button type="submit">提交</button>
    </form>
    <router-link to="/">返回图书列表</router-link>
  </div>
</template>

🦋4.3 EditBook.vue

在 src/components/EditBook.vue 文件中，编写用于编辑图书信息的组件：

<script setup>
import { useBookStore } from '../stores/bookStore';
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const route = useRoute();
const router = useRouter();
const store = useBookStore();

const bookIndex = ref("");
const book = ref({ title: '', author: '' });

onMounted(() => {
  bookIndex.value = route.params.index;
  book.value = { ...store.books[bookIndex.value] };
});

const editBook = () => {
  store.editBook(bookIndex.value, book.value);
  router.push('/');
};
</script>

<template>
  <div>
    <h1>编辑图书</h1>
    <form @submit.prevent="editBook">
      <label>书名: <input v-model="book.title" /></label>
      <label>作者: <input v-model="book.author" /></label>
      <button type="submit">提交</button>
    </form>
    <router-link to="/">返回图书列表</router-link>
  </div>
</template>

🔎5.配置路由

在 src/router/index.js 文件中，配置 Vue Router：

import { createRouter, createWebHistory } from 'vue-router';
import BookList from '../components/BookList.vue';
import AddBook from '../components/AddBook.vue';
import EditBook from '../components/EditBook.vue';

const routes = [
  { path: '/', component: BookList },
  { path: '/add', component: AddBook },
  { path: '/edit/:index', component: EditBook },
];

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

export default router;

🔎6.配置入口文件

在 src/main.js 文件中，配置应用的入口文件：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { createPinia } from 'pinia';

const app = createApp(App);

app.use(router);
app.use(createPinia());

app.mount('#app');