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

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文件

"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

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

fhttp://rom 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);

}

@Gethttp://Mapping("/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

@click="book=bk;title='修改书籍'">修改

@click="book=bk;title='修改书籍'">修改

删除

@click="book={};title='添加书籍'">添加书籍

@click="book={};title='添加书籍'">添加书籍

aria-hidden="true">×

aria-hidden="true">×

--{{book}}

书籍名称:

书籍数量:

书籍描述:

关闭(C)

保存(S)

四、运行项目

访问地址：

http://localhost:8080/list.html

展示页：

添加页面：

修改页：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。