Springboot+Vue图书管理系统V0.1

最新推荐文章于 2024-06-14 10:10:01 发布

#幻

最新推荐文章于 2024-06-14 10:10:01 发布

阅读量1k

点赞数 26

文章标签： spring tomcat maven javascript css vue.js intellij-idea

本文链接：https://blog.csdn.net/qq_73884252/article/details/136414619

版权

一、后端部分

1.1config（配置文件）

Config 文件通常用于配置应用程序的各种参数、环境变量、第三方服务的连接信息等。

在 Spring 框架中，使用 @Configuration 注解来标识一个类为配置类，该类中通常包含一些 Bean 的配置、数据源配置、拦截器配置等。

package com.sun.web.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.filter.OncePerRequestFilter;

import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Configuration
public class CrosConfig extends OncePerRequestFilter {


    //这部分代码是一个过滤器（Filter），用于处理跨域资源共享（CORS）请求。
    // 当前端页面与后端服务不在同一个域下时，浏览器会执行同源策略，限制页面对不同域下资源的访问。为了解决这个问题，可以通过设置 CORS 头信息来允许跨域请求。
    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)
            throws ServletException, IOException {
        response.setHeader("Access-Control-Allow-Origin", "http://localhost:5173");
        response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
        response.setHeader("Access-Control-Allow-Headers", "Origin, Accept, Content-Type, Authorization");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Max-Age", "3600");

        if ("OPTIONS".equals(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
        } else {
            filterChain.doFilter(request, response);
        }
    }
}

1.2Controller（控制器）

Controller 负责接收客户端的请求，调用相应的业务逻辑进行处理，并返回结果给客户端。在 Spring MVC 中，使用 @Controller 注解标识一个类为控制器类，然后使用 @RequestMapping 或其他注解来映射 URL 和请求方法。

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;

    // 添加图书信息
    @PostMapping("add")
    public String addBook(@RequestBody Book book) {
        bookService.addBook(book);
        return "ok";
    }

    // 获取图书列表
    @GetMapping("list")
    public List<Book> listBooks() {
        return bookService.list();
    }

    // 删除图书信息
    @DeleteMapping("delete/{id}")
    public String deleteBook(@PathVariable Long id) {
        bookService.deleteBook(id);
        return "ok";
    }

    // 更新图书信息
    @PutMapping("update/{id}")
    public String updateBook(@PathVariable Long id, @RequestBody Book book) {
        book.setId(id);
        bookService.updateBook(book);
        return "ok";
    }
}

1.3Mapper（数据访问层）

Mapper 通常用于定义数据库操作的接口，提供对数据库的增删改查操作。在 MyBatis 中，需要创建 Mapper 接口，并编写对应的 SQL 映射文件，用于执行数据库操作。

package com.sun.web.mapper;

import com.sun.web.pojo.Book;
import java.util.List;

import org.apache.ibatis.annotations.Delete;
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();

    //删除书籍


    @Delete("delete from book where id=#{id}")
    void deleteByPrimaryKey(Long id);
    void updateByPrimaryKey(Book book);
}

1.4POJO（Plain Old Java Object

POJO 是指普通的 Java 对象，通常用于表示系统中的数据对象或实体类，其属性一般对应数据库表的字段。POJO 类通常不包含业务逻辑，主要用于封装数据。

package com.sun.web.pojo;

import lombok.Data;

@Data
public class Book {

private long id;
private String nameBook;
private String price;
private String kind;
private String author;
private String publisher;


    public Long getId() {
        return id;
    }
}

1.5Service（服务层）

Service 负责实现业务逻辑，对外提供服务。在 Spring 框架中，可以使用 @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(Long id) {
        bookMapper.deleteByPrimaryKey(id);
    }

    public void updateBook(Book book) {
        bookMapper.updateByPrimaryKey(book);
    }
}

1.6Springboot启动类

package com.sun.web;
import  org.springframework.boot.SpringApplication;
@org.springframework.boot.autoconfigure.SpringBootApplication
public class SpringBootApplication {
    public static void main(String[] args) {
        SpringApplication.run(SpringBootApplication.class,args);
    }
}

1.7数据库设置

    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/book?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC
    username: root
    password: 1234
    type: com.alibaba.druid.pool.DruidDataSource
