手把手教你搭建基于Springboot+Vue的图书管理系统

最新推荐文章于 2025-04-25 16:22:17 发布

暴力码农

最新推荐文章于 2025-04-25 16:22:17 发布

阅读量1k

点赞数 15

文章标签： spring boot vue.js java

本文链接：https://blog.youkuaiyun.com/2401_84419966/article/details/142959180

版权

国庆佳节刚过，该上班的又开始上班，上学的接着上学，一切都又回到正轨，但是心都还在外飘着，牛马不易啊，好好赚钱好好学习吧，所以今天我又给大家分享一个实战项目——基于Springboot+Vue的图书管理系统。在这个项目中，我们将继续使用Springboot作为后端框架，Vue作为前端框架，实现一个简单的超市管理系统。以下是项目搭建的整体步骤，如果你想要一步到位，了解具体详细内容，可以拉到本文最后部分。

一、环境准备

开发工具：IntelliJ IDEA、VS Code
JDK版本：1.8及以上
数据库：MySQL 5.7及以上
Node.js环境：用于构建Vue项目
Maven：用于管理Java项目依赖

二、后端框架搭建（Springboot）

1.创建Springboot项目

（1）在IntelliJ IDEA中创建一个Spring Initializr项目；（2）选择Spring Web、MyBatis Framework、MySQL Driver等依赖；（3）填写项目信息，完成创建。

2.配置数据库连接

（1）在application.properties文件中配置数据库连接信息：

spring.datasource.url=jdbc:mysql://localhost:3306/book_manage?useUnicode=true&characterEncoding=utf-8&useSSL=false
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.jdbc.Driver

（2）创建数据库book_manage，并导入以下SQL脚本：

CREATE TABLE `book` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) DEFAULT NULL,
  `author` varchar(50) DEFAULT NULL,
  `publish` varchar(50) DEFAULT NULL,
  `isbn` varchar(50) DEFAULT NULL,
  `introduction` text,
  `price` decimal(10,2) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

3.创建实体类、Mapper接口和Service层

（1）创建实体类Book.java：

public class Book {
    private Integer id;
    private String name;
    private String author;
    private String publish;
    private String isbn;
    private String introduction;
    private BigDecimal price;
    // 省略getter和setter方法
}

（2）创建Mapper接口BookMapper.java：

@Mapper
public interface BookMapper {
    int insert(Book record);

    int insertSelective(Book record);

    Book selectByPrimaryKey(Integer id);

    int updateByPrimaryKeySelective(Book record);

    int updateByPrimaryKey(Book record);

    List<Book> selectAll();
}

（3）创建Service接口BookService.java：

public interface BookService {
    int addBook(Book book);

    int updateBook(Book book);

    int deleteBook(Integer id);

    Book selectBookById(Integer id);

    List<Book> selectAllBooks();
}

（4）创建Service实现类BookServiceImpl.java：

@Service
public class BookServiceImpl implements BookService {
    @Autowired
    private BookMapper bookMapper;

    @Override
    public int addBook(Book book) {
        return bookMapper.insertSelective(book);
    }

    @Override
    public int updateBook(Book book) {
        return bookMapper.updateByPrimaryKeySelective(book);
    }

    @Override
    public int deleteBook(Integer id) {
        return bookMapper.deleteByPrimaryKey(id);
    }

    @Override
    public Book selectBookById(Integer id) {
        return bookMapper.selectByPrimaryKey(id);
    }

    @Override
    public List<Book> selectAllBooks() {
        return bookMapper.selectAll();
    }
}

4. 创建Controller层

创建BookController.java，编写图书管理相关接口：

@RestController
@RequestMapping("/book")
public class BookController {
    @Autowired
    private BookService bookService;

    @PostMapping("/add")
    public Result addBook(@RequestBody Book book) {
        int result = bookService.addBook(book);
        if (result > 0) {
            return Result.success("添加成功");
        } else {
            return Result.fail("添加失败");
        }
    }

    @PostMapping("/update")
    public Result updateBook(@RequestBody Book book) {
        int result = bookService.updateBook(book);
        if (result > 0) {
            return Result.success("更新成功");
        } else {
            return Result.fail("更新失败");
        }
    }

    @GetMapping("/delete/{id}")
    public Result deleteBook(@PathVariable Integer id) {
        int result = bookService.deleteBook(id);
        if (result > 0) {
            return Result.success("删除成功");
        } else {
            return Result.fail("删除失败");
        }
    }

