【deepseek用例生成平台-14】核心内容开始！项目详情页tab子页面设计和实现

本节课的目标是实现项目详情页的子页面。我们将按照第一稿的设计进行开发，首先从项目基础信息设置页面开始。

第一稿设计概述：

1. 项目基础信息设置：包括项目名称等字段，内容存储在DB_project表中。进入项目后默认进入此页面。
2. 项目需求页面：包括需求粘贴框、分解需求、优化需求。内容存储在DB_srs表中，每个大需求被分解为多个小功能，通过项目ID关联。
3. 用例生成页面：包括多种黑盒设计方法，按照小需求生成用例。可导出Excel，用例结果即时生成，不做永久存储。
4. 其他页面：包括未来会添加的备注等内容。

开发步骤：

1. 创建子页面框架： 打开ProjectDetail.vue，添加四个el-tab-pane标签，用于承载四个子页面。

   <template>
     <el-tabs v-model="activeName" @tab-click="handleTabClick">
       <el-tab-pane label="项目设置" name="projectSet">
         <!-- 项目设置内容 -->
       </el-tab-pane>
       <el-tab-pane label="项目需求" name="projectRequirements">
         <!-- 项目需求内容 -->
       </el-tab-pane>
       <el-tab-pane label="用例生成" name="useCaseGeneration">
         <!-- 用例生成内容 -->
       </el-tab-pane>
       <el-tab-pane label="其他" name="others">
         <!-- 其他内容 -->
       </el-tab-pane>
     </el-tabs>
   </template>

   登录后复制

   

   效果如下：

   

2. 实现项目设置子页面： 在components文件夹中新建ProjectSet.vue组件，用于展示和修改项目名称。

   <template>
     <div class="input-wrap">
       <span class="label">项目名字：</span>
       <el-input class="short-input" placeholder="请输入项目名称" v-model="name"></el-input>
     </div>
   </template>
   <p><script>
   export default {
   name: "ProjectSet",
   props: ["project"],
   computed: {
   name: {
   get() {
   return this.project.name;
   },
   set(newValue) {
   this.$emit('update:name', newValue);
   }
   }
   }
   }
   </script></p><p><style scoped>
   .input-wrap {
   display: flex;
   align-items: center;
   }
   .label {
   margin-right: 12px;
   min-width: 80px;
   }
   .short-input {
   width: 300px;
   }
   </style>

   登录后复制

   在ProjectDetail.vue中，传递项目信息给ProjectSet组件：

   <template>
   <el-tab-pane label="项目设置" name="projectSet">
   <ProjectSet :project="project" @update:name="handleNameUpdate" />
   </el-tab-pane>
   </template></p><p><script>
   import ProjectSet from '@/components/ProjectSet.vue';</p><p>export default {
   components: { ProjectSet },
   data() {
   return {
   project: {
   name: '旧项目名称'
   }
   };
   },
   methods: {
   handleNameUpdate(newName) {
   this.project.name = newName;
   // 调用API更新数据库
   this.updateProjectName(newName);
   },
   updateProjectName(newName) {
   // 这里添加API调用代码
   }
   }
   }
   </script>

   登录后复制

   效果如下：

   

3. 实现自动更新功能： 在ProjectSet.vue中，监控name变量的变化，并将新值传递给父组件。

   <script>
   export default {
   name: "ProjectSet",
   props: ["project"],
   computed: {
   name: {
   get() {
   return this.project.name;
   },
   set(newValue) {
   this.$emit('update:name', newValue);
   }
   }
   }
   }
   </script>

   登录后复制

   在ProjectDetail.vue中，接收新值并更新数据库。

   <script>
   import ProjectSet from '@/components/ProjectSet.vue';</p><p>export default {
   components: { ProjectSet },
   data() {
   return {
   project: {
   name: '旧项目名称'
   }
   };
   },
   methods: {
   handleNameUpdate(newName) {
   this.project.name = newName;
   this.updateProjectName(newName);
   },
   updateProjectName(newName) {
   // 调用API更新数据库
   axios.post('/api/update-project-name/', {
   id: this.project.id,
   name: newName
   }).then(response => {
   console.log('项目名称更新成功', response.data);
   }).catch(error => {
   console.error('项目名称更新失败', error);
   });
   }
   }
   }
   </script>

   登录后复制

   在Django中，添加更新项目名称的API：

   在urls.py中：

   from django.urls import path
   from . import views</p><p>urlpatterns = [
   path('api/update-project-name/', views.update_project_name, name='update_project_name'),
   ]

   登录后复制

   在views.py中：

   from django.http import JsonResponse
   from .models import Project</p><p>def update_project_name(request):
   if request.method == 'POST':
   project_id = request.POST.get('id')
   new_name = request.POST.get('name')
   try:
   project = Project.objects.get(id=project_id)
   project.name = new_name
   project.save()
   return JsonResponse({'status': 'success', 'message': '项目名称更新成功'})
   except Project.DoesNotExist:
   return JsonResponse({'status': 'error', 'message': '项目不存在'}, status=404)
   return JsonResponse({'status': 'error', 'message': '无效请求'}, status=400)

   登录后复制

   效果如下：

   

本节内容到此结束，欢迎继续关注下一节的更新。

以上就是【deepseek用例生成平台-14】核心内容开始！项目详情页tab子页面设计和实现的详细内容，更多请关注php中文网其它相关文章！