SpringBoot-Mybatis整合+Restful风格 + (CRUD简单案例)

PY_XAT_SFZL

已于 2023-07-23 19:54:31 修改

阅读量223

点赞数

分类专栏： IDEA-Java各开发环境安装和常见问题解决文章标签： spring boot mybatis restful maven java axios

于 2023-07-23 19:34:50 首次发布

本文链接：https://blog.csdn.net/PY_XAT_SFZL/article/details/131882236

版权

IDEA-Java各开发环境安装和常见问题解决专栏收录该内容

31 篇文章 1 订阅

订阅专栏

基本步骤

数据库设计

数据库表设计

学员表  student

  字段            类型            约束           描述
    id            bigint         主键  自增      唯一标识
    username     varchar(20)                      姓名
    number       varchar(20)       唯一           学号
    birthday       date                           生日
    address      varchar(30)                      地址

pom.xml文件坐标

父工程

parent

spring-boot-starter-parent 2.7.3

spring-boot-starter-web

mysql-connector-java

mybatis-spring-boot-starter 2.1.1

lombok

SpringBoot配置

配置SpringBoot 启动器类

在要被扫描包的父级目录或以上一般是二级目录下创建启动器类代码如下：

@SpringBootApplication
@MapperScan("com.itheima.mapper")
public  SpringBootMybatisApplication{
public static void main (String[] args){

SpringApplication.run(SoringBootMybatisApplication.class,args);
}

}

配置数据源（数据库）日志驼峰映射访问路径和端口等

在resources目录下新建.properties .yam .yaml 任意一种 application命名必须

spring：
  datasource：
    driver-class-name：com.mysql.cj.jdbc.Driver
    url：jdbc:mysql:///springboot
    username：root
    password：****
mybatis：
  configuration:
    map underscore ...  : true

server：
  port：8080
  servlet：
  context-path： /itheima

logging:
 level:
  com.itheima: warn    level： info（debuge、 info、warn、error）包和级别 可以对不同的包进行设置不同的级别
 file:
  name: d:\srpingboot1.log （路径）

日志要搭配 @slf4j注解使用

引入前端页面

有空的时候可以自己写

在rescoures目录下创建static目录，此目录就是boot下的存放前端静态资源的目录，在子目录下引入前端页面或自己写

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    <title>学生列表</title>
    <style type="text/css">
        td, th {
            text-align: center;
        }
    </style>
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <script src="./js/jquery-2.1.0.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/vue-2.6.12.js"></script>
    <script src="./js/axios-0.20.0.js"></script>
