使用 SpringBoot + Vue.js + Axios + ElementUi 完成增删改查

最新推荐文章于 2024-04-10 08:30:00 发布

代码忘烦恼

最新推荐文章于 2024-04-10 08:30:00 发布

阅读量9.2k

点赞数 11

分类专栏： SpringBoot 文章标签： element crud springboot vue axios

本文链接：https://blog.csdn.net/qwe86314/article/details/97927062

版权

SpringBoot 专栏收录该内容

15 篇文章 7 订阅

订阅专栏

目的

这篇文章的目的是教会大家如何使用Axios请求后端数据，将拿到的后端数据JSON显示到ElementUi 的表格中，完成标准的分页，和增删改查。

什么是ElmentUI

ElmentUI是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，
是由大名鼎鼎的饿了么前端团队开发的。
想要了解更多可以去饿了么框架官网
饿了么框架

什么是Axios

axios是Vue官方推荐的AJAX请求工具,它的Api比Jquery以及原生fetch简单，使用起来非常的方便。

关于后端技术

我这里使用的SpringBoot + SpringDataJpa + Mysql，其实不管后端采用什么语言编写的，只要能给前端返回准确的JSON数据就ok了，后端没有硬性要求。

创建SpringBoot 工程

我们创建一个element_ui的SpringBoot工程
在这里插入图片描述
在创建项目的时候添加如上依赖，这里我强调一下这里为什么用Thymeleaf，这里用Thymeleaf仅仅是返回一个视图页面。

首先我们在Mysql中建立一个数据库crud，再建立一个数据表crud表
在这里插入图片描述
实体类代码

@Entity
public class Crud {
    private int id;
    private String crudName;
    private int crudAge;
    private String crudHobby;
    private String crudAddr;
    private String crudSalary;
}

这里省略了部分代码,这里的实体类是由SpringDataJpa帮我们自动生成的。

Dao持久层代码

public interface CrudRepository extends JpaRepository<Crud,Integer> {
   Page<Crud> findAll(Pageable pageable);
}

dao里面就只有一个方法，分页查询所有数据

控制器代码

@Controller
public class HomeController {
    @Autowired
    private CrudRepository crudRepository;
    @GetMapping("/")
    public String indexPage() {
        return "index"; //返回一个index.html页面
    }

    @PostMapping("/page")
    @ResponseBody
    public ResponseEntity<Object> findPageAll(@RequestBody PageVO pageVO) {

        Pageable pageable = PageRequest.of(pageVO.getStart(),pageVO.getLength(), Sort.Direction.ASC,"id");
        Page<Crud> page = crudRepository.findAll(pageable);
        return new ResponseEntity<Object>(page, HttpStatus.OK);
    }

    @DeleteMapping("/crud/{id}")
    @ResponseBody
    public ResponseEntity<Object> deleteById(@PathVariable("id") Integer id) {
        if (id.equals("")) {
            return new ResponseEntity<Object>("id不能为空", HttpStatus.NOT_FOUND);
        }
        crudRepository.deleteById(id);
        return new ResponseEntity<Object>("删除成功", HttpStatus.OK);
    }

    @PutMapping("/updateUser")
    @ResponseBody
    public ResponseEntity<Object> updateById( @RequestBody  Crud crud) {

        if (crud != null) {
            crudRepository.save(crud);
            return new ResponseEntity<Object>("编辑成功", HttpStatus.OK);
        }
        return new ResponseEntity<Object>("编辑失败", HttpStatus.OK);

    }

    @PostMapping("/addCrud")
    @ResponseBody
    public ResponseEntity<Object> addCrud( @RequestBody  Crud crud) {

        if (crud != null) {
            crudRepository.save(crud);
            return new ResponseEntity<Object>("添加成功", HttpStatus.OK);
        }
        return new ResponseEntity<Object>("添加失败", HttpStatus.OK);

    }
}

这里的PageVo是我自己封装的，省略get/set 方法代码如下

public class PageVO {
    private Integer start = 0; //页码
    private Integer length = 10; //页数
}

application.yml 配置文件

spring:
  application:
    name: elment_crud
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/crud?serverTimezone=GMT%2B8
    username: root
    password: root

