SSM整合项目（删除家居 + 分页查询）

news2024/11/16 7:40:24

1.删除家居

1.需求分析

2.编写Service层

1.FurnService.java 添加方法

        //删除家居
        public void del(Integer id);

2.FurnServiceImpl.java 实现方法

    @Override
    public void del(Integer id) {
        furnMapper.deleteByPrimaryKey(id);
    }

3.单元测试

    @Test
    public void del() {
        furnService.del(3);
    }

3.编写Controller层

1.FurnController.java 添加处理delete请求的接口

    @DeleteMapping("/del/{id}") //路径参数
    @ResponseBody
    public Msg del(@PathVariable Integer id) {
        furnService.del(id);
        return Msg.success();
    }

2.postman测试

4.修改 HomeView.vue实现删除功能

1.找到删除按钮位置添加确认弹窗

      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <!--#default="scope"然后使用scope.row可以获取当前行的数据-->
          <el-button @click="handleEdit(scope.row)" type="text">编辑</el-button>
          <!--这里的@confirm事件，当用户点击确定的时候会触发-->
          <el-popconfirm title="确认删除" @confirm="deleteById(scope.row.id)">
            <template #reference>
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>

2.编写删除家居方法

    //删除家居
    deleteById(id) {
      //这里是使用的模板字符串来取数据
      request.delete(`/api/del/${id}`).then(
          res => {
            //code是200则表示修改成功
            if (res.code === 200) {
              //弹出更新成功的消息框
              this.$message(
                  {
                    type: "success",
                    message: "删除成功！"
                  }
              )
            } else {
              //删除失败
              //弹出更新失败的消息框
              this.$message(
                  {
                    type: "error",
                    message: "删除失败！"
                  }
              )
            }
            //刷新页面
            this.list()
          }
      )
    }

5.结果展示

6.课后练习：将表单回显方式改为从数据库获取信息

1.编写Service层

1.FurnService.java 添加方法

        //根据id获取家居信息
        public Furn findById(Integer id);

2.FurnServiceImpl.java 实现方法

    @Override
    public Furn findById(Integer id) {
        Furn furn = furnMapper.selectByPrimaryKey(id);
        return furn;
    }

2.编写Controller层

FurnController.java 添加方法

    @ResponseBody
    @GetMapping("/findById/{id}")
    public Msg findById(@PathVariable Integer id) {
        Furn furn = furnService.findById(id);
        //将查询结果添加到成功的Msg对象中
        return Msg.success().add("furn", furn);
    }

3.HomeView.vue 修改编辑按钮

4.HomeView.vue 编写触发方法

    handleEditById(id) {
      request.get(`/api/findById/${id}`).then(
          res => {
            //将数据绑定到model
            this.form = res.extend.furn;
            //显示提示框
            this.dialogVisible = true;
          }
      )
      //根据id进行查询并回显结果
    }

5.结果展示

2.分页展示

1.需求分析

2.思路分析

3.引入mybais pageHelper插件 pom.xml

  <!--  引入mybais pageHelper插件-->
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.2.1</version>
    </dependency>

4.配置mybatis分页拦截器 mybatis-config.xml

    <!--配置mubatis分页拦截器-->
    <plugins>
        <plugin interceptor="com.github.pagehelper.PageInterceptor">
            <!--
                配置分页合理化
                1.当用户请求的页数大于最后一页时，显示查询最后一页
                2.当用户请求的页数小于第一页时，显示查询第一页
            -->
            <property name="reasonable" value="true"/>
        </plugin>
    </plugins>

5.编写Controller

    //分页功能接口
    @RequestMapping("/furnsByPage")
    @ResponseBody
    public Msg listFurnsByPage(@RequestParam(defaultValue = "1") Integer pageNum,
                               @RequestParam(defaultValue = "5") Integer pageSize) {
        //1.设置分页参数
        PageHelper.startPage(pageNum, pageSize);
        //2.查询所有数据
        List<Furn> all = furnService.findAll();
        //3.进行物理分页pageInfo存放了分页的信息
        PageInfo pageInfo = new PageInfo(all, pageSize);

        return Msg.success().add("pageInfo", pageInfo);
    }

6.postman测试