</head>
<body>
<div class="container" id="app">
    <!--列表-->
    <div class="row">
        <h3 style="text-align: center">学生列表</h3>
        <div class="col-lg-3"></div>
        <div class="col-lg-6">
            <table border="1" class="table table-bordered table-hover">
                <tr class="success" style="text-align: center">
                    <th>学号</th>
                    <th>姓名</th>
                    <th>生日</th>
                    <th>地址</th>
                    <th>操作</th>
                </tr>

                <tr v-for="(student,index) in studentList">
                    <td>{{student.number}}</td>
                    <td>{{student.userName}}</td>
                    <td>{{student.birthday}}</td>
                    <td>{{student.address}}</td>
                    <td>
                        <a class="btn btn-default btn-sm" data-toggle="modal" @click="findById(student.id)"
                           data-target="#updateModal">修改</a>
                        <a class="btn btn-default btn-sm" @click="deleteById(student.id)">删除</a>
                    </td>
                </tr>

                <tr>
                    <td colspan="9" align="center">
                        <a class="btn btn-primary" data-toggle="modal" data-target="#addModal">添加学生</a>
                    </td>
                </tr>
            </table>
        </div>
        <div class="col-lg-3"></div>
    </div>

    <!-- 新增 -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
        <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">&times;</span></button>
                    <h4 class="modal-title" id="addModalLabel">新增</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>学号：</label>
                        <input type="text" class="form-control" name="number" v-model="student.number"
                               placeholder="请输入学号">
                    </div>
                    <div class="form-group">
                        <label>姓名：</label>
                        <input type="text" class="form-control" name="name" v-model="student.userName" placeholder="请输入姓名">
                    </div>
                    <div class="form-group">
                        <label>生日：</label>
                        <input type="text" class="form-control" name="birthday" v-model="student.birthday"
                               placeholder="请输入生日">
                    </div>
                    <div class="form-group">
                        <label>地址：</label>
                        <input type="text" class="form-control" name="address" v-model="student.address"
                               placeholder="请输入地址">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" @click="save()">新增</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 修改 -->
    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel">
        <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">&times;</span></button>
                    <h4 class="modal-title" id="updateModalLabel">修改</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>学号：</label>
                        <input type="text" class="form-control" name="number" v-model="student.number"
                               placeholder="请输入学号">
                    </div>
                    <div class="form-group">
                        <label>姓名：</label>
                        <input type="text" class="form-control" name="name" v-model="student.userName" placeholder="请输入姓名">
                    </div>
                    <div class="form-group">
                        <label>生日：</label>
                        <input type="text" class="form-control" name="birthday" v-model="student.birthday"
                               placeholder="请输入生日">
                    </div>
                    <div class="form-group">
                        <label>地址：</label>
                        <input type="text" class="form-control" name="address" v-model="student.address"
                               placeholder="请输入地址">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" @click="update()">修改</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            studentList: [],//学生列表
            student: {},//学生对象
        },
        methods: {

            //查询所有
            findAll() {
                axios.get('/student').then(resp => {
                    if (resp.data.code == "1") {
                        this.studentList = resp.data.data;
                    }
                });
            },

            //新增
            save() {
                axios.post('/student', this.student).then(resp => {
                    if (resp.data.code == "1") {
                        //1. 关闭模态框
                        $('#addModal').modal('hide');

                        //2. 重新执行findAll
                        this.findAll();

                        //3. 清空student
                        this.student = {};
                    }
                })
            },

            //根据number查询学生信息  /student/1
            findById(id) {
                axios.get('/student/' + id).then(resp => {
                    if (resp.data.code == "1") {
                        this.student = resp.data.data;
                    }
                })
            },

            //修改
            update() {
                axios.put('/student', this.student).then(resp => {
                    if (resp.data.code == "1") {
                        //1. 关闭模态框
                        $('#updateModal').modal('hide');

                        //2. 重新执行findAll
                        this.findAll();

                        //3. 清空student
                        this.student = {};
                    }
                })
            },

            //删除
            deleteById(id) {
                axios.delete('/student/' + id).then(resp => {
                    if (resp.data.code == "1") {
                        this.findAll();
                    }
                })
            }

        },
        created() {
            //调用查询所有的方法
            this.findAll();
        }
    })
</script>

</body>
</html>

搭建后端包结构

domian 实体包 =》Student类
vo 视图对象包 =》Result 返回前端的统一对象实体
controller 控制层 ==》StudentController 控制器类
service 业务层 ==》StudentService 接口
service.impl 业务实现层 ==》StudentServiceImpl 实现类
mapper 持久层 ==》 StudentMapper 接口访问数据库

业务逻辑（Restful风格）

前端请求的四种方式(GET POST PUT DELETE)

GET DELETE

这2个请求是不可以传递请求体的，若要传递请求体需要作为配置项中的一种传递才可以，否则到后端就会丢失数据

       // 通过axios 把数组作为请求体传入到后端
        axios.delete("/student",{data:this.selects}).then(resp => {
          if (resp.data == "OK") {
            this.clickDelete();
          }
        });

POST PUT

这2个请求是可以传递请求体的，常用于更新和新增对象操作

后端接收方式（@GetMapping @PostMapping @PutMapping @DeleteMapping)

上述几种接收方式相当于：
@RequestMapping（value=“/student”，method=Method.GET POST PUT DELETE)

接受路径参数

@GetMapping（“/student/{id}”）
public Result findById（ @pathvarible Interger id）{
return Result.success(stu);
}

接收请求体参数

@PostMapping（“/student”）
public Result save(@RequestBody Student student){
return Result.success();
}

VO 层统一返回结果 Result 类

package com.itheima.vo;  // view + object

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Result {

    private Integer code;

    private String mag;

    private Object data;


    public static Result success(Object obj) {

        return new Result(1, "sruccess", obj);
    }


    public static Result success() {

        return new Result(1, "sruccess", null);
    }

     public static Result error(String msg) {

        return new Result(0, msg, null);
    }

}