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

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

回顾


上回我们编写好了添加项目和查询项目2个接口,那今天我们就把它应用到项目中吧!所以本节内容会以前端部分为主,目的是为了联调后端编写好的接口,并在页面上能够给用户使用。

调整项目表


是这样的,因为我们的项目有对应的图片,并且缺少描述字段,所以我们这里把项目表进行一些调整。

  • 图片字段
  • 描述字段


描述字段很好说,至于图片字段就比较麻烦了!如果对于单节点部署的应用,图片可以放入类似static的目录中,以xxx.jpg的形式存在。但是如果我们需要部署到多台机器的话,假设是2台机器,用户上传一次图片,其中只有一个服务接收到了图片文件,那就会很麻烦


那么怎么解决这个问题呢?

在企业中,一般公司会有oss(云存储)服务,比如: 阿里云oss腾讯云cos,还有七牛云等等。我之前太监的项目用的就是七牛云+自有域名,由于没续费,所以我们换一种简单的方式:


直接在数据库加一个TEXT字段,存放图片的base64数据,但是注意大小一定要限制,然后html里面通过img标签解析数据即可。


由于项目可能不太需要头像这种东西,以后这种图片留到个人头像会比较好一点,antd提供了文字头像,相信大家用过钉钉等IM工具的都知道,有的人如果没有头像的话,会用名字当头像比如"鸣人"。


所以我们这里就不用那么麻烦了,直接只加一个描述字段就好了!头像用默认的就行!

  • 调整models/Project.py

1.jpg

添加描述字段

  • 调整ProjectDao.py

2.jpg

image

  • 调整添加项目接口

3.jpg

image

描述字段加进去即可,因为这个字段不是必填的,所以我们给他一个默认值: 空字符串

构思页面


回忆一下我们当时编写postman页面的时候,我们是把对应的组件分层了。由于我们当时做postman页面的时候是有成品给我们参考的,但是关于项目管理页面,我们的的确确是没有任何参考,所以我们先要在脑海里构思一下页面大概长什么样

参考Ant Design Pro,我们就可以有个大概的方向了!

4.jpg

image

采用这种卡片列表,可以帮助我们展示项目。

引入滚动条


6.PNG

达到这样的效果就好了


这个页面是我从之前一个太监了的项目里面拷贝来的,为了节约时间就继续沿用了。

  • 安装依赖


cnpm install nprogress --save

在src/utils/utils.js添加方法


import NProgress from 'nprogress';
// 引入样式
import 'nprogress/nprogress.css'
export const process = async func => {
  NProgress.start();
  await func();
  NProgress.done();
};

这样当我们需要在某个方法执行之前加载进度条的时候,调用process方法即可。


项目卡片列表页面代码

其实react并不是一个很复杂的框架,可能对于Jsx需要有一定的了解。

我们的组件都可以细分成4个部分:

  • 引用
    即引入其他组件或者库
  • 状态管理
    状态是什么概念呢,举个例子,你页面有个loading组件,什么时候他loading,什么时候结束loading,你通过什么来判断它是否loading,这个判断的变量,就叫做状态。
    而咱们的页面也有很多地方通过状态来展示,比如我们通过data(数组)来存放我们的项目列表,初始化为空数组。当页面开始渲染,组件开始加载的时候,我们变去后端服务拉取数据,改写data数组,把项目的信息放入到数组里面。
    注意,这个时候状态就发生了变更!react会自动对比变更的状态来渲染新的页面,这里面过程很复杂。建议去查阅react相关资料,笔者也不是很熟悉里面的细节,想要了解的话,去搜索virtual dom
  • 交互方法的编写
    我们有很多组件都有涉及到一些交互方法,比如说: 点击某个按钮,触发什么事件。这些都是需要编写方法的,比如上图中 用户点击添加项目,我们需要做什么呢?
    我们需要把对话框显示出来对不对?所以我们需要做的就是: 改变对话框的状态,把他从隐藏改为显示
  • 类HTML页面的编写
    这一步比较简单了,采用jsx的语法去编写html页面。大体上和html都差不多,只不过这边可以写一些js代码,通过{}就可以包裹JS代码,相对来说还是很方便的!掌握了jsx,es6,基本上react上手就很快了!


import React, { useEffect, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Avatar, Button, Card, Col, Empty, Input, Popover, Row, Select, Spin, Tooltip } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import FormForModal from '@/components/PityForm/FormForModal';
import { history } from 'umi';
import { listProject } from '@/services/project';
import auth from '@/utils/auth';
import { process } from '@/utils/utils';
const {Search} = Input;
const {Option} = Select;
export default () => {
  const [data, setData] = useState([]);
  const [pagination, setPagination] = useState({current: 1, pageSize: 10, total: 0});
  const [visible, setVisible] = useState(false);
  const [users, setUsers] = useState([]);
  const [userMap, setUserMap] = useState({});
  useEffect(async () => {
    await process(async ()=> {
      const res = await listProject({page: pagination.current, size: pagination.size});
      if (auth.response(res)) {
        setData(res.data)
        setPagination({...pagination, total: res.total})
      }
    });
  }, [])
  const onSearchProject = projectName => {
    // this.props.dispatch({
    //   type: 'project/fetch',
    //   payload: {page: 1, size: 1000, projectName}
    // })
  }
  const onHandleModal = status => {
    setVisible(status);
  }
  const onHandleCreate = values => {
    // this.props.dispatch({
    //   type: 'project/insert',
    //   payload: values,
    // })
  }
  const content = (item) => {
    return <div>
      {/* <p>负责人: {userMap[item.owner].name}</p> */}
      {/* <p>简介: {item.description || '无'}</p> */}
      {/* <p>更新时间: {item.updateTime}</p> */}
    </div>
  };
  const opt = <Select placeholder="请选择项目组长">
    {
      users.map(item => <Option key={item.value} value={item.value}>{item.label}</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",
      },
    ]
    return (
      <PageContainer title={false}>
        <FormForModal width={600} title="添加项目" left={6} right={18} record={{}}
                      visible={visible} onCancel={() => {
          onHandleModal(false)
        }} fields={fields} onFinish={onHandleCreate}
        />
        <Row gutter={8} style={{marginBottom: 16}}>
          <Col span={18}>
            <Button type="primary" onClick={() => {
              onHandleModal(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 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>
    )
}


先大致瞅瞅这段代码,后续笔者会跟进讲解。今天内容就到这里吧。

相关文章
|
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本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
|
3天前
|
人工智能 自然语言处理 测试技术
Potpie.ai:比Copilot更狠!这个AI直接接管项目代码,自动Debug+测试+开发全搞定
Potpie.ai 是一个基于 AI 技术的开源平台,能够为代码库创建定制化的工程代理,自动化代码分析、测试和开发任务。
91 19
Potpie.ai:比Copilot更狠!这个AI直接接管项目代码,自动Debug+测试+开发全搞定
|
5天前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
29 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
7天前
|
JSON 前端开发 测试技术
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
51 10
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
|
1月前
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
36 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
1月前
|
数据可视化 前端开发 测试技术
接口测试新选择:Postman替代方案全解析
在软件开发中,接口测试工具至关重要。Postman长期占据主导地位,但随着国产工具的崛起,越来越多开发者转向更适合中国市场的替代方案——Apifox。它不仅支持中英文切换、完全免费不限人数,还具备强大的可视化操作、自动生成文档和API调试功能,极大简化了开发流程。
|
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

热门文章

最新文章