使用SpringBoot+Vue+Mybatis+Element，分层次分模块进行开发，实现增删改查功能的图书管理系统。
一、搭建后端环境
- 编程语言：Java
- IDE：IntelliJ IDEA
- 主要框架：Spring Boot
- 数据库：MySQL
- 配置项目管理工具：Maven
（1）创建maven项目（选择webapp)
（2）依赖管理
在pom.xml中需要导入所需依赖，主要导入springboot和mybatis依赖，加入mysql驱动，建议也导入Lombok依赖（通过注解自动生成getter和setter方法，可以简化代码）
（3）创建数据库
在Navicat中创建book数据库，以图为例。
（4）配置数据源
创建application.yml文件，配置数据源属性，包括数据库URL、用户名、密码以及连接池参数。
（5）定义数据模型
定义Java实体类（pojo），与数据库表结构相对应。如果导入了Lombok依赖，我们这里可以通过注解简化getter和setter的编写。
package com.sun.web.pojo;
import lombok.Data;
@Data
public class Book {
private Integer id;
private String nameBook;
private String price;
private String kind;
private String author;
private String publisher;
}
（6）配置MyBatis
- 定义Mapper接口，用于操作数据库。（增删查改功能）
注意要加上mapper注解！
package com.sun.web.mapper;
import com.sun.web.pojo.Book;
import java.util.List;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
@Mapper
public interface BookMapper {
/**
* 增加图书
* @param book 图书对象
*/
void insert(Book book);
/**
* 查询所有图书
* @return 图书列表
*/
List<Book> selectAll();
/**
* 根据图书ID删除图书
* @param id 图书ID
*/
void deleteById(@Param("id") Integer id);
/**
* 更新图书信息
* @param book 要更新的图书对象
*/
void update(Book book);
}
- Mapper XML文件：编写MyBatis的Mapper XML文件，具体定义SQL语句与Mapper接口方法的映射关系。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.sun.web.mapper.BookMapper">
<insert id="insert" parameterType="com.sun.web.pojo.Book">
insert into book
values (null, #{nameBook} ,#{price},#{kind},#{author},#{publisher})
</insert>
<select id="selectAll" resultType="com.sun.web.pojo.Book">
select *
from book
</select>
<delete id="deleteById">
DELETE FROM book WHERE id = #{id}
</delete>
<update id="update" parameterType="com.sun.web.pojo.Book">
UPDATE book
SET nameBook = #{nameBook}, price = #{price}, kind = #{kind}, author = #{author}, publisher = #{publisher}
WHERE id = #{id}
</update>
</mapper>（7）实现业务逻辑
在服务层（Service）中调用Mapper接口的方法，实现业务逻辑。 注意要加Service注解
package com.sun.web.service;
import com.sun.web.mapper.BookMapper;
import com.sun.web.pojo.Book;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class BookService {
@Autowired
private BookMapper bookMapper;
public List<Book> list(){
List<Book> bookList=bookMapper.selectAll();
return bookList;
}
public void addBook(Book book)
{
bookMapper.insert(book);
}
public void deleteBook(Integer id) {
bookMapper.deleteById(id);
}
public void updateBook(Book book) {
bookMapper.update(book);
}
}
（8）编写控制层
使用@RequestMapping等注解映射HTTP请求到控制器方法
package com.sun.web.controller;
import com.sun.web.pojo.Book;
import com.sun.web.service.BookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@CrossOrigin
@RequestMapping("book")
public class BookController {
@Autowired
private BookService bookService;
@RequestMapping("add")
public String addCarInfo(@RequestBody Book book){
bookService.addBook(book);
return "ok";
}
@RequestMapping("list")
public List<Book> findBookInfo(){
List<Book> bookList =bookService.list();
return bookList;
}
@DeleteMapping("delete/{id}")
public String deleteBook(@PathVariable Integer id) {
bookService.deleteBook(id);
return "ok";
}
@PutMapping("update")
public String updateBook(@RequestBody Book book) {
bookService.updateBook(book);
return "ok";
}
}
（9） 编写springboot启动类
使用Spring Boot的SpringApplication.run()方法来启动应用。
package com.sun.web;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class BookManageSpringBootApplication {
public static void main(String[] args) {
SpringApplication.run(BookManageSpringBootApplication.class, args);
}
}（10）跨域资源共享
手动方式来设置CORS相关的HTTP头部，以允许跨域请求。
Access-Control-Allow-Origin: 指定了允许访问资源的外部域。这里设置了只有http://localhost:5173被允许，这通常是前端应用运行的地址。
二、搭建前端环境
（1）安装Node.js和npm
Node.js：对于前端开发而言，Node.js是构建工具和包管理器的运行环境。npm（Node Package Manager）：是Node.js的包管理器，用于管理项目中的依赖。访问Node.js官网下载安装包，安装过程中会自动安装npm。
（2）创建Vue3项目
在终端命令行中运行以下命令创建一个新的Vue项目（vue-project是项目名，可以根据您的需要更改）
npm init vue@next在IDEA中打开项目，终端命令行中分别输入以下命令
npm install
npm run dev
点击显示的网址，如果可以正常打开，则已成功创建Vue项目
（3）安装Axios依赖
在终端命令行输入命令将Axios添加到您的项目依赖中，并且可以在项目中通过import引入使用,便可以向后端发起请求。
npm install axios（4）安装ElementPlus框架
Element Plus是一个基于Vue 3的组件库，用于构建Web界面。在终端命令行输入命令安装Element Plus
npm install element-plus
在main.js中引入 Element Plus
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
（5）设计首页
编写HomeView.vue组件，构建一个简单的图书管理系统的首页。
当点击Enter时，会导航到 URL 路径为 /booklist 的页面
（6）设计图书管理页面
该页面使用Vue 3 Composition API、Axios进行HTTP请求，以及Element Plus UI库来构建用户界面。这个组件实现了图书的增删查改功能。
主要功能
- 图书展示：使用
el-table组件展示从后端获取的图书列表。（element官网：https://element-plus.org/zh-CN/component/button.html） - 添加图书：提供一个表单，允许用户输入图书信息。
- 编辑图书：允许用户修改已有图书信息。
- 删除图书：为每本图书提供一个删除按钮。
- 导航返回：使用
el-page-header组件提供了一个返回按钮，利用Vue Router的back方法实现页面导航返回功能。
下面以增加和删除功能为例，代码解释前端对后端的请求 。
function addBook() {
axios.post("http://localhost:8090/book/add", data.bookInfo)
.then(() => {
alert("添加成功！");
dialogAddFormVisible.value = false;
loadBookInfo();
})
.catch(() => {
alert("添加出错啦！");
});
}
addBook函数通过Axios发送一个POST请求到后端的/book/add端点，请求成功后，会显示一个“添加成功！”的提示信息，并关闭对话框，最后重新加载图书列表以显示新添加的图书。
deleteBook函数是删除操作的核心。使用Axios发送一个DELETE请求到后端的删除图书接口，URL路径中包含了要删除的图书ID。如果后端成功从数据库中删除了相应的记录，前端会显示一个“删除成功！”的提示，并重新加载图书列表以反映变更。
function deleteBook(id) {
axios.delete(`http://localhost:8090/book/delete/${id}`)
.then(() => {
alert("删除成功！");
loadBookInfo(); // 重新加载图书列表
})
.catch(() => {
alert("删除出错啦！");
});
}
这里还设计了用户是否确认删除的选项，以免用户误点删除按钮。
修改功能则是对增加功能的一种变形，这里我们对《围城》价格进行更改为例。
页面左上角点击Back可以返回首页。
以上便是使用SpringBoot+Vue+Mybatis+Element前后端分离的图书管理系统的讲解。谢谢。
2373
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
