基于 Vue 3 和 Element Plus 构建图书管理系统

基于 Vue 3 和 Element Plus 构建图书管理系统

本文将介绍如何使用 Vue 3 和 Element Plus 构建一个简单的图书管理系统。这个系统将包括以下功能:

  • 添加新书
  • 显示图书列表
  • 分页显示图书
  • 删除图书

相关链接

接口地址
elementplus中文地址

项目结构

我们的项目结构如下:

plaintext 复制代码
src/
├── components/
│   └── BookManager.vue
├── App.vue
└── main.js

BookManager.vue 是我们主要的组件文件,它包含了图书管理的所有逻辑。App.vuemain.js 是 Vue 3 项目的基础文件。

引入必要的库

main.js 文件中,我们引入 Vue 3 和 Element Plus,并进行初始化:

javascript 复制代码
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

图书管理组件

components/BookManager.vue 文件中,我们将实现图书管理功能。

模板部分
html 复制代码
<template>
  <div class="button-container">
    <el-button type="primary" @click="dialogFormVisible = true">
      新增图书
    </el-button>
  </div>
  <el-dialog v-model="dialogFormVisible" title="新增图书" width="300px">
    <el-form :model="form" label-position="right" label-width="100px">
      <el-form-item label="书名">
        <el-input v-model="form.bookname" />
      </el-form-item>
      <el-form-item label="作者">
        <el-input v-model="form.author" />
      </el-form-item>
      <el-form-item label="出版社">
        <el-input v-model="form.publisher" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addBook">提交</el-button>
      </div>
    </template>
  </el-dialog>

  <el-table :data="paginatedBooks" style="width: 100%">
    <el-table-column prop="id" label="ID" width="80" />
    <el-table-column prop="bookname" label="书名" width="120" />
    <el-table-column prop="author" label="作者" width="120" />
    <el-table-column prop="publisher" label="出版社" width="120" />
    <el-table-column prop="createdAt" label="创建时间" width="220" />
    <el-table-column prop="updatedAt" label="更新时间" width="220" />
    <el-table-column label="选项操作" min-width="100">
      <template #default="scope">
        <el-button
            link
            type="danger"
            size="small"
            @click.prevent="deleteRow(scope.row.id)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <div class="pagination-container">
    <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="books.length"
        layout="prev, pager, next"
        style="margin-top: 20px;"
    />
  </div>
</template>

在模板部分,我们使用 Element Plus 的组件来创建一个对话框,用于添加新书,并显示图书列表和分页功能。

脚本部分
javascript 复制代码
<script setup>
import { ref, onMounted, computed } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';

const dialogFormVisible = ref(false);
const books = ref([]);
const form = ref({
  bookname: '',
  author: '',
  publisher: ''
});
const currentPage = ref(1);
const pageSize = ref(10);

const getBooksAll = async () => {
  const config = {
    method: 'get',
    url: 'http://ajax-api.itheima.net/api/books',
  };
  try {
    const response = await axios(config);
    if (Array.isArray(response.data.data)) {
      books.value = response.data.data.sort((a, b) => a.id - b.id);
    } else {
      throw new Error("数据格式错误");
    }
  } catch (error) {
    console.log(error);
    ElMessage({
      showClose: true,
      message: error.message || error,
      type: 'error',
    });
  }
};

const paginatedBooks = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  return books.value.slice(start, start + pageSize.value);
});

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
};

const addBook = async () => {
  const config = {
    method: 'post',
    url: "http://ajax-api.itheima.net/api/books",
    headers: {
      'Content-Type': 'application/json'
    },
    data: JSON.stringify(form.value)
  };
  try {
    await axios(config);
    ElMessage({
      showClose: true,
      message: '添加图书成功',
      type: "success",
    });
    await getBooksAll();
    form.value = { bookname: '', author: '', publisher: '' };
    dialogFormVisible.value = false;
  } catch (error) {
    console.log(error);
  }
};

const deleteRow = async (id) => {
  const config = {
    method: 'delete',
    url: `http://ajax-api.itheima.net/api/books/${id}`,
    headers: {
      'User-Agent': 'Apifox/1.0.0 (https://apifox.com)'
    }
  };
  try {
    await axios(config);
    await getBooksAll();
    ElMessage({
      showClose: true,
      message: '删除成功',
      type: 'success',
    });
  } catch (error) {
    console.log(error);
  }
};

onMounted(async () => {
  await getBooksAll();
});
</script>
样式部分
css 复制代码
<style scoped>
.button-container {
  margin: 20px 0;
  padding-left: 10px;
}
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 5px;
}
</style>

关键实现细节

  1. 获取图书列表

    使用 axios 发送 GET 请求,从服务器获取图书列表,并将其存储在 books 变量中。使用 onMounted 钩子在组件挂载时调用 getBooksAll 方法。

  2. 分页显示图书

    使用 computed 计算属性 paginatedBooks 来实现分页功能,根据当前页码和每页显示的数量来切割图书列表。

  3. 添加新书

    使用 axios 发送 POST 请求,将新书信息发送到服务器。成功添加后,刷新图书列表,并重置表单和对话框状态。

  4. 删除图书

    使用 axios 发送 DELETE 请求,根据图书 ID 删除图书。成功删除后,刷新图书列表。

  5. 消息提示

    使用 Element Plus 的 ElMessage 组件在操作成功或失败时显示消息提示。

相关推荐
安冬的码畜日常16 分钟前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
烛阴18 分钟前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中20 分钟前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木24 分钟前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师1 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚1 小时前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑
曹牧1 小时前
HTML字符实体和转义字符串
前端·html
小希爸爸1 小时前
2、中医基础入门和养生
前端·后端
局外人LZ1 小时前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js
G_GreenHand1 小时前
Dhtmlx Gantt教程
前端