7.HomeView.vue 引入分页控件

1.在div的最下面引入分页导航控件

<!--    增加分页导航-->
    <div style="margin: 10px 0">
      <el-pagination
          @size-change="handlePageSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage"
          :page-sizes="[5,10]" 
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

2.数据池设置三个数据

3.结果展示

8.前端分页请求

1.HomeView.vue 修改list方法

    //请求返回家居（分页）
    list() {
      request.get("/api/furns").then(
          // res => {
          //   console.log(res)
          //   this.tableData = res.extend.furnList
          // }
          //请求分页
          request.get("/api/furnsByPage", {
            params: {
              //相当于双向绑定的model
              pageNum: this.currentPage,
              pageSize: this.pageSize
            }
          }).then(
              res => {
                //将返回的json对象数组给tableData，进行遍历展示数据
                console.log(res)
                this.tableData = res.extend.pageInfo.list
              }
          )
      )
    }

2.结果展示

9.根据pageNo和PageSize的变化实时分页

1.HomeView.vue 添加两个方法

    //当view的currentPage发生变化，pageNo就代表了当前页号
    handleCurrentChange(pageNo) {
      //替换model中的当前页号
      this.currentPage = pageNo;
      //根据model发送分页请求
      this.list();
    },
    //当view的pageSize发生变化，则会传到这个函数
    handlePageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.list();
    }

2.结果展示

10.前端分页查询三部曲（示意图）

11.条件分页

1.需求分析

2.编写Service层

1.FurnService.java 添加方法

        //根据条件模糊查询
        public List<Furn> findByCondition(String name);

2.FurnServiceImpl.java 实现方法

    @Override
    public List<Furn> findByCondition(String name) {
        FurnExample furnExample = new FurnExample();
        //使用这个对象来添加条件
        FurnExample.Criteria criteria = furnExample.createCriteria();
        //判断是否有查询条件
        if (StringUtils.hasText(name)) {
            //添加根据传进来的名字进行模糊查询
            criteria.andNameLike("%" + name + "%");
        }
        //进行查询
        //注意：这里如果是没有传参数，则会查询出所有的记录
        return furnMapper.selectByExample(furnExample);
    }

3.单元测试

    @Test
    public void findByCondition() {
        List<Furn> list = furnService.findByCondition("桌子");
        for (Furn furn : list) {
            System.out.println(furn);
        }
    }

3.编写Controller层

1.FurnController.java

    //条件分页接口
    @RequestMapping("/listFurnsByCondition")
    @ResponseBody
    public Msg listFurnsByCondition(@RequestParam(defaultValue = "1") Integer pageNum,
                                    @RequestParam(defaultValue = "5") Integer pageSize, @RequestParam(defaultValue = "") String search) {
        //1.设置分页参数
        PageHelper.startPage(pageNum, pageSize);
        //2.查询所有数据
        List<Furn> byCondition = furnService.findByCondition(search);
        //3.进行分页
        PageInfo pageInfo = new PageInfo(byCondition, pageSize);

        return Msg.success().add("pageInfo", pageInfo);
    }

2.postman测试

4.前端分页请求

1.双向绑定输入框信息，为查找绑定点击事件

2.编写根据model进行分页查询的函数

    //根据条件进行分页查询
    findByCondition() {
      request.get("/api/listFurnsByCondition", {
        params: {
          //根据model的数据进行分页查询
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(
          res => {
            //渲染view,并设置total
            console.log(res)
            this.total = res.extend.pageInfo.total;
            this.tableData = res.extend.pageInfo.list;
          }
      )}

3.解决点击页号则不会进行条件查询的问题

    //当view的currentPage发生变化，pageNo就代表了当前页号
    handleCurrentChange(pageNo) {
      //替换model中的当前页号
      this.currentPage = pageNo;
      //根据model发送分页请求
      if (this.search) { //只要search有值，则进行条件分页查询
        this.findByCondition();
      } else {
        this.list();
      }
    },
    //当view的pageSize发生变化，则会传到这个函数
    handlePageSizeChange(pageSize) {
      this.pageSize = pageSize;
      if (this.search) { //只要search有值，则进行条件分页查询
        this.findByCondition();
      } else {
        this.list();
      }
    }