后台管理系统2——搜索、编辑、删除功能_后台管理系统查询操作

作者：小丑西瓜9 | 2024-02-17 06:16:06

踩

后台管理系统查询操作

剩余功能

1 用户数据的查询功能

后端的操作

在原来已经建好的controller文件夹下的UserController类中继续进行代码的编写，完整代码如下：
在进行网页查询的时候，需要必须传入三个参数pageNum pageSize search
http://localhost:9090/user,在最初的时候，是必须传入上面三个参数，但是由于在后面defaultValue = “1” 进行设置了默认值，所以不进行传入也能够查询到。

@RequestMapping("/user")
@RestController
public class UserController {
    // 引入mapper中的内容
    @Resource
    UserMapper userMapper;

    // 新增
    @PostMapping
    // Result<?>表示接收任何类型的数据
    public Result<?> save(@RequestBody User user){
        //判断用户的密码是否存在，不存在 设置一个默认的密码
        if(user.getPassword() == null){
            user.setPassword("123456");
        }
        // 插入数据库，在里面进行使用
        userMapper.insert(user);
        return Result.success();
    }

    // 查询,使用的是分页查询
    // 在进行网页查询的时候，需要必须传入三个参数pageNum pageSize search
    @GetMapping
    // 当前页pageNum 默认从 1 开始,，每页条数 pageSize 默认从 10 开始,，查询关键字 默认为空
    public Result<?> findPage(@RequestParam(defaultValue = "1") Integer pageNum,@RequestParam(defaultValue = "10") Integer pageSize,@RequestParam(defaultValue = "") String search){
        // Page对象是由mybatisplus进行提供的
        // Page<Object> page =  new Page<>(pageNum,pageSize);

        // 里面需要传入两个参数 一个是分页的对象,另一个wrappers对象，也是由mybatisplus提供的类
        // 根据用户昵称进行模糊搜索,User::getNickName中间四个点的意思是直接进行访问user的属性，当 NickName 和search 类似的时候，就进行显示
        /**
         * 此时原先直接将Wrappers.<User>lambdaQuery().like(User::getNickName,search);写在 userPage中，在进行查询数据库的时候，nickName为空的字段
         * 是查询不到的，所以在like之前进行一下判断
         * 使用的是 hutool工具，StrUtil.isNotBlank(search) 判断 search 不是空的时候执行,此时就能将 nickName为空的数据查询出来
         */
        LambdaQueryWrapper<User> wrapper = Wrappers.<User>lambdaQuery();
        if(StrUtil.isNotBlank(search)){
            wrapper.like(User::getNickName,search);
        }
        Page<User> userPage =  userMapper.selectPage(new Page<>(pageNum,pageSize),wrapper);
        return Result.success(userPage);
    }


}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

前端的操作

搜索功能实现之前，首先要进行将数据库中的数据全部展现在table表格里面，此时的操作因为前端在使用接口发送请求的时候，如果不进行传递参数，后台默认会将所有的数据返回给前台，然后将返回的数据赋值给table所绑定的tableDate数组，然后进行渲染即可。

此时需要注意的时候，在进行发送的时候使用的是get请求，需要传递对象类型

具体的js代码如下：

  //查询数据库中的数据，由于需要多次进行使用，所以先进行一下封装
    // 此时的方法并没有进行调用，所以可以再页面一进行加载，就调用
    load() {
      // 在进行后端设计的时候，get代表查询
      // get不能直接使用对象进行传参
      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;
        });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

根据昵称进行查询的逻辑：

在后台进行设计接口的时候，里面需要接收三个参数，当前页pageNum，页数大小pageSize，关键字 search，其中search就是根据昵称进行搜索的，在进行发送查询请求的时候，如果将search的值传给后端，就可以根据昵称进行查询。
具体的代码：
给查询绑定一个load方法，当点击查询的时候，由于load里面接收的参数与表单的search绑定，在提交时，便能够实现。

<!-- 搜索区域 -->
      <div style="margin: 10px 0" class="content_right">
        <el-input
          v-model="search"
          placeholder="请输入关键字"
          style="width: 200px"
          clearable
        />
        <el-button type="primary" style="margin-left: 5px" @click="load"
          >查询</el-button
        >
      </div>
1
2
3
4
5
6
7
8
9
10
11
12

2 用户数据的编辑功能

后端的操作

