本文主要是介绍基于springboot、vue、mybatis-plus、mysql、element实现的前后端分离的CRUD功能，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

基于springboot、vue、mybatis-plus、mysql、element实现的前后端分离的CRUD功能

文章目录

• • 基于springboot、vue、mybatis-plus、mysql、element实现的前后端分离的CRUD功能
• 前期准备
• • 后端
  • 前端
• 后端代码
• • controller层，mapper层，servie层，pojo
  • • pojo
    • mapper和service
• 功能实现
• • 基本布局（用element-ui，不能在app.vue里面写，钩子不会被触发，我是在home文件写的）
  • • 搜索栏
    • 页面
    • 添加和编辑弹窗（这里我让id自增了，所以不输入id）
  • 添加 功能
  • • 后端代码
    • 前端代码
  • 删除功能
  • • 后端代码
    • 前端代码
  • 修改功能
  • • 后端代码
    • 前端代码
  • 查找功能
  • • 后端代码
    • 前端代码

前期准备

后端

导入要使用的jar包

        <!-- https://mvnrepository.com/artifact/org.projectlombok/lombok -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.16</version>
            <scope>provided</scope>
        </dependency>
        <!--mybatis-plus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.3.1</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.22</version>
        </dependency>

在applycation.yaml文件中配置相关文件

spring:
    datasource:
        url: jdbc:mysql://127.0.0.1:3306/XXXXX?serverTimezone=GMT
        type: com.alibaba.druid.pool.DruidDataSource
        driverClassName: com.mysql.cj.jdbc.Driver
        username: root
        password: XXXXX

mybatis-plus:
    configuration:
        log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

server:
    port: 端口号

前端

可以配置一个vue文件，我就是vue文件，或者有html也行
导入element-ui和axios

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
**这里是完整引入，可以按需引入，官网有写**

导入axios
 npm install axios 

到这里所有的准备工作就已经弄完了

后端代码

controller层，mapper层，servie层，pojo

pojo

@Data
@TableName(value = "books")
@JsonInclude(JsonInclude.Include.NON_NULL) //jackson 实体转json 为NULL的字段不参加序列化（即不显示）
public class Book {

    @TableId(value = "bookID",type = IdType.AUTO)
    private  Integer bookID;
    @TableField(value = "bookName")
    private  String  bookName;
    @TableField(value = "bookCounts")
    private  int    bookCounts;
    @TableField(value = "detail")
    private  String  detail;
}

mapper和service

@Mapper
@Repository 
public interface BookMapper extends BaseMapper<Book> {
}

serviece

public interface BookService extends IService<Book> {
}

//serviceimpl
@Service
public class BookServiceImpl extends ServiceImpl<BookMapper, Book> implements BookService {

}

功能实现

基本布局（用element-ui，不能在app.vue里面写，钩子不会被触发，我是在home文件写的）

搜索栏

      <el-input
          placeholder="请输入id"
          v-model="input"
          clearable
          style="width: 200px;float: left">
      </el-input>
      <el-button type="primary" class="btn" @click="getClick(input)">查询</el-button>
      <el-button type="primary" class="btn" @click="resetClick">重置</el-button>
      <el-button type="primary" class="btn"  @click="dialogAddBookVisible = true">添加</el-button>   

页面

在这里插入图片描述

<el-table
        :data="book"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="bookID"
          label="id"
          width="300">
      </el-table-column>
      <el-table-column
          prop="bookName"
          label="书籍名称"
          width="120">
      </el-table-column>
      <el-table-column
          prop="bookCounts"
          label="数据数量"
          width="120">
      </el-table-column>
      <el-table-column
          prop="detail"
          label="书籍评价"
          width="120">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="300">
        <template slot-scope="scope">
          <el-button type="text" @click="updateClick(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="removeClick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

