SSMP整合案例第八步前端页面的分页功能完善与维护和实现条件查询

朱道阳

已于 2024-06-16 07:52:48 修改

阅读量1.5w

点赞数 7

分类专栏：项目实战 # 后端开发CRUD 员工管理系统文章标签：前端 vue.js javascript java java-ee spring sql

于 2024-06-03 11:31:53 首次发布

本文链接：https://blog.csdn.net/qq_30500575/article/details/139410142

版权

项目实战同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

后端开发CRUD 员工管理系统

9 篇文章 0 订阅

订阅专栏

分页

页面中有分页展示

查看组件

想用什么直接编辑

vue里面的常量数据

可以修改模型数据达到修改展示效果的能力

在 Vue.js 中，通常会将不经常修改且在整个应用程序中共享的数据定义为常量数据。常量数据可以是在组件中定义的静态数据，也可以是通过 Vuex 管理的全局状态。

先在前端进入的时候加载分页数据

钩子函数（Hooks）是在软件开发中用于实现特定操作或者在特定事件发生时执行自定义代码的函数。在不同的编程语言和框架中，钩子函数的含义和用法可能有所不同。下面我将介绍几个常见的上下文中钩子函数的概念：

在前端开发中，特别是在使用 Vue.js 或 React 等框架时，钩子函数通常指的是生命周期钩子（Lifecycle Hooks），用于在组件生命周期的特定阶段执行代码。

Vue.js 中的生命周期钩子：
- beforeCreate：实例刚被创建，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
- created：实例已经创建完成后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
- beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。

//钩子函数，VUE对象初始化完成后自动执行
created() {
    //加载全部数据
    // this.getAll();
    //加载分页数据
    this.getPage();
},

