用vue写一个图书管理系统

好的，首先你需要安装Vue CLI，然后可以按照以下步骤来创建一个图书管理系统：

1. 创建Vue项目

在命令行中输入以下命令，创建一个新的Vue项目：

vue create book-management-system

2. 安装所需的依赖项

进入项目目录，然后运行以下命令来安装所需的依赖项：

cd book-management-system
npm install axios vue-router bootstrap-vue

3. 创建路由

在src目录下创建一个名为router.js的文件，然后添加以下代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import Books from './components/Books.vue'
import AddBook from './components/AddBook.vue'
import EditBook from './components/EditBook.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/books', component: Books },
  { path: '/add-book', component: AddBook },
  { path: '/edit-book/:id', component: EditBook },
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

4. 创建组件

在src/components目录下创建以下组件：Home.vue、Books.vue、AddBook.vue和EditBook.vue。这些组件分别用于显示主页、图书列表、添加图书和编辑图书。

5. 创建API

在src目录下创建一个名为api.js的文件，然后添加以下代码：

import axios from 'axios'

const apiClient = axios.create({
  baseURL: 'http://localhost:3000',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json'
  }
})

export default {
  getBooks() {
    return apiClient.get('/books')
  },
  getBook(id) {
    return apiClient.get(`/books/${id}`)
  },
  addBook(book) {
    return apiClient.post('/books', book)
  },
  updateBook(id, book) {
    return apiClient.put(`/books/${id}`, book)
  },
  deleteBook(id) {
    return apiClient.delete(`/books/${id}`)
  }
}

6. 编写代码

打开App.vue文件，然后添加以下代码：

<template>
  <div id="app">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container">
        <router-link class="navbar-brand" to="/">Book Management System</router-link>
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <router-link class="nav-link" to="/books">Books</router-link>
          </li>
          <li class="nav-item">
            <router-link class="nav-link" to="/add-book">Add Book</router-link>
          </li>
        </ul>
      </div>
    </nav>
    <div class="container mt-4">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
</style>

然后打开Home.vue文件，添加以下代码：

<template>
  <div>
    <h1>Welcome to Book Management System</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<style>
</style>

接下来打开Books.vue文件，添加以下代码：

<template>
  <div>
    <h1>Books</h1>
    <table class="table">
      <thead>
        <tr>
          <th>Title</th>
          <th>Author</th>
          <th>ISBN</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="book in books" :key="book.id">
          <td>{{ book.title }}</td>
          <td>{{ book.author }}</td>
          <td>{{ book.isbn }}</td>
          <td>
            <router-link :to="{ name: 'edit-book', params: { id: book.id } }" class="btn btn-sm btn-primary mr-2">Edit</router-link>
            <button class="btn btn-sm btn-danger" @click="deleteBook(book.id)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import api from '../api'

export default {
  name: 'Books',
  data() {
    return {
      books: []
    }
  },
  created() {
    this.fetchBooks()
  },
  methods: {
    fetchBooks() {
      api.getBooks()
        .then(response => {
          this.books = response.data
        })
        .catch(error => {
          console.log(error)
        })
    },
    deleteBook(id) {
      api.deleteBook(id)
        .then(response => {
          this.fetchBooks()
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

<style>
</style>

然后打开AddBook.vue文件，添加以下代码：

<template>
  <div>
    <h1>Add Book</h1>
    <form @submit.prevent="addBook">
      <div class="form-group">
        <label for="title">Title:</label>
        <input type="text" class="form-control" id="title" v-model="book.title">
      </div>
      <div class="form-group">
        <label for="author">Author:</label>
        <input type="text" class="form-control" id="author" v-model="book.author">
      </div>
      <div class="form-group">
        <label for="isbn">ISBN:</label>
        <input type="text" class="form-control" id="isbn" v-model="book.isbn">
      </div>
      <button type="submit" class="btn btn-primary">Add Book</button>
    </form>
  </div>
</template>

<script>
import api from '../api'

export default {
  name: 'AddBook',
  data() {
    return {
      book: {
        title: '',
        author: '',
        isbn: ''
      }
    }
  },
  methods: {
    addBook() {
      api.addBook(this.book)
        .then(response => {
          this.$router.push('/books')
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

<style>
</style>

最后打开EditBook.vue文件，添加以下代码：

<template>
  <div>
    <h1>Edit Book</h1>
    <form @submit.prevent="updateBook">
      <div class="form-group">
        <label for="title">Title:</label>
        <input type="text" class="form-control" id="title" v-model="book.title">
      </div>
      <div class="form-group">
        <label for="author">Author:</label>
        <input type="text" class="form-control" id="author" v-model="book.author">
      </div>
      <div class="form-group">
        <label for="isbn">ISBN:</label>
        <input type="text" class="form-control" id="isbn" v-model="book.isbn">
      </div>
      <button type="submit" class="btn btn-primary">Update Book</button>
    </form>
  </div>
</template>

<script>
import api from '../api'

export default {
  name: 'EditBook',
  data() {
    return {
      book: {
        title: '',
        author: '',
        isbn: ''
      }
    }
  },
  created() {
    this.fetchBook()
  },
  methods: {
    fetchBook() {
      const id = this.$route.params.id
      api.getBook(id)
        .then(response => {
          this.book = response.data
        })
        .catch(error => {
          console.log(error)
        })
    },
    updateBook() {
      const id = this.$route.params.id
      api.updateBook(id, this.book)
        .then(response => {
          this.$router.push('/books')
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

<style>
</style>

7. 运行应用

在命令行中输入以下命令，运行应用：

npm run serve

然后在浏览器中打开http://localhost:8080，即可看到图书管理系统的主页。从主页可以进入到图书列表页面，添加图书页面和编辑图书页面。