【测试开花】四、项目管理-前端-实现项目列表、分页功能

216 阅读5分钟

基于 springboot+vue 的测试平台开发继续更新。

今天来完成项目列表的前端部分。

一、前后端调通

开发前端页面,框架里有 2 个地方需要改动:

  • src/views: 这里是开发页面的地方,也就是 vue 文件,可以按功能模块新建子目录来进行分类。
  • src/api: vue 页面里请求的后端接口的js文件统一都写在这里。

接下来,针对项目列表接口localhost:8080/bloomtest/project/list/1/5,来改动这两处的代码。

1. 请求后端接口

src/api下,我新增一个js文件projectManagement.js,存放项目管理页面中需要交互的后端请求。

import request from '@/utils/request'

export function getList(current, size, data) {
  return request({
    url: `/bloomtest/project/list/${current}/${size}`,
    method: 'post',
    data: data
  })
}

这里需要注意的是,我这个接口请求既有路径上的参数,也有请求body的参数:

  • 接收路径参数:使用****符号来标记 url,然后在其中使用${}`引用变量。
  • 接收请求body:直接使用 data 来接收即可。

2. 项目列表页面

src/views新建一个目录projectManagement,在目录下直接 copy 框架原有 table 目录下的index.vue文件,重命名为table.vue

接着在src/views/projectManagement/table.vue中修改代码,调通接口。

这里先修改导入的方法:import { getList } from '@/api/projectManagement'

然后修改 methods 里的fetchData()方法,导入的 getList 方法就在这里被调用。

这里又有 2 个改动点:

  • 方法传参。

在上述定义的方法里,需要有 3 个传参getList(current, size, data)。这里用到的参数,都定义在return里:

这里都给了默认值:projectName 为空current=1size=10

  • 获取返回结果里的 list 。

原代码里response.data.items,这里的items就是mock数据返回的 list。而我们实际接口返回list的字段叫records

所以最终的代码改为:

  methods: {
    fetchData() {
      this.listLoading = true;
      getList(this.currentPage, this.size, this.projectQuery).then(response => {
        this.list = response.data.records;
        this.listLoading = false
      })
    }
  }

打开 F12 ,刷新项目列表页看下前后端是否调通。

前后已通。

3. 调整接口返回的时间格式问题

我在请求列表接口后,看到返回的时间格式不对劲。

这里需要转化一下格式,在对应的实体类的时间字段上添加:

@JsonFormat(timezone = "GMT+8",pattern="yyyy-MM-dd HH:mm:ss")

重新请求下:

格式正常了。

二、实现列表数据显示

1. 使用element UI组件库

原有的页面代码不能满足我的项目列表需求,所以要换掉这里的代码。

打开element UI组件库,在table下寻找要用的组件。

点击下方的【显示代码】,复制标签<template></template>,替换src/views/projectManagement/table.vue中的 template 代码。

页面已经可以看到新效果了。

2. 修改复制来的代码

(1)列表的属性

首先修改:data="list",这是数据绑定,列表里就是要list里的数据,因为从后端接口里拿到的数据存放在了list里。

另外还可以添加一些属性,比如加载loading效果、当前选中行高亮的等等。

这些属性在对应组件页面的最下面都可以看到,可以根据自己的需要,添加对应的属性。

(2)修改表字段

<el-table-column>标签里的属性是作用于列的,比如:

  • prop:填写后端返回字段的名称
  • label:显示的名字
  • width:宽度
  • align:居中显示

这里的属性就不一一列举了,搜索就可以查到。

还有这个表是可以固定列的,直接拷贝的代码进行了列的固定,通过fixed属性,这里我们不需要使用,先去掉。

按照这个改完之后,列表的显示就有了。

三、实现分页

1.使用 组件

同样是去 element UI寻找组件,然后 copy 代码修改,就使用这个吧。

把这段拷过来,修改代码,最终是这样:

    <el-pagination
      layout="total, prev, pager, next"
      :page-size="size"
      :current-page.sync="currentPage"
      :total="total"
      @current-change="fetchData"
    />

介绍下分页组件:

  • layout:表示需要显示的内容,用逗号分隔,布局元素会依次显示。prev 表示上一页,next 为下一页,pager 表示页码列表,除此以外还提供了jumper跳页和 total 总数。
  • page-size: 每页显示条目个数,支持.sync修饰符。
  • current-page: 当前页数,支持.sync修饰符。
  • total: 总条目数。
  • current-change: 事件,currentPage改变时会触发。这里就是点击当前页的时候,会调用fetchData方法查询列表。

2. 给分页相关字段赋值

组件里使用:绑定到对应的字段上,这些字段需要后端接口返回之后给它们赋值。

因为接口请求路径参数里必须有值,所以写了2个默认的。

然后修改接口返回的代码,赋值:

3. 关于 .sync 修饰符

上面提到的.sync修饰符,简单来说是实现父子组件间值的传递。

这里的current-page我在父组件和子组件里都要用到:

  • 子组件:被导入的组件。这里就是import { getList } from '@/api/projectManagement'中的getList
  • 父组件:就是引入该封装的组件的文件叫做父组件,也就是这里的src/views/projectManagement/table.vue文件。

在子组件中,当接口返回的时候需要赋值给current-page;而当我点击第2页(值改变)的时候还要发起新的请求/bloomtest/project/list/2/10,所以需要使用.sync 修饰符

可以在fetchData方法里打印一下current-page绑定的值,输出到console中,看下两者的不同:

(1)使用 .sync 修饰符

打开F12,刷新一下列表,再点击一下分页的第 2 页,查看 console:

值改变了。

(2)不使用 .sync 修饰符

打开F12,刷新一下列表,再点击一下分页的第 2 页,查看 console:

父组件、子组件之间的值没有传递回去。

最终的效果实现。