图书管理系统（基于SpringBoot + MyBatisPlus + Restful + Vue + Jquery + Axios ）

咖啡Coffee~

已于 2022-11-20 21:33:19 修改

阅读量3k

点赞数

文章标签： spring boot restful vue.js

于 2022-11-20 21:29:28 首次发布

本文链接：https://blog.csdn.net/weixin_64144937/article/details/127954361

版权

一、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的强大,真的是简化了开发效率,让你亲身体验快速开发。最后祝看到这篇文章的小伙伴们越来越好,希望这篇文章能够帮助到你!!! 需要源码的可以私信我

咖啡Coffee~

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
图书管理系统（基于SpringBoot + MyBatisPlus + Restful + Vue + Jquery + Axios ）

图书管理系统（基于SpringBoot + MyBatisPlus + Restful + Vue + Jquery + Axios ）
复制链接

扫一扫