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、添加依赖

    
        org.springframework.boot
        spring-boot-starter-web
    
    
        org.mybatis.spring.boot
        mybatis-spring-boot-starter
        2.2.0
    
    
        mysql
        mysql-connector-java
        runtime
    
    
        org.projectlombok
        lombok
        true
    
    
        org.springframework.boot
        spring-boot-starter-test
        test
    
    
        org.webjars
        bootstrap
        3.4.1
    
    
        org.webjars.bower
        jquery
        3.6.0
    
    
        org.webjars.npm
        vue
        2.6.14
    
    
        org.webjars.npm
        axios
        0.20.0
    
    
        com.alibaba
        fastjson
        1.2.78
    

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 findAll();

    int addBook(Book book);

    int updateBook(Book book);

    int deleteBook(Integer bookId);

}

6、在resources目录下的mapper中编写mapper.xml文件

    
        
        
        
        
    

    
        select *
        from books
    

    
        insert into books (bookName, bookCounts, detail)
        values (#{bookName}, #{bookCounts}, #{detail});
    

    
        update books
        set bookName=#{bookName},
            bookCounts=#{bookCounts},
            detail=#{detail}
        where bookId = #{bookId}
    

    
        delete
        from books
        where bookId = #{bookId}
    

7、在service包中编写接口

package com.example.service;

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

public interface BookService {

    List 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 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 bookAll(){
        List 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

    
    
    
    
    
    
    
    
    
    
    
    



    

        

            

                
书籍列表（SpringBoot+ Vue + Axios + BootStrap）
            
        
        

            

                
书籍编号
                
书籍名称
                
书籍数量
                
书籍描述
                
操作
            
            

                
{{bk.bookId}}
                
{{bk.bookName}}
                
{{bk.bookCounts}}
                
{{bk.detail}}
                

                    修改
                    删除
                
            
        
        

            添加书籍
        

        

            

                

                    

                        ×
                        
{{title}}
                        --{{book}}
                    
                    

                        

                            
                            

                                书籍名称:
                                

                                    
                                
                            
                            

                                书籍数量:
                                

                                    
                                
                            
                            

                                书籍描述:
                                

                                    
                                
                            
                        
                    
                    

                        关闭(C)
                        保存(S)
                    
                
            
        

    

四、运行项目

访问地址：

http://localhost:8080/list.html

展示页：

添加页面：

修改页：

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