methods: {

    //分页查询
    getPage() {
        console.log("getPage  run")//控制台打印
        axios.get("/users/"+this.pagination.currentPage+"/"+this.pagination.pageSize).then((res) => {
            this.dataList = res.data.data.records;
        });
    },

这样就能达到效果

修改数据模型绑定的数值

//分页查询
getPage() {
    console.log("getPage  run")//控制台打印
    axios.get("/users/"+this.pagination.currentPage+"/"+this.pagination.pageSize).then((res) => {
        this.pagination.pageSize=res.data.data.size;
        this.pagination.currentPage=res.data.data.current;
        this.pagination.total=res.data.data.total;
        this.dataList = res.data.data.records;
    });
},

这样在页面中就能展示出数据

修改后再执行查询就行

这样就能在页面中加载数据

分页的数据得从页面上拿然后重新加载页面

小结

修改数据模型的数据

我们用axios发起一个以异步请求调用

获取分页数据

得到数据结果后我们得拿到数据进行工作

在改切换页码数据

将修改的页码值传递给数据模型中的currentPage这个属性

再重新执行更新刷新操作即可

分页功能维护

刚才还存在bug

比如我们把第三页的数据全部删掉后

页码还是后存在

应该不会显示当前页面，应该会显示前面的页面

所以我们会在controller中的查询中进行一个判断

@GetMapping("{currentPage}/{pageSize}")
public Result getPage(@PathVariable int currentPage ,@PathVariable int pageSize){
    IPage<User> page=userService.getPage(currentPage,pageSize);
    //如果当前页码值大于总页码值 那么重新执行查询操作 使用最大页码值作为大当前页码值
    if(currentPage>page.getPages()){
        page=userService.getPage((int) page.getPages(),pageSize);
    }
    System.out.println("分页数据:"+currentPage+" "+pageSize);
    return new Result(true,page);
}

这样就修改了这个bug

这个叫后台补救性方案

"后台补救性方案"这个术语通常可以解释为在某些问题或突发情况出现后，采取的应对措施或修复措施。具体的方案和实施会根据具体的情况和问题而有所不同，以下是一些常见的后台补救性方案示例：

数据库备份与恢复：
- 问题：数据库遭遇意外的数据损坏、删除或破坏性变更。
- 解决方案：定期进行数据库备份，并确保备份的可靠性。在发生问题时，可以快速恢复到最近的备份状态。
缓存刷新：
- 问题：由于缓存中的数据不一致或过期，导致用户看到不正确的信息。
- 解决方案：提供手动或自动的缓存刷新机制，确保在数据更新后及时刷新缓存，保持数据的一致性和准确性。
服务故障转移与恢复：
- 问题：某个服务或服务器出现故障，影响了系统的正常运行。
- 解决方案：使用负载均衡和故障转移技术，确保系统可以自动切换到备用服务或服务器，并尽快恢复正常操作。
异常处理与日志记录：
- 问题：系统运行时出现异常或错误，但没有合适的错误处理和记录机制。
- 解决方案：加强异常处理机制，记录详细的错误日志以便后续排查和分析问题的原因，有助于快速诊断和修复。
灾难恢复计划（DRP）：
- 问题：遇到严重的自然灾害、硬件故障或安全事件，导致系统完全或部分不可用。
- 解决方案：制定和实施灾难恢复计划，包括备份数据中心、数据冗余和跨区域备份等措施，以确保在灾难发生时能够快速恢复业务。

这些方案都旨在保障系统在面对突发情况或问题时能够快速恢复正常运行，减少对用户和业务的影响。具体的实施策略应该根据具体的业务需求和系统架构来进行调整和优化。

通用性比较强

这个在以后开发中属于是业务问题和整合没有什么关系

我们应该根据需求来解决问题

条件查询

之前我们写了那么多

我们也能明白其实条件查询就是我们我们在点击查询按钮后

执行分页的时候

我们输入在搜索框里的数据能数据模型带走

用前端的axio发异步请求传入controller层执行查询工作

首先我们得去找数据模型在那绑定的

找到数据模型

发送请求的时候这些数据都要带走

我们让其绑定数据模型

我们直接绑定分页的数据模型

<div class="filter-container">
    <el-input placeholder="人员名称" v-model="pagination.name" style="width: 200px;"
              class="filter-item"></el-input>
    <el-input placeholder="人员年龄" v-model="pagination.age" style="width: 200px;"
              class="filter-item"></el-input>
    <el-input placeholder="人员性别" v-model="pagination.gender" style="width: 200px;"
              class="filter-item"></el-input>
    <el-button @click="getPage()" class="dalfBut">查询</el-button>
    <el-button type="primary" class="butT" @click="handleCreate()">添加</el-button>
</div>

现在就能封装了

我们接下来要在函数部分书写

让填入的参数连接到数据模型中的属性

数据模型被按钮带走查询

我们我们选择在分页查询里封装数据

这样加载控制台就能打印

数据连接上

测试一下看看在控制台能不能看见传入的这些参数

打印输出成功

接下来就要到controller层把数据接出来

现在controller层把数据传过去

但是在业务层没有对应的方法

我们还要去业务层修改

两个方法

业务层接口修改完去业务层实现类去实现接口中的方法

条件组织实现了动态查询

getPage() {
    if (this.pagination.name == "" && this.pagination.age == "" && this.pagination.gender == "") {
        //不用连接动态数据
        console.log("getPage null run")
    }
    //连接动态数据
    param = "?name=" + this.pagination.name;
    param += "&age=" + this.pagination.age;
    param += "&gender=" + this.pagination.gender;
    //组织参数 拼接url请求地址
    console.log(param);
    //运行分页查询成功
    console.log("getPage  run")
    axios.get("/users/" + this.pagination.currentPage + "/" + this.pagination.pageSize + param).then((res) => {
        this.pagination.pageSize = res.data.data.size;
        this.pagination.currentPage = res.data.data.current;
        this.pagination.total = res.data.data.total;
        this.dataList = res.data.data.records;
    });

},