【deepseek用例生成平台-15】核心内容之需求配置页

我去热饭

发布于 2025-03-21 14:43:05

1520

文章被收录于专栏：测试开发干货测试开发干货

本节课来到了项目详情页的第二个子页面，也是本平台的核心内容之一：

需求配置。

简单理解下：原始需求到生成用例的中间过程中的优化。

主要有以下阶段：1.分割和分解功能。2.优化和易于理解。3.确定测试点

众所周知，目前的大模型对超长文的需求把控还是很潦草，甚至对一些图片类的也不能有效读取和理解。以前提起用gpt生成测试用例，大家理解就是简单的把需求文档直接扔给gpt，让它写出用例。但时至今日，业内的用例生成策略越来越卷，迭代了很多次了。于是就变成了现在这样，哪怕是一个需求，都要经过好几步骤来优化，为的就是更好的生成用例和增加人对其过程的把控抓手。

这个教程，不但包括前后端的实现和设计，也包括了宝贵的核心问题解决方案。所以看到的小伙伴请不要吝啬你的赞和分享哦~

开始开发：

1. 在v_project/src/components文件夹内新建一个子组件：SrsSet.vue。用来存放需求配置。

2. 在ProjectDetail.vue父组件中引入这个子组件并同样传入project的信息。

3. 回到SrsSet.vue中，接收这个项目信息。这个项目信息中的id我们之后要用来发送一个接口给后台，用来传送原始需求和展示分解优化后的需求。

本节课先来做好这个页面效果吧：

<template>    <div  style="text-align: left">         <span style="font-size: small">（需求配置步骤：1.需求分解 2.需求优化 3.人工确认 4.保存结果）</span>        <div>            <br>            <el-card class="custom-card">            <template #header>              <div class="card-header">                  <el-button type="success" style="position: absolute;right: 10px">开始分解</el-button>                <span>请粘贴原始需求</span>              </div>            </template>            <div class="card-content">              <el-input                type="textarea"                :rows="3"                placeholder="请输入原始需求后点击右侧开始分解按钮"              />            </div>          </el-card>         </div>        <div>            <br>            <el-card class="custom-card">            <template #header>              <div class="card-header">                  <el-button type="primary" style="position: absolute;right: 10px">确定保存</el-button>                <span>分解结果: </span>              </div>            </template>            <div class="card-content">              <el-input/>            </div>            <div class="card-content">              <el-input/>            </div>            <div class="card-content">              <el-input/>            </div>          </el-card>         </div>    </div></template><script>    export default {        name: "SrsSet",        props:["project"],        computed: {            name: {              get() {                return this.project.id; // 从prop获取初始值              },            }          }    }</script><style scoped>.card-content{    margin-bottom: 5px;}</style>