一、pojo数据载体准备
@Component
@Data
public class Book {
@TableId
private Integer id;
private String name;
private String type;
private String author;
private String publisher;
@TableField("is_delete")
private Integer deleted;
}
二、mapper数据接口映射配置
@Repository
public interface BookMapper extends BaseMapper<Book> {
}
三、service
BookService业务接口
public interface BookService extends IService<Book> {
}
BookServiceImpl业务实现
@Service
public class BookServiceImpl extends ServiceImpl<BookMapper,Book> implements BookService {
}
四、controller控制器
@RestController
@RequestMapping("/books")
public class BookController {
@Autowired
private BookService bookService;
@PostMapping
public void save(@RequestBody Book book){
bookService.save(book);
}
@DeleteMapping("/{id}")
public void delete(@PathVariable Integer id){
bookService.removeById(id);
}
@DeleteMapping
public void deleteByIds(@RequestBody int[] ids){
bookService.removeBatchByIds(Collections.singleton(ids));
}
@PutMapping
public void update(@RequestBody Book book){
bookService.updateById(book);
}
@GetMapping("/{id}")
public Book getById(@PathVariable Integer id){
return bookService.getById(id);
}
@GetMapping
public List<Book> getAll(){
return bookService.list();
}
}
五、配置文件
# TODO 配置数据源相关信息
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/my_db_01?useSSL=false
username: root
password: 100863
type: com.zaxxer.hikari.HikariDataSource
main:
banner-mode: off
mybatis-plus:
global-config:
db-config:
table-prefix: tbl_
logic-delete-field: is_delete
logic-not-delete-value: 0
logic-delete-value: 1
banner: false
六、前端代码
# html
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加新图书</h3>
</div>
<div class="panel-body form-inline">
<div class="input-group">
<div class="input-group-addon">书名</div>
<input type="text" class="form-control" id="iptBookname" placeholder="请输入书名" v-model="bookForm.name">
</div>
<div class="input-group">
<div class="input-group-addon">类型</div>
<input type="text" class="form-control" id="iptType" placeholder="请输入书籍类型" v-model="bookForm.type">
</div>
<div class="input-group">
<div class="input-group-addon">作者</div>
<input type="text" class="form-control" id="iptAuthor" placeholder="请输入作者" v-model="bookForm.author">
</div>
<div class="input-group">
<div class="input-group-addon">出版社</div>
<input type="text" class="form-control" id="iptPublisher" placeholder="请输入出版社"
v-model="bookForm.publisher">
</div>
<button id="btnSelect" class="btn btn-info" @click="likeSelect">查询</button>
<button id="btnAdd" class="btn btn-primary" @click="dialogVisible = true">添加</button>
</div>
</div>
<!-- 批量删除-->
<el-row>
<el-button type="danger" plain @click="delByIds">批量删除</el-button>
</el-row>
<!-- 添加表单-->
<el-dialog
title="添加书籍"
:visible.sync="dialogVisible"
width="30%"
>
<el-form :model="bookForm" ref="bookForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="书名" prop="name">
<el-input v-model="bookForm.name"></el-input>
</el-form-item>
<el-form-item label="类型" prop="type">
<el-input v-model="bookForm.type"></el-input>
</el-form-item>
<el-form-item label="作者" prop="author">
<el-input v-model="bookForm.author"></el-input>
</el-form-item>
<el-form-item label="出版社" prop="publisher">
<el-input v-model="bookForm.publisher"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="saveBook">确定</el-button>
<el-button @click="cancelAdd">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!-- 编辑表单-->
<el-dialog
title="编辑书籍"
:visible.sync="dialogEditVisible"
width="30%"
>
<el-form :model="updateForm" ref="updateForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="书名" prop="name">
<el-input v-model="updateForm.name"></el-input>
</el-form-item>
<el-form-item label="类型" prop="type">
<el-input v-model="updateForm.type"></el-input>
</el-form-item>
<el-form-item label="作者" prop="author">
<el-input v-model="updateForm.author"></el-input>
</el-form-item>
<el-form-item label="出版社" prop="publisher">
<el-input v-model="updateForm.publisher"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="updateBook">确定</el-button>
<el-button @click="cancelEdit">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!-- 表格数据-->
<template>
<el-table
:data="tableData"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
type="index"
width="50">
</el-table-column>
<el-table-column
prop="name"
label="书名"
align="center"
>
</el-table-column>
<el-table-column
prop="type"
label="类型"
align="center"
>
</el-table-column>
<el-table-column
prop="author"
label="作者"
align="center"
>
</el-table-column>
<el-table-column
prop="publisher"
label="出版社"
align="center"
>
</el-table-column>
<el-table-column
prop="address"
label="操作"
align="center"
>
<el-row>
<el-button type="primary" @click="backView">修改</el-button>
<el-button type="danger" @click="delById">删除</el-button>
</el-row>
</el-table-column>
</el-table>
</template>
</div>
# js
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.13/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/axios/1.1.3/axios.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.10/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://cdn.staticfile.org/element-ui/2.15.10/index.js"></script>
<script>
new Vue({
el:"#app",
data:{
// 添加表单
bookForm: {
name: '',
type:'',
author:'',
publisher:'',
},
// 更新表单
updateForm:{
name: '',
type:'',
author:'',
publisher:'',
},
tableData:[], // 当前页面要展示的分页列表数据
dialogVisible:false, // 增加表单是否可见
dialogEditVisible:false, // 编辑表单是否可见
pagination:{}, // 分页模型数据,暂时弃用
ids:[], // id数组
selectedId:'', // 单个id
// 复选框
multipleSelection:[],
},
// 钩子函数,VUE对象初始化完成后自动执行
created(){
this.getAll();
},
methods:{
// 添加
saveBook(){
axios.post("/books",this.bookForm).then((resp)=>{
this.dialogVisible = false;
this.getAll();
this.$message({
message: '添加成功!',
type: 'success',
center:true
});
});
},
// 复选框选中后执行的函数
handleSelectionChange(val) {
this.multipleSelection = val;
},
// 取消编辑提示
cancelEdit(){
this.dialogEditVisible = false;
this.$message({
showClose: true,
message: '已取消编辑',
center:true
});
},
// 取消添加提示
cancelAdd(){
this.dialogVisible = false;
this.$message({
showClose: true,
message: '已取消添加',
center:true
});
},
// 查询
likeSelect(){
axios.get(`/books/${this.bookForm.author}`).then((resp)=>{
this.tableData = resp.data;
})
},
// 删除单条数据
delById(){
for (let i = 0; i < this.multipleSelection.length; i++) {
var selectionElement = this.multipleSelection[i];
this.selectedId = selectionElement.id;
}
if (this.selectedId == null || this.selectedId.length < 1){
this.$message({
showClose: true,
message: '请选中您要删除的数据',
type: 'error',
center:true
});
return;
}
axios.delete(`/books/${this.selectedId}`,).then((resp) => {
this.getAll();
this.$message({
message: '删除成功!',
type: 'success',
center: true
});
});
// 清空id
this.selectedId = '';
},
// 批量删除
delByIds(){
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.ids = this.multipleSelection.map(item => item.id);
if (this.ids.length < 1){
this.$message.error('请选中您要删除的数据!').center=true;
}
// 转为JSON数据发送到后台
this.ids = JSON.stringify(this.ids);
axios({
method:"delete",
url:"/books",
data:this.ids,
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
}).then((resp)=>{
this.getAll();
this.$message({
type: 'success',
message: '删除成功!'
});
});
// 清空id数组
this.ids = [];
}).catch(() => {
this.$message({
type: 'info',
message: '您已取消删除',
center:true
});
})
},
// 回显数据
backView(){
this.selectedId = this.multipleSelection.map(item => item.id);
if (this.selectedId == null || this.selectedId.length < 1){
this.$message({
showClose: true,
message: '请选中您要编辑的数据',
type: 'error',
center:true
});
return
}
this.dialogEditVisible = true;
axios.get(`/books/${this.selectedId}`).then((resp)=>{
this.updateForm = resp.data;
});
// 清空id
this.selectedId = '';
},
// 更新数据
updateBook(){
axios.put("/books",this.updateForm).then((resp)=>{
// 关闭表单
this.dialogEditVisible = false;
// 查询数据
this.getAll();
// 成功提示
this.$message({
showClose: true,
message: '更新数据成功!',
type: 'success',
center:true
});
});
},
// 主页列表数据查询
getAll(){
axios.get("/books").then((resp)=>{
this.tableData = resp.data;
})
},
}
})
</script>
七、启动
@SpringBootApplication
@MapperScan("cn.itaxu.mapper")
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
}
八、效果展示
结语:
是不是比之前写的更加的简洁了,这就是MyBatisPlus + SpringBoot的强大,真的是简化了开发效率,让你亲身体验快速开发。最后祝看到这篇文章的小伙伴们越来越好,希望这篇文章能够帮助到你!!! 需要源码的可以私信我