SpringBoot+MyBatisPlus+Vue增删改查

l411723

已于 2023-02-20 20:41:39 修改

阅读量1.4k

点赞数 6

文章标签： spring boot java vue mybatis

于 2022-11-21 19:27:08 首次发布

本文链接：https://blog.csdn.net/l411723/article/details/127969729

版权

SpringBoot+MyBatisPlus+Vue增删改查

建议在写之前会熟练使用vue脚手架，以及掌握vue相关知识

本文章会教你构建一个springboot+mybatisplus+vue
的增删改查。
在这里插入图片描述

一，构建

打开idea 选择新建 -->新建项目–>Spring Initializr 编辑好相关信息后下一步
选择这些包然后完成
在这里插入图片描述
在pom.xml导入需要的依赖

  <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.62</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.2</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.2.11</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

二，SpringBoot配置文件

配置application.ym (这里只配置了可用到的的，有别的需求的可自己添加)

#设置端口号
server:
  port: 80

spring:
  datasource:
    druid:
     driver-class-name: com.mysql.cj.jdbc.Driver
     url: jdbc:mysql://localhost:3306/service?serverTimezone=UTC
     username: root
     password: ~


#mybatis-plus:
#  global-config:
#    db-config:
#     设置自增列
#      id-type: auto
#      设置前缀列名
#      table-prefix: tbl_


#Mybatis开启日志，设置日志输出方式为标准输出
mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl


  #静态资源配置
resources:
    static-locations: classpath:static/

  #thymeleaf模板引擎配置
thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    mode: HTML5
    encoding: UTF-8
    content-type: text/html
    cache: false

三，实体类

package com.lyf.pojo;

import lombok.Data;

@Data
public class Admin {
    private Integer id;
    private String name;
    private String mima;
}

四，数据访问层（Dao层）

由于是基于mybatis-plus所以代码相当于ssm更加简单，不需要写接口

@Mapper
public interface AdminDao extends BaseMapper<Admin> {
}

五，服务层(Service层)

public interface AdminService extends IService<Admin> {
    
}

六，实现类(ServiceImpl)

@Service
public class AdminServiceImpl extends ServiceImpl<AdminDao,Admin> implements AdminService {

}

七，控制层(controller)

@CrossOrigin
@RestController
@RequestMapping("/admins")
public class AdminContller2 {

    @Autowired
    private AdminService adminService;

    // 查询   查询都用GET请求
    @GetMapping
    public List<Admin> getAll(){
        return adminService.list();
    }

    //    添加
    @PostMapping
    public Boolean save(@RequestBody Admin admin){    //请求提参数用@RequestBody
        return  adminService.save(admin);
    }

    //    修改
    @PutMapping
    public Boolean update(@RequestBody Admin admin){
        return  adminService.updateById(admin);
    }

    //    删除
    @DeleteMapping("{id}")
    public Boolean delete(@PathVariable Integer id){
        return  adminService.removeById(id);
    }
}

八，增删改查页码

list.html

(由于图方便增删改查写一个页码，就没分开写了(前端页码全在这了)😀🤭)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

<!--表单-->
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="用户名">
      <el-input v-model="formInline.name" placeholder="用户名"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="formInline.mima" placeholder="密码"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary">查询</el-button>
    </el-form-item>

    <!--新增按钮-->
    <el-button type="primary" @click="addDialogVisible=true">新增</el-button>

  </el-form>



  <!--表格-->
  <template>

    <el-table
            :data="tableData"
            style="width: 100%">
      <el-table-column
              prop="id"
              label="编号"
              width="180">
      </el-table-column>
      <el-table-column
              prop="name"
              label="用户名"
              width="180">
      </el-table-column>
      <el-table-column
              prop="mima"
              label="密码">
      </el-table-column>

      <el-table-column
              align="center"
              label="操作">

        <template slot-scope="scope">
          <el-button type="warning" @click="updateGoodsById(scope.row)">修改</el-button>
          <el-button type="danger"  @click="deleteGoodsById(scope.row)">删除</el-button>
        </template>



      </el-table-column>
    </el-table>
  </template>

  <!--分页-->
  <div style="margin-left: 650px">
    <!--:page-sizes="[pageSize]  它是根据pageSize 来计算的 意思就是几条一页 然后自动计算页码并显示-->
    <!-- :current-page 开始跳转的页数-->
    <!--:page-size 一页显示的条数-->
    <!--:total  总共有多少条数据-->
    <el-pagination
            :page-sizes="[pageSize]"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts">
    </el-pagination>
  </div>


  <!-- 增加页面 -->
  <el-dialog
          title="添加用户"
          :visible.sync="addDialogVisible"
          width="40%"
  >
    <!--内容主体-->
    <el-form ref="form" :model="addfrom" label-width="80px">

      <el-form-item label="用户名" width="180">
        <el-input v-model="addfrom.name"></el-input>
      </el-form-item>

      <el-form-item label="密码">
        <el-input v-model="addfrom.mima"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="addGoods()">立即创建</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>

    </el-form>
  </el-dialog>



  <!-- 修改页面 -->
  <el-dialog
          title="修改用户"
          :visible.sync="updateDialogVisible"
          width="40%"
  >
    <!-- 内容主体-->
    <el-form ref="form" :model="upfrom" label-width="80px">
      <el-form-item label="用户名" width="180">
        <el-input v-model="upfrom.name"></el-input>
      </el-form-item>

      <el-form-item label="密码">
        <el-input v-model="upfrom.mima"></el-input>
      </el-form-item>

      <el-form-item>
        <template slot-scope="dxj">
          <el-button type="primary" @click="updateAdmin()">修改</el-button>
        <el-button @click="cancel">取消</el-button>
        </template>
      </el-form-item>
    </el-form>
  </el-dialog>