在原来已经建好的controller文件夹下的UserController类中继续进行代码的编写，编辑功能的实现主要是数据修改完成之后，当点击确定按钮的时候，进行页面的修改，主要是进行更新操作。
后端代码：

 // 更新 使用PutMapping接口
    @PutMapping
    // Result<?>表示接收任何类型的数据
    public Result<?> update(@RequestBody User user){
        // 根据id进行更新
        userMapper.updateById(user);
        return Result.success();
    }

1
2
3
4
5
6
7
8
9

前端的操作

逻辑：首先要给编辑按钮绑定一个事件，传入当前行的数据，然后将当前行的数据赋值给form，此时如果直接进行赋值，可能导致在进行数据修改之后，点击了取消按钮，会导致数据的改变，所以采用深拷贝的方式进行实现数据的复制。

注意 #default="scope"代码要加上，要不然在进行事件绑定的时候，scope.row不存在。

 <el-table-column fixed="right" label="操作" width="150">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-popconfirm title="确认删除吗？">
            <template #reference>
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
1
2
3
4
5
6
7
8
9
10
11
12

js代码：

// 编辑操作
    handleEdit(row) {
      // console.log(row);
      /** 此时可以拿到当前行的数据，然后将拿到的数据，传入到form中进行显示，为了避免v-model
       *  的影响，当在表格中进行修改数据的时候，会导致form中的数据，当点击取消之后，会影响原先的数据
       * 所以采用深拷贝的方式进行赋值
       */
      this.form = JSON.parse(JSON.stringify(row));
      //  打开弹窗
      this.dialogVisible = true;
    },
1
2
3
4
5
6
7
8
9
10
11

现在存在的问题，因为点击编辑按钮，将弹窗打开之后，当点击确定按钮的时候，调用的原来的save函数，此时是将数据存入数据库，但是由于在数据库中进行设置了主键，当在进行添加的时候，会报主键重复的错误，所以此时点击确定按钮的逻辑操作应该进行判断。

如果是增加弹窗的调用 save方法，编辑弹窗，调用update方法，此时判断标准是根据form中的id是否存在进行判断，如果存在，代表当时的操作是编辑，反之为增加，最后在判断之后，需要进行弹窗的关闭和页面的重新渲染

// 将数据保存到后台
    save() {
      // 通过 form表单中id进行判断，如果有id，表示为更新，否则为新增
      if (this.form.id) {
        // 更新 put
        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: "更新失败",
            });
          }
        });
      } else {
        // 新增
        // 此时路径不能使用/api/user，要不然会自动拼接
        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: "新增失败",
            });
          }
        });
      }
      // 判断之后，需要进行弹窗的关闭和页面的重新渲染
      this.load();
      this.dialogVisible = false;
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

其中还有当前页码的改变，以及当前页数大小的改变，都是直接调用load方法，因为数据进行改变的时候，会重新发送请求，此时携带的参数，就是更改之后的数据。

 // 改变页面个数触发函数
    handleSizeChange() {
      this.load();
    },
    // 改变当前页码
    handleCurrentChange() {
      this.load();
    },
1
2
3
4
5
6
7
8

3 用户数据的删除功能

后端的操作

在原来已经建好的controller文件夹下的UserController类中继续进行代码的编写，

  // 删除 使用DeleteMapping接口
    @DeleteMapping("/{id}")
    // "/{id}" 占位符是方式 需要通过PathVariable注解进行获取参数
    public Result<?> delete(@PathVariable Long id){
        // 根据id进行删除
        userMapper.deleteById(id);
        return Result.success();
    }
1
2
3
4
5
6
7
8

前端的操作

在进行删除的时候，因为已经给删除按钮绑定一个popconfirm组件，点击确定之后才能进行删除，所以将事件绑定在popconfirm组件上，popconfirm提供了一个confirm方法，再删除的时候，需要将当前行的id传入，具体代码：

 <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-popconfirm
            title="确认删除吗？"
            @confirm="handleDelete(scope.row.id)"
          >
            <template #reference>
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
1
2
3
4
5
6
7
8
9
10
11
12
13

  // 删除当前数据
    handleDelete(id) {
      // console.log(id);
      // 通过字符串拼接的方式，将id传给后端userMapper.deleteById(id);中进行删除
      request.delete("/user/" + id).then((res) => {
        if (res.code === "0") {
          this.$message({
            type: "success",
            message: "删除成功",
          });
        } else {
          this.$message({
            type: "error",
            message: "删除失败",
          });
        }
        this.load(); //重新进行表格数据的渲染
      });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】