Vue + ElementUI搭建图书管理系统，从零开始构建图书王国！

打造一个高效的图书管理系统：深入浅出的 Vue + ElementUI 指南

创建 Vue 项目

踏上图书管理系统开发之旅的第一步是创建一个新的 Vue 项目。可以使用 Vue CLI（命令行界面）工具轻松完成这一任务：

vue create vue-library-system

此命令将创建一个新的 Vue 项目，其中包含所有必要的文件夹和文件。

集成 ElementUI

ElementUI 是一个基于 Vue 的 UI 组件库，提供了广泛的组件，如按钮、输入框和表格，可以快速构建出美观的界面。要集成 ElementUI，请运行以下命令：

npm install element-ui --save

然后，在 main.js 文件中导入 ElementUI：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

搭建数据库

图书管理系统需要一个数据库来存储图书和用户信息。可以使用 MySQL 创建一个名为 library_system 的数据库，并在其中创建 books、users 和 borrowings 表：

CREATE DATABASE library_system;

CREATE TABLE books (
  id INT NOT NULL AUTO_INCREMENT,
  title VARCHAR(255) NOT NULL,
  author VARCHAR(255) NOT NULL,
  isbn VARCHAR(255) NOT NULL,
  quantity INT NOT NULL,
  PRIMARY KEY (id)
);

CREATE TABLE users (
  id INT NOT NULL AUTO_INCREMENT,
  username VARCHAR(255) NOT NULL,
  password VARCHAR(255) NOT NULL,
  role VARCHAR(255) NOT NULL,
  PRIMARY KEY (id)
);

CREATE TABLE borrowings (
  id INT NOT NULL AUTO_INCREMENT,
  book_id INT NOT NULL,
  user_id INT NOT NULL,
  borrow_date DATE NOT NULL,
  return_date DATE,
  PRIMARY KEY (id),
  FOREIGN KEY (book_id) REFERENCES books(id),
  FOREIGN KEY (user_id) REFERENCES users(id)
);

编写后端代码

后端代码负责与数据库交互和处理图书管理系统的业务逻辑。可以使用 Express.js 和 MySQL 创建服务器端代码：

// 引入必要的模块
const express = require('express');
const mysql = require('mysql');

// 创建 Express 实例
const app = express();

// 创建 MySQL 连接池
const pool = mysql.createPool({
  host: 'localhost',
  user: 'root',
  password: '',
  database: 'library_system'
});

// 获取所有图书信息
app.get('/books', (req, res) => {
  pool.query('SELECT * FROM books', (err, results) => {
    if (err) {
      res.status(500).send({ error: '获取图书信息失败！' });
    } else {
      res.send({ data: results });
    }
  });
});

// 获取单个图书信息
app.get('/books/:id', (req, res) => {
  pool.query('SELECT * FROM books WHERE id = ?', [req.params.id], (err, results) => {
    if (err) {
      res.status(500).send({ error: '获取图书信息失败！' });
    } else {
      res.send({ data: results[0] });
    }
  });
});

// 添加图书
app.post('/books', (req, res) => {
  pool.query('INSERT INTO books (title, author, isbn, quantity) VALUES (?, ?, ?, ?)', [req.body.title, req.body.author, req.body.isbn, req.body.quantity], (err, results) => {
    if (err) {
      res.status(500).send({ error: '添加图书失败！' });
    } else {
      res.send({ data: results });
    }
  });
});

// 修改图书
app.put('/books/:id', (req, res) => {
  pool.query('UPDATE books SET title = ?, author = ?, isbn = ?, quantity = ? WHERE id = ?', [req.body.title, req.body.author, req.body.isbn, req.body.quantity, req.params.id], (err, results) => {
    if (err) {
      res.status(500).send({ error: '修改图书失败！' });
    } else {
      res.send({ data: results });
    }
  });
});

// 删除图书
app.delete('/books/:id', (req, res) => {
  pool.query('DELETE FROM books WHERE id = ?', [req.params.id], (err, results) => {
    if (err) {
      res.status(500).send({ error: '删除图书失败！' });
    } else {
      res.send({ data: results });
    }
  });
});

// 获取所有用户信息
app.get('/users', (req, res) => {
  pool.query('SELECT * FROM users', (err, results) => {
    if (err) {
      res.status(500).send({ error: '获取用户信息失败！' });
    } else {
      res.send({ data: results });
    }
  });
});

构建前端界面

前端界面负责显示图书信息和允许用户进行交互。可以使用 Vue.js 和 ElementUI 来构建界面：

<template>
  <div>
    <h1>图书管理系统</h1>
    <el-table
      :data="books"
      style="width: 100%"
    >
      <el-table-column
        prop="title"
        label="书名"
      >
      </el-table-column>
      <el-table-column
        prop="author"
        label="作者"
      >
      </el-table-column>
      <el-table-column
        prop="isbn"
        label="ISBN"
      >
      </el-table-column>
      <el-table-column
        prop="quantity"
        label="数量"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        width="200px"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="editBook(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="danger"
            size="mini"
            @click="deleteBook(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-form
      ref="form"
      label-width="120px"
      :model="bookForm"
      style="margin-top: 20px;"
    >
      <el-form-item
        label="书名"
      >
        <el-input v-model="bookForm.title"></el-input>
      </el-form-item>
      <el-form-item
        label="作者"
      >
        <el-input v-model="bookForm.author"></el-input>
      </el-form-item>
      <el-form-item
        label="ISBN"
      >
        <el-input v-model="bookForm.isbn"></el-input>
      </el-form-item>
      <el-form-item
        label="数量"
      >
        <el-input-number v-model="bookForm.quantity"></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm('form')"
        >
          提交
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { ref } from 'vue';
import { ElTable, ElTableColumn, ElButton, ElForm, ElFormItem, ElInput, ElInputNumber } from 'element-ui';

export default {
  components: {
    ElTable,
    ElTableColumn,
    ElButton,
    ElForm,
    ElFormItem,
    ElInput,
    ElInputNumber
  },
  setup() {
    const books = ref([]);
    const bookForm = ref({
      title: '',
      author: '',
      isbn: '',
      quantity: 0
    });

    const getBooks = async () => {
      const response = await fetch('/books');
      const data = await response.json();