测试平台系列(22) 编写项目的增删改查接口和页面(4)

简介: 编写项目的增删改查接口和页面(4)

回顾


上一节已经贴出了项目列表页面的全部前端代码,由于笔者前端也没有深入学习,所以只能给大家大概讲解一下吧。还是按照之前的几个部分来说吧!

状态管理


1.jpg

image

设置了如下变量:

  • data
    存放当前项目数组
  • pagination
    项目分页
  • visible
    创建项目表单是否可见,默认是否
  • users
    由于我们需要选择项目管理员,所以需要一个userId => 用户信息的映射。当然这个接口我们暂时还没有实现。

方法编写



const fetchData = async (current=pagination.current, size=pagination.size) => {
  await process(async ()=> {
    const res = await listProject({page: current, size });
    if (auth.response(res)) {
      setData(res.data)
      setPagination({...pagination, total: res.total})
    }
  });
}

这个方法是获取项目列表的方法,current代表page,size代表分页大小,如果不传入则是pagination默认的值。

listProject其实就是包装的request方法,请求后端服务。


useEffect(async () => {
  await fetchData();
}, [])
const onSearchProject = async projectName => {
  await process(async ()=> {
    const res = await listProject({page: 1, size: pagination.size, name: projectName});
    if (auth.response(res)) {
      setData(res.data)
      setPagination({...pagination, current: 1, total: res.total})
    }
  });
}

useEffectreact新版本的特性,它支持2个参数,第一个是方法,第二个是变量数组,传入空数组的话,则每次这个组件开始渲染的时候会调用且只调用一次方法。

我们如果正式使用的话,是会有多套测试环境的。如果我们对项目做了环境的区分,那么就应该在切换环境的时候,获取不同环境的项目。

假设我们需要实现这种功能,那么我们先创建一个env的变量,然后改写useEffect:


useEffect(async () => {
  await fetchData();
}, [env])

这样的话,每当env发生变化,这个方法就会自动执行一次。需要说明的是,这里只是介绍一下useEffect的使用方式,因为我们这边暂时还没有扩展到多套环境,所以此处我们选择[]即可


const onHandleCreate = async values => {
  const res = await insertProject(values);
  if (auth.response(res, true)) {
    // 创建成功后自动获取第一页的数据, 因为项目会按创建时间排序
    await fetchData(1);
  }
}

这边也如出一辙,创建完毕了之后如果接口未返回错误,则刷新项目列表页面,并且自动去第一页


const content = (item) => {
  return <div>
     {/* <p>负责人: {userMap[item.owner].name}</p> */}
     <p>简介: {item.description || '无'}</p>
     <p>更新时间: {item.updated_at}</p>
  </div>
};
const opt = <Select placeholder="请选择项目负责人">
  {
    Object.keys(users).map(id => <Option key={id} value={id}>{users[id].name}</Option>)
  }
</Select>
const fields = [
    {
      name: 'projectName',
      label: '项目名称',
      required: true,
      message: "请输入项目名称",
      type: 'input',
      placeholder: "请输入项目名称",
    },
    {
      name: 'owner',
      label: '项目负责人',
      required: true,
      component: opt,
      type: 'select',
    },
    {
      name: 'description',
      label: '项目描述',
      required: false,
      message: "请输入项目描述",
      type: 'textarea',
      placeholder: "请输入项目描述",
    },
    {
      name: 'private',
      label: '是否私有',
      required: true,
      message: "请选择项目是否私有",
      type: 'switch',
      valuePropName: "checked",
    },
  ]

这里content是一个方法,会返回一个div的html结构,目的是为了展示项目的详情,比如负责人项目描述等。

fields的话,是表单的字段,因为我针对antd的form进行了一点封装,编写了一套高阶组件。等于说是规划好了表单里面的表单组成,由input和select以及switch组件组成

待会会讲这个组件!

最后看return里面的组件



return (
      <PageContainer title={false}>
        <FormForModal width={600} title="添加项目" left={6} right={18} record={{}}
                      visible={visible} onCancel={() => setVisible(false)} fields={fields} onFinish={onHandleCreate}
        />
        <Row gutter={8} style={{marginBottom: 16}}>
          <Col span={18}>
            <Button type="primary" onClick={() => setVisible(true)}>创建项目
              <Tooltip title="只有超级管理员可以创建项目"><QuestionCircleOutlined/></Tooltip>
            </Button>
          </Col>
          <Col span={6}>
            <Search onSearch={onSearchProject} style={{float: 'right'}} placeholder="请输入项目名称"/>
          </Col>
        </Row>
        <Spin spinning={false}>
          <Row gutter={16}>
            {
              data.length === 0 ? <Col span={24} style={{textAlign: 'center', marginBottom: 12}}>
                  <Card><Empty description="暂无项目, 快点击『创建项目』创建一个吧!"/></Card>
                </Col> :
                data.map(item =>
                  <Col key={item.id} span={4} style={{marginBottom: 12}}>
                    <Popover content={content(item)} placement="rightTop">
                      <Card hoverable bordered={false} style={{borderRadius: 16, textAlign: 'center'}}
                            bodyStyle={{padding: 16}} onClick={() => {
                        history.push(`/project/${item.id}`);
                      }}>
                        <Avatar style={{backgroundColor: '#87d068'}} size={64}
                        >{item.name.slice(0, 2)}</Avatar>
                        <p style={{
                          textAlign: 'center',
                          fontWeight: 'bold',
                          fontSize: 18,
                          marginTop: 8
                        }}>{item.name}</p>
                      </Card>
                    </Popover>
                  </Col>
                )
            }
          </Row>
        </Spin>
      </PageContainer>
    )
}

