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">×</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 增删改查内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
SpringBoot JPA实现增删改查、分页、排序、事务操作等功能示例
今天给大家介绍一下SpringBoot中JPA的一些常用操作,例如:增删改查.分页.排序.事务操作等功能. 下面先来介绍一下JPA中一些常用的查询操作: //And --- 等价于 SQL 中的 and 关键字,比如 findByHeightAndSex(int height,char sex): public List<User> findByHeightAndSex(int height,char sex); // Or --- 等价于 SQL 中的 or 关键字,比如 findByHei
-
SpringBoot + Mybatis增删改查实战记录
简介 SpringBoot和Mybatis是啥请自行百度,作者这里也是花了几天时间入门了这个框架用来完成任务,并且也算符合要求的完成了任务,期间也各种百度但是没找到自己想要的那种简单易懂的教程,所以踩了很多坑,写这个博客的目的就是为了让大家少踩一点坑,开始. 创建一个SpringBoot项目https://start.spring.io/ 点开这个网站,创建一个Springboot项目,如下图,这里用的是2.1.5,学技术嘛,就是要学新的. 选择依赖,点击左下角的Dependencies Web
-
Java springboot Mongodb增删改查代码实例
1.添加依赖 复制代码 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-mongodb</artifactId> <version>2.1.6.RELEASE</version> </dependency> 完整pom.xm文件 <?xml version="
-
springboot结合vue实现增删改查及分页查询
1:首先.创建一个springboot项目,这里我使用以及构建好基本框架的脚手架,打开是这个样子: Result类:已经封装好了三种返回类型的包装类:code,msg,data 2:创建数据库叫mytest(可以自己取名字) CREATE TABLE `user` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '序号', `name` varchar(20) COLLATE utf8mb4_unicode_ci DEFAULT NULL CO
-
Springboot+Bootstrap实现增删改查实战
说明 最近有朋友问我有没有Springboot+Bootstrap实现增删改查的DEMO,当时没有,现在他来了! 实现效果 代码地址 https://gitee.com/indexman/bootstrap_curd 水平一般能力有限,觉得有用的朋友给我来个一键三连或捐助:) 软件架构 前端:bootstrap4.5+thymeleaf+分页插件 后端:spring boot+mybatisPlus 数据库:mysql 核心功能代码 前端 <!DOCTYPE html> <html xm
-
教你用springboot连接mysql并实现增删改查
1.数据库与数据表的创建 创建名为mybatis的数据库: create database mybatis; 创建名为user2的数据表: use mybatis; create table user2( id integer not null primary key, name varchar(20) not null, pwd varchar(10) not null, perms varchar(100) null) 生成如下表结构: (已经插入了两行数据的) 2.数据库的连接 注意点:u
-
Springboot+hibernate实现简单的增删改查示例
1.创建好项目之后在配置端口号(也可以不用配置,默认端口8080) #server server.port=8080 server.tomcat.uri-encoding=utf-8 2.配置mysql #MySQL spring.datasource.driver-class-name=com.mysql.jdbc.Driver spring.datasource.url=jdbc:mysql://localhost:3306/test?characterEncoding=utf8 sprin
-
使用SpringBoot开发Restful服务实现增删改查功能
在去年的时候,在各种渠道中略微的了解了SpringBoot,在开发web项目的时候是如何的方便.快捷.但是当时并没有认真的去学习下,毕竟感觉自己在Struts和SpringMVC都用得不太熟练.不过在看了很多关于SpringBoot的介绍之后,并没有想象中的那么难,于是开始准备学习SpringBoot. 在闲暇之余的时候,看了下SpringBoot实战以及一些大神关于SpringBoot的博客之后,开始写起了我的第一个SpringBoot的项目.在能够对SpringBoot进行一些简单的开发Re
-
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 FO
-
springboot使用JdbcTemplate完成对数据库的增删改查功能
首先新建一个简单的数据表,通过操作这个数据表来进行演示 DROP TABLE IF EXISTS `items`; CREATE TABLE `items` ( `id` int(11) NOT NULL AUTO_INCREMENT, `title` varchar(255) DEFAULT NULL, `name` varchar(10) DEFAULT NULL, `detail` varchar(255) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE
-
JS结合bootstrap实现基本的增删改查功能
提出问题:如何利用原生的js实现基本的增删改查功能??? 解决问题 假如你已经对JS有一定基础 假如你对bootstrap有一定基础 下面是具体的例子, 包含两个文件(index.jsp 和 index.js) <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC
-
Jquery与Bootstrap实现后台管理页面增删改查功能示例
使用jquery与bootstrap实现了一个比较简单但功能齐全的增删改查功能的后台管理页面,虽然只是一个CRUD页面,但麻雀虽小五脏俱全,JS常用的功能都用到了,本例用原生的jquery与bootstrap配合使用,不考虑JS的重构性及打包,该例子零耦合,开箱即用. 先看Demo: 一.用到的Jquery功能 1.获取/赋值input输入值 $("#my_id").val();// 获取 $("#my_id").val("user_id");/
-
C#实现XML文档的增删改查功能示例
本文实例讲述了C#实现XML文档的增删改查功能.分享给大家供大家参考,具体如下: 1. 创建实例XML文件(Books.xml) <?xml version="1.0" encoding="iso-8859-1"?> <bookstore> <book id="1" category="COOKING"> <title lang="en">Everyday I
-
jQuery实现对网页节点的增删改查功能示例
本文实例讲述了jQuery实现对网页节点的增删改查功能.分享给大家供大家参考,具体如下: 前面介绍过<JavaScript针对网页节点的增删改查用法>,其实JavaScript对DOM的操作已经总结了很久的,而对于jQuery对网页节点的操作,虽然一直在用,但一直没有好好总结一下,实在是不应该. 下面举同样的例子来说明这个问题: 如上图,提供3个按钮,1个下拉列表,1个输入框,提供增删改查的操作. 网页中最多10个节点,最少0个节点,多了不让加,少了不让减. 首先是本网页的基本布局: <
-
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
本文实例讲述了jQuery+datatables插件实现ajax加载数据与增删改查功能.分享给大家供大家参考,具体如下: 这里给大家分享一下我在项目中用datatables实现ajax加载数据与增删改查 注意,需要引入jquery.datatables.layer html代码: <div class="thead"> <input placeholder="请输入搜索内容" id="searchTitle" type=&quo
-
Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)
环境搭建 spring boot的简介 以往我们开发时用到spring总是避免不了繁琐的配置,例如我们要配置一个数据库连接,可能需要以下几步: 1.编写jdbc.properties配置文件: 2.创建spring的配置文件,加入spring配置文件前缀.配置数据库连接信息以及sqlsessionFactory等等: 3.还要在web.xml文件中加入spring的监听. springboot的出现大大简化了项目的搭建过程(spring配置以及maven配置),让我们专注于应用功能的开发,而不是
-
Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)
在上篇文章给大家介绍了Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一),接下来我们添加分页相关的依赖,时间紧张,直接上代码了,贴上我的pom文件 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation=
-
BootStrap实现带有增删改查功能的表格(DEMO详解)
前言 bootstrap的表格样式,有类似EasyUI的表格,也有卡片式表格,放到移动端显示,各有千秋.但是BootStrap自带的表格是没有操作列的,网上的资源不少,但是都是比较单一.零碎,JS.CSS也经常给的不全,自己经过大概一个月左右的时间,把表格封装了一下,希望能分享给大家. 表格封装了3个版本,接下来给大家展示一下样式和代码. 版本一 1. 样式 表格布局: 添加:添加一行新的空白代码 修改:选中可修改的列,点击需要修改的单元格,即可变成可编辑的状态. 2.代码 @using Dat