day36-37(前端分页 uat部署)

uat部署

uat部署,连接vpn
账号密码都是 yhs_xxxx
打开网页
vpn.xxxxxx
账号密码都是 yhs_xxxxx 生产区

88服务器
系统账号 root
路径:usr/share/nginx/html

本科毕业设计(论文)任务书

使用Spring Boot + Mybatis开发仓管销售管理系统

仓库信息管理系统销售管理系统包括销售单管理,待销售订单管理,销售报表统计几个模块;
主要内容包括:

  1. 熟悉采用Spring Boot + Mybatis进行销售单管理功能的开发步骤;
  2. 熟悉采用Spring Boot + Mybatis进行待销售订单管理的开发步骤;
  3. 熟悉采用Echarts进行销售报表统计的开发步骤;

前端分页

由于数据是一次性来的,又临时要求分页,在不改接口的情况下只能使用前端分页,对总数据进行处理展示既可

分页控件

  <el-pagination
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page="page.currentPage"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
    >
    </el-pagination>
    //行为区
      currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },

将表格中绑定的数据进行如下处理,仅展示部分分页数据。就可以实现前端分页

isdata="listData.slice((currentPage-1)*pageSize,currentPage*pageSize)"

待修改表格:登记页面登记信息,登记页面日志信息
业务办理页面日志信息
办理情况页面
运作时间数据表页面
项目管理页面

分页体验优化: 当数据较少时(少于5条)可隐藏分页控件
,通过设置 hide-on-single-page 属性来隐藏分页。

<div>
 <el-switch v-model="value">
 </el-switch>
 <el-pagination
  :hide-on-single-page="value"
  :total="5"
  layout="prev, pager, next">
</el-pagination>
</div>

<script>
  export default {
    data() {
      return {
        value: false
      }
    }
  }
</script>
上一篇:Mybatis基础学习笔记(七) -PageHelper分页助手


下一篇:分页页面实体类