mybatis:
  mapper-locations: classpath:com/sun/web/mapper/*.xml

<?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>


</mapper>

1.8项目依赖

项目环境：JDK:1.8 Meaven:3.9.2 Mysql:8.0.29

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>org.example</groupId>
  <artifactId>BMS</artifactId>
  <packaging>war</packaging>
  <version>1.0-SNAPSHOT</version>
  <name>BMS Maven Webapp</name>
  <url>http://maven.apache.org</url>

  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.6.4</version>
  </parent>


  <dependencies>

    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
      <version>1.18.10</version>
    </dependency>

    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

<!--    <dependency>-->
<!--      <groupId>org.springframework.boot</groupId>-->
<!--      <artifactId>spring-boot-starter-web</artifactId>-->
<!--      <version>2.5.11</version>-->
<!--    </dependency>-->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>3.5.7</version>
    </dependency>

    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>8.0.29</version>
    </dependency>

<!--mybatis-->
    <dependency>
      <groupId>org.mybatis.spring.boot</groupId>
      <artifactId>mybatis-spring-boot-starter</artifactId>
      <version>2.2.0</version>
    </dependency>

<!--druid-->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>druid</artifactId>
      <version>1.1.21</version>
    </dependency>

    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>
  </dependencies>



  <build>
    <finalName>BMS</finalName>
  </build>
</project>

后端配置完成后在浏览器访问localhost:8088/book/list显示数据库返回的json数据，后端配置成功

二、前端部分

2.1创建vue项目

选择一个文件夹，在控制台(用管理员身份打开)创建Vue项目

输入以下指令创建vue项目

vue create 【项目名称】（不能包含大写字母）

选择第一个即可

也可以输入创建

 cnpm init vue@next

依次输入npm install和npm run dev进入前端页面

2.2安装依赖

Axios 可以用于执行 HTTP 请求，并支持许多功能，如拦截请求和响应、转换请求和响应数据、取消请求、自动转换 JSON 数据、客户端端点验证等。Element Plus 是一套基于 Vue 3.0 的桌面端 UI 组件库，可以为前端开发提供便利和效率。

cnpm install axios
cnpm install element-plus

2.3设计书籍页面

首先导入element依赖

然后进入Table 表格 | Element Plus (element-plus.org)，使用EI的表格组件，点击查看源代码复制

在Views目录下新建BookView.vue文件，把复制的代码粘贴

2.4配置路由

路由（Router）用于实现单页面应用（SPA）中不同视图之间的导航和控制。Vue Router 是 Vue.js 官方的路由管理器，它允许开发者在 Vue 应用中实现路由功能。

首先定义路由：

在router文件夹下的index.js中添加如下代码

接着将路由添加到 Vue 应用：

在 Vue 应用的入口文件中，将路由实例添加到应用中：

<RouterLink> 组件是用来创建页面之间的超链接，它会被渲染为 <a> 标签，点击后会触发路由的切换，to 属性指定了链接的目标路由路径。<RouterLink to="/booklist">Book</RouterLink> 表示创建一个指向 /booklist 路由的超链接，显示文本为 "Book"。<RouterView> 组件是用来显示当前路由对应的组件内容的容器。当路由发生变化时，<RouterView> 会动态加载并渲染相应的路由组件内容。

删掉components和icons的文件，删除main.css的内容，清理一下Vue自带的样式和文件，打开book页面后正常跳转即成功

2.5完善书籍页面

修改表格内容，与后端数据库表头对应

在表格底下增加添加图书按钮和表单

仿照添加图书的表单再增加一个编辑图书表单

编写前端交互逻辑

完善搜索功能

定义loadBookInfo方法，向后端发送请求获取数据。添加钩子函数onMounted，用于初始化界面。

定义添加图书的 addBook 方法，用 axios 发请求， path 写的是对应的后端请求路径。

定义编辑图书的 edit Book 方法

定义删除图书的方法

回到浏览器，前端页面以及获取到了来自后端数据库的数据

2.6设计管理系统主页

前往Container 布局容器 | Element Plus (element-plus.org)选一个心仪的布局样式

随便修修源代码。。。

2.7完善主页

也就是在布局main标签内加入book的路由

初版完成，添加，编辑，删除功能都是正常的

三、总结

#幻

关注

26
点赞
踩
28

收藏

觉得还不错? 一键收藏
2
评论
Springboot+Vue图书管理系统V0.1

文件通常用于配置应用程序的各种参数、环境变量、第三方服务的连接信息等。在 Spring 框架中，使用注解来标识一个类为配置类，该类中通常包含一些 Bean 的配置、数据源配置、拦截器配置等。1.2Controller（控制器）负责接收客户端的请求，调用相应的业务逻辑进行处理，并返回结果给客户端。在 Spring MVC 中，使用注解标识一个类为控制器类，然后使用或其他注解来映射 URL 和请求方法。1.3Mapper（数据访问层）通常用于定义数据库操作的接口，提供对数据库
复制链接

扫一扫