vue实现图书管理系统

Vue.js 是一款流行的前端框架，可以用来开发单页面应用程序 (SPA) 。下面是一个简单的图书管理系统的 Vue.js 实现，基于 Vue.js 2.x 版本。

### 1. 准备工作

首先，需要安装 Vue.js 和 Vue CLI 。

在命令行中输入以下命令安装 Vue.js：

npm install vue

安装 Vue CLI：

npm install -g @vue/cli

### 2. 创建 Vue 应用

在命令行中输入以下命令创建一个新的 Vue 应用：

vue create book-manager

然后选择默认配置即可。

### 3. 配置路由

使用 Vue Router 来管理路由。在 `src` 目录下创建一个新的文件夹 `router` ，并在其中创建一个名为 `index.js` 的文件。

import Vue from 'vue'
import Router from 'vue-router'
import BookList from '@/components/BookList.vue'
import AddBook from '@/components/AddBook.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'BookList',
      component: BookList
    },
    {
      path: '/add-book',
      name: 'AddBook',
      component: AddBook
    }
  ]
})

在 `src/main.js` 中引入路由并使用它：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

### 4. 创建组件

在 `src/components` 目录下创建两个组件： `BookList.vue` 和 `AddBook.vue` 。

`BookList.vue` 组件用来显示图书列表：

<template>
  <div class="book-list">
    <h2>图书列表</h2>
    <table>
      <thead>
        <tr>
          <th>书名</th>
          <th>作者</th>
          <th>出版社</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(book, index) in books" :key="index">
          <td>{{ book.title }}</td>
          <td>{{ book.author }}</td>
          <td>{{ book.publisher }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      books: [
        { title: 'Vue.js 实战', author: '梁灏', publisher: '人民邮电出版社' },
        { title: 'JavaScript 高级程序设计', author: 'Nicholas C. Zakas', publisher: '人民邮电出版社' },
        { title: 'CSS 揭秘', author: 'Lea Verou', publisher: '人民邮电出版社' }
      ]
    }
  }
}
</script>

<style>
table {
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
</style>

`AddBook.vue` 组件用来添加新的图书：

<template>
  <div class="add-book">
    <h2>添加图书</h2>
    <form @submit.prevent="addBook">
      <div>
        <label for="title">书名</label>
        <input type="text" id="title" v-model="title" required>
      </div>
      <div>
        <label for="author">作者</label>
        <input type="text" id="author" v-model="author" required>
      </div>
      <div>
        <label for="publisher">出版社</label>
        <input type="text" id="publisher" v-model="publisher" required>
      </div>
      <button type="submit">添加</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      author: '',
      publisher: ''
    }
  },
  methods: {
    addBook() {
      const book = {
        title: this.title,
        author: this.author,
        publisher: this.publisher
      }
      this.$emit('add', book)
      this.title = ''
      this.author = ''
      this.publisher = ''
    }
  }
}
</script>

<style>
label {
  display: block;
  margin-bottom: 8px;
}

input[type="text"] {
  width: 100%;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

button[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

### 5. 在 App.vue 中使用组件

在 `src/App.vue` 中使用 `router-view` 来显示路由对应的组件：

<template>
  <div id="app">
    <nav>
      <router-link to="/">图书列表</router-link>
      <router-link to="/add-book">添加图书</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<style>
nav {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  background-color: #f2f2f2;
}

nav a {
  text-decoration: none;
  color: #333;
  padding: 8px;
  border-radius: 4px;
}

nav a:hover {
  background-color: #ddd;
}
</style>

### 6. 添加图书

在 `src/App.vue` 中添加一个 `addBook` 方法，用来将新添加的图书加入到图书列表中：

<template>
  <div id="app">
    <nav>
      <router-link to="/">图书列表</router-link>
      <router-link to="/add-book">添加图书</router-link>
    </nav>
    <router-view :add="addBook"></router-view>
  </div>
</template>

<script>
export default {
  methods: {
    addBook(book) {
      this.$children[0].books.push(book)
    }
  }
}
</script>

运行应用程序：

npm run serve

打开浏览器，访问 `http://localhost:8080/` ，即可看到图书管理系统的主页。