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

访客 38分钟前 260 0

本节课我们将继续探讨项目详情页的第二个子页面，这也是平台的核心内容之一：

需求配置。

简单来说，需求配置是指从原始需求到生成用例的中间优化过程。它主要包括以下几个阶段：1. 功能的分割和分解；2. 优化和易于理解；3. 确定测试点。

众所周知，目前的大模型在处理超长文本的需求时表现得不够精细，甚至在处理一些图片类需求时也无法有效读取和理解。过去，提到用GPT生成测试用例，大家通常只是简单地将需求文档直接输入给GPT，让它生成用例。然而，随着时间的推移，业内的用例生成策略不断进化和迭代。如今，即便是一个需求，也需要经过多个步骤进行优化，以确保生成更优质的用例并增强人们对其过程的控制。

本教程不仅涵盖了前后端的实现和设计，还包括了解决核心问题的宝贵方案。所以，亲爱的读者们，请不要吝啬你们的赞和分享哦~

接下来，我们开始开发：

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

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

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

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

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

本节课我们先来完成这个页面的效果：

代码语言：javascript，代码运行次数：0

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

登录后复制

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