ssm图书管理系统

项目展示

一、项目概述

图书管理系统是一个旨在简化图书馆或书店图书管理流程的数据库管理系统。该系统通过提供一个直观且功能丰富的用户界面，使得图书管理员能够轻松地进行图书信息的录入、查询、编辑、删除以及借阅状态的管理。

二、系统界面

系统界面设计简洁明了，采用了浅色背景和深色文字来突出重要的信息。界面上方设有一个蓝色的导航栏，包含了多个选项卡，如“返回管理”、“数据查询”、“商品信息”（在此上下文中，商品即指图书）、“状态”和“删除”。这些选项卡为用户提供了快速访问不同管理功能的途径。

在选项卡下方，系统展示了一个或多个表格，用于列出图书的详细信息。每个表格都包含了不同的项目列，如“书名”、“作者”、“价格”、“类别”以及“操作”等。其中，“操作”列通常包含编辑和删除等功能的链接或按钮。

特别地，系统还在某些列（如“状态”列）旁边添加了红色或绿色的圆圈标记，以直观地表示图书的借阅状态或其他条件。例如，一个绿色的圆圈可能表示图书处于“未借出”状态，而一个红色的圆圈则可能表示图书已被“已借出”。

三、系统功能

1. 图书信息录入：管理员可以通过新建课程（在此上下文中，应理解为新建图书信息）功能，轻松地将新图书的信息录入系统。

2. 图书信息查询：系统提供了数据查询功能，允许管理员根据书名、作者等关键词快速查找图书信息。

3. 图书信息编辑：管理员可以编辑已存在的图书信息，如更新价格、修改类别等。

4. 图书信息删除：对于不再需要的图书信息，管理员可以选择批量删除或单个删除。

5. 借阅状态管理：系统允许管理员更新图书的借阅状态，如将图书标记为已借出或未借出。

四、技术亮点

1. 用户友好的界面设计：系统界面简洁明了，易于使用。

2. 高效的数据管理：系统通过数据库技术实现了图书信息的快速存储和检索。

3. 灵活的操作功能：系统提供了丰富的操作功能，满足管理员的不同需求。

4. 可扩展性：系统具有良好的可扩展性，可以根据实际需求添加新的功能或模块。

项目代码

前端,首界面

<template>
  <div>
    <el-container>
      <el-header>图书管理系统</el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
              router>
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>后台管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/kecheng">图书管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>

<style>
.container{
  height: 750px;
}

.el-header{
  background-color: #B3C0D1;
  color: #333;
  text-align: left;
  line-height: 60px;
}

.el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
}

</style>

<script>
export default {
  name: "zhu"
}
</script>

前端，图书页

<script>
var arr = "";
export default {
  name: "kecheng",
  created() {
    this.shuxin()
  },
  data() {
    return {
      tableData: [],
      newFormData: {
        bookname:"",
        author:"",
        price:"",
        type:"",
        tai:""
      },
      multipleSelection: [],
      currentPage:1,
      total1: 10,
      formInline: {
        bookname: "",
        region: ""
      },
      pagesize:5,
      dialogVisible:false,
      dialogVisible1:false,
    }
  },
  methods:{
    handleSelectionChange(val) {
      this.multipleSelection = val;
      arr = [];
      for (let i = 0; i < val.length; i++) {
        arr[i] = val[i].bookname;
      }
    },
    handleEdit(row) {
      this.dialogVisible1=true;
      this.newFormData.bookname = row.bookname;
      this.newFormData = {...row};
    },
    handleDelete(row) {
      console.log(row);
      var that = this;
      that.$axios({
        url: "http://localhost:8080/deletebook",
        method: "post",
        params: {
          bookname: row.bookname,
          author: row.author
        }
      }).then(function (resp) {
        console.log(resp);
        that.shuxin()
      },function (error) {
        console.log("错误"+error);
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.shuxin(this.currentPage,val);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.shuxin(val,this.pagesize);
    },
    shuxin(){
      var that=this;
      that.$axios({
        url:"http://localhost:8080/fenye",
        method:"post",
        params:{
          page:that.currentPage,
          size:that.pagesize,
        }
      }).then(function(res){
        console.log(res);
        that.tableData = res.data.list;
        that.total1 = res.data.total;
      },function(error){
        console.log(error);
      })
    },
    onSubmit() {
      var that = this;
      that.$axios({
        url: "http://localhost:8080/select",
        method: "post",
        params: {
          bookname: that.formInline.bookname,
          tai: that.formInline.region,
        }
      }).then(function (resp) {
        console.log(resp)
        that.tableData = resp.data;
      },function (error) {
        console.log("错误"+error);
      })
    },
    xinjian(){
      this.dialogVisible=true;
    },
    addNewProduct(){
      var that = this;
      that.$axios({
        url: "http://localhost:8080/insertbook",
        method: "post",
        data: {
          "bookname" : this.newFormData.bookname,
          "author" : this.newFormData.author,
          "price" : this.newFormData.price,
          "type" : this.newFormData.type,
          "tai" : this.newFormData.tai
        }
      }).then(function (resp) {
        console.log(resp)
        that.dialogVisible=false;
        that.shuxin()
      },function (error) {
        console.log("错误"+error);
      })
    },
    updateNewProduct(){
      var that = this;
      that.$axios({
        url: "http://localhost:8080/update",
        method: "post",
        data: {
          "bookname" : that.newFormData.bookname,
          "author" : this.newFormData.author,
          "price" : this.newFormData.price,
          "type" : this.newFormData.type,
          "tai" : this.newFormData.tai
        }
      }).then(function (resp) {
        console.log(resp)
        that.dialogVisible1=false;
        that.shuxin()