脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → java → SpringBoot 增删改查

SpringBoot+Vue+Axios+BootStrap实现图书的增删改查功能示例

 更新时间：2021年12月23日 08:37:41   作者：阿标的博客  
本文主要介绍了SpringBoot+Vue+Axios+BootStrap实现图书的增删改查功能，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

由于是初学Vue、Axios，可能在界面和功能上存在着一些问题，但这些并不妨碍使用。如果有对编程感兴趣的朋友，可以试着做一做。这个由于是第一次做，不太熟练。在后续的过程中会不断的完善。

一、开发工具

IntelliJ IDEA Ultimate 2021.1

apache-maven-3.5.4

MySQL5.7

JDK 1.8.0_281

二、项目结构

在这里插入图片描述

三、编写项目

1、创建数据库

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for books
-- ----------------------------
DROP TABLE IF EXISTS `books`;
CREATE TABLE `books`  (
  `bookId` int(0) NOT NULL AUTO_INCREMENT COMMENT '书id',
  `bookName` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '书名',
  `bookCounts` int(0) NOT NULL COMMENT '数量',
  `detail` varchar(200) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '描述',
  PRIMARY KEY (`bookId`) USING BTREE,
  INDEX `bookID`(`bookId`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 4 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of books
-- ----------------------------
INSERT INTO `books` VALUES (1, 'Java', 1, '从入门到放弃');
INSERT INTO `books` VALUES (2, 'MySQL', 10, '从删库到跑路');
INSERT INTO `books` VALUES (3, 'Linux', 5, '从进门到进牢');

SET FOREIGN_KEY_CHECKS = 1;

2、添加依赖

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
        <version>2.2.0</version>
    </dependency>
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <scope>runtime</scope>
    </dependency>
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>bootstrap</artifactId>
        <version>3.4.1</version>
    </dependency>
    <dependency>
        <groupId>org.webjars.bower</groupId>
        <artifactId>jquery</artifactId>
        <version>3.6.0</version>
    </dependency>
    <dependency>
        <groupId>org.webjars.npm</groupId>
        <artifactId>vue</artifactId>
        <version>2.6.14</version>
    </dependency>
    <dependency>
        <groupId>org.webjars.npm</groupId>
        <artifactId>axios</artifactId>
        <version>0.20.0</version>
    </dependency>
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>fastjson</artifactId>
        <version>1.2.78</version>
    </dependency>
</dependencies>

3、修改项目resources目录下application.properties

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/ssmbuild?useUnicode=true&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=123456
mybatis.mapper-locations=classpath:mapper/*.xml
mybatis.type-aliases-package=com.example.pojo

4、在pojo包中编写实体类

package com.example.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Book {
    private Integer bookId;
    private String bookName;
    private Integer bookCounts;
    private String detail;
}

5、在java目录下的mapper包中编写接口类

package com.example.mapper;

import com.example.pojo.Book;
import org.springframework.stereotype.Repository;
import java.util.List;

@Repository
public interface BookMapper {

    List<Book> findAll();

    int addBook(Book book);

    int updateBook(Book book);

    int deleteBook(Integer bookId);

}

6、在resources目录下的mapper中编写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.example.mapper.BookMapper">

    <resultMap id="bookMap" type="com.example.pojo.Book">
        <id column="bookId" property="bookId" javaType="Integer"/>
        <result column="bookName" property="bookName" javaType="String"/>
        <result column="bookCounts" property="bookCounts" javaType="Integer"/>
        <result column="detail" property="detail" javaType="String"/>
    </resultMap>

    <select id="findAll" resultMap="bookMap">
        select *
        from books
    </select>

    <insert id="addBook" parameterType="com.example.pojo.Book">
        insert into books (bookName, bookCounts, detail)
        values (#{bookName}, #{bookCounts}, #{detail});
    </insert>

    <update id="updateBook" parameterType="com.example.pojo.Book">
        update books
        set bookName=#{bookName},
            bookCounts=#{bookCounts},
            detail=#{detail}
        where bookId = #{bookId}
    </update>

    <delete id="deleteBook" parameterType="Integer">
        delete
        from books
        where bookId = #{bookId}
    </delete>

</mapper>

7、在service包中编写接口

package com.example.service;

import com.example.pojo.Book;
import com.example.vo.ResultVO;
import java.util.List;

public interface BookService {

    List<Book> findAll();

    ResultVO addBook(Book book);

    ResultVO updateBook(Book book);

    int deleteBook(Integer bookId);
}

8、在service包下的impl包中编写接口的实现类

package com.example.service.impl;

import com.example.mapper.BookMapper;
import com.example.pojo.Book;
import com.example.service.BookService;
import com.example.vo.ResultVO;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.util.List;

@Service
public class BookServiceImpl implements BookService {

    @Resource
    private BookMapper bookMapper;

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

    @Override
    public ResultVO addBook(Book book) {
        int i = bookMapper.addBook(book);
        if (i==1){
            return new ResultVO(10000,"success");
        }else {
            return new ResultVO(10001,"defeat");
        }
    }


    @Override
    public ResultVO updateBook(Book book) {
        int i = bookMapper.updateBook(book);
        if (i==1){
            return new ResultVO(10000,"success");
        }else {
            return new ResultVO(10001,"defeat");
        }
    }

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

}

9、在controller包中编写控制层实现的方法

package com.example.controller;

import com.example.pojo.Book;
import com.example.service.BookService;
import com.example.vo.ResultVO;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;

@Controller
public class BookController {

    @Resource
    private BookService bookService;

    @RequestMapping("/bookAll")
    @ResponseBody
    public List<Book> bookAll(){
        List<Book> bookList = bookService.findAll();
        return bookList;
    }

    @PostMapping("/bookAdd")
    @ResponseBody
    public ResultVO addBook(@RequestBody Book book){
        ResultVO resultVO = bookService.addBook(book);
        return resultVO;
    }

    @PostMapping("/bookUpdate")
    @ResponseBody
    public ResultVO updateBook(@RequestBody Book book){
        return bookService.updateBook(book);
    }

    @GetMapping("/bookDelete/{bookId}")
    @ResponseBody
    public int deleteBook(@PathVariable("bookId") Integer bookId){
        return bookService.deleteBook(bookId);
    }

}

10、在vo包中编写ResultVo

package com.example.vo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class ResultVO {

    //响应码
    private int code;

    //提示消息
    private String msg;

    //响应数据
    private Object data;

    public ResultVO(int code,String msg){
        this.code=code;
        this.msg=msg;
    }
}

11、在webapp下创建list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>书籍列表</title>
    <!--1. 添加vue依赖-->
    <script src="/webjars/vue/2.6.14/dist/vue.min.js"></script>
    <!--2. 添加axios依赖-->
    <script src="/webjars/axios/0.20.0/dist/axios.min.js"></script>
    <!--3. 添加jquery依赖-->
    <script src="/webjars/jquery/3.6.0/dist/jquery.min.js"></script>
    <!--4. 添加bootstrap依赖-->
    <link rel="stylesheet" href="/webjars/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="/webjars/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .table {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <div class="panel-title">
                <h3>书籍列表（SpringBoot+ Vue + Axios + BootStrap）</h3>
            </div>
        </div>
        <table class="table table-striped table-hover">
            <tr>
                <td>书籍编号</td>
                <td>书籍名称</td>
                <td>书籍数量</td>
                <td>书籍描述</td>
                <td>操作</td>
            </tr>
            <tr v-for="bk in bookList">
                <td>{{bk.bookId}}</td>
                <td>{{bk.bookName}}</td>
                <td>{{bk.bookCounts}}</td>
                <td>{{bk.detail}}</td>
                <td>
                    <a href="#" class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal"
                       @click="book=bk;title='修改书籍'">修改</a>
                    <a href="" class="btn btn-danger btn-sm" @click="delBook(bk.bookId)">删除</a>
                </td>
            </tr>
        </table>
        <div class="panel-footer text-right">
            <a href="#" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal"
               @click="book={};title='添加书籍'">添加书籍</a>
        </div>

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">{{title}}</h4>
                        --{{book}}
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" method="post">
                            <input type="hidden" v-model="book.bookId">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">书籍名称:</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" v-model="book.bookName" placeholder="书籍名称">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">书籍数量:</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" v-model="book.bookCounts" placeholder="书籍数量">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">书籍描述:</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" v-model="book.detail" placeholder="书籍描述">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭(C)</button>
                        <button type="button" class="btn btn-primary" @click="save()">保存(S)</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
</body>
</html>
<script>
    let vs = new Vue({
        el: '.container',
        data: {
            bookList: [],
            book: {},
            title: '添加书籍',
        },
        created() {
            //查询所有图书信息
            this.findAllBooks();
        },
        methods: {
            //1、查询全部图书信息
            findAllBooks() {
                axios.get("/bookAll").then(data => {
                    this.bookList = data.data
                })
            },
            //2、保存图书
            save() {
                //根据bkl.bookId是否有值，决定添加还是修改
                let url = "/bookAdd";
                if (this.book.bookId) {
                    url = "/bookUpdate";
                }
                //向后台发送请求
                axios({
                    method:'post',
                    url:url,
                    data:JSON.stringify(this.book),
                    headers:{
                        'Content-type':'application/json'
                    }
                }).then(res=>{
                    if (res.data.code==10000){
                        this.findAllBooks();
                    }
                    $("#myModal").modal('hide');
                })
            },
            //3、删除书籍
            delBook(bookId) {
                let url = "/bookDelete/"+bookId;
                if (confirm("你确定要删除吗？")) {
                    axios.get(url).then(function (res){
                        if (res.data.code===10000){
                            this.findAllBooks();
                        }
                    })
                }
            }
        }
    })
</script>

四、运行项目

访问地址：

http://localhost:8080/list.html

展示页：

在这里插入图片描述

添加页面：

在这里插入图片描述

修改页：

在这里插入图片描述

到此这篇关于SpringBoot+Vue+Axios+BootStrap实现图书的增删改查功能示例的文章就介绍到这了,更多相关SpringBoot 增删改查内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Java使用自定义注解+反射实现字典转换代码实例

    Java使用自定义注解+反射实现字典转换代码实例

    这篇文章主要介绍了Java使用自定义注解+反射实现字典转换代码实例,注解是一种能被添加到java代码中的元数据,类、方法、变量、参数和包都可以用注解来修饰,注解对于它所修饰的代码并没有直接的影响,需要的朋友可以参考下
    2023-09-09
  • java和matlab画多边形闭合折线图示例讲解

    java和matlab画多边形闭合折线图示例讲解

    由于要将“哈密顿回路问题(TSP)”的求解中间结果表示出来，查了一下使用程序画多边形图形。现在在总结一下，这个图是“由给定节点首尾相连的”闭合多边形
    2014-02-02
  • 轻轻松松吃透Java并发fork/join框架

    轻轻松松吃透Java并发fork/join框架

    fork/join是一个工具框架 ,本文详细的介绍了fork/join框架的具体使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-07-07
  • Springboot应用中线程池配置详细教程(最新2021版)

    Springboot应用中线程池配置详细教程(最新2021版)

    这篇文章主要介绍了Springboot应用中线程池配置教程（2021版）,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-03-03
  • Java实现深度搜索DFS算法详解

    Java实现深度搜索DFS算法详解

    深度优先搜索是一种在开发爬虫早期使用较多的方法。它的目的是要达到被搜索结构的叶结点。这篇文章主要介绍了基于Java实现深度优先搜索（DFS）算法，需要的朋友可以参考一下
    2021-12-12
  • Windows下后端如何启动SpringBoot的Jar项目

    Windows下后端如何启动SpringBoot的Jar项目

    这篇文章主要介绍了Windows下后端如何启动SpringBoot的Jar项目问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • Java SpringBoot 获取接口实现类汇总

    Java SpringBoot 获取接口实现类汇总

    这篇文章主要介绍了Java SpringBoot 获取接口实现类汇总，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-09-09
  • 基于Java实现图片相似度对比的示例代码

    基于Java实现图片相似度对比的示例代码

    很多时候我们需要将两个图片进行对比，确定两个图片的相似度。本文将利用Java和OpenCV库实现图片相似度对比，感兴趣的可以动手尝试一下
    2022-07-07
  • Java实现多用户注册登录的幸运抽奖

    Java实现多用户注册登录的幸运抽奖

    这篇文章主要为大家详细介绍了Java实现多用户注册登录的幸运抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • springboot自动装配的源码与流程图

    springboot自动装配的源码与流程图

    在日常的开发过程中Spring Boot自动装配的特性给我们开发减少了很多重复性的工作,这篇文章主要给大家介绍了关于springboot自动装配的相关资料,需要的朋友可以参考下
    2021-08-08

最新评论