从0搭建一个Springboot+vue前后端分离项目(八)把数据从后台传到前端进行展示渲染,完善增删改查

首先引入hutool工具类

Hutool是一个Java工具包类库，对文件、流、加密解密、转码、正则、线程、XML等JDK方法进行封装，组成各种Util工具类
Hutool是一个小而全的Java工具类库，通过静态方法封装，降低相关API的学习成本，提高工作效率，使Java拥有函数式语言般的优雅，让Java语言也可以“甜甜的”。

	    <dependency>
			<groupId>cn.hutool</groupId>
			<artifactId>hutool-all</artifactId>
			<version>5.7.19</version>
		</dependency>

https://www.hutool.cn/

编写查询接口,使用GetMapping

使用分页查询,因为之前加了mybatisplus 分页查询组件

 @GetMapping
    public Result<?> findPage(@RequestParam(defaultValue = "1") Integer pageNum,
                              @RequestParam(defaultValue = "10") Integer pageSize,
                              @RequestParam (defaultValue = "")String search) {
        LambdaQueryWrapper<User> wrapper = Wrappers.<User>lambdaQuery();
        if(StrUtil.isNotBlank(search)){
            wrapper.like(User::getUsername,search);
        }

        Page<User> userPage = userMapper.selectPage(new Page<>(pageNum, pageSize),wrapper);
        return  Result.success(userPage);

    }

通过这样一个Api的调用实现了后台分页模糊查询

启动项目查看结果

http://localhost:9090/user

发现数据已经被展示了出来

对数据进行渲染

在之前写element前端的时候在Home.vue里找到tableData表格.

只需要把从后台请求过来的值放入tableData里面即可实现对后台数据库的渲染

创建一个load()方法,往tableData传入数据

因为是分页查询所以需要3个变量

load(){
      request.get("/user",{
        params:{
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search,
        }
      }).then(res =>{
        console.log(res)
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },

这里this.tableData = res.data.records, records指的是

created方法是用来启动 load()方法的

  created() {
    this.load()
  },

存入的数据库里面的数据就成功的在前台展现出来了

完善查询按钮功能

<!--    搜索区域-->
    <div style="margin: 10px 0">
      <el-input v-model="search" placeholder="请输入关键字" style="width: 20%" clearable />
      <el-button type="primary" style="margin-left: 5px" @click="load">查询</el-button>
    </div>

编写编辑功能

<el-button size="mini" @click="handleEdit( scope.row)"
          >编辑</el-button>

编写handleEdit() {
},方法

 handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
    }

在UserController.java里面编写更新接口,因为编辑完数据后,不更新id会导致数据重复报错,这里id在数据库里面是主键

 @PutMapping

    public Result<?> update(@RequestBody User user) {
        userMapper.updateById(user);
        return  Result.success();
    }

完善save方法

 save(){
      if(this.form.id){//更新
        request.put("/user",this.form).then(res => {
              console.log(res)
              if (res.code === '0') {
                this.$message(
                    {
                      type:"success",
                      message:"更新成功"
                    }
                )
              }else {
                this.$message(
                    {
                      type:"error",
                      message: res.msg
                    }
                )
              }
              this.load()//刷新表格数据
              this.dialogVisible = false//关闭弹窗
            }
        )
      }
      else{//新增
          request.post("/user", this.form).then(res => {
            console.log(res)
            if (res.code === '0') {
              this.$message(
                  {
                    type:"success",
                    message:"新增成功"
                  }
              )
            }else {
              this.$message(
                  {
                    type:"error",
                    message: res.msg
                  }
              )
            }
            this.load()//刷新表格数据
            this.dialogVisible = false//关闭弹窗
          })
        }
    },

试一下效果

完善分页功能

编写handleSizeChange() 方法 与 handleCurrentChange()方法

    handleSizeChange(pageSize) {//改变当前每页的个数
      this.pageSize=pageSize
      this.load()
    },
    handleCurrentChange(pageNum){//改变当前所在的页码
      this.currentPage=pageNum
      this.load()
    }

分页功能就能正常使用了

完善删除功能

该删除部分主要是根据主键id进行删除的

				<el-popconfirm title="确定删除吗,铁子?" @confirm="handleDelete( scope.row.id)">
            <template #reference>
              <el-button
                  size="mini"
                  type="danger"
              >删除</el-button>
            </template>
          </el-popconfirm>

在UserController.java类中定义 一个删除接口,参数为id

@DeleteMapping("/{id}")//删除

    public Result<?> update(@PathVariable Long id) {
        userMapper.deleteById(id);
        return  Result.success();
    }

编写handleDelete()方法

handleDelete(id) {
      console.log(id)
      request.delete("/user/"+ id ).then(res=>{
        if (res.code === '0') {
          this.$message(
              {
                type:"success",
                message:"删除成功"
              }
          )
        }else {
          this.$message(
              {
                type:"error",
                message: res.msg
              }
          )
        }
        this.load() //删除之后重新加载表格数据
      })
    },

测试删除功能