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

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

第一稿设计概述：

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

开发步骤：

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

   登录后复制

   

   效果如下：

   

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

   登录后复制

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

   登录后复制

   效果如下：

   

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

   登录后复制

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

   登录后复制

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

   在urls.py中：

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

   登录后复制

   在views.py中：

   from django.http import JsonResponsefrom .models import Project
   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_nameproject.save()return JsonResponse({'status': 'success', 'message': '项目名称更新成功'})except Project.DoesNotExist:return JsonResponse({'status': 'error', 'message': '项目不存在'}, status=404)return JsonResponse({'status': 'error', 'message': '无效请求'}, status=400)

   登录后复制

   效果如下：

   

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