注意mysql5.7以上驱动是com.mysql.cj.jdbc.Driver 5.7及以下是com.mysql.jdbc.Driver

前端编写

这里使用的Vue不是单文件组件.vue的形式而是在html中引入了vue.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--引入element ui的css-->
    <link rel="stylesheet" href="../index.css"> 
</head>
<body>
<div id="app">
    <!--el开头的是elment ui模版命令,这里增加了一个添加的按钮，el-row是独占一行 -->
    <el-row>
        <el-button type="primary" @click="handleAdd">添加</el-button>
    </el-row>
    <!--:data是渲染数据-->
    <el-table 
            :data="crud"
            style="width: 100%"
            height="250">
        <el-table-column
                fixed
                prop="id"
                label="编号"
                width="150">
        </el-table-column>
        <el-table-column
                prop="crudName"
                label="名称"
                width="120">
        </el-table-column>
        <el-table-column
                prop="crudAge"
                label="年龄"
                width="120">
        </el-table-column>
        <el-table-column
                prop="crudSalary"
                label="薪水"
                width="120">
        </el-table-column>
        <el-table-column
                prop="crudHobby"
                label="地址"
                width="爱好">
        </el-table-column>
        <el-table-column
                prop="crudAddr"
                label="地址"
                width="120">
        </el-table-column>
           <!--    编辑 删除按钮    -->
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row,crud)">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row,crud)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页 
    current-page 是当前页数
    pageSize 改变时会触发 这里返回的是每页条数
    page-sizes	每页显示个数选择器的选项设置 返回的是数组 [5,10,20]
    layout 组件布局，子组件名用逗号分隔 sizes, prev, pager, next, jumper, ->, total, slot
    total 总条目数	
     -->
    <div class="pagination">
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageCode"
                :page-sizes="pageOption"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalaElemnts">
        </el-pagination>
    </div>


    <!--添加与编辑、弹出层页面-->
    <div  v-show="show">

        <el-dialog title="用户信息" :visible.sync="dialogFormVisible">
            <el-form>
                <el-form-item label="昵称" :label-width="formLabelWidth">
                    <el-input v-model="formCrud.crudName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄" :label-width="formLabelWidth">
                    <el-input v-model="formCrud.crudAge" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="薪水" :label-width="formLabelWidth">
                    <el-input v-model="formCrud.crudSalary"  autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item  label="爱好" :label-width="formLabelWidth">
                    <el-input v-model="formCrud.crudHobby"  autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item  label="地址" :label-width="formLabelWidth">
                    <el-input v-model="formCrud.crudAddr" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false" >取 消</el-button>
                <el-button v-show="btn_show" type="primary" @click="handleUpdate">确 定</el-button>
                <el-button type="primary" v-show="btn2_show" @click="add">确定添加</el-button>
            </div>
        </el-dialog>
    </div>


</div>