</div>


<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
  <script src="axios/axios.min.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"/>
<script>
  new Vue({
    el:"#app",
    data() {
      return {
        //表格显示数据
        tableData:[],
        //分页相关的数据
        page:1,
        pageSize:5,
        counts:0,
        pages:0,
        //条件查询的条件
        formInline: {
          name: '',
          pp: ''
        },
        //设置对话框的 :visible.sync 属性 达到点击新增弹出对话框的效果
        addDialogVisible: false,
        updateDialogVisible: false,
        //添加用户的数据
        addfrom: {
          id: '',
          name: '',
          mima: ''
          // status:'',
          // goodsSpname:''
        },
        //修改用户的数据
        upfrom:{
          id: '',
          name: '',
          mima: ''
        }
      }
    },


    created(){  //钩子函数  意思是开启服务时运行的方法

    //  调用查询全部数据的操作
      this.getAll();
    // this.list();
    },

    methods:{

         //列表查询
      getAll(){
        //发生异步请求
        axios.get("http://localhost:/admins").then((res)=>{
          this.tableData=res.data;
        })
      },


     //取消操作
      cancel(){
        this.addDialogVisible=false;
        this.updateDialogVisible=false;
        this.$message.info("当前操作取消")
},

      //删除
      deleteGoodsById(row){
     this.$confirm("此操作将永久删除当前消息，是否继续？","提示",{type:"info"}).then(()=>{
       console.log(row)
       axios.delete("http://localhost:/admins/"+row.id).then((res)=>{
         if(res.data){
           this.$message.success("删除成功");
         }else {
           this.$message.error("数据同步失败，自动刷新");

         }
       }).finally(()=>{
         this.getAll();
       });
     }).catch(()=>{
       this.$message.info("已取消当前删除操作！");
     });
      },


      //新增
      addGoods(){
axios.post("http://localhost:/admins",this.addfrom).then((res)=>{
//  判断当前页面是否成功
  if (res.data){
//  1.关闭弹层
    this.$message.success("添加用户成功")
    this.addfrom.name=null,
            this.addfrom.mima=null
    this.addDialogVisible=false;
  }else {
    this.$message.error("新增失败")
  }
}).finally(()=>{
  //  2.重新加载数据
  this.getAll();

});
      },


      //修改前根据id回显数据
      updateGoodsById(row){

        axios.get("http://localhost:/admins/"+row.id).then((res)=>{
          if (res.data && res.data !=null){
            this.updateDialogVisible=true;
            this.upfrom=res.data;
          }else {
            this.$message.error("数据同步失败，自动刷新");
          }
        }).finally(()=>{
          this.getAll();
        });
      },

      //修改数据
      updateAdmin(){
        axios.put("http://localhost:/admins",this.upfrom).then((res)=>{
//  判断当前页面是否成功
          if (res.data){
//  1.关闭弹层
            this.updateDialogVisible=false;
            this.$message.success("修改成功")
          }else {
            this.$message.error("修改失败")
          }
        }).finally(()=>{
          //  2.重新加载数据
          this.getAll();

        });
      }
    }
  })
</script>
</body>
</html>