    @GetMapping("/detail/{id}")
    public Result<Book> selectBookById(@PathVariable Integer id) {
        Book book = bookService.selectBookById(id);
        if (book != null) {
            return Result.success(book);
        } else {
            return Result.fail("查询失败");
        }
    }

    @GetMapping("/list")
    public Result<List<Book>> selectAllBooks() {
        List<Book> books = bookService.selectAllBooks();
        if (books != null && books.size() > 0) {
            return Result
            return Result.success(books);
        } else {
            return Result.fail("查询失败");
        }
    }
}

5.全局异常处理

为了增强用户体验，我们可以添加全局异常处理来捕获和处理可能出现的异常。

创建一个GlobalExceptionHandler类，并使用@ControllerAdvice注解来标记它，这样它就能捕获整个Spring MVC中的异常。

java

@ControllerAdvice
public class GlobalExceptionHandler {

    @ExceptionHandler(Exception.class)
    @ResponseBody
    public Result handleException(Exception e) {
        // 打印异常信息，便于调试
        e.printStackTrace();
        // 返回统一的错误响应
        return Result.fail("服务器异常，请稍后再试");
    }
}

6.返回结果封装

为了统一返回结果格式，我们可以创建一个Result类来封装响应数据。

java

public class Result<T> {
    private int code;
    private String message;
    private T data;

    // 构造方法
    public Result(int code, String message, T data) {
        this.code = code;
        this.message = message;
        this.data = data;
    }

    // 成功静态方法
    public static <T> Result<T> success(T data) {
        return new Result<>(200, "操作成功", data);
    }

    // 失败静态方法
    public static <T> Result<T> fail(String message) {
        return new Result<>(500, message, null);
    }

    // 省略getter和setter方法
}

三、前端框架搭建（Vue）

创建Vue项目

（1）打开命令行工具，执行以下命令创建Vue项目：

vue create book-manage-system

（2）根据提示选择默认配置或自定义配置，完成创建。

安装所需依赖

进入项目目录，安装以下依赖：

npm install axios element-ui vue-router --save

配置路由

在src目录下创建router文件夹，并在其中创建index.js文件，配置以下路由：

javascript

import Vue from 'vue'
import Router from 'vue-router'
import BookList from '@/components/BookList'
import BookDetail from '@/components/BookDetail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'BookList',
      component: BookList
    },
    {
      path: '/book/detail/:id',
      name: 'BookDetail',
      component: BookDetail
    }
  ]
})

创建组件

在src目录下的components文件夹中创建以下组件：

（1）BookList.vue：用于展示图书列表；（2）BookDetail.vue：用于展示图书详情。

BookList.vue示例代码：

vue

<template>
  <div>
    <el-table :data="books" style="width: 100%">
      <el-table-column prop="name" label="书名" width="180"></el-table-column>
      <el-table-column prop="author" label="作者" width="180"></el-table-column>
      <el-table-column prop="publish" label="出版社" width="180"></el-table-column>
      <el-table-column prop="isbn" label="ISBN" width="180"></el-table-column>
      <el-table-column prop="price" label="价格" width="180"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)">编辑</el-button>
          <el-button @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      books: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      axios.get('/book/list').then(response => {
        this.books = response.data
      })
    },
    handleEdit(book) {
      // 跳转到编辑页面
      this.$router.push({ name: 'BookDetail', params: { id: book.id } })
    },
    handleDelete(id) {
      axios.delete(`/book/delete/${id}`).then(response => {
        if (response.data.code === 200) {
          this.fetchData()
        } else {
          this.$message.error(response.data.message)
        }
      })
    }
  }
}
</script>

因篇幅原因，以上展示部分仅提供了一个基础的框架和示例。因此在实际开发中，你需要根据具体需求完善实体类、服务层、控制器、前端组件以及相应的路由配置、状态管理（例如Vuex）等。

上述的开发指南其实只是一个基础的步骤，我们在实际开发中需要考虑如异常处理、日志记录、API文档、前端和后端的交互等细节部分。如果你需要一个完整的示例项目源码，如果您想学习如图下方完整示例系统部分截图，包括项目源码+数据库文件+全套环境资源+代码和环境部署视频教程+电子开发文档，小伙伴们可以扫描下方二维码或者从下方链接内容找到您需要的学习资源，当然您也可以私信博主或者+【V】:LZYM3344，支持远程安装调试，或者直接在以下链接获取学习资源。：戳我获取全套【图书管理系统】资源https://m.tb.cn/h.gvKHYYt?tk=UQd73l996rl