vue图书管理增删改查

### Vue.js 实现图书管理系统的增删改查功能

为了实现基于Vue.js的图书管理系统中的增删改查(CRUD)操作，可以从以下几个方面入手：

#### 创建项目结构
首先创建一个新的Vue.js项目。如果使用的是Vue CLI工具，则可以通过命令`vue create book-management-system`来初始化项目。

#### 安装必要的依赖包
对于数据持久化层的选择可以根据需求决定，这里假设采用本地存储模拟数据库行为。另外安装Element Plus作为UI框架以简化页面构建工作：

npm install element-plus axios json-server --save

#### 启动JSON Server用于模拟API接口
准备一份简单的json文件充当临时的数据源，在项目的根目录下新建db.json文件定义一些初始记录之后运行如下指令启动服务端口默认为3000:

npx json-server --watch db.json --port 3000

#### 编写CRUD逻辑代码片段
下面给出部分核心业务处理函数的具体实现方式[^4]:

- **查询所有书籍**

使用Axios发起GET请求获取全部条目列表，并将其保存至组件的状态变量中以便渲染视图。

  import { ref, onMounted } from 'vue';
  import axios from 'axios';

  export default {
    setup() {
      const books = ref([]);

      async function fetchBooks() {
        try {
          let response = await axios.get('http://localhost:3000/books');
          books.value = response.data;
        } catch (error) {
          console.error(error);
        }
      }

      onMounted(() => {
        fetchBooks();
      });

      return {
        books,
      };
    },
  };

- **新增一条记录**

当用户提交表单时触发此事件处理器，通过POST方法向服务器发送新的实体对象实例。

  async function addBook(newBook) {
    try {
      await axios.post('http://localhost:3000/books', newBook);
      // 更新状态机重新加载最新数据集
      fetchBooks();
    } catch (error) {
      console.error(error);
    }
  }

- **更新现有项的信息**

PUT/PATCH HTTP动作用来修改指定ID对应的资源属性值。

  async function updateBook(updatedBook) {
    try {
      await axios.put(`http://localhost:3000/books/${updatedBook.id}`, updatedBook);
      fetchBooks();
    } catch (error) {
      console.error(error);
    }
  }

- **删除特定编号下的文档**

DELETE语句负责移除不再需要的对象实例。

  async function deleteBook(bookId) {
    try {
      await axios.delete(`http://localhost:3000/books/${bookId}`);
      fetchBooks();
    } catch (error) {
      console.error(error);
    }
  }

以上就是利用Vue.js完成基本的图书管理平台所需的关键知识点和技术要点概述[^1]。