【deepseek用例生成平台-14】核心内容开始!项目详情页tab子页面设计和实现
本节课的目标是实现项目详情页的子页面。我们将按照第一稿的设计进行开发，首先从项目基础信息设置页面开始。
第一稿设计概述：
- 项目基础信息设置：包括项目名称等字段，内容存储在DB_project表中。进入项目后默认进入此页面。
- 项目需求页面：包括需求粘贴框、分解需求、优化需求。内容存储在DB_srs表中，每个大需求被分解为多个小功能，通过项目ID关联。
- 用例生成页面：包括多种黑盒设计方法，按照小需求生成用例。可导出Excel，用例结果即时生成，不做永久存储。
- 其他页面：包括未来会添加的备注等内容。
开发步骤：
创建子页面框架：打开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>
登录后复制
效果如下：
实现项目设置子页面：在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>登录后复制效果如下：
实现自动更新功能：在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 pathfrom . import views</p><p>urlpatterns = [path('api/update-project-name/', views.update_project_name, name='update_project_name'),]登录后复制在views.py中：
from django.http import JsonResponsefrom .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_nameproject.save()return JsonResponse({'status': 'success', 'message': '项目名称更新成功'})except Project.DoesNotExist:return JsonResponse({'status': 'error', 'message': '项目不存在'}, status=404)return JsonResponse({'status': 'error', 'message': '无效请求'}, status=400)登录后复制效果如下：
本节内容到此结束，欢迎继续关注下一节的更新。