</body>
<script src="../vue.js"></script>
<script src="../index.js"></script>
<script src="../axios.min.js"></script>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        show: false,
        btn_show: false,
        btn2_show: false,
        crud: [],
        pageCode: 0, //默认页
        pageSize: 10,//每页10条
        totalPage: 10 ,//总页数
        pageOption: [10, 50, 100],
        totalaElemnts: 100, //总记录数
        dialogFormVisible:false,
        formCrud: {
            id: '',
            crudName: '',
            crudAge: '',
            crudHobby: '',
            crudSalary: '',
            crudAddr: '',
        },
          formLabelWidth: '120px'
      }
    },
    methods: {
      findByPage(pageCode, pageSize) {
      axios.post("http://localhost:8080/page",{
          start: pageCode,
          length: pageSize
      }).then( (res) => {
          if (res.status === 200)
          this.totalPage = res.data.totalPages //总页数
          this.totalaElemnts = res.data.totalElements //总记录数
          this.crud = res.data.content
      }).catch((err) => {
          console.log(err)
      })

      },
      handleSizeChange(val) {
        this.findByPage(this.pageCode, val)
      },
        handleCurrentChange(val) {
        this.findByPage(val, this.pageSize)
      },
        /**
         * 删除
          * @param index
         * @param row
         * @param crud
         */
     handleDelete(index, row, crud) {
       var id = crud[index].id;
       axios.delete("http://localhost:8080/crud/" + id, {
       }).then((res) =>{
           this.findByPage(this.pageCode, this.pageSize)
       }).catch((err) => {
           console.log(err)
       })
     },
        /**
         * 编辑 之前回显数据
         * @param index
         * @param row
         * @param crud
         */
    handleEdit(index, row, crud) {

      this.show = true
      this.dialogFormVisible = true
      this.btn_show = true
      this.btn2_show = false
      this.formCrud.id = crud[index].id
      this.formCrud.crudName = crud[index].crudName
      this.formCrud.crudAge = crud[index].crudAge
      this.formCrud.crudSalary = crud[index].crudSalary
      this.formCrud.crudHobby = crud[index].crudHobby
      this.formCrud.crudAddr = crud[index].crudAddr
    },

     /**
      * 编辑发送ajax请求
      */
    handleUpdate() {
      axios.put("http://localhost:8080/updateUser",{
      id: this.formCrud.id,
      crudName: this.formCrud.crudName,
      crudAge:  this.formCrud.crudAge,
      crudHobby: this.formCrud.crudHobby,
      crudSalary: this.formCrud.crudSalary,
      crudAddr: this.formCrud.crudAddr
      }).then((res) => {
      //编辑成功后刷新页面
      this.findByPage(this.pageCode, this.pageSize)
      //关闭遮罩层
      this.show = false
      this.dialogFormVisible = false
      console.log(1, res)
      }).catch((err) => {
      console.log(2, err)
      })
    },
     /**
      * 点击添加按钮的时候显示遮罩层,同时将编辑的按钮隐藏掉
      */
    handleAdd() {
      this.show= true
      this.dialogFormVisible = true
      //将双向绑定数据滞空
      this.formCrud.crudName= ''
      this.formCrud.crudAge = ''
      this.formCrud.crudHobby = ''
      this.formCrud.crudSalary = ''
      this.formCrud.crudAddr = ''
      //将新编辑按钮隐藏掉
      this.btn_show = false
      //将新增按钮显示 v-show 其实是display：none 和black操作
      this.btn2_show  =true
    },
    /**
      *  新增
      */
    add() {
      axios.post("http://localhost:8080/addCrud",{
        crudName: this.formCrud.crudName,
        crudAge:  this.formCrud.crudAge ,
        crudHobby: this.formCrud.crudHobby,
        crudSalary: this.formCrud.crudSalary,
        crudAddr: this.formCrud.crudAddr
      }).then((res) => {
         //添加成功后从新计算总页数
        this.findByPage(this.pageCode, this.pageSize)
        //同时关闭遮罩层
        this.show= true
        this.dialogFormVisible = false

      }).catch((err) => {
          console.log(err)
      })
    }
    },
    created() {
      this.findByPage(this.pageCode, this.pageSize)
    },
  })

</script>
</html>

下面我们来看下效果
在这里插入图片描述
新增效果

编辑效果

总结

这样就完成了增删改查和分页，非常简单，这里并没有使用单文件组件的方式, 推荐大家去使用单文件的组件方式去实现，单文件组件也是非常的简单，这里就不做太多的深入了，网上哪些人实现的方法太过于复杂，我按照自己的想法实现了，写代码一定要有思维，这样写代码就很轻松。
element ui 框架总体来说提供来非常多多样式，对没有css功底的程序员来说是相当不错的，极大的帮助了我们，不用花费很多的时间去写样式。

源码地址

github

代码忘烦恼

关注

11
点赞
踩
95

收藏

觉得还不错? 一键收藏
8
评论
使用 SpringBoot + Vue.js + Axios + ElementUi 完成增删改查

目的这篇文章的目的是教会大家如何使用Axios请求后端数据，将拿到的后端数据JSON显示到ElementUi 的表格中，完成标准的分页，和增删改查。什么是ElmentUIElmentUI是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，是由大名鼎鼎的饿了么前端团队开发的。想要了解更多可以去饿了么框架官网饿了么框架什么是Axiosaxios是Vue官方推荐的...
复制链接

扫一扫