添加和编辑弹窗（这里我让id自增了，所以不输入id）

 <el-dialog title="添加书籍信息" :visible.sync="dialogAddBookVisible"  :append-to-body="true">
        <el-form :model="addBook">
          <el-form-item label="id" prop="bookID" :label-width="formLabelWidth" >
            <el-input v-model="addBook.bookID"  placeholder="请输入书籍编号" disabled></el-input>
          </el-form-item>
          <el-form-item label="书籍名称" :label-width="formLabelWidth" prop="bookName">
            <el-input v-model="addBook.bookName" autocomplete="off"  placeholder="请输入书籍名称"></el-input>
          </el-form-item>
          <el-form-item label="书籍数量" :label-width="formLabelWidth">
            <el-input v-model="addBook.bookCounts" autocomplete="off"  placeholder="请输入书籍数量"></el-input>
          </el-form-item>
          <el-form-item label="书籍评价" :label-width="formLabelWidth">
            <el-input v-model="addBook.detail" autocomplete="off"  placeholder="请输入书籍评价"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click=" dialogAddBookVisible= false">取 消</el-button>
          <el-button type="primary"  @click="addClick">确 定</el-button>
        </div>
      </el-dialog>

    <el-dialog title="修改信息" :visible.sync="dialogFormVisible"  :append-to-body="true">
      <el-form :model="books">
        <el-form-item label="id" prop="bookID" :label-width="formLabelWidth">
          <el-input v-model="books.bookID" disabled></el-input>
        </el-form-item>
        <el-form-item label="书籍名称" :label-width="formLabelWidth" prop="bookName">
          <el-input v-model="books.bookName" autocomplete="off"  placeholder="请输入书籍名称"></el-input>
        </el-form-item>
        <el-form-item label="书籍数量" :label-width="formLabelWidth">
          <el-input v-model="books.bookCounts" autocomplete="off"  placeholder="请输入书籍数量"></el-input>
        </el-form-item>
        <el-form-item label="书籍评价" :label-width="formLabelWidth">
          <el-input v-model="books.detail" autocomplete="off"  placeholder="请输入书籍评价"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelClick">取 消</el-button>
        <el-button type="primary"  @click="updateEnsure">确 定</el-button>
      </div>
    </el-dialog>

接下来就是功能的实现，CRUD工程师开始

添加 功能

在这里插入图片描述

后端代码

    @PostMapping
    public void  addBook(@RequestBody Book book){
        bookService.save(book);
    }

前端代码

    addApi(data){
      axios({
        url:'http://localhost:8089/book',
        method:'post',
        data:data
      })
    }

    addClick(){
        console.log(this.addBook)  
        this.addApi(this.addBook) //在输入框的时候已经把数据存到了addbook了，直接传就行了
        alert("添加成功")
       this.dialogAddBookVisible= false //让弹窗关闭 
       this.addBook={}  //清零，不然会保存数据
    },

删除功能

后端代码

    @DeleteMapping(value = "/{id}")
    public void  deleteBook(@PathVariable(value = "id") int id){
         bookService.removeById(id);
    }

前端代码

    deleteApi(id){
     return  axios.request({
             url:'http://localhost:8089/book/'+id,
             method: 'delete',
      })
    },
    
    removeClick(row){
      console.log(row)
       const id=row.bookID;
       this.deleteApi(id)
        this.resetClick()

    },

修改功能

后端代码

    @PutMapping
    public void updeteBook(@RequestBody Book book){
         bookService.updateById(book);
    }

前端代码

    updateApi(data){
      axios({
        url:'http://localhost:8089/book',
        method:"put",
        data: data
      })
    },
        updateEnsure(){
      this.updateApi(this.books)
      this.books={}
      this.dialogFormVisible=false;
      this.resetClick()
    },

查找功能

后端代码

    @GetMapping(value = "/{id}") 
    public Book  getBook(@PathVariable int id){
        return  bookService.getById(id);
    }

前端代码

    geiApi(id){
      axios({
        url:'http://localhost:8089/book/'+id,
        method:"get",
      }).then(res=>{
        const arr = []; 
        arr.push(res.data)  //这里要转换一下，不然会类型错误
        this.book=arr
      })
    },

    getClick(id){
        this.geiApi(id);
    },

crud功能已经实现了，还有很多逻辑上的问题需要去修改，下次再改

这篇关于基于springboot、vue、mybatis-plus、mysql、element实现的前后端分离的CRUD功能的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！