啊胡

V1

2022/09/19阅读:13主题:绿意

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,
  pageSize10,
  showTotal(total) => `总共 ${total} 项`,
  onChange(page, pageSize) => onPageChange(page, pageSize), //点击页码事件
  defaultPageSize10,
}));

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

最后重启项目,刷新页面

分类:

后端

标签:

软件测试

作者介绍

啊胡
V1