PageContainer是最外层,也就是咱们看到的这一块:

2.jpg

image

FormForModal是一个对话框表单,默认是不显示的,只有点击创建项目才会显示。

然后用Row分了2行: 分别是 创建栏/搜索栏和项目展示栏

3.jpg

image

这边项目展示栏如果data.length === 0就展示一个空状态,提示用户去添加项目,否则就把项目展示出来,每个项目占屏幕的1/6,因为Col总共有24份。

tips: 这里类似于bootstrap,一行共有24份,所以span={4}代表的是4/24,可参考: 官网介绍

4.jpg

image

其他的就是Card(卡片)组件和Avatar(头像)组件的互相嵌入,Popover是悬浮窗口,如图:

4.jpg

image

编写获取用户列表的接口


修改app/dao/auth/UserDao.py

5.jpg

image

筛选出未被删除的用户即可。

修改app/controllers/auth/user.py

6.jpg

image

这里注意开启一下权限,但是不能控制太死,能让登录用户访问即可。

前端页面编写listUsers方法


7.jpg

image

看下效果


8.jpg

image

发现一个问题: 创建成功后,对话框没有关闭

所以我们需要在创建成果后,setVisible(false)去关闭对话框。

15.PNG

image

还有一个地方就是之前注释掉的项目负责人,现在可以重新开启了

10.jpg11.jpg

image

12.jpg

image

看下搜索效果


16.PNG

image

17.PNG

image

这就是本节的内容了,大部分是讲解代码为主,因为前端内容居多,所以可能有点懵逼。如果有不理解的地方,还请多多看看reactes6相关的教程。箭头函数,看着别怕,熟悉了就好。

下一节可能是具体项目的编辑页面了,感觉这一讲就讲了一个世纪,再后面就是用例那块了。




相关文章
|
1月前
|
数据可视化 前端开发 测试技术
接口测试新选择:Postman替代方案全解析
在软件开发中,接口测试工具至关重要。Postman长期占据主导地位,但随着国产工具的崛起,越来越多开发者转向更适合中国市场的替代方案——Apifox。它不仅支持中英文切换、完全免费不限人数,还具备强大的可视化操作、自动生成文档和API调试功能,极大简化了开发流程。
|
3天前
|
人工智能 自然语言处理 测试技术
Potpie.ai:比Copilot更狠!这个AI直接接管项目代码,自动Debug+测试+开发全搞定
Potpie.ai 是一个基于 AI 技术的开源平台,能够为代码库创建定制化的工程代理,自动化代码分析、测试和开发任务。
93 19
Potpie.ai:比Copilot更狠!这个AI直接接管项目代码,自动Debug+测试+开发全搞定
|
1天前
|
缓存 Java 测试技术
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
14 3
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
|
7天前
|
JSON 前端开发 测试技术
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
51 10
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
|
5天前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
29 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
1月前
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
36 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
1月前
|
存储 测试技术 数据库
接口测试工具攻略:轻松掌握测试技巧
在互联网快速发展的今天,软件系统的复杂性不断增加,接口测试工具成为确保系统稳定性的关键。它如同“翻译官”,模拟请求、解析响应、验证结果、测试性能并支持自动化测试,确保不同系统间信息传递的准确性和完整性。通过Apifox等工具,设计和执行测试用例更加便捷高效。接口测试是保障系统稳定运行的第一道防线。
|
1月前
|
Web App开发 JSON 测试技术
API测试工具集合:让接口测试更简单高效
在当今软件开发领域,接口测试工具如Postman、Apifox、Swagger等成为确保API正确性、性能和可靠性的关键。Postman全球闻名但高级功能需付费,Apifox则集成了API文档、调试、Mock与自动化测试,简化工作流并提高团队协作效率,特别适合国内用户。Swagger自动生成文档,YApi开源但功能逐渐落后,Insomnia界面简洁却缺乏团队协作支持,Paw仅限Mac系统。综合来看,Apifox是国内用户的理想选择,提供中文界面和免费高效的功能。
|
2月前
|
监控 JavaScript 测试技术
postman接口测试工具详解
Postman是一个功能强大且易于使用的API测试工具。通过详细的介绍和实际示例,本文展示了Postman在API测试中的各种应用。无论是简单的请求发送,还是复杂的自动化测试和持续集成,Postman都提供了丰富的功能来满足用户的需求。希望本文能帮助您更好地理解和使用Postman,提高API测试的效率和质量。
135 11
|
3月前
|
JSON Java 测试技术
SpringCloud2023实战之接口服务测试工具SpringBootTest
SpringBootTest同时集成了JUnit Jupiter、AssertJ、Hamcrest测试辅助库,使得更容易编写但愿测试代码。
92 3

热门文章

最新文章