09 接口测试平台 项目管理模块开发（二）

别人写的平台再垃圾，也是用来淘汰你的。

代码更新地址：https://github.com/ahu965/api-automator.git

Python环境没有的，请自行安装，本教程采用的是python 3.9。

Django官网 https://www.djangoproject.com/

Node环境没有的，请自行安装，本教程采用的是node v17.6.0。

Vue.js官网 https://cn.vuejs.org/

接口测试平台 项目管理模块开发（二）

接着上节，本节将在前端项目中实现项目管理列表展示和查询功能。

定义路由

打开前端项目，在views下创建一个新页面ProjectListView.vue，用来存放列表页代码。

然后在router/index.js配置路由指定这个新页面。

最后重启项目，访问这个路由，就可以看到跳转到了新页面，接下来就是页面的完善了。

完善列表页

同样在Ant Design Vue找到Table组件，拷贝代码到本地新页面ProjectListView.vue进行调整。

然后在src/apis下创建project.js，用来对接项目模块的接口。

import request from "@/utils/request";

export function listApi() {
  return request({
    url: "main/projects/",
    method: "get",
  });
}

然后在ProjectListView.vue中调用接口获取列表数据。并将数据解析到对应的字段上。

const data = ref([]);

onMounted(() => {
  listApi().then((res) => {
    data.value = res;
  });
});

保存后刷新页面，可以看到页面上正常展示项目列表数据了。

页面上可以看到有两个字段需要优化：

• 创建人，现在展示的是用户ID，需要更改为用户名
• 创建时间，需展示为yyyy-MM-dd HH::mm:ss格式

因为都是接口返回的数据，所以要在后端项目中对字段的解析进行处理，在后端项目中，将main/serializers.py中的ProjectsSerializer字段解析进行完善。

class UserSerializer(ModelSerializer):
    class Meta:
        model = User
        fields = ['id', 'username', 'first_name']


class ProjectsSerializer(ModelSerializer):
    created_by = UserSerializer()
    created_at = serializers.DateTimeField(read_only=True, format="%Y-%m-%d %H:%M:%S")

    class Meta:
        model = Projects
        fields = ['id', 'name', 'desc', 'created_by', 'created_at']

再次请求接口可以看到列表字段已更改，最后前端再根据新的接口字段解析就可以了。

列表查询功能

目前后端提供的接口是不具备查询查询功能的，后端项目安装django-filter模块来支持接口查询。

• 安装django-filter依赖，并且在项目的settings.py文件的INSTALLED_APPS字段进行配置
• 在main目录下创建filters.py用来存放自定义的过筛选器。

class ProjectsFilter(FilterSet):
    # 指定需要模糊查询的字段
    name = CharFilter(field_name='name', lookup_expr='icontains')  # icontains，包含且忽略大小写

    class Meta:
        # 指定模型
        models = Projects
        fields = ['name']

• 在view.py中使用自定义的过滤器

class ProjectsViewSet(mixins.ListModelMixin,
                     viewsets.GenericViewSet):
    queryset = Projects.objects.filter()
    serializer_class = ProjectsSerializer
    filter_backends = (DjangoFilterBackend,)
    filterset_class = ProjectsFilter

• 最后重启项目，再次使用postman工具测试通过name进行模糊查询，如下：

前端列表查询功能完善

同样在Ant Design Vue找到Form组件，将组件代码拷贝到本地进行调试，如下。

• 在src/api/projects.js中给查询接口新增参数。

• 在src/api/ProjectListView.vue中给【查询】按钮条件点击事件，在事件中调用接口

const projectParams = ref({});

const listProject = (name) => {
  listApi(name).then((res) => {
    data.value = res;
  });
};
const query = () => {
  listProject(projectParams.value.name);
};

• 再次刷新页面，在项目列表中输入参数，即可成功进行搜索。
  

列表分页功能

目前后端提供的接口同样是不具备分页功能的，这里使用DRF的简单分页器PageNumberPagination类。

• 在项目配置文件settings.py中新增分页配置

• 再次启动项目可以看到列表接口数据结构不一样了，新增了分页数据。可以在管理后台新增超过10条数据进行测试。

前端列表分页功能完善

首先要在src/api/projects.js中给查询接口新增分页参数。

然后在src/api/ProjectListView.vue中给分页组件增加事件，并且调用接口传分页参数。

const total = ref(0);
const current = ref(1);
// 列表分页
const pagination = computed(() => ({
  total: total.value,
  current: current.value,
  pageSize: 10,
  showTotal: (total) => `总共 ${total} 项`,
  onChange: (page, pageSize) => onPageChange(page, pageSize), //点击页码事件
  defaultPageSize: 10,
}));

// 列表当前页更改
const onPageChange = (page) => {
  console.log(page);
  current.value = page;
  listProject(projectParams.value.name, current.value);
};

最后重启